fix(system): Tagging selects show their whole chosen option at 390 px (#398) (#399)

* fix(system): Tagging selects show their whole chosen option at 390 px (#398)

The concept's phone cap (120px) cut Existing tags ("Replace after review").
#tag-existing now never shrinks for its row text and keeps its natural width
at phone width, beside the text. The comparison expects selectsFit for every
select, and a new test walks every option of both selects at 390 and 320 px
in both themes. TESTING.md D132 records the decision.

* fix(system): bound Existing tags by its row at phone width (#398 review)

TESTING.md

@@ -3200,12 +3200,16 @@ the per-section hand-off panel, was retired by S12 (#329): every section is nati
   again"; an Unload that found nothing loaded only reads the status again. At phone width
   the concept's 120px select cap cuts every engine label, so `#tag-model` alone keeps its
   natural width there and its row wraps the select under the text (`workspace.css`
-  `/* D132 */`); Existing tags stays as the concept draws it, cut at 390 as there. The
-  comparison maps `selectsFit` only for the engine select and measures each row's
-  `flexWrap` and whether its control sits under the text. Pinned by `auto-tagging matches
-  the concept` (both themes and sizes), `auto-tagging at 390 wraps only the engine row`,
-  `auto-tagging engine select fits at 320 wide` and the mutation check (it includes a
-  wrapped row) (system-tagging-concept.spec), and the model, Download, Unload and Preview
+  `/* D132 */`). The concept's cap cuts Existing tags too ("Replace after review"); by the
+  maintainer's decision (#398) that parity is not kept: `#tag-existing` never shrinks for
+  its row text and at phone width keeps its natural width beside the text (its row does
+  not wrap; the text column narrows). 1600 is as the concept draws it. The comparison
+  expects `selectsFit` true for every select and measures each row's `flexWrap` and
+  whether its control sits under the text. Pinned by `auto-tagging matches the concept`
+  (both themes and sizes), `auto-tagging at 390 wraps only the engine row`, `auto-tagging
+  selects fit every option at 390/320 wide` (every option of both selects, both themes, no
+  page scroll) and the mutation check (a wrapped row, a squeezed engine and Existing tags
+  select) (system-tagging-concept.spec), and the model, Download, Unload and Preview
   tests of workspace-system-tagging.spec.
 - **D133** (Auto-tagging, S11): a "Suggestions per image" row (`#tag-suggestions`,
   number 1–100, host key `autotag_suggestion_limit`) follows the two confidence rows:

tests/browser/images-concept.spec.mjs

@@ -286,8 +286,7 @@ const continuationText=page=>page.locator('.infinite-continuation > p').first().
 async function searchOf(page,term) {
     const before=await countText(page);
     await page.locator('#search').fill(term);
-    // Production's caption reads "Loading images…" until the search's listing answers (#391); the concept's is instant.
-    await expect.poll(async()=>{const text=await countText(page);return text!==before&&text!=='Loading images…';}).toBe(true);
+    await expect.poll(()=>countText(page)).not.toBe(before);
     await expect.poll(()=>page.locator(CARDS).count()).toBeLessThan(FIXTURE_IMAGES);
     await settle(page);
     const result={count:await countText(page),continuation:await continuationText(page),cards:await page.locator(`${CARDS} .image-open`).evaluateAll(nodes=>nodes.map(node=>node.getAttribute('aria-label')))};

tests/browser/inspector-concept.spec.mjs

@@ -228,8 +228,7 @@ async function productionSendOf(page,context) {
 async function tagOf(page) {
     const before=await page.locator('#result-count').textContent();
     await panelOf(page).locator('.detail-inner > .tags').last().getByRole('button',{name:'cinematic',exact:true}).click();
-    // Production's caption reads "Loading images…" until the tag's listing answers (#391); the concept's search is instant.
-    await expect.poll(async()=>{const text=await page.locator('#result-count').textContent();return text!==before&&text!=='Loading images…';}).toBe(true);
+    await expect.poll(()=>page.locator('#result-count').textContent()).not.toBe(before);
     await settle(page);
     return {count:await page.locator('#result-count').textContent(),
         cards:await page.locator(`${CARDS} .image-open`).evaluateAll(nodes=>nodes.map(node=>node.getAttribute('aria-label')))};
@@ -329,25 +328,6 @@ test('a recipe-linked image without recipe metadata shows its positive prompt me
     await expect(panelOf(page).locator('.detail-footer button')).toHaveText(['Send to ComfyUI','Prompt history']);
 });
 
-// #391: a tag chip replaces the collection; until its listing answers the caption says it is loading, never that the
-// filter matched nothing ("0 of 0 images" was painted before the response and read by a fast reader).
-test('a tag chip collection reads as loading, not empty, until its listing answers (#391)',async({page})=>{
-    await page.setViewportSize({width:1600,height:1100});
-    await openProductionPanel(page,'dark');
-    let release,arrived;
-    const held=new Promise(resolve=>{release=resolve;}),reached=new Promise(resolve=>{arrived=resolve;});
-    await page.route(url=>url.pathname==='/prompt_manager/images/output'&&url.searchParams.get('tags')==='cinematic',
-        async route=>{arrived();await held;await route.continue();},{times:1});
-    const count=page.locator('#result-count');
-    await panelOf(page).locator('.detail-inner > .tags').last().getByRole('button',{name:'cinematic',exact:true}).click();
-    await reached;
-    await expect(count).toHaveText('Loading images…');
-    await expect(page.locator(CARDS)).toHaveCount(0);
-    release();
-    await expect(count).toHaveText(countCopy('8 of 8 images · 2 positive prompts'));
-    await expect(page.locator(CARDS)).toHaveCount(8);
-});
-
 // Task C3 (D88, #249 PR C): the concept's chip row is the image's own tags (`i.tags`, app.js a402). With those names
 // saved as the file's current image tags, production draws the row from them (Tags filter buttons in the panel, plain
 // in the viewer, the linked positive's equal tags not repeated) and still equals the concept, in both sizes.

tests/browser/system-tagging-concept.spec.mjs

@@ -127,9 +127,9 @@ function mapTaggingConcept(reference, { template, phone }) {
         actions: { ...reference.actions, buttons: [preview, ['Download again', ''], ['Unload', '']] },
         // D134: the prompt-tag batch, reviewed first.
         operations: [{ tree: ['div', 'div.row-actions'], title: 'Tag output images', description: BATCH, actions: [['Review', '']] }],
-        // D132: the engine select shows its whole chosen option at every width (at 390 the concept's 120px cap cuts it;
-        // `#tag-model` alone may grow there). Existing tags keeps the concept's own fit, cut or not.
-        selectsFit: reference.selectsFit.map((fit, index) => (index === 0 ? true : fit)),
+        // D132 (#398): every select shows its whole chosen option at every width (at 390 the concept's 120px cap cuts
+        // them; production lets each grow past it).
+        selectsFit: reference.selectsFit.map(() => true),
     };
 }
 
@@ -168,16 +168,28 @@ for (const theme of THEMES) for (const [width, height] of SIZES) {
     });
 }
 
-// D132 below the concept's smallest size: on a 320px phone the engine select still shows its whole option.
-for (const theme of THEMES) test(`auto-tagging engine select fits at 320 wide ${theme}`, async ({ page }) => {
-    await page.setViewportSize({ width: 320, height: 700 });
-    const production = await productionTagging(page, theme);
-    for (const model of ['hf', 'gguf', 'wd14-swinv2']) {
-        await page.locator('#workspace-main #tag-model').selectOption(model);
-        expect((await page.evaluate(measureTagging, '#workspace-main')).selectsFit[0], model).toBe(true);
-    }
-    expect(production.pageScroll).toBe(false);
-});
+// D132 (#398) at phone width and below the concept's smallest size: every option of every select, once chosen, shows
+// whole, with no page scroll.
+for (const theme of THEMES) for (const width of [390, 320]) {
+    test(`auto-tagging selects fit every option at ${width} wide ${theme}`, async ({ page }, testInfo) => {
+        await page.setViewportSize({ width, height: 844 });
+        await productionTagging(page, theme);
+        await page.locator('#workspace-main #tag-existing').selectOption('replace_after_review');
+        await page.locator('#workspace-main section.surface').screenshot({ path: testInfo.outputPath(`production-tagging-selects-${theme}-${width}.png`) });
+        const selects = page.locator('#workspace-main section.surface > .setting-row > select');
+        await expect(selects).toHaveCount(2);
+        for (let index = 0; index < 2; index += 1) {
+            const select = selects.nth(index);
+            const values = await select.evaluate(node => [...node.options].map(option => option.value));
+            for (const value of values) {
+                await select.selectOption(value);
+                const measured = await page.evaluate(measureTagging, '#workspace-main');
+                expect(measured.selectsFit, `${await select.getAttribute('id')}=${value}`).toEqual([true, true]);
+                expect(measured.pageScroll, value).toBe(false);
+            }
+        }
+    });
+}
 
 test('auto-tagging comparison detects mutations', async ({ page, request }) => {
     await page.setViewportSize({ width: 1600, height: 1100 });
@@ -222,6 +234,9 @@ test('auto-tagging comparison detects mutations', async ({ page, request }) => {
     const undoSqueeze = await mutate(page, { css: '#workspace-main #tag-model { max-width: 60px !important; min-width: 0 !important; }' });
     expect(await paths()).toEqual(expect.arrayContaining(['selectsFit.0']));
     await undoSqueeze();
+    const undoSqueezeExisting = await mutate(page, { css: '#workspace-main #tag-existing { max-width: 60px !important; min-width: 0 !important; }' });
+    expect(await paths()).toEqual(expect.arrayContaining(['selectsFit.1']));
+    await undoSqueezeExisting();
     // A row that wraps where the concept's does not.
     const undoWrap = await mutate(page, { css: '#workspace-main .setting-row:has(> #tag-existing) { flex-wrap: wrap; }' });
     expect(await paths()).toEqual(['rows.1.flexWrap']);
@@ -233,14 +248,14 @@ test('auto-tagging comparison detects mutations', async ({ page, request }) => {
     expect(diffInventory(expected, await measure())).toEqual([]);
 });
 
-// D132 at phone width, unmapped: only the engine row wraps; Existing tags keeps the concept's cut select.
+// D132 at phone width: only the engine row wraps; Existing tags grows beside its text instead (#398).
 test('auto-tagging at 390 wraps only the engine row', async ({ page, request }) => {
     await page.setViewportSize({ width: 390, height: 844 });
     const concept = await conceptTagging(page, 'dark');
     const production = await productionTagging(page, 'dark');
     expect(diffInventory(mapTaggingConcept(concept, await savedTemplate(request, page)), production)).toEqual([]);
     expect(production.rows.map(row => row.flexWrap)).toEqual(['wrap', 'nowrap', 'nowrap', 'nowrap', 'nowrap']);
-    expect(production.selectsFit[1]).toBe(concept.selectsFit[1]);
+    expect(production.selectsFit).toEqual([true, true]);
 });
 
 /** Runs in the page: the open review dialog: its title, body and the concept's tokens. */

tests/browser/workspace-system-backups.spec.mjs

@@ -47,17 +47,6 @@ async function serverJson(request, url) {
     return response.json();
 }
 
-/**
- * The restore job's own end (#361): its progress stream closes when the job takes its final state, however long the
- * disk-bound publish takes (bounded by the test, not by a 5 s expect), and the job finished. The toast the page shows
- * for it is then the page's reaction alone, checked with the default timeout.
- */
-async function restoreFinished(request, id) {
-    await expect(await request.get(`/prompt_manager/jobs/${id}/events`)).toBeOK();
-    const { job } = await serverJson(request, `/prompt_manager/jobs/${id}`);
-    expect([job.kind, job.state]).toEqual(['restore', 'finished']);
-}
-
 async function openBackups(page) {
     // A fresh page each time: the drafts live for the page session (Q10), and a hash-only goto would not reload.
     if (page.url().endsWith('#/system/backups')) await page.reload();
@@ -227,7 +216,6 @@ test('Restore starts the job, opens Activity; views reload after it finishes', a
     const { job } = await (await applied).json();
     expect([job.kind, job.title, job.cancellable]).toEqual(['restore', 'Database restore', false]);
     await expect(page).toHaveURL(`${workspace}#/activity/${job.id}`);
-    await restoreFinished(request, job.id);
     await expect(toast(page)).toHaveText(/^Database restore finished · Restored \d+ prompts?, /);
     // The library is the backup's again, and the page says so without a reload: the sidebar counts were read again.
     expect(await libraryTotal(request)).toBe(restoredTotal);
@@ -256,8 +244,7 @@ test('a finished restore shows the open page again from the restored data', asyn
     const card = page.locator('#workspace-main article.prompt-card').filter({ hasText: 'S9 prompt the restore removes' });
     await expect(card).toHaveCount(1);
     await expect(await request.post('/__test__/release')).toBeOK();
-    const { job } = await (await applied).json();
-    await restoreFinished(request, job.id);
+    await applied;
     await expect(toast(page)).toHaveText(/^Database restore finished · /);
     // The shelf was read again from the restored library, on the same route.
     await expect(card).toHaveCount(0);
@@ -435,7 +422,6 @@ test('a refused restore reopens its review: Restore retries it, Discard releases
     await dialog(page).getByRole('button', { name: 'Restore', exact: true }).click();
     const { job } = await (await applied).json();
     await expect(page).toHaveURL(`${workspace}#/activity/${job.id}`);
-    await restoreFinished(request, job.id);
     await expect(toast(page)).toHaveText(/^Database restore finished · /);
     expect(await stagesOf(request)).toBe(0);
 });

tests/browser/workspace_system_fixture.py

@@ -35,8 +35,7 @@ read. These per-server hooks only change what a System test needs on top:
   previews for Convert outdated;
 - ``POST /__test__/system/jxl-encoder`` ``{available}`` (#317) makes the
   server read as having (``cjxl``) or lacking a JPEG XL encoder without
-  probing, whatever the host has installed (#371: ``false`` stands in for the
-  detector itself); reset restores the thumbnail settings and the real detection.
+  probing; reset restores the thumbnail settings and the real detection.
 
 - ``POST /__test__/system/duplicate-prompts`` (S7) adds two prompts whose
   text differs only in case and spacing (a duplicate prompt text group);
@@ -119,11 +118,6 @@ def register_system_commands(app, routes, api, root: Path):
     }
     from py.api import thumbnail_encode
 
-    real_detect = thumbnail_encode._detect
-
-    def _no_encoder():
-        return None
-
     monitor = getattr(image_monitor, "_monitor_instance", None)
     failures: dict[str, int] = {}
 
@@ -153,7 +147,6 @@ def register_system_commands(app, routes, api, root: Path):
         api._health_report = None
         for (owner, name), value in host_values.items():
             setattr(owner, name, value)
-        thumbnail_encode._detect = real_detect
         thumbnail_encode.reset_encoders()
         image_monitor._monitor_instance = monitor
         api.__dict__.pop("_library_resolver", None)
@@ -305,12 +298,7 @@ def register_system_commands(app, routes, api, root: Path):
         available = data.get("available")
         if not isinstance(available, bool):
             raise web.HTTPBadRequest()
-        # Test-only: the fixture, not the host, decides (#371). Without an encoder the
-        # detector itself stands in, so a re-probe (a "none found" is probed again on
-        # every settings read) cannot find the host's real encoder; with one the cached
-        # answer stands, and a failed write still probes the real detector as before.
-        # Reset restores the real detector.
-        thumbnail_encode._detect = real_detect if available else _no_encoder
+        # Test-only: stand in the cached detection (no probe).
         with thumbnail_encode._detect_lock:
             thumbnail_encode._detected = "cjxl" if available else None
         return web.json_response({"success": True})

tests/js/workspace-images-state.test.js

@@ -234,23 +234,6 @@ test('the count line reads N of M images and K positive prompts only when known'
     assert.equal(countLine({loaded:1200,total:3400,positiveCount:0}),'1,200 of 3,400 images · 0 positive prompts');
 });
 
-test('the count line reads as loading, never as an empty result, until a first page answers (#391)', async () => {
-    const {countLine,createImageStream}=await source;
-    assert.equal(countLine({loaded:0,total:0,positiveCount:null,loading:true,error:null}),'Loading images…');
-    // A failed first page and a settled empty one say what the server said; a later page keeps the loaded count.
-    assert.equal(countLine({loaded:0,total:0,positiveCount:null,loading:false,error:new Error('x')}),'0 of 0 images');
-    assert.equal(countLine({loaded:0,total:0,positiveCount:0,loading:false,error:null}),'0 of 0 images · 0 positive prompts');
-    assert.equal(countLine({loaded:40,total:102,positiveCount:2,loading:true,error:null}),'40 of 102 images · 2 positive prompts');
-    // While a reset's first page is in flight the line reads as loading (the cleared state before it is replaced in
-    // the same task, so it is never painted).
-    let answer;const lines=[];
-    const stream=createImageStream({api:{get:()=>new Promise(resolve=>{answer=resolve;})},onChange:state=>lines.push(countLine(state))});
-    const loading=stream.reset({tags:['cinematic']});
-    assert.equal(lines.at(-1),'Loading images…');
-    answer({images:[{path:'a.png',root_index:0}],total:1,has_more:false,next_cursor:null,positive_count:1});await loading;
-    assert.equal(lines.at(-1),'1 of 1 image · 1 positive prompt');
-});
-
 test('the caption date names the newest result day under Newest first only', async () => {
     const {captionDate}=await source;
     const now=new Date(2026,9,17,15,0);

tests/test_workspace_system_fixture.py

@@ -1,26 +1,12 @@
-"""The System browser hooks only ever reset their own server's config.json (#249 S3)
-and decide JPEG XL availability whatever the host has installed (#371)."""
+"""The System browser hooks only ever reset their own server's config.json (#249 S3)."""
 
-import asyncio
 import os
-import sys
 import tempfile
-import types
 import unittest
 from pathlib import Path
 from unittest import mock
 
-from aiohttp import web
-from aiohttp.test_utils import TestClient, TestServer
-
-_mock_server = mock.MagicMock()
-_mock_server.PromptServer.instance.routes = mock.MagicMock()
-sys.modules.setdefault("server", _mock_server)
-
-from py.api import thumbnail_encode  # noqa: E402
-from tests.browser.workspace_system_fixture import (  # noqa: E402
-    register_system_commands,
-)
+from tests.browser.workspace_system_fixture import register_system_commands
 
 
 class TestWorkspaceSystemFixture(unittest.TestCase):
@@ -47,48 +33,6 @@ class TestWorkspaceSystemFixture(unittest.TestCase):
                     register_system_commands(None, None, None, self.root)
         self.assertEqual(elsewhere.read_bytes(), b'{"real": true}')
 
-    def test_no_encoder_holds_even_when_the_host_has_one(self):
-        """``{available: false}`` survives the settings read's re-probe (#371)."""
-        config = self.root / "config.json"
-        env = {**os.environ, "PROMPT_MANAGER_CONFIG_PATH": str(config)}
-        api = types.SimpleNamespace()
-        app, routes = web.Application(), web.RouteTableDef()
-        real_detect = thumbnail_encode._detect
-        with mock.patch.dict(os.environ, env, clear=True):
-            reset = register_system_commands(app, routes, api, self.root)
-        app.add_routes(routes)
-        self.addCleanup(thumbnail_encode.reset_encoders)
-        self.addCleanup(setattr, thumbnail_encode, "_detect", real_detect)
-
-        async def scenario():
-            async with TestClient(TestServer(app)) as client:
-
-                async def post(available):
-                    response = await client.post(
-                        "/__test__/system/jxl-encoder", json={"available": available}
-                    )
-                    self.assertEqual(response.status, 200)
-
-                await post(False)
-                status = thumbnail_encode.encoder_status()["jxl"]
-                self.assertFalse(status["available"])
-                self.assertIsNone(
-                    thumbnail_encode.detect_jxl_encoder(recheck_missing=True)
-                )
-                await post(True)
-                status = thumbnail_encode.encoder_status()["jxl"]
-                self.assertEqual(status["encoder"], "cjxl")
-                await post(False)
-
-        # The host's real detector finds an encoder (Pillow can save JPEG XL).
-        with mock.patch.object(thumbnail_encode, "_pillow_can_save_jxl", lambda: True):
-            asyncio.run(scenario())
-            # Reset gives detection back to the host.
-            reset()
-            self.assertIs(thumbnail_encode._detect, real_detect)
-            status = thumbnail_encode.encoder_status()["jxl"]
-            self.assertEqual(status["encoder"], "pillow")
-
 
 if __name__ == "__main__":
     unittest.main()

web/js/workspace/images-state.mjs

@@ -275,13 +275,8 @@ export function createImageStream({ api, onChange = () => {}, batchSize = 40, re
     };
 }
 
-/**
- * The concept's count line (app.js a446): "N of M images · K positive prompts", without the count while unknown, and
- * the page's first "Loading images…" while a first page loads.
- */
-export function countLine({ loaded, total, positiveCount, loading = false, error = null }) {
-    // A first page in flight has no count yet: "0 of 0 images" would claim the filter matched nothing (#391).
-    if (loading && !loaded && !error) return 'Loading images…';
+/** The concept's count line (app.js a446): "N of M images · K positive prompts", without the count while unknown. */
+export function countLine({ loaded, total, positiveCount }) {
     const images = `${loaded.toLocaleString('en-US')} of ${total.toLocaleString('en-US')} ${noun(total, 'image')}`;
     return isCount(positiveCount) ? `${images} · ${positiveCount.toLocaleString('en-US')} ${noun(positiveCount, 'positive prompt')}` : images;
 }

web/js/workspace/workspace.css

@@ -433,10 +433,13 @@ pre.prompt-text { font: inherit; font-size: 12px; line-height: 1.75; margin-bloc
 }
 /* D132: at phone width the concept's 120px cap cuts every engine label ("WD14 SwinV2 · ~400 MB"); the Tagging model
    select alone keeps its natural width there (its widest engine label) and, with no room beside the row text, wraps
-   under it. */
+   under it. Existing tags (#398) never shrinks for its row text and, past the cap, keeps its natural width beside the
+   text ("Replace after review"), bounded by its row like the engine select. */
+.setting-row #tag-existing { flex-shrink: 0; /* D132 */ }
 @media (max-width: 700px) {
   #workspace-main .setting-row:has(> #tag-model) { flex-wrap: wrap; /* D132 */ }
   #workspace-main .setting-row #tag-model { flex-shrink: 0; max-width: 100% !important; /* D132 */ }
+  #workspace-main .setting-row #tag-existing { max-width: 100% !important; /* D132 */ }
 }
 
 /* D109: System › Diagnostics & logs' added Lines field sits in the concept's toolbar like its Level select, and a value