fix(images): read a loading collection as loading, and de-flake the JXL fixture and restore specs (#391, #371, #361) (#405)

* fix(images): read a loading collection as loading, never as 0 of 0 images (#391)

A reset published {loading, loaded:0, total:0} and the caption painted it
as "0 of 0 images" until the first page answered, so a fast reader (the
inspector concept spec on WebKit) read an empty result the server never
returned. The count line now says "Loading images…" while a first page is
in flight; the spec waits for the answered count, and a held-listing spec
pins the ordering.

* test(thumbnails): make the no-JPEG-XL-encoder fixture authoritative (#371)

{available:false} stood in only the cached detection, and every settings
read probes a cached None again, finding the host's real encoder. The
fixture now stands in for the detector itself and reset restores it; a
unit test proves the route against a detector that finds an encoder.

* test(system): wait for the restore job's own end before its toast (#361)

The reviewed-restore specs waited for the "Database restore finished"
toast with the 5 s expect, in effect a deadline on the disk-bound publish.
They now wait for the job's progress stream to close, assert the job
finished, and only then check the toast with the default timeout.

* test(images): wait for the search's answered count in the concept comparison (#391)

searchOf took the first changed caption as the search's count, the same
read-before-the-response race as the inspector's tag chip.

tests/browser/images-concept.spec.mjs

@@ -286,7 +286,8 @@ 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);
-    await expect.poll(()=>countText(page)).not.toBe(before);
+    // 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(()=>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,7 +228,8 @@ 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();
-    await expect.poll(()=>page.locator('#result-count').textContent()).not.toBe(before);
+    // 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 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')))};
@@ -328,6 +329,25 @@ 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/workspace-system-backups.spec.mjs

@@ -47,6 +47,17 @@ 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();
@@ -216,6 +227,7 @@ 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);
@@ -244,7 +256,8 @@ 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();
-    await applied;
+    const { job } = await (await applied).json();
+    await restoreFinished(request, job.id);
     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);
@@ -422,6 +435,7 @@ 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,7 +35,8 @@ 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; reset restores the thumbnail settings and the real detection.
+  probing, whatever the host has installed (#371: ``false`` stands in for the
+  detector itself); 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);
@@ -118,6 +119,11 @@ 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] = {}
 
@@ -147,6 +153,7 @@ 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)
@@ -298,7 +305,12 @@ def register_system_commands(app, routes, api, root: Path):
         available = data.get("available")
         if not isinstance(available, bool):
             raise web.HTTPBadRequest()
-        # Test-only: stand in the cached detection (no probe).
+        # 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
         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,6 +234,23 @@ 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,12 +1,26 @@
-"""The System browser hooks only ever reset their own server's config.json (#249 S3)."""
+"""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)."""
 
+import asyncio
 import os
+import sys
 import tempfile
+import types
 import unittest
 from pathlib import Path
 from unittest import mock
 
-from tests.browser.workspace_system_fixture import register_system_commands
+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,
+)
 
 
 class TestWorkspaceSystemFixture(unittest.TestCase):
@@ -33,6 +47,48 @@ 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,8 +275,13 @@ 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. */
-export function countLine({ loaded, total, positiveCount }) {
+/**
+ * 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…';
     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;
 }