* feat(annotations): image tagging controller with staged suggestions Add the UI-agnostic Tag image dialog controller (#249 C1): observe the file into a capture, prefill the saved tags and the server's tagging defaults, stage the top suggestions as removable chips, and save manual tags plus the remaining chips with case-insensitive dedupe (manual spelling first). Every read is serial-guarded; saves are sent once and a lost answer is resent identically only by Retry. Conflict, storage, file and capture outcomes keep the draft and gate Save on a reopen. ApiError now carries a validated copy of a tag-conflict body's current tag set so the dialog can show it. * feat(annotations): Tag image dialog beside Info on every image card Every Images and Library-embedded gallery card shows the concept's Tag after Info. Tag opens the concept's Tag image dialog (image-tagging.mjs over the C1 controller) in the shared modal shell with the sticky tagging-modal footer: capture preview, manual tags, the four legacy engines with real defaults, explicit Generate, removable suggestion chips (D83), legacy model labels (D84), a Suggestions count (D91) and Retry where the controller allows it. The capture is released on close, route change and pagehide. The Tags page gains the concept's Auto-tag images for the image selected in Images (aria-disabled without one, D115) and real Images counts that follow every save. Retires D9, #245 D2 and #245 D3. The toast now uses the mock's copy verbatim ("tags" even for one), C1's D60/D61/D68 markers are renumbered to D83/D84/D91, and at extreme zoom a card's info row stacks (and wraps Info and Tag) when its row is narrower than the narrowest bounded card, list rows included (D31). * feat(annotations): show image tags in the inspector and viewer The inspector parses the B3 envelope's image_tags facet (strictly: exact keys, current/none/unavailable, at most 100 vocabulary names) and draws one chip row after the prompt blocks: the file's current image tags first, then D21's linked tags not already shown (case-insensitive). In the Images panel image tags are Tags filter buttons and linked tags keep D21's rule; in the viewer and wherever no Tags filter exists every chip is plain. none and unavailable add no chips (D88, plan D65; D21 amended). The tagging fixture reset now drops leftover captures, so a long run of tagging tests in one worker stays below the capture store's limit. * fix(annotations): re-read a tagged file in place after a save After a tag save the selected file's inspection is re-read quietly: the panel and the viewer keep the current details until the new answer lands, with no "Loading file details…" in between. While a Tags filter or a search is active, Images re-reads its loaded range in place (same query, from the first page up to the loaded count, published once), keeping the cards, the scroll position and the selection while the selected file still matches; when it no longer matches, the panel follows the collection. * fix(annotations): give suggestion chips the concept chip corner The D83 chips took the later `.tag-suggestion` row rule's 5px corner; the concept `.chip` has 4px. The concept comparison of the Tag dialog found it. * test(annotations): compare the Tag dialog with the approved concept The Tag image dialog's inventory (order, text, field attributes, tokens, preview box, chips, status, sticky actions) must equal the concept's at 1600x1100 and 390x844, dark and light, opened, generated with WD14 and with a language model, for an empty result and in the review scope, and the card's Info and Tag group must equal the concept's. Production runs on the concept fixture with the concept image's tags saved and the fake model answering the concept's own sample; only D29, D83, D84 and D91 are mapped, and a mutation check shows the comparison notices a change. The D3 footer check again asserts a strictly shorter footer, with short seedless subtitles that stay on one line beside Info and Tag. * fix(annotations): final review round for the Tag image dialog - Option fields show the server defaults that Generate sends: the controller bumps an options revision on open and on a model change, and the panel re-renders only then (I1). - A tag conflict shows the current set at once ("Saved now: ...") and puts it ahead of the draft in the manual field, so the next Save sends what is shown (I2). - The opening sentence is the concept's on-screen copy; "Remove anything you do not want to add." leads the chips only while chips exist; the comparison's opened mapping is gone (I3). - ApiClient gains an additive keepalive option; the capture release and the Save PUT use it, and pagehide closes the dialog (I4). - Closing during a save keeps the capture until the PUT settles, then releases it and still reports the outcome (toast, page refresh) (I5). - A refresh asked during a page load is pending and runs once it settles; re-reads use pages up to 200 files; a failed re-read toasts; Load more waits for a refresh (I6, M2, M3). - The selection bar drops checked files a refreshed result no longer lists (I7). - D116 records Retry; after a failed Generate it takes Generate's own path, and after a changed storage, file or expired capture it observes again keeping the draft (I9, M4, M5). - A save made from Tags marks a filtered Images visit stale (M6). - images.mjs drops under 800 lines: the tagging wiring moves to images-tagging.mjs and the favorites star to images-favorites.mjs (unchanged), and reset() reuses dropSelection() (M1). - Restore the activity-scan.mjs coverage floors; drop the duplicate paired captures test (I8, M9). * fix(annotations): coverage floors for the Tag dialog round Floors for the new images-favorites.mjs and images-tagging.mjs, and the measured raises of image-tagging-state.mjs and image-tagging.mjs. activity-scan.mjs keeps main's floors.
329 lines
16 KiB
JavaScript
329 lines
16 KiB
JavaScript
// Run with: node --test tests/js/
|
|
const test = require("node:test");
|
|
const assert = require("node:assert/strict");
|
|
const { createApiClient, resolveUrl, fetchUrl, ApiError, latestOnly, STALE } = require("../../web/js/api-client.js");
|
|
|
|
test("Prompt Manager URLs follow the page's proxy mount without losing query strings", () => {
|
|
const url = "/prompt_manager/images/output?limit=100&subfolder=2025%2F04%2F02";
|
|
assert.equal(resolveUrl(url, "/ComfyBackendDirect/prompt_manager/gallery"),
|
|
"/ComfyBackendDirect" + url);
|
|
assert.equal(resolveUrl(url, "/prompt_manager/gallery"), url);
|
|
assert.equal(resolveUrl(url, "/nested/proxy/prompt_manager/admin"), "/nested/proxy" + url);
|
|
assert.equal(resolveUrl("/other/api?x=1", "/ComfyBackendDirect/prompt_manager/gallery"), "/other/api?x=1");
|
|
assert.equal(resolveUrl("/ComfyBackendDirect/prompt_manager/images/serve/a.png", "/ComfyBackendDirect/prompt_manager/gallery"),
|
|
"/ComfyBackendDirect/prompt_manager/images/serve/a.png");
|
|
assert.equal(resolveUrl("/prompt_manager/images/serve/a.png?root=1", "/ComfyBackendDirect/prompt_manager/gallery"),
|
|
"/ComfyBackendDirect/prompt_manager/images/serve/a.png?root=1");
|
|
});
|
|
|
|
test("fetchUrl sends Prompt Manager requests under the current proxy mount", async () => {
|
|
const previousFetch = globalThis.fetch;
|
|
const previousLocation = globalThis.location;
|
|
const calls = [];
|
|
globalThis.location = { pathname: "/ComfyBackendDirect/prompt_manager/admin" };
|
|
globalThis.fetch = async (url, init) => {
|
|
calls.push([url, init]);
|
|
return { ok: true };
|
|
};
|
|
try {
|
|
await fetchUrl("/prompt_manager/settings?show=all", { method: "GET" });
|
|
assert.deepEqual(calls, [["/ComfyBackendDirect/prompt_manager/settings?show=all", { method: "GET" }]]);
|
|
} finally {
|
|
globalThis.fetch = previousFetch;
|
|
globalThis.location = previousLocation;
|
|
}
|
|
});
|
|
|
|
/** A fetch stand-in whose responses the test resolves by hand, in any order. */
|
|
function fakeFetch() {
|
|
const calls = [];
|
|
const impl = (url, init = {}) =>
|
|
new Promise((resolve, reject) => {
|
|
const call = { url, init, resolve, reject, aborted: false };
|
|
if (init.signal) {
|
|
init.signal.addEventListener("abort", () => {
|
|
call.aborted = true;
|
|
reject(new DOMException("The operation was aborted.", "AbortError"));
|
|
});
|
|
}
|
|
calls.push(call);
|
|
});
|
|
impl.calls = calls;
|
|
return impl;
|
|
}
|
|
|
|
function jsonResponse(status, body, { invalid = false } = {}) {
|
|
return {
|
|
ok: status >= 200 && status < 300,
|
|
status,
|
|
statusText: status === 200 ? "OK" : `Status ${status}`,
|
|
json: async () => {
|
|
if (invalid) throw new SyntaxError("Unexpected token");
|
|
return body;
|
|
},
|
|
};
|
|
}
|
|
|
|
test("get returns the parsed body of a successful response", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.get("/prompt_manager/recent?page=1");
|
|
fetch.calls[0].resolve(jsonResponse(200, { success: true, results: [1, 2] }));
|
|
assert.deepEqual(await pending, { success: true, results: [1, 2] });
|
|
assert.equal(fetch.calls[0].init.method, "GET");
|
|
});
|
|
|
|
test("get forwards an AbortSignal to fetch", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const controller = new AbortController();
|
|
const pending = api.get("/x", { signal: controller.signal });
|
|
assert.equal(fetch.calls[0].init.signal, controller.signal);
|
|
controller.abort();
|
|
await assert.rejects(pending, (err) => err.name === "AbortError");
|
|
});
|
|
|
|
test("non-2xx responses throw ApiError carrying the status and server message", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.get("/x");
|
|
fetch.calls[0].resolve(jsonResponse(404, { success: false, error: "Prompt not found" }));
|
|
await assert.rejects(pending, (err) => {
|
|
assert.ok(err instanceof ApiError);
|
|
assert.ok(err instanceof Error);
|
|
assert.equal(err.status, 404);
|
|
assert.equal(err.message, "Prompt not found");
|
|
return true;
|
|
});
|
|
});
|
|
|
|
test("non-2xx responses without a JSON body fall back to the status text", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.get("/x");
|
|
fetch.calls[0].resolve(jsonResponse(500, null, { invalid: true }));
|
|
await assert.rejects(pending, (err) => err.status === 500 && err.message === "Status 500");
|
|
});
|
|
|
|
test("a 2xx body with success:false throws ApiError", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.post("/x", {});
|
|
fetch.calls[0].resolve(jsonResponse(200, { success: false, error: "Nope" }));
|
|
await assert.rejects(pending, (err) => err instanceof ApiError && err.status === 200 && err.message === "Nope");
|
|
});
|
|
|
|
test("ApiError preserves only a bounded machine code without changing status or message", async () => {
|
|
assert.equal(new ApiError(409, "unchanged").code, null);
|
|
for (const [code, expected] of [
|
|
["source-changed", "source-changed"], ["a".repeat(64), "a".repeat(64)],
|
|
[undefined, null], [null, null], [4, null], [{ code: "x" }, null],
|
|
["", null], ["Source-changed", null], ["source_changed", null],
|
|
["source-changed\n", null], ["a".repeat(65), null],
|
|
]) {
|
|
for (const status of [409, 200]) {
|
|
const api = createApiClient(async () => jsonResponse(status, {
|
|
success: false, error: "unchanged", code, private: "never expose",
|
|
}));
|
|
await assert.rejects(api.get("/x"), error => {
|
|
assert.ok(error instanceof ApiError);
|
|
assert.equal(error.status, status);
|
|
assert.equal(error.message, "unchanged");
|
|
assert.equal(error.code, expected);
|
|
assert.equal(error.private, undefined);
|
|
assert.equal(error.body, undefined);
|
|
return true;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
test("a 2xx body that is not JSON throws ApiError", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.get("/x");
|
|
fetch.calls[0].resolve(jsonResponse(200, null, { invalid: true }));
|
|
await assert.rejects(pending, (err) => err instanceof ApiError && err.status === 200);
|
|
});
|
|
|
|
test("post, put and del send JSON bodies with the right method", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const p1 = api.post("/a", { text: "x" });
|
|
const p2 = api.put("/b", { rating: 3 });
|
|
const p3 = api.del("/c");
|
|
assert.equal(fetch.calls[0].init.method, "POST");
|
|
assert.equal(fetch.calls[0].init.body, JSON.stringify({ text: "x" }));
|
|
assert.equal(fetch.calls[0].init.headers["Content-Type"], "application/json");
|
|
assert.equal(fetch.calls[1].init.method, "PUT");
|
|
assert.equal(fetch.calls[1].init.body, JSON.stringify({ rating: 3 }));
|
|
assert.equal(fetch.calls[2].init.method, "DELETE");
|
|
assert.equal(fetch.calls[2].init.body, undefined);
|
|
for (const c of fetch.calls) c.resolve(jsonResponse(200, { success: true }));
|
|
await Promise.all([p1, p2, p3]);
|
|
});
|
|
|
|
test("del sends an optional JSON body", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const controller = new AbortController();
|
|
const pending = api.del("/prompt_manager/images/favorite", { body: { root_index: 1, path: "a/b.png" }, signal: controller.signal });
|
|
assert.equal(fetch.calls[0].init.method, "DELETE");
|
|
assert.equal(fetch.calls[0].init.body, JSON.stringify({ root_index: 1, path: "a/b.png" }));
|
|
assert.equal(fetch.calls[0].init.headers["Content-Type"], "application/json");
|
|
assert.equal(fetch.calls[0].init.signal, controller.signal);
|
|
fetch.calls[0].resolve(jsonResponse(200, { success: true }));
|
|
await pending;
|
|
});
|
|
|
|
test("network failures propagate as ordinary errors", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const pending = api.get("/x");
|
|
fetch.calls[0].reject(new TypeError("Failed to fetch"));
|
|
await assert.rejects(pending, (err) => err instanceof TypeError && !(err instanceof ApiError));
|
|
});
|
|
|
|
test("createApiClient without an argument uses the global fetch", async () => {
|
|
const original = globalThis.fetch;
|
|
globalThis.fetch = async () => jsonResponse(200, { success: true, via: "global" });
|
|
try {
|
|
assert.deepEqual(await createApiClient().get("/x"), { success: true, via: "global" });
|
|
} finally {
|
|
globalThis.fetch = original;
|
|
}
|
|
});
|
|
|
|
test("latestOnly: a newer call aborts the older one and the older result is STALE", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const latest = latestOnly();
|
|
|
|
const first = latest((signal) => api.get("/search?q=a", { signal }));
|
|
const second = latest((signal) => api.get("/search?q=ab", { signal }));
|
|
|
|
assert.equal(fetch.calls[0].aborted, true, "first request aborted");
|
|
assert.equal(fetch.calls[1].aborted, false);
|
|
|
|
fetch.calls[1].resolve(jsonResponse(200, { success: true, q: "ab" }));
|
|
assert.deepEqual(await second, { success: true, q: "ab" });
|
|
assert.equal(await first, STALE);
|
|
});
|
|
|
|
test("latestOnly: an older response that arrives after a newer request is STALE even without abort", async () => {
|
|
const latest = latestOnly();
|
|
let resolveFirst;
|
|
const first = latest(() => new Promise((r) => { resolveFirst = r; }));
|
|
const second = latest(async () => "new");
|
|
assert.equal(await second, "new");
|
|
resolveFirst("old");
|
|
assert.equal(await first, STALE);
|
|
});
|
|
|
|
test("latestOnly: sequential calls each return their own result", async () => {
|
|
const latest = latestOnly();
|
|
assert.equal(await latest(async () => 1), 1);
|
|
assert.equal(await latest(async () => 2), 2);
|
|
});
|
|
|
|
test("latestOnly: errors from the current call propagate, errors from superseded calls do not", async () => {
|
|
const latest = latestOnly();
|
|
let rejectFirst;
|
|
const first = latest(() => new Promise((_, rej) => { rejectFirst = rej; }));
|
|
const second = latest(async () => { throw new Error("boom"); });
|
|
await assert.rejects(second, /boom/);
|
|
rejectFirst(new Error("old failure"));
|
|
assert.equal(await first, STALE);
|
|
});
|
|
|
|
test("ApiError exposes only validated history recovery actions on all error paths", async () => {
|
|
const permitted = [null, { action: "refresh-history" }, { action: "reload-outputs" },
|
|
{ action: "retry-read" }, { action: "smaller-limit", limit: 1 },
|
|
{ action: "smaller-limit", limit: 100 }];
|
|
const denied = [undefined, false, "refresh-history", [], {}, { action: "unknown" },
|
|
{ action: "refresh-history", private: "secret" }, { action: "retry-read", limit: 1 },
|
|
{ action: "smaller-limit" }, { action: "smaller-limit", limit: 0 },
|
|
{ action: "smaller-limit", limit: 101 }, { action: "smaller-limit", limit: true },
|
|
{ action: "smaller-limit", limit: "1" }, { action: "smaller-limit", limit: 1.5 },
|
|
{ action: "smaller-limit", limit: NaN }, { action: "smaller-limit", limit: Infinity },
|
|
{ action: "smaller-limit", limit: 10, url: "/private" },
|
|
Object.assign(Object.create({ action: "retry-read" }), { private: "secret" })];
|
|
assert.equal(new ApiError(409, "old caller").recovery, null);
|
|
for (const recovery of permitted.concat(denied)) {
|
|
for (const status of [409, 200]) {
|
|
const api = createApiClient(async () => jsonResponse(status, {
|
|
success: false, error: "bounded", code: "history-changed", recovery,
|
|
}));
|
|
await assert.rejects(api.get("/x"), error => {
|
|
assert.ok(error instanceof ApiError);
|
|
assert.equal(error.code, "history-changed");
|
|
assert.deepEqual(error.recovery, permitted.includes(recovery) ? recovery : null);
|
|
if (recovery && permitted.includes(recovery)) {
|
|
assert.notEqual(error.recovery, recovery, "server objects must be copied");
|
|
}
|
|
return true;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
test("patch sends a JSON body with the PATCH method and forwards an AbortSignal", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
assert.equal(typeof api.patch, "function");
|
|
const controller = new AbortController();
|
|
const pending = api.patch("/prompt_manager/library/7", { metadata: { rating: null } }, { signal: controller.signal });
|
|
assert.equal(fetch.calls[0].init.method, "PATCH");
|
|
assert.equal(fetch.calls[0].init.body, JSON.stringify({ metadata: { rating: null } }));
|
|
assert.equal(fetch.calls[0].init.headers["Content-Type"], "application/json");
|
|
assert.equal(fetch.calls[0].init.signal, controller.signal);
|
|
fetch.calls[0].resolve(jsonResponse(409, { success: false, code: "metadata-conflict", error: "changed" }));
|
|
await assert.rejects(pending, error => error instanceof ApiError && error.status === 409 && error.code === "metadata-conflict");
|
|
});
|
|
|
|
test("get forwards an explicit cache mode and keeps the default request otherwise", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const fresh = api.get("/prompt_manager/library/options", { cache: "no-store" });
|
|
const plain = api.get("/prompt_manager/library/options");
|
|
assert.equal(fetch.calls[0].init.cache, "no-store");
|
|
assert.equal("cache" in fetch.calls[1].init, false);
|
|
assert.deepEqual(fetch.calls[1].init, { method: "GET", headers: {} });
|
|
for (const call of fetch.calls) call.resolve(jsonResponse(200, { success: true }));
|
|
await Promise.all([fresh, plain]);
|
|
const writes = api.post("/x", {}, { cache: "no-store" });
|
|
assert.equal("cache" in fetch.calls[2].init, false, "only reads take a cache mode");
|
|
fetch.calls[2].resolve(jsonResponse(200, { success: true }));
|
|
await writes;
|
|
});
|
|
|
|
test("ApiError exposes only a validated current tag set from a tag-conflict body", async () => {
|
|
const permitted = [{ tags: [], tag_revision: 0 }, { tags: ["warm", "Dune"], tag_revision: 7 }];
|
|
const denied = [undefined, null, { tags: ["a"] }, { tag_revision: 1 }, { tags: "a", tag_revision: 1 },
|
|
{ tags: [1], tag_revision: 1 }, { tags: ["a"], tag_revision: -1 }, { tags: ["a"], tag_revision: 1.5 },
|
|
{ tags: ["a"], tag_revision: true }, { tags: Array(101).fill("a"), tag_revision: 1 }];
|
|
assert.equal(new ApiError(409, "old caller").current, null);
|
|
for (const current of permitted.concat(denied)) {
|
|
const api = createApiClient(async () => jsonResponse(409, {
|
|
success: false, error: "changed", code: "tag-conflict", ...(current || {}),
|
|
}));
|
|
await assert.rejects(api.put("/x", {}), error => {
|
|
assert.ok(error instanceof ApiError);
|
|
assert.deepEqual(error.current, permitted.includes(current) ? current : null);
|
|
if (permitted.includes(current)) assert.notEqual(error.current.tags, current.tags, "server arrays must be copied");
|
|
return true;
|
|
});
|
|
}
|
|
});
|
|
|
|
test("keepalive is forwarded only when asked, so a request can outlive its page", async () => {
|
|
const fetch = fakeFetch();
|
|
const api = createApiClient(fetch);
|
|
const writes = [api.del("/x", { keepalive: true }), api.put("/x", {}, { keepalive: true }), api.post("/x", {}, { keepalive: true }),
|
|
api.del("/x"), api.put("/x", {}), api.get("/x")];
|
|
assert.deepEqual(fetch.calls.map(call => call.init.keepalive), [true, true, true, undefined, undefined, undefined]);
|
|
assert.equal("keepalive" in fetch.calls[3].init, false);
|
|
for (const call of fetch.calls) call.resolve(jsonResponse(200, { success: true }));
|
|
await Promise.all(writes);
|
|
});
|