Merge remote-tracking branch 'origin/main' into feat/332-image-categories-pr3

The getCategories default was never used (images.mjs always passes the
toolbar's categories) and left images-selection.mjs function coverage at 97.05
(floor 98).

TESTING.md

@@ -663,7 +663,7 @@ The shared inline and collection inspector reads the current rooted file's suppo
 embedded records, exact generation facts and recorded or inferred prompt evidence.
 It renders in two concept surfaces (#249 D20–D22, D38). The Images side panel shows
 only the concept content: cover, title, filename, the evidence badge with a category
-chip, the + and − prompt blocks with copy and send, tag chips (the file's own image
+chip naming its origin (D146), the + and − prompt blocks with copy and send, tag chips (the file's own image
 tags first, D88, then the linked tags; image tags and the linked positive's own tags
 filter Images, D21), the six facts, and a footer with "Send to ComfyUI" and
 "Prompt history" only when prompt roles resolved or a link is saved; the sticky panel
@@ -1374,22 +1374,18 @@ Recorded deviations on this page (spec §8):
   inspector's own "Download metadata JSON" envelopes in listing order); the button is
   `aria-disabled` and ignores a second press while it runs, the selection is kept, and
   the toast names the unread images (none read: no download); leaving Images aborts the
-  reads with no download and no toast. Set category opens the
-  concept's `simpleInput` dialog ("Categorize selected images", `input#action-input`
-  labelled Category, Cancel / Apply) and posts the selection's distinct linked positive
-  ids to `/prompt_manager/bulk/category` (images have no category; the filter matches
-  the linked positive's). With no linked image checked it posts nothing and opens no
-  dialog; an empty value keeps the dialog open; the field stops at the server's 100
-  characters; success reloads the categories and the listing together (clearing the
-  selection, focus to the heading, and, as any replaced collection does, the inspector
-  moves to the first listed image); failure keeps the selection. The write carries no
-  page signal: leaving Images while it runs lets it finish without a toast, and the return
-  loads the collection afresh instead of the saved visit. Three deviations from the
-  concept's `simpleInput`: the field starts empty (the concept pre-fills its demo
-  "Landscapes"), the action reads "Apply" (not "Apply in prototype"), and the
-  nothing-linked check runs on the Set category press, so no dialog opens. The route
-  rejects anything but 1-1000 positive integer ids within SQLite's INTEGER range
-  (deduplicated) and a category that fails `validate_category`. `images selection bar matches
+  reads with no download and no toast. Set category (amended by D140, #332) sets the
+  checked images' own categories: it opens the concept's `simpleInput` dialog
+  ("Categorize selected images", `input#action-input` labelled Category) and writes
+  `PUT`/`DELETE /prompt_manager/images/category`, never a prompt (see D140). Prompt
+  categories are changed in the Prompt library editor and on the legacy admin page's
+  "Set Category"; `POST /prompt_manager/bulk/category` is unchanged and serves that
+  legacy page only. The write carries no page signal: leaving Images while it runs lets
+  it finish without a toast, and the return loads the collection afresh instead of the
+  saved visit. Its success reloads the categories and the listing together (clearing
+  the selection, focus to the heading, and, as any replaced collection does, the
+  inspector moves to the first listed image); a failure keeps the selection, except a
+  changed source (409), which reloads the listing as a success does. `images selection bar matches
   the concept` compares the bar and the checked card with one card checked; the omitted
   actions flow again from the concept's own boxes, checked against the concept page with
   them removed at runtime.
@@ -1456,6 +1452,9 @@ Recorded deviations on this page (spec §8):
   filters, while recipe, recorded-run and embedded tags stay plain `span.chip`.
   Amended by D88 (#249 PR C): the file's own current image tags lead the same row
   and are filters too; a linked tag already shown (case-insensitive) is left out.
+  Amended by D146 (#332): the category chip also names its origin in visible text
+  after the category (" · this image", " · prompt", " · recipe"), and an image's own
+  category shows for an unlinked or ambiguous file too.
 - **D22**: an empty positive reads "No positive prompt (explicitly empty)" (the concept
   applies its negative wording to both roles), and a confirmed `p.prompt-text` is
   focusable (`tabindex=0`, marked focus ring) so long prompts stay keyboard-readable.
@@ -1518,8 +1517,9 @@ Recorded deviations on this page (spec §8):
   The category filter matches the same inherited category as the panel (D142, #332), and
   an image's own category overrides both (D141, D146). The inspection response names each
   field's source (`library.category_scope`, `library.tags_scope`: `pair`, `positive` or
-  null); the category chip's visually hidden prefix (D21) says "Recipe category: " or
-  "Positive prompt category: " from it, and tag chips are Tags filter buttons only when
+  null, or `image` for an own category, #332); the category chip's visually hidden
+  prefix (D21) says "Recipe category: ", "Positive prompt category: " or "Image category: "
+  from it, and its visible origin (D146) " · recipe", " · prompt" or " · this image", and tag chips are Tags filter buttons only when
   they are the positive's (#260 D2). History's media inspector uses the same rule. The
   concept shows the prompt's category and tags for every image and the concept
   fixture's recipes have neither, so the inspector comparison needs no mapping for it.
@@ -1537,7 +1537,11 @@ Recorded deviations on this page (spec §8):
   files whose own category is the value by path, so their rating and positive count.
   `test_filter_budget` seeds 2,000 own categories on its 50,000-file fixture.
   The option list adds the image categories of listed files
-  (`GET /prompt_manager/images/categories`, PR 3).
+  (`GET /prompt_manager/images/categories`, PR 3), merged with the Library's and sorted
+  (D36); if only that read fails, the prompt categories show and the categories alert is
+  raised. `images category options and Set category dialog match the concept` sets one
+  image's own category ("Portraits") through the real route and compares the toolbar
+  with it sorted into the concept's options; unmapped, only the options differ.
 - **D142** (#332 MC4, amends D39's filter note): the inherited category is one rule,
   `inherited_category` in `utils/inspection_response.py`: a linked recipe's own
   category when it is not blank, else the linked positive's. Before #332 the filter
@@ -1553,7 +1557,53 @@ Recorded deviations on this page (spec §8):
   output sources, as Images keys it. A temp output or a file no source holds has none;
   a failed read hides the chip (DC5). The outputs list and media requests read nothing
   new. The chip's hidden prefix reads "Image category: " for an own category; the
-  visible origin text and its comparison are D146 (PR 3).
+  visible origin text and its comparison are D146 (PR 3). `history media inspector
+  category chip matches the concept` (history-concept.spec) sets an own category on the
+  Quality baseline's newest output, opens its Recorded run and "View current file", and
+  compares the viewer's chip with the concept viewer's category chip (app.js a402) laid
+  out at runtime with the D146 origin and that category; its place is not compared (what
+  precedes it differs), only its size, tokens, text, prefix and origin. Unmapped, the two
+  differ only in the text, the prefix, the width and `span.chip-source`.
+- **D140** (#332, amends D8): Set category sets the checked images' own categories, so
+  every checked file is a target (no nothing-linked check). More than 500 checked (or
+  "all N matching" over 500) toasts "Select at most 500 images." and opens nothing.
+  The dialog is the concept's `simpleInput` with three recorded differences: the field
+  starts empty (the concept pre-fills its demo "Landscapes") and suggests the toolbar's
+  current categories (`datalist#workspace-input-suggestions`, `openInputDialog`'s
+  `suggestions`); "Use prompt category", a plain button between Cancel and Apply
+  (`secondary`), closes it and opens the "Use prompt category" confirmation ("Remove the
+  image category from the 1 selected image? / … the N selected images? Each one then
+  shows its prompt's category, or none if it has no linked prompt. This cannot be
+  undone.", Cancel and a danger Remove, built like saved views' delete confirmation);
+  and the action reads "Apply" (D8). Apply sends `PUT /prompt_manager/images/category`
+  `{items | filter, category}`, Remove `DELETE` `{items | filter}`; Cancel sends
+  nothing. An empty value keeps the dialog open and the field stops at 100 characters.
+  Toasts: "Category “X” set on 1 image." / "… on N images." (unchanged files count as
+  set) plus " N could not be found." for unlisted files; "Removed the image category
+  from N images." or "None of the selected images had its own category."; 404 "None of
+  the selected images could be found. Refresh the images and try again."; 409 "The
+  sources changed. Refresh the images and try again." (the listing reloads); anything
+  else "Category could not be set. Try again.". `images category options and Set
+  category dialog match the concept` (images-concept.spec) checks a card, opens the
+  dialog in both documents and compares it (title, body tree, field, input, suggestions,
+  actions and every button's box and tokens) with the concept's own dialog changed at
+  runtime as recorded: field emptied, the datalist added after the field, a clone of
+  its Cancel reading "Use prompt category" after Cancel, the primary renamed "Apply".
+  Unmapped, the dialog differs only in the input's value and list, the body's tree, the
+  suggestions and the actions.
+- **D146** (#332, amends D21 and D39): the category chip names its origin in visible
+  text. It is `span.chip` > `span.ca-visually-hidden` (the D21 prefix) + the category +
+  `span.chip-source` (" · this image", " · prompt" or " · recipe"; muted
+  `--ca-muted`, `white-space: nowrap`, so at 390px the origin never splits; the chip may wrap
+  before it or inside a long category). It shows when the inspection names a non-empty category and either the
+  scope is `image` (any link status, so an unlinked or ambiguous file with an own
+  category shows it) or the file is linked. The concept's chip shows the bare name
+  (app.js a402). The inspector comparison (inspector-concept.spec) measures each chip's
+  `span.chip-source` (text, font, color, `white-space`, box) and lays the concept's own
+  chip out with the recorded rule and " · prompt" added at runtime (`withChipSource` in
+  `concept-inventory.mjs`), in the side panel and the viewer's details; unmapped they
+  differ only in the chip's text, width and `span.chip-source`. Its mutation check
+  removes the origin. History's chip (D145) is compared the same way.
 - **D42**: the concept never shows a toast and a page alert together. Production keeps
   the concept's fixed toast (centred, 22px from the bottom, 12px at 700px and below)
   and, when an Import → Rescan toast leaves the Images discovery alert
@@ -1578,7 +1628,8 @@ applies D3 (the `.file-inspector` class of the production-only rules), D20 (the
 viewer's plain tag chips, laid out by the concept page itself with its chips made
 plain at runtime), the D20/D21 side-panel scroll (`overflow: auto`,
 `max-height: calc(100dvh - 40px)` above 700px), D21 (the category's hidden scope
-prefix) and D22 (focusable prompt text). `inspector comparison detects mutations`
+prefix), D22 (focusable prompt text) and D146 (the chip's visible " · prompt", laid out
+by the concept page itself). `inspector comparison detects mutations`
 changes `.prompt-heading .role-label` letter spacing and removes `.detail-footer`.
 
 Manual check (quick), after a browser refresh on Images: hover an image (it zooms);
@@ -1913,11 +1964,13 @@ ranges include cards that bounded rendering has unmounted.
   Over the limit, the client toasts "Narrow the view to at most 10,000 images." and the
   server answers 400 `too-many-images`. No match is 400 `no-images`. Auto-tag in this
   mode does not offer Review each image, because the review walks images in the
-  browser. Set category posts `{images_filter, category}` to `/prompt_manager/bulk/category`.
-  The server sets the category on the distinct linked positives and answers
-  `prompt_count` and `skipped`. A listing whose `positive_count` is 0 toasts the
-  nothing-linked sentence and opens no dialog, and over 10,000 matches it toasts the
-  limit sentence. Export metadata reads every image in
+  browser. Set category (D140, #332) sends `{filter, category}` to
+  `PUT /prompt_manager/images/category` (Use prompt category `{filter}` to `DELETE`),
+  which sets or removes each matching image's own category; over 500 matches the client
+  toasts "Select at most 500 images." and opens no dialog, and the server answers 400
+  `too-many-images`. (`POST /prompt_manager/bulk/category` still accepts
+  `{images_filter, category}` and sets the linked positives' category, but no workspace
+  control sends it any more.) Export metadata reads every image in
   the browser, so it is `aria-disabled` in this mode, and its `title` says why.
 
 Tests: `tests/browser/workspace-images.spec.mjs` ("Shift+click selects a range across
@@ -4785,6 +4838,21 @@ category; without one it shows the category its link supplies.
   appears at the same path shows it. The real-host check is the last test in
   `tests/comfyui/image-attribution.spec.mjs`: PUT, list, DELETE on a generated
   output.
+- Interface (PR 3, a browser refresh; no restart beyond PR 1-2's): the Images
+  selection bar's Set category writes these routes (D140, which amends D8); the toolbar
+  category options add the listed images' own categories (D141); the inspector's
+  category chip names its origin, " · this image", " · prompt" or " · recipe" (D146), in
+  the side panel, the viewer and History's media inspector (D145); Tags & categories
+  counts images on each category row and lists image-only values (D143), and Manage
+  category previews and renames image rows too (D144). Prompt categories are changed in
+  the Prompt library editor and on the legacy admin page's "Set Category". Concept
+  comparisons, at 1600x1100 and 390x844 in both themes: `images-concept.spec.mjs` (the
+  Set category dialog and the options), `inspector-concept.spec.mjs` (the chip),
+  `history-concept.spec.mjs` (History's chip) and `vocabulary-visual.spec.mjs` (rows and
+  preview, with `vocabulary-canonical-comparison.mjs`). Behavior: `workspace-images`,
+  `full-inspector`, `workspace-history` and `workspace-vocabulary` specs, and
+  `tests/js/workspace-images-category.test.js`, `workspace-file-inspector.test.js`,
+  `workspace-vocabulary-state.test.js`, `workspace-toolbar.test.js`.
 
 Image annotations schema (#249, `database/annotation_schema.py`): the group
 `media_annotation_metadata` (one row: schema version, `image_index_revision`),
@@ -5812,13 +5880,18 @@ Deploying this backend needs a ComfyUI restart (Python and route changes).
 longer hands off to the legacy tag manager. That page stays reachable from Overview's
 "Open existing tag manager" card for tag search and sort, the untagged entry and
 multi-tag AND/OR browsing; bulk prompt actions (delete, tag, category) stay on the
-legacy admin page. The screen consumes only the `/prompt_manager/vocabulary/*` routes
+legacy admin page. A prompt's category is changed in the Prompt library editor or with
+the legacy admin page's "Set Category" (`POST /prompt_manager/bulk/category`, unchanged);
+the Images selection bar's Set category sets images' own categories only (D140, #332),
+and Manage category renames a value on prompts, recipes and images together (D144). The screen consumes only the `/prompt_manager/vocabulary/*` routes
 above and adds no route, so PR B needs no ComfyUI restart: a browser refresh is enough.
 
 Screen: a `+ Create tag` heading action, a Tag vocabulary table (columns Tag, Prompts,
 Images counting the files that carry the tag (`image_count`, #249 C2), and Actions with Browse and
 Rename / merge), and a Categories panel whose category rows end with the Manage
-category row (Review). Lists load 100 rows at a time, append when scrolled into view
+category row (Review). A category row reads "N positive prompts", "N positive prompts ·
+M images" when images hold the value as their own category too, or "M images" for a
+value only images hold (D143, #332). Lists load 100 rows at a time, append when scrolled into view
 and keep `Load more tags` / `Load more categories` while more remain. Prompts counts
 are the Library Browse totals.
 
@@ -5861,7 +5934,34 @@ Recorded deviations from the concept (maintainer acceptance): bounded lists with
 Load more; title "Tags"; Manage categories adds a Category select and Preview before
 Apply; "Apply" instead of "Apply in prototype"; Delete tag… inside Rename or merge;
 Browse sets the exact filter; singular "1 positive prompt"; the production list appends
-fixture-only tags after the concept's sample tags. Paired concept/production captures
+fixture-only tags after the concept's sample tags.
+
+- **D143** (#332): category rows count the images whose own category is the value
+  (`image_count`, the stored rows, missing files included): "N positive prompts · M
+  images" beside prompts, "M images" for an image-only value, which follows every
+  prompt-backed row (by value) before Manage category. Browse on an image-only row opens
+  Images with exactly that Category filter (its Library would be empty), as a fresh
+  Images visit that becomes the Images return state, the way Browse seeds the Library's; every other
+  row opens the Library as before. Manage category's select lists image-only values
+  last, so past 1,000 categories they are the first left out (the dialog says the list is
+  capped).
+- **D144** (#332): Manage category's preview counts the images holding the value ("“X”
+  is used by N positive prompts and M images. Apply renames it to “Y”."; D9's sentence
+  with "M images" added when above 0), an image-only value can be renamed, and Apply
+  renames the image rows in the same transaction; an image row gaining or losing the
+  value between Preview and Apply is 409 `vocabulary-conflict` with nothing written.
+- `category rows and the Manage category preview match the concept with image
+  categories` (vocabulary-visual.spec, 1600x1100 and 390x844, both themes) seeds the
+  fixture with `image_categories: true` ("Landscapes" on two images, "Portraits" on one
+  image only, rows keyed as Images keys them) and compares the page with D143 mapped
+  (`mapVocabularyConcept(reference, imageCategories)`, whose row model is checked against
+  the concept page with those rows added at runtime) and the Manage dialog after
+  Preview with D9 and D144 (`mapVocabularyDialog`'s `preview`). Before the preview is
+  measured the pointer leaves the pressed Apply and focus returns to ×, the state the
+  opening comparison in workspace-vocabulary.spec measures. Unmapped, the page differs
+  in the Landscapes row's text and the added Portraits row, the dialog only in the
+  sentence. The default fixture seeds no image category, so the other vocabulary
+  comparisons are unchanged. Paired concept/production captures
 for both themes and widths are attached as test artifacts; no PNG baseline is added
 until acceptance. Not compared: hover states and the dialog focus ring (the page-level
 keyboard ring and link ring offsets are asserted). No coverage floor was lowered;

tests/browser/concept-inventory.mjs

@@ -187,6 +187,33 @@ export async function mutate(page,{css=null,remove=[],clone=[]}={}) {
     },token);
 }
 
+/**
+ * #332 D146: the category chip names its origin after the category, in a muted `span.chip-source` that never splits
+ * (workspace.css `.chip .chip-source`). The concept's chip shows the bare name (app.js a402), so the recorded rule and
+ * the span are added to the concept page at runtime and the browser lays the chip out: the first `.tags` row's
+ * non-badge chip under `root`. `category` also replaces the chip's text (an own category the concept never shows).
+ * Returns the undo.
+ */
+export const D146_CHIP_SOURCE='.chip .chip-source { color: var(--ca-muted); white-space: nowrap; }';
+export async function withChipSource(page,root,origin,category=null) {
+    const restoreRule=await mutate(page,{css:D146_CHIP_SOURCE});
+    const token=await page.evaluate(({root,origin,category})=>{
+        const chip=document.querySelector(root)?.querySelector('.tags')?.querySelector(':scope > .chip:not(.blue)');
+        if(!chip)throw new Error(`withChipSource: no category chip under ${root}`);
+        const text=chip.textContent,source=document.createElement('span');
+        source.className='chip-source';source.textContent=` · ${origin}`;
+        if(category!==null)chip.textContent=category;
+        chip.append(source);
+        const token=`chip-source-${Math.random().toString(36).slice(2)}`;
+        (window.__chipSources??=new Map()).set(token,()=>{chip.textContent=text;});
+        return token;
+    },{root,origin,category});
+    return async()=>{
+        await page.evaluate(token=>{window.__chipSources.get(token)();window.__chipSources.delete(token);},token);
+        await restoreRule();
+    };
+}
+
 /**
  * Inventory sections: {chrome, heading, toolbar, filterRow, bulkbar, caption, grid, cards, continuation, panel, library,
  * history, noPageScroll}. A section is null when its element is absent. The Images sections (toolbar … panel, #249 C7)
@@ -615,9 +642,12 @@ export function measureInspector(selector) {
             primary:node.classList.contains('ca-primary'),...box(node),...font(node),...edges(node),...layout(node),
             minHeight:style.minHeight,minWidth:style.minWidth,icon:iconOf(node)};
     }
+    // #332 D146: a category chip's visible origin (`span.chip-source`), null on every other chip.
     function chipOf(node) {
+        const source=node.querySelector(':scope > .chip-source');
         return {tag:node.tagName.toLowerCase(),className:classes(node),text:textOf(node),hidden:hiddenOf(node),...box(node),...font(node),...edges(node),
-            minHeight:getComputedStyle(node).minHeight};
+            minHeight:getComputedStyle(node).minHeight,
+            source:when(source,()=>({text:source.textContent,...font(source),...css(source,'whiteSpace'),...box(source)}))};
     }
     function rowOf(row) {
         return {...layout(row),...edges(row),...box(row),chips:[...row.children].map(chipOf)};

tests/browser/full-inspector.spec.mjs

@@ -136,7 +136,8 @@ test('panel matches the concept order and copy',async({page,request})=>{
     await expect(panel.locator('.detail-inner > p.small')).toHaveText('complete.png');
     const badges=panel.locator('.detail-inner > .tags').first();
     await expect(badges.locator('span.chip.blue')).toHaveText('Workflow inferred');
-    await expect(badges.locator('span.chip:not(.blue)')).toHaveText('Recipe category: Inspection');
+    // #332 MC8: the chip names where its value came from, in visible text after the category.
+    await expect(badges.locator('span.chip:not(.blue)')).toHaveText('Recipe category: Inspection · recipe');
     await expect(badges.locator('span.chip:not(.blue) .ca-visually-hidden')).toHaveText('Recipe category: ');
     // Recipe tags are not the positive tags the Images Tags filter matches, so they stay plain chips (D21 ruling).
     await expect(panel.locator('.detail-inner > .tags').last().locator('span.chip')).toHaveText(['fixture','geometric']);
@@ -185,6 +186,53 @@ test('panel matches the concept order and copy',async({page,request})=>{
     await expect(panel.locator('.detail-inner > button')).toHaveText(['Retry prompt details']);
 });
 
+// #332 CUJ 4, CUJ 5 (MC8, D146): every category chip names its origin: the image's own, the prompt's or the recipe's.
+const originChip=scope=>scope.locator('span.chip:has(> span.chip-source)');
+async function expectOrigin(scope,{prefix,category,origin}) {
+    await expect(originChip(scope)).toHaveText(`${prefix}${category} · ${origin}`);
+    await expect(originChip(scope).locator('.ca-visually-hidden')).toHaveText(prefix);
+    expect(await originChip(scope).locator('.chip-source').evaluate(node=>node.textContent)).toBe(` · ${origin}`);
+}
+async function putOwnCategory(request,paths,category) {
+    const {images}=await(await request.get('/prompt_manager/images/output?mode=workspace&subfolder=inspector&limit=40')).json();
+    const items=paths.map(path=>images.find(image=>image.root_index===0&&image.path===path)).map(({root_index,root_scope,path})=>({root_index,root_scope,path}));
+    const response=await request.put('/prompt_manager/images/category',{data:{items,category}});await expect(response).toBeOK();
+}
+
+test('the category chip names its origin in the side panel and the viewer (#332 CUJ 4, CUJ 5)',async({page,request})=>{
+    await page.setViewportSize({width:1600,height:1100});
+    await expect(await request.post('/__test__/reset',{data:{full_inspector:true}})).toBeOK();
+    // The positive's own category, set through the legacy prompt route; complete.png's recipe keeps "Inspection".
+    const list=await(await request.get('/prompt_manager/library')).json();const id=list.items.find(item=>item.text.startsWith('Inspector portrait')).id;
+    await expect(await request.post('/prompt_manager/bulk/category',{data:{prompt_ids:[id],category:'Landscapes'}})).toBeOK();
+    await page.goto('/prompt_manager/workspace#/images');const panel=inspector(page);
+    await selectFile(page,'complete.png');await expect(panel.locator('.panel-heading h2')).toHaveText(POSITIVE_TITLE);
+    await expectOrigin(panel,{prefix:'Recipe category: ',category:'Inspection',origin:'recipe'});
+    await selectFile(page,'workflow-only.png');await expect(panel.locator('.detail-inner > p.small')).toHaveText('workflow-only.png');
+    await expectOrigin(panel,{prefix:'Positive prompt category: ',category:'Landscapes',origin:'prompt'});
+    // An unlinked file shows no category until it has its own.
+    await selectFile(page,'empty.png');await expect(panel.locator('.panel-heading h2')).toHaveText('empty.png');
+    await expect(originChip(panel)).toHaveCount(0);
+    // Own categories: one overrides the prompt's on a linked file, one sits on an unlinked file.
+    await putOwnCategory(request,['inspector/workflow-only.png'],'Portraits');await putOwnCategory(request,['inspector/empty.png'],'Scans');
+    await page.reload();
+    await selectFile(page,'workflow-only.png');await expect(panel.locator('.detail-inner > p.small')).toHaveText('workflow-only.png');
+    await expectOrigin(panel,{prefix:'Image category: ',category:'Portraits',origin:'this image'});
+    await selectFile(page,'empty.png');await expect(panel.locator('.panel-heading h2')).toHaveText('empty.png');
+    await expectOrigin(panel,{prefix:'Image category: ',category:'Scans',origin:'this image'});
+    await selectFile(page,'complete.png');await expect(panel.locator('.panel-heading h2')).toHaveText(POSITIVE_TITLE);
+    await expectOrigin(panel,{prefix:'Recipe category: ',category:'Inspection',origin:'recipe'});
+    // The viewer's full details show the same chips.
+    let details=await viewerDetails(page,'workflow-only.png');
+    await expectOrigin(details,{prefix:'Image category: ',category:'Portraits',origin:'this image'});
+    await page.keyboard.press('Escape');await expect(page.locator('dialog#viewer-dialog[open]')).toHaveCount(0);
+    details=await viewerDetails(page,'complete.png');
+    await expectOrigin(details,{prefix:'Recipe category: ',category:'Inspection',origin:'recipe'});
+    await page.keyboard.press('Escape');await expect(page.locator('dialog#viewer-dialog[open]')).toHaveCount(0);
+    details=await viewerDetails(page,'empty.png');
+    await expectOrigin(details,{prefix:'Image category: ',category:'Scans',origin:'this image'});
+});
+
 test('tag chip filters Images by that tag',async({page,request})=>{
     await expect(await request.post('/__test__/reset',{data:{full_inspector:true}})).toBeOK();
     const list=await(await request.get('/prompt_manager/library')).json();const id=list.items.find(item=>item.text.startsWith('Inspector portrait')).id;

tests/browser/history-concept.spec.mjs

@@ -1,7 +1,7 @@
 import {writeFile} from 'node:fs/promises';
 import {test,expect} from './fixtures.mjs';
 import {captureCanonicalState} from './history-canonical-comparison.mjs';
-import {SIZES,THEMES,MOTIONS,seedConcept,openConcept,openProduction,inventoryOf,diffInventory,mutate,stripExact} from './concept-inventory.mjs';
+import {SIZES,THEMES,MOTIONS,seedConcept,openConcept,openProduction,inventoryOf,diffInventory,mutate,stripExact,measureInspector,withChipSource} from './concept-inventory.mjs';
 
 // Task F5 of #249: the production Prompt history (#/library/<id>) against the immutable concept's (#prompt/alpine,
 // app.js renderHistory a587–622, the dialogs a1282–1304, style.css 1059–1179 and 1546–1567), on the concept-shaped real
@@ -272,6 +272,62 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`history geomet
     } finally {await host.evaluate(()=>window.conceptHost.dispose());await host.close();}
 });
 
+/**
+ * D145 (#332): the History media inspector (a recorded run's current file, `recorded-run.mjs`) shows the file's own
+ * category with the chip rule of the Images side panel and viewer (D146). The concept has no recorded-run inspector, so
+ * its chip is the concept viewer's own category chip (app.js a402, imageDetails(i, true)) with the recorded D146 origin
+ * and the own category added at runtime (`withChipSource`). The chip's own place depends on what precedes it in either
+ * inspector, so its box is compared by size only.
+ */
+const OWN_CATEGORY='Portraits';
+const chipOnly=chip=>{const {left,top,source,...rest}=chip;return {...rest,source:source&&(({left,top,...own})=>own)(source)};};
+const categoryChipOf=async(page,root)=>(await page.evaluate(measureInspector,root)).badges.chips.find(chip=>chip.source);
+
+async function conceptViewerChip(page,theme) {
+    await openConcept(page,'images',theme);await page.mouse.move(0,0);
+    await page.locator('.gallery-body > .image-grid > .media-card').first().locator('.image-open').click();
+    await expect(page.locator('#viewer-dialog[open] #viewer-details .panel-heading h2')).toHaveText(TITLE);
+    const restore=await withChipSource(page,'#viewer-details','this image',OWN_CATEGORY);await settle(page);
+    const chip=await categoryChipOf(page,'#viewer-details');
+    await restore();
+    return chip;
+}
+
+/** Recorded run for the baseline's newest run, its one reported output opened in the viewer. */
+async function productionRunChip(page,theme,positiveId) {
+    await openProductionHistory(page,theme,'no-preference',positiveId);
+    await page.getByRole('button',{name:'Show repeat run for Quality baseline',exact:true}).click();
+    const run=page.getByRole('dialog',{name:'Recorded run',exact:true});
+    await expect(run).toBeVisible();
+    const view=run.getByRole('button',{name:'View current file',exact:true});
+    await expect(view).toBeEnabled();await view.click();
+    const details=page.locator('#viewer-dialog[open] #viewer-details');
+    await expect(details.locator('.chip-source')).toHaveText(' · this image');
+    await page.mouse.move(0,0);await settle(page);
+    return categoryChipOf(page,'#viewer-dialog[open] #viewer-details');
+}
+
+async function setOwnCategory(request,path,category) {
+    const listing=await (await request.get('/prompt_manager/images/output?mode=workspace&limit=40')).json();
+    const root_scope=listing.images.find(item=>item.root_index===0).root_scope;
+    const response=await request.put('/prompt_manager/images/category',{data:{items:[{root_index:0,root_scope,path}],category}});
+    await expect(response).toBeOK();
+}
+
+for(const [width,height] of SIZES)for(const theme of THEMES)test(`history media inspector category chip matches the concept ${width}x${height} ${theme} (D145)`,async({page,request},testInfo)=>{
+    await page.setViewportSize({width,height});
+    const {manifest}=testInfo;
+    // The baseline's newest image: the output of the run its dot opens (the fixture records one run per image).
+    const baseline=manifest.images.find(image=>image.prompt==='alpine'&&image.variant===0);
+    await setOwnCategory(request,baseline.path,OWN_CATEGORY);
+    const reference=await conceptViewerChip(page,theme);
+    const actual=await productionRunChip(page,theme,manifest.prompts[0].positive_id);
+    await captureCanonicalState(page,testInfo,`production-history-run-chip-${width}-${theme}`,'#viewer-dialog[open]');
+    expect.soft(reference,'concept chip').toMatchObject({tag:'span',className:'chip',text:`${OWN_CATEGORY} · this image`,hidden:null});
+    // D21: the hidden prefix names the scope; D146 as above.
+    expect.soft(diffInventory({...chipOnly(reference),hidden:'Image category: '},chipOnly(actual)),'chip differences after D21, D145, D146').toEqual([]);
+});
+
 // The comparison is only worth something if it notices a change (spec §7 mutation check): one CSS mutation (the variant
 // dot's width) and one DOM mutation (Compare negatives removed), each applied after an exact match.
 test('history comparison detects mutations',async({page},testInfo)=>{

tests/browser/images-concept.spec.mjs

@@ -85,15 +85,17 @@ function listInfo(card,actionsWidth) {
 /** Recorded Images deviations only (spec §8); everything else in the concept inventory must equal production. */
 const nocase=(a,b)=>{const x=a.toLowerCase(),y=b.toLowerCase();return x<y?-1:x>y?1:a<b?-1:a>b?1:0;};
 
-export function mapImagesConcept(reference,{manifest,now=new Date(manifest.now*1000)}) {
+export function mapImagesConcept(reference,{manifest,now=new Date(manifest.now*1000),imageCategories=[]}) {
     const paths=new Map(manifest.images.map(image=>[image.filename,image.path]));
     // D14: the sort appends production's two sorts. Save view is the concept's own (saved views, #249 D16 retired).
     const toolbar={...reference.toolbar};
     toolbar.items=toolbar.items.map(item=>item.id==='sort'?{...item,options:[...item.options,'Oldest first','Name Z–A']}:item);
     // D36: the category list is the Library's real list, sorted alphabetically (database/library.py `ORDER BY category
     // COLLATE NOCASE, category`); the concept lists its samples in prompt order (app.js 348). Only the order is mapped.
+    // D141 (#332): the list also holds the listed images' own categories (`GET /prompt_manager/images/categories`),
+    // sorted in with the Library's.
     toolbar.items=toolbar.items.map(item=>item.id==='category-filter'
-        ?{...item,options:[item.options[0],...item.options.slice(1).sort(nocase)]}:item);
+        ?{...item,options:[item.options[0],...[...item.options.slice(1),...imageCategories].sort(nocase)]}:item);
     // D29: no "Illustrative previews" sample tag.
     const filterRow=withoutItems(reference.filterRow,item=>String(item.className).includes('sample-tag'));
     filterRow.items=filterRow.items.map(item=>{
@@ -163,9 +165,9 @@ const pick=inventory=>stripExact(inventory);
 // The concept's own sample categories, in its first-appearance order (app.js 348): what D36 reorders.
 const CONCEPT_CATEGORIES=['All categories','Landscapes','Architecture','Environments','Illustration'];
 
-function compare(reference,actual,manifest,sections=SECTIONS) {
+function compare(reference,actual,manifest,sections=SECTIONS,imageCategories=[]) {
     const only=inventory=>Object.fromEntries(sections.map(key=>[key,inventory[key]]));
-    return diffInventory(pick(only(mapImagesConcept(reference,{manifest}))),pick(only(actual)));
+    return diffInventory(pick(only(mapImagesConcept(reference,{manifest,imageCategories}))),pick(only(actual)));
 }
 
 /** The comparison as a gate: throws, naming every differing path, unless production equals the mapped concept. */
@@ -470,6 +472,117 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`images selecti
     expect(compare(oracle,await inventoryOf(page,'#workspace-main'),manifest,['bulkbar']).map(item=>item.path)).toContain('bulkbar.bar.paddingTop');
 });
 
+/** #332: an own category on one listed image, set through the real route (PUT /prompt_manager/images/category). */
+const IMAGE_CATEGORY='Portraits';
+async function setImageCategory(request,path,category) {
+    const listing=await (await request.get('/prompt_manager/images/output?mode=workspace&limit=40')).json();
+    const root_scope=listing.images.find(item=>item.root_index===0).root_scope;
+    const response=await request.put('/prompt_manager/images/category',{data:{items:[{root_index:0,root_scope,path}],category}});
+    await expect(response).toBeOK();
+    expect(await response.json()).toMatchObject({success:true,category,updated:1});
+}
+
+/**
+ * Runs in the page: the open Set category dialog (the concept's `simpleInput`, app.js 1384-1390 and 1138): its title,
+ * the body's tree, the field, the input and its suggestions (`datalist`), and the actions with every button's box,
+ * all relative to the dialog, with the concept's geometry and tokens.
+ */
+function measureCategoryDialog() {
+    const dialog=document.querySelector('dialog#modal[open]');
+    const css=(node,...keys)=>node?Object.fromEntries(keys.map(key=>[key,getComputedStyle(node)[key]])):null;
+    const name=node=>[node.localName,...[...node.classList].sort()].join('.');
+    const text=node=>node?.textContent.trim()??null;
+    const origin=dialog.getBoundingClientRect();
+    const box=node=>{const rect=node.getBoundingClientRect();return {left:Math.round(rect.left-origin.left),top:Math.round(rect.top-origin.top),
+        width:Math.round(rect.width),height:Math.round(rect.height)};};
+    const body=dialog.querySelector('#modal-body');
+    const field=body.querySelector(':scope > .field');
+    const label=field?.querySelector(':scope > label'),input=field?.querySelector(':scope > input');
+    const list=body.querySelector(':scope > datalist');
+    const actions=body.querySelector(':scope > .dialog-actions');
+    return {
+        title:text(dialog.querySelector('#modal-title')),
+        tree:[...body.children].map(name),
+        field:field&&{tree:[...field.children].map(name),...css(field,'display','flexDirection','rowGap','marginBottom'),...box(field)},
+        label:label&&{text:text(label),for:label.htmlFor,...css(label,'fontSize','fontWeight','color')},
+        input:input&&{id:input.id,type:input.type,value:input.value,list:input.getAttribute('list'),
+            ...css(input,'height','paddingLeft','fontSize','color','backgroundColor','borderTopColor','borderTopLeftRadius'),...box(input)},
+        suggestions:list&&{id:list.id,shown:list.getClientRects().length>0,options:[...list.options].map(option=>option.value)},
+        actions:{tree:[...actions.children].map(name),...css(actions,'display','justifyContent','columnGap','rowGap','flexWrap','marginTop'),...box(actions),
+            buttons:[...actions.children].map(button=>({text:text(button),className:button.className,
+                ...css(button,'backgroundColor','color','fontSize','paddingTop','paddingLeft','borderTopColor','minHeight'),...box(button)}))},
+        width:Math.round(origin.width),height:Math.round(origin.height),
+    };
+}
+
+/**
+ * The concept's own open dialog as production records it, changed at runtime so the browser lays it out: D140 (#332)
+ * empties the field (the concept pre-fills its demo "Landscapes"), lists the toolbar's categories as the field's
+ * suggestions (`datalist#workspace-input-suggestions`) and adds "Use prompt category", a plain button of the concept's
+ * own Cancel, between Cancel and the primary action; D8 names the primary action "Apply" ("Apply in prototype").
+ */
+async function categoryDialogAsRecorded(page,suggestions) {
+    await mutate(page,{clone:[{selector:'dialog#modal[open] .dialog-actions > button:first-child',text:'Use prompt category'}]});
+    await page.evaluate(suggestions=>{
+        const body=document.querySelector('dialog#modal[open] #modal-body');
+        const input=body.querySelector('#action-input');input.value='';input.setAttribute('list','workspace-input-suggestions');
+        const list=document.createElement('datalist');list.id='workspace-input-suggestions';
+        for(const value of suggestions){const option=document.createElement('option');option.value=value;list.append(option);}
+        body.querySelector(':scope > .field').after(list);
+        body.querySelector('.dialog-actions > .ca-primary').textContent='Apply';
+    },suggestions);
+    await settle(page);
+    return page.evaluate(measureCategoryDialog);
+}
+
+async function openCategoryDialog(page,scope) {
+    await page.locator(scope).locator(CARDS).first().locator('.image-overlays > label > input[type="checkbox"]').check();
+    await expect(page.locator('#bulkbar > .bulkbar > strong')).toHaveText('1 selected');
+    await page.locator('#bulkbar').getByRole('button',{name:'Set category',exact:true}).click();
+    await expect(page.locator('dialog#modal[open] #modal-title')).toHaveText('Categorize selected images');
+    await page.mouse.move(0,0);await settle(page);
+    return page.evaluate(measureCategoryDialog);
+}
+
+// D140 and D141 (#332): with one image's own category set, the toolbar's category options and the Set category dialog
+// against the concept's (app.js 348 and 1384-1390). The dialog is compared with the concept page itself changed at
+// runtime as recorded (`categoryDialogAsRecorded`); unmapped, it differs only in the recorded parts.
+for(const [width,height] of SIZES)for(const theme of THEMES)test(`images category options and Set category dialog match the concept ${width}x${height} ${theme}`,async({page,request},testInfo)=>{
+    await page.setViewportSize({width,height});
+    const manifest=testInfo.manifest;
+    await setImageCategory(request,manifest.images.at(-1).path,IMAGE_CATEGORY);
+    await openConceptLoaded(page,theme,'no-preference');
+    const reference=await inventoryOf(page,'#main');
+    const referenceDialog=await openCategoryDialog(page,'#main');
+    await captureCanonicalState(page,testInfo,`concept-images-category-${width}-${theme}`,'dialog#modal');
+    const suggestions=[...CONCEPT_CATEGORIES.slice(1),IMAGE_CATEGORY].sort(nocase);
+    const oracle=await categoryDialogAsRecorded(page,suggestions);
+    await page.keyboard.press('Escape');await expect(page.locator('dialog#modal[open]')).toHaveCount(0);
+
+    await openProductionLoaded(page,theme,'no-preference');
+    await expect(page.locator('#category-filter option')).toHaveText(['All categories',...suggestions]);
+    const actual=await inventoryOf(page,'#workspace-main');
+    const actualDialog=await openCategoryDialog(page,'#workspace-main');
+    await captureCanonicalState(page,testInfo,`production-images-category-${width}-${theme}`,'dialog#modal');
+    const path=testInfo.outputPath('images-category-geometry.json');
+    await writeFile(path,JSON.stringify({referenceDialog,oracle,actualDialog,reference:reference.toolbar,actual:actual.toolbar},null,2));
+    await testInfo.attach('images-category-geometry',{path,contentType:'application/json'});
+
+    // The concept itself: its sample categories and its pre-filled simpleInput with Cancel / Apply in prototype.
+    expect.soft(reference.toolbar.items.find(item=>item.id==='category-filter').options,'concept categories').toEqual(CONCEPT_CATEGORIES);
+    expect.soft(referenceDialog,'concept dialog').toMatchObject({title:'Categorize selected images',label:{text:'Category'},
+        input:{id:'action-input',value:'Landscapes',list:null},suggestions:null});
+    expect.soft(referenceDialog.actions.buttons.map(button=>button.text),'concept actions').toEqual(['Cancel','Apply in prototype']);
+    // D141: the toolbar options add the image's own category, sorted in (D36).
+    expect.soft(compare(reference,actual,manifest,['toolbar'],[IMAGE_CATEGORY]),'toolbar differences after D14, D36, D141').toEqual([]);
+    // D140 and D8: the dialog equals the concept page laid out as recorded.
+    expect.soft(diffInventory(oracle,actualDialog),'dialog differences after D8, D140').toEqual([]);
+    // Unmapped, the concept differs only in the field's value and suggestions, the body's datalist and the actions.
+    const recorded=/^(input\.(value|list)|tree\.|suggestions|actions\.)/;
+    expect.soft(diffInventory(referenceDialog,actualDialog).map(item=>item.path).filter(item=>!recorded.test(item)),'unrecorded dialog differences').toEqual([]);
+    expect.soft(actualDialog.suggestions,'suggestions').toEqual({id:'workspace-input-suggestions',shown:false,options:suggestions});
+});
+
 // The comparison is only worth something if it notices a change (spec §7 mutation check): one CSS mutation (the
 // `.media-info` padding) and one DOM mutation (the Inspect buttons removed), each applied after an exact match.
 test('images comparison detects mutations',async({page},testInfo)=>{

tests/browser/inspector-concept.spec.mjs

@@ -1,7 +1,7 @@
 import {writeFile} from 'node:fs/promises';
 import {test,expect} from './fixtures.mjs';
 import {captureCanonicalState} from './history-canonical-comparison.mjs';
-import {SIZES,THEMES,seedConcept,openConcept,openProduction,inspectorOf,diffInventory,mutate,countCopy,saveImageTags} from './concept-inventory.mjs';
+import {SIZES,THEMES,seedConcept,openConcept,openProduction,inspectorOf,diffInventory,mutate,countCopy,saveImageTags,withChipSource} from './concept-inventory.mjs';
 
 // Task D4 of #249: the Images side panel (app.js imageDetails a400–414) and the viewer's full details (imageDetails(i,
 // true)) against the immutable concept, on the concept-shaped real fixture, at 1600x1100 and 390x844 in both themes.
@@ -13,6 +13,8 @@ test.use({locale:'en-US',timezoneId:'UTC'});
 
 const CARDS='.gallery-body > .image-grid > .media-card';
 const TITLE='Alpine observatory';
+// D146 (#332): alpine_00001.png's recipe has no category, so its chip shows the positive's, " · prompt" (D39).
+const ORIGIN='prompt';
 const FIXTURE_IMAGES=24;
 // The concept's sticky panel never scrolls; production's scrolls inside the window above 700px (D20/D21 side panel).
 const PANEL_INSET=40;
@@ -38,14 +40,18 @@ function withFocusablePrompts(inventory) {
     return {...inventory,controls,sections:inventory.sections.map(section=>({...section,text:{...section.text,tabIndex:0}}))};
 }
 
-/** D21: the category chip names its scope in a visually hidden prefix; here the linked positive's (D39 fallback). */
+/**
+ * D21: the category chip names its scope in a visually hidden prefix; here the linked positive's (D39 fallback). Its
+ * visible origin (D146, #332: " · prompt") is the concept page's own chip with `span.chip-source` added at runtime
+ * (`withChipSource`), so `reference.panel` and `viewerPlain` already carry it.
+ */
 function withCategoryScope(inventory) {
     const [badge,category,...rest]=inventory.badges.chips;
     return {...inventory,badges:{...inventory.badges,chips:[badge,{...category,hidden:'Positive prompt category: '},...rest]}};
 }
 
 /**
- * Recorded inspector deviations only (spec §8, TESTING.md D3, D20–D22, D34, D38 and D117); everything else must
+ * Recorded inspector deviations only (spec §8, TESTING.md D3, D20–D22, D34, D38, D117 and D146); everything else must
  * equal production. `reference.viewerPlain` is the concept's own full details
  * with its tag chips made plain (D20), D117's summary button added and, under a coarse pointer, D34's targets, all at
  * runtime: the browser lays out what follows them, as the Images spec's removed toolbar items do.
@@ -112,6 +118,7 @@ async function openProductionPanel(page,theme) {
  */
 async function plainViewerChips(page) {
     const restoreTargets=await mutate(page,{css:D34_COARSE_TARGETS});
+    const restoreSource=await withChipSource(page,'#viewer-details',ORIGIN);
     await page.evaluate(()=>{
         window.__plainChips=[...document.querySelectorAll('#viewer-details .tags > button.chip')].map(button=>{
             const span=document.createElement('span');span.className='chip';span.textContent=button.textContent;
@@ -126,7 +133,7 @@ async function plainViewerChips(page) {
     return async()=>{
         await page.evaluate(()=>{for(const [span,button] of window.__plainChips)span.replaceWith(button);delete window.__plainChips;
             window.__summaryButton.remove();delete window.__summaryButton;});
-        await restoreTargets();
+        await restoreSource();await restoreTargets();
     };
 }
 
@@ -162,7 +169,11 @@ async function viewerOf(page,concept,mutation=null) {
     return {viewerDetails,viewerPlain,fileControls};
 }
 async function inventory(page,concept=false) {
+    // D146: the concept panel's category chip with its visible origin, laid out by the concept page itself.
+    const restoreSource=concept?await withChipSource(page,'#image-inspector',ORIGIN):null;
+    if(concept)await settle(page);
     const {panel}=await inspectorOf(page);
+    await restoreSource?.();
     const {viewerDetails,viewerPlain,fileControls}=await viewerOf(page,concept);
     return concept?{panel,viewerDetails,viewerPlain,fileControls}:{panel,viewerDetails,fileControls};
 }
@@ -288,7 +299,8 @@ for(const [width,height] of SIZES)for(const theme of THEMES)test(`inspector pane
     expect.soft(panel.sections.map(section=>section.label.color)[0],'concept role colors').not.toBe(panel.sections[1].label.color);
     expect.soft(panel.facts,'concept facts').toMatchObject({columns:2,columnGap:'12px',rowGap:'12px',fontSize:width>700?'11px':'12px'});
     expect.soft(panel.footer,'concept footer').toMatchObject({paddingTop:'13px',paddingRight:'17px',paddingBottom:'13px',paddingLeft:'17px'});
-    expect.soft(panel.badges.chips.map(chip=>chip.text),'concept badges').toEqual(['Execution recorded','Landscapes']);
+    // The concept's bare "Landscapes" with the D146 origin added at runtime (`withChipSource`).
+    expect.soft(panel.badges.chips.map(chip=>chip.text),'concept badges').toEqual(['Execution recorded','Landscapes · prompt']);
     expect.soft(reference.viewerDetails.structure.inner.slice(-2),'concept full details').toEqual(['details','details']);
 
     expect.soft(diff,'differences after the recorded deviations').toEqual([]);
@@ -322,8 +334,10 @@ test('a recipe-linked image without recipe metadata shows its positive prompt me
     await expect(panelOf(page).locator('.panel-heading h2')).toHaveText('Quiet geometry');
     const rows=panelOf(page).locator('.detail-inner > .tags');
     await expect(rows).toHaveCount(2);
-    await expect(rows.first().locator('.chip')).toHaveText(['Execution recorded','Positive prompt category: Architecture']);
+    await expect(rows.first().locator('.chip')).toHaveText(['Execution recorded','Positive prompt category: Architecture · prompt']);
     await expect(rows.first().locator('.chip .ca-visually-hidden')).toHaveText('Positive prompt category: ');
+    // D146 (#332): the visible origin names where the value came from.
+    await expect(rows.first().locator('.chip .chip-source')).toHaveText(' · prompt');
     await expect(rows.nth(1).locator('button.chip')).toHaveText(['minimal','warm_light','editorial']);
     await expect(rows.nth(1).locator('span.chip')).toHaveCount(0);
     await expect(panelOf(page).locator('.detail-footer button')).toHaveText(['Send to ComfyUI','Prompt history']);
@@ -400,6 +414,13 @@ test('inspector comparison detects mutations',async({page})=>{
     expect(()=>assertInspectorMatch(reference,withoutSummary,viewport)).toThrow(/viewerDetails\.structure\.inner/);
     assertInspectorMatch(reference,await viewerMutated(),viewport);
 
+    // D146: the visible origin is part of the mapped concept, so losing it is a difference.
+    const restoreSource=await mutate(page,{remove:['#image-inspector .chip-source']});
+    const sourceMutated=await measure();
+    expect(()=>assertInspectorMatch(reference,sourceMutated,viewport)).toThrow(/panel\.badges\.chips\.1\.source/);
+    await restoreSource();await settle(page);
+    assertInspectorMatch(reference,await measure(),viewport);
+
     await mutate(page,{remove:['#image-inspector > .detail-footer']});
     const domMutated=await measure();
     expect(()=>assertInspectorMatch(reference,domMutated,viewport)).toThrow(/panel\.footer/);

tests/browser/vocabulary-canonical-comparison.mjs

@@ -1,6 +1,7 @@
 // Concept-vs-production inventory for the native Tags & categories screen (concept renderTags, app.js:719-729).
 // pageInventoryOf runs in the page; dialogs reuse the editor's inventoryOf. The concept is never rewritten:
 // mapVocabularyConcept / mapVocabularyDialog apply only the recorded deviations, each named with its ruling.
+import {diffInventory} from './library-editor-canonical-comparison.mjs';
 export {inventoryOf, diffInventory} from './library-editor-canonical-comparison.mjs';
 
 export function pageInventoryOf(main) {
@@ -61,23 +62,51 @@ export function pageInventoryOf(main) {
     };
 }
 
+const countOf=(count,noun)=>`${count} ${noun}${count===1?'':'s'}`;
+
+/**
+ * D143 (#332): a category row counts the images whose own category it is: "N positive prompts · M images" when
+ * prompts hold it too, "M images" for a value only images hold. Image-only rows follow every prompt-backed row, before
+ * the closing Manage category row, each drawn as the concept's last category row with its own text (vocabulary-visual
+ * checks this against the concept page with those rows added at runtime). `images` is `{value: count}`; `only` lists
+ * the image-only values in their order.
+ */
+export function withImageCounts(operations,{images={},only=[]}={}) {
+    const rows=operations.map(row=>images[row.h3.text]&&!only.includes(row.h3.text)
+        ?{...row,p:{...row.p,text:`${row.p.text} · ${countOf(images[row.h3.text],'image')}`}}:row);
+    const manage=rows.at(-1),last=rows.at(-2);
+    const added=only.map(value=>({...last,h3:{...last.h3,text:value},p:{...last.p,text:countOf(images[value],'image')}}));
+    return [...rows.slice(0,-1),...added,manage];
+}
+
 // Recorded deviations only (plan "Mock inventory" + decisions D1-D15 + ledger rulings). Everything else must be equal.
-export function mapVocabularyConcept(reference) {
+// `imageCategories` (#332 D143) is the fixture's own image categories, none by default.
+export function mapVocabularyConcept(reference,imageCategories={}) {
+    const operations=reference.operations.map(row=>({...row,p:{...row.p,
+        // Ledger ruling: "1 positive prompts" -> singular, consistent with the shared plural helper (#238/#243).
+        text:row.p.text.replace(/^1 positive prompts$/,'1 positive prompt')}}));
     return {...reference,
         table:{...reference.table,rows:reference.table.rows.map(row=>({...row,
             // Data, not a deviation: the concept tags each sample image with its prompt's tags; the vocabulary fixture
             // tags no image, so every Images count is 0 (#249 C2 retired #245 D3).
             images:'0'}))},
-        operations:reference.operations.map(row=>({...row,p:{...row.p,
-            // Ledger ruling: "1 positive prompts" -> singular, consistent with the shared plural helper (#238/#243).
-            text:row.p.text.replace(/^1 positive prompts$/,'1 positive prompt')}})),
+        operations:withImageCounts(operations,imageCategories),
     };
 }
 
+/** The page comparison: concept rows are the concept's sample tags; production appends fixture-only tags (D4). */
+export function compareVocabularyPage(reference,actual,imageCategories={}) {
+    const expected=mapVocabularyConcept(reference,imageCategories);
+    const shared=expected.table.rows.length;
+    return {diff:diffInventory(expected,{...actual,table:{...actual.table,rows:actual.table.rows.slice(0,shared)}}),
+        extra:actual.table.rows.slice(shared).map(row=>row.tag)};
+}
+
 // Concept dialogs are simpleInput (app.js:1138-1143). donors are concept inventories for controls the concept
 // shows elsewhere: a `.field select` and a `p.small` (Filters dialog, app.js:1351) and a danger dialog action
 // (Archive… in the editor, app.js:976), so added controls are held to concept tokens, never to production values.
-export function mapVocabularyDialog(mode,reference,{filters,editor,categories}) {
+// `preview` is the Manage categories sentence once Preview has been pressed (D9; D144, #332, adds its images).
+export function mapVocabularyDialog(mode,reference,{filters,editor,categories,preview=null}) {
     const fields=reference.fields.map(item=>({...item,
         // Inventory rows 27-29: the name is `required` (blank Apply is blocked natively).
         required:true}));
@@ -98,9 +127,9 @@ export function mapVocabularyDialog(mode,reference,{filters,editor,categories})
                 // D9 / Task 8: the proposed name offers a category datalist (no trailing commas: one value).
                 ...fields.map(item=>({...item,listed:true,commaOptions:false}))],
             // D9: the preview sentence is a `p.small`, empty and hidden until Preview.
-            small:[{...filters.small[0],text:''}],
+            small:[{...filters.small[0],text:preview??''}],
             // D9: the primary is `Preview` until a preview is shown, then `Apply`.
-            actions:{...reference.actions,buttons:buttons.map(item=>item.text==='Apply'?{...item,text:'Preview'}:item)}};
+            actions:{...reference.actions,buttons:preview===null?buttons.map(item=>item.text==='Apply'?{...item,text:'Preview'}:item):buttons}};
     }
     return {...reference,fields,actions:{...reference.actions,buttons}};
 }

tests/browser/vocabulary-visual.spec.mjs

@@ -1,11 +1,14 @@
+import {writeFile} from 'node:fs/promises';
 import {test,expect} from './fixtures.mjs';
 import {captureCanonicalState} from './history-canonical-comparison.mjs';
+import {pageInventoryOf,inventoryOf,diffInventory,mapVocabularyConcept,mapVocabularyDialog,compareVocabularyPage} from './vocabulary-canonical-comparison.mjs';
 
 // Artifact-only captures of Tags & categories states that have no concept counterpart: the Manage categories
 // preview, loading and 1,000-category cap notes, tag conflict and restore notes, the Delete tag confirmation (D14),
 // empty lists (D12), a failed read with Retry, and Load more (D5). The page and the three concept dialogs are captured
 // as concept/production pairs by workspace-vocabulary.spec.mjs. There are deliberately no pixel assertions or
-// baselines: the maintainer accepts these captures visually before any baseline is added.
+// baselines: the maintainer accepts these captures visually before any baseline is added. The last test (#332 D143,
+// D144) compares the category rows with image counts and the Manage category preview against the concept.
 test.use({locale:'en-US',timezoneId:'UTC',reducedMotion:'reduce'});
 const route='/prompt_manager/workspace#/tags';
 const main=page=>page.locator('#workspace-main');
@@ -101,3 +104,87 @@ for(const [width,height] of [[1600,1100],[390,844]])for(const theme of ['dark','
     await testInfo.attach(`production-load-more-${width}-${theme}`,{path,contentType:'image/png'});
     await expect(rows(page)).toHaveCount(100);
 });
+
+// D143 and D144 (#332): with own image categories seeded (`image_categories`: "Landscapes" on two images, "Portraits"
+// on one image only), the Categories panel and the Manage category preview against the concept (renderTags, app.js
+// 719-729; the Manage dialog is its simpleInput, 1138-1143). The page is compared with D143 mapped, a model checked
+// against the concept page with those rows added at runtime; the preview with D9's sentence and D144's images.
+const concept='/__test__/canonical/workspace';
+const IMAGE_CATEGORIES=Object.freeze({images:{Landscapes:2,Portraits:1},only:['Portraits']});
+// D9's sentence; D144 adds the images holding the value ("and 2 images").
+const PREVIEW='“Landscapes” is used by 3 positive prompts and 2 images. Apply renames it to “Scenery”.';
+const pageOf=(page,production)=>page.locator(production?'#workspace-main':'#main').evaluate(pageInventoryOf);
+async function openConceptRoute(page,route,theme) {
+    await page.goto('about:blank');await page.goto(`${concept}#${route}`);
+    await page.getByRole('combobox',{name:'Theme',exact:true}).selectOption(theme);
+}
+/** The concept page as D143 records it: image counts after the prompt counts, image-only rows before Manage category. */
+function conceptWithImageCounts(page) {
+    return page.evaluate(({images,only})=>{
+        const surface=document.querySelectorAll('#main .two-col > section.surface')[1];
+        const rows=[...surface.querySelectorAll('.operation')];
+        const count=value=>`${images[value]} image${images[value]===1?'':'s'}`;
+        for(const row of rows) {
+            const value=row.querySelector('h3').textContent;
+            if(images[value]&&!only.includes(value))row.querySelector('p').textContent+=` · ${count(value)}`;
+        }
+        const manage=rows.at(-1),last=rows.at(-2);
+        for(const value of only) {
+            const row=last.cloneNode(true);row.querySelector('h3').textContent=value;row.querySelector('p').textContent=count(value);manage.before(row);
+        }
+    },IMAGE_CATEGORIES);
+}
+/** Concept controls the Manage dialog adds (as in workspace-vocabulary.spec.mjs): the Filters field select and p.small. */
+async function conceptDonors(page,theme,categories) {
+    await openConceptRoute(page,'images',theme);
+    await page.locator('#main').getByRole('button',{name:'Filters',exact:true}).click();await expect(page.locator('#modal')).toBeVisible();
+    const filters=await page.locator('#modal').evaluate(inventoryOf);
+    await openConceptRoute(page,'prompt/alpine',theme);
+    await page.getByRole('button',{name:'Edit metadata',exact:true}).click();await expect(page.locator('#modal')).toBeVisible();
+    const editor=await page.locator('#modal').evaluate(inventoryOf);
+    return {filters,editor,categories};
+}
+
+for(const [width,height] of [[1600,1100],[390,844]])for(const theme of ['dark','light'])test(`category rows and the Manage category preview match the concept with image categories ${width}x${height} ${theme} (D143, D144)`,async({page,request},testInfo)=>{
+    await page.setViewportSize({width,height});
+    const manifest=await seed(request,{image_categories:true});
+    expect(manifest.image_categories).toEqual(IMAGE_CATEGORIES.images);
+    await openConceptRoute(page,'tags',theme);await expect(page.locator('#main h1')).toHaveText('Tags & categories');
+    await page.mouse.move(0,0);
+    const reference=await pageOf(page,false);
+    await conceptWithImageCounts(page);
+    const oracle=await pageOf(page,false);
+    await captureCanonicalState(page,testInfo,`concept-image-categories-${width}-${theme}`,'#main');
+    const donors=await conceptDonors(page,theme,['Landscapes','Architecture','Environments','Illustration','Portraits']);
+    await openConceptRoute(page,'tags',theme);
+    await page.locator('#main').getByRole('button',{name:'Review',exact:true}).click();await expect(page.locator('#modal')).toBeVisible();
+    const referenceDialog=await page.locator('#modal').evaluate(inventoryOf);
+
+    await open(page,theme,manifest.tags.length);
+    await expect(categoryOperation(page,'Portraits')).toHaveCount(1);
+    // The pointer still rests where the concept's Review was pressed: park it so no row is hovered.
+    await page.mouse.move(0,0);
+    const actual=await pageOf(page,true);
+    await captureCanonicalState(page,testInfo,`production-image-categories-${width}-${theme}`,'#workspace-main');
+    const box=await openDialog(page,categoryOperation(page,'Manage category').getByRole('button',{name:'Review',exact:true}));
+    await expect(box.getByLabel('Category',{exact:true})).toHaveValue('Landscapes');
+    await box.getByLabel('Proposed new category name',{exact:true}).fill('Scenery');await button(box,'Preview').click();
+    await expect(box.locator('p.small')).toHaveText(PREVIEW);
+    // The pressed primary keeps the pointer and focus; the concept is measured as it opens (focus on ×, no hover),
+    // which workspace-vocabulary.spec.mjs compares, so this state is restored before measuring the preview.
+    await page.mouse.move(0,0);await box.locator('.dialog-header button').focus();
+    const actualDialog=await box.evaluate(inventoryOf);
+    await captureCanonicalState(page,testInfo,`production-image-categories-preview-${width}-${theme}`);
+    const path=testInfo.outputPath('vocabulary-image-categories.json');
+    await writeFile(path,JSON.stringify({reference,oracle,actual,referenceDialog,actualDialog},null,2));
+    await testInfo.attach('vocabulary-image-categories',{path,contentType:'application/json'});
+
+    // The D143 model reproduces the concept page with the rows added at runtime.
+    expect.soft(diffInventory(mapVocabularyConcept(reference,IMAGE_CATEGORIES).operations,mapVocabularyConcept(oracle).operations),'D143 model').toEqual([]);
+    const {diff,extra}=compareVocabularyPage(reference,actual,IMAGE_CATEGORIES);
+    expect.soft(actual.operations.map(row=>[row.h3.text,row.p.text]).slice(0,-1),'category rows').toEqual([['Landscapes','3 positive prompts · 2 images'],
+        ['Architecture','1 positive prompt'],['Environments','1 positive prompt'],['Illustration','1 positive prompt'],['Portraits','1 image']]);
+    expect.soft(diff,'page differences after the recorded deviations and D143').toEqual([]);
+    expect.soft(extra,'fixture-only rows').toEqual([manifest.pair_only_tag,manifest.archived_only_tag,manifest.negative_only_tag,manifest.unused_tag]);
+    expect.soft(diffInventory(mapVocabularyDialog('manage',referenceDialog,{...donors,preview:PREVIEW}),actualDialog),'preview differences after D9 and D144').toEqual([]);
+});

tests/browser/workspace-history.spec.mjs

@@ -495,6 +495,30 @@ test('the inline current file names its prompts apart from the frozen run fields
     expect(await exact(dialog(page).getByRole('region',{name:'Positive prompt',exact:true}).locator('p.prompt-text'))).toBe(before);
 });
 
+// #332 CUJ 5 (MC8, §5.3): History's current-file inspector reads the file's own category with the Images key rule, so
+// the inline current file and its viewer show "Portraits · this image"; current.png has two saved links, so it inherits
+// nothing and shows no chip before.
+test('the current file shows its own category with its origin in the recorded run and its viewer',async({page,request})=>{
+    const chip=scope=>scope.locator('span.chip:has(> span.chip-source)');
+    const current=dialog(page).getByRole('region',{name:'Current reported file',exact:true});
+    const viewCurrent=async()=>{await dialog(page).locator('[data-receipt]').first().getByRole('button',{name:'View current file',exact:true}).click();
+        const details=page.locator('dialog#viewer-dialog #viewer-details');await expect(details.locator('.panel-heading')).toBeVisible();return details;};
+    await open(page,page.fixture.detail_id);await marker(page,page.fixture.runs.shared).click();await expect(dialog(page).locator('[data-receipt]')).toHaveCount(5);
+    let details=await viewCurrent();await expect(details.locator('.panel-heading h2')).toBeVisible();await expect(chip(details)).toHaveCount(0);
+    await page.keyboard.press('Escape');await expect(current).toBeVisible();await expect(chip(current)).toHaveCount(0);
+    await dialog(page).getByRole('button',{name:'Close recorded run',exact:true}).click();
+    const {images}=await(await request.get('/prompt_manager/images/output?mode=workspace&subfolder=history&limit=40')).json();
+    const file=images.find(image=>image.root_index===0&&image.path==='history/current.png');
+    const put=await request.put('/prompt_manager/images/category',{data:{items:[{root_index:0,root_scope:file.root_scope,path:file.path}],category:'Portraits'}});
+    await expect(put).toBeOK();expect((await put.json()).updated).toBe(1);
+    await open(page,page.fixture.detail_id);await marker(page,page.fixture.runs.shared).click();await expect(dialog(page).locator('[data-receipt]')).toHaveCount(5);
+    details=await viewCurrent();
+    await expect(chip(details)).toHaveText('Image category: Portraits · this image');
+    await page.keyboard.press('Escape');await expect(current).toBeVisible();
+    await expect(chip(current)).toHaveText('Image category: Portraits · this image');
+    expect(await chip(current).locator('.chip-source').evaluate(node=>node.textContent)).toBe(' · this image');
+});
+
 // LI-4 (D117): the recorded history's current-file viewer is the shared full inspector, so it copies the legacy summary.
 test('the current file viewer copies its settings summary',async({page})=>{
     await page.addInitScript(()=>{window.__copied=[];Object.defineProperty(navigator,'clipboard',{configurable:true,value:{writeText:async text=>{window.__copied.push(text);}}});});

tests/browser/workspace-images.spec.mjs

@@ -1988,70 +1988,286 @@ test('Export metadata downloads nothing when no image can be read', async ({ pag
     await expect(bulkbar(page).locator('.bulkbar > strong')).toHaveText('2 selected');
 });
 
-// #249 D8 follow-up (image selection, Task 3): Set category sets the linked positives' category (app.js simpleInput).
+// #332 (D140, MC6, MC7): Set category writes each selected image's own category (PUT /prompt_manager/images/category);
+// "Use prompt category" removes it after a confirmation (DELETE). It never writes a prompt: Images no longer posts
+// /prompt_manager/bulk/category (#259's prompt action is retired from Images).
 const categoryButton = page => bulkbar(page).getByRole('button', { name: 'Set category', exact: true });
 const categoryDialog = page => page.getByRole('dialog', { name: 'Categorize selected images', exact: true });
-const categoryRoute = '**/prompt_manager/bulk/category';
-/** Unlink the input root's card by deleting its prompt; returns the output card's positive id. */
-async function unlinkInputCard(request) {
-    const { images } = await (await request.get('/prompt_manager/images/output?mode=workspace')).json();
-    const byKey = Object.fromEntries(images.map(image => [`${image.root_index}:${image.path}`, image]));
-    const [output, input] = [byKey['0:shared/same.png'], byKey['1:shared/same.png']];
-    expect([output.linked.status, input.linked.status]).toEqual(['linked', 'linked']);
-    await expect(await request.delete(`/prompt_manager/delete/${input.linked.positive_id}`)).toBeOK();
-    return output.linked.positive_id;
+const removeDialog = page => page.getByRole('dialog', { name: 'Use prompt category', exact: true });
+const categoryFilter = page => page.getByRole('combobox', { name: 'Filter by category', exact: true });
+const categoryRoute = '**/prompt_manager/images/category';
+const IMAGE_CATEGORY = '/prompt_manager/images/category';
+const cardOf = (page, key) => page.locator(`article[data-image-key="${key}"]`);
+const keyOf = image => `${image.root_index}:${image.path}`;
+const cardKeys = page => cards(page).evaluateAll(nodes => nodes.map(node => node.dataset.imageKey).sort());
+// The four outputs of "Cat portrait" (CUJ 1's batch); the input root's same.png is linked to "Dog landscape".
+const BATCH = ['0:bulk/0000.png', '0:bulk/0001.png', '0:bulk/0002.png', '0:shared/same.png'];
+/** Every category write the page sends, Images' own route and #259's prompt route alike. */
+function categoryWrites(page) {
+    const writes = [];
+    page.on('request', item => {
+        const path = new URL(item.url()).pathname;
+        if (item.method() === 'GET' || !['/prompt_manager/images/category', '/prompt_manager/bulk/category'].includes(path)) return;
+        writes.push({ method: item.method(), path, body: item.postDataJSON() });
+    });
+    return writes;
+}
+async function listedImages(request, query = '') {
+    const response = await request.get(`/prompt_manager/images/output?mode=workspace&limit=40${query}`);
+    await expect(response).toBeOK();
+    return (await response.json()).images;
+}
+async function targetsOf(request, keys) {
+    const images = await listedImages(request);
+    return keys.map(key => {
+        const image = images.find(item => keyOf(item) === key);
+        return { root_index: image.root_index, root_scope: image.root_scope, path: image.path };
+    });
+}
+async function putOwnCategory(request, keys, category) {
+    const response = await request.put(IMAGE_CATEGORY, { data: { items: await targetsOf(request, keys), category } });
+    await expect(response).toBeOK();
+}
+const filteredKeys = async (request, category) => (await listedImages(request, `&category=${encodeURIComponent(category)}`)).map(keyOf).sort();
+async function positiveOf(request, id) {
+    const response = await request.get(`/prompt_manager/library/${id}`);
+    await expect(response).toBeOK();
+    const { positive } = await response.json();
+    return { id: positive.id, text: positive.text, category: positive.category };
+}
+/** CUJ 1's Given: four images linked to the positive "Cat portrait", whose category is "Landscapes". */
+async function seedBatch(request) {
+    await expect(await request.post('/__test__/reset', { data: { extra_images: 3 } })).toBeOK();
+    const response = await request.post('/prompt_manager/save', { data: { text: 'Cat portrait', category: 'Landscapes' } });
+    await expect(response).toBeOK();
+    const id = (await response.json()).prompt_id;
+    expect(await filteredKeys(request, 'Landscapes')).toEqual(BATCH);
+    return id;
+}
+async function openSetCategory(page) {
+    await categoryButton(page).click();
+    await expect(categoryDialog(page)).toBeVisible();
+    return categoryDialog(page);
+}
+async function applyCategory(page, category) {
+    const dialog = await openSetCategory(page);
+    await dialog.getByLabel('Category', { exact: true }).fill(category);
+    await dialog.getByRole('button', { name: 'Apply', exact: true }).click();
+    await expect(dialog).toBeHidden();
 }
 
-test('Set category applies the category to the linked positives and the category filter then matches', async ({ page, request }) => {
-    const outputPositive = await unlinkInputCard(request);
+test('Set category overrides one image of a batch and never writes its prompt (#332 CUJ 1)', async ({ page, request }) => {
+    const positiveId = await seedBatch(request);
+    const before = await positiveOf(request, positiveId);
+    const writes = categoryWrites(page);
     await page.goto(workspace);
-    await checkBoth(page);
-    const opener = categoryButton(page);
-    await opener.click();
-    const dialog = categoryDialog(page);
-    await expect(dialog).toBeVisible();
-    // The concept's simpleInput: one field and Cancel / Apply (primary).
+    await expect(cards(page)).toHaveCount(5);
+    await checkbox(cardOf(page, '0:bulk/0001.png'), '0001.png').check();
+    const dialog = await openSetCategory(page);
+    // The concept's simpleInput plus "Use prompt category" between Cancel and Apply (primary).
     await expect(dialog.locator('#modal-body > .field > label[for="action-input"]')).toHaveText('Category');
     await expect(dialog.locator('#modal-body > .field > input#action-input')).toHaveValue('');
-    await expect(dialog.locator('#modal-body > .dialog-actions > button')).toHaveText(['Cancel', 'Apply']);
+    await expect(dialog.locator('#modal-body > .dialog-actions > button')).toHaveText(['Cancel', 'Use prompt category', 'Apply']);
     await expect(dialog.getByRole('button', { name: 'Apply', exact: true })).toHaveClass(/ca-primary/);
     await expect(dialog.getByLabel('Category', { exact: true })).toBeFocused();
+    await expect(dialog.getByLabel('Category', { exact: true })).toHaveAttribute('maxlength', '100');
     // An empty value applies nothing and keeps the dialog open.
-    const posts = [];
-    page.on('request', item => { if (item.method() === 'POST' && item.url().endsWith('/prompt_manager/bulk/category')) posts.push(item.postDataJSON()); });
     await dialog.getByRole('button', { name: 'Apply', exact: true }).click();
     await expect(dialog).toBeVisible();
-    await dialog.getByLabel('Category', { exact: true }).fill('  Landscapes ');
+    await dialog.getByLabel('Category', { exact: true }).fill('  Portraits ');
     const listings = [];
     page.on('request', item => { if (imagePages(new URL(item.url()))) listings.push(item.url()); });
     await dialog.getByRole('button', { name: 'Apply', exact: true }).click();
     await expect(dialog).toBeHidden();
-    await expect(toast(page)).toHaveText('Category set on 1 prompt. 1 selected image had no linked prompt and was skipped.');
-    expect(posts).toEqual([{ prompt_ids: [outputPositive], category: 'Landscapes' }]);
+    await expect(toast(page)).toHaveText('Category “Portraits” set on 1 image.');
+    expect(writes).toEqual([{ method: 'PUT', path: IMAGE_CATEGORY,
+        body: { items: await targetsOf(request, ['0:bulk/0001.png']), category: 'Portraits' } }]);
     // The listing and the category options reload; the reload clears the selection.
     await expect.poll(() => listings.length).toBeGreaterThan(0);
     await expect(bulkbar(page)).toBeEmpty();
-    await expect(page.locator('#workspace-main h1')).toBeFocused();
-    await expect(cards(page).getByRole('checkbox', { checked: true })).toHaveCount(0);
-    const filter = page.getByRole('combobox', { name: 'Filter by category', exact: true });
-    await expect(filter.locator('option')).toContainText(['Landscapes']);
-    await filter.selectOption('Landscapes');
+    await expect(categoryFilter(page).locator('option')).toHaveText(['All categories', 'Landscapes', 'Portraits']);
+    await categoryFilter(page).selectOption('Portraits');
     await expect(cards(page)).toHaveCount(1);
-    await expect(cards(page)).toHaveAttribute('data-image-key', '0:shared/same.png');
+    await expect(cards(page)).toHaveAttribute('data-image-key', '0:bulk/0001.png');
+    await categoryFilter(page).selectOption('Landscapes');
+    await expect(cards(page)).toHaveCount(3);
+    expect(await cardKeys(page)).toEqual(BATCH.filter(key => key !== '0:bulk/0001.png'));
+    // The prompt keeps its category: only the image carries "Portraits".
+    expect(await positiveOf(request, positiveId)).toEqual(before);
+    expect(before.category).toBe('Landscapes');
+    expect(writes.filter(write => write.path === '/prompt_manager/bulk/category')).toEqual([]);
 });
 
-test('Set category without a linked image posts nothing and opens no dialog', async ({ page, request }) => {
-    await unlinkInputCard(request);
+test('Set category categorizes unlinked images and lists the value in the toolbar and the suggestions (#332 CUJ 2)', async ({ page, request }) => {
+    // Unlink both images by deleting their prompts.
+    for (const image of await listedImages(request)) {
+        await expect(await request.delete(`/prompt_manager/delete/${image.linked.positive_id}`)).toBeOK();
+    }
+    expect((await listedImages(request)).filter(image => image.linked.status === 'linked')).toEqual([]);
+    const writes = categoryWrites(page);
     await page.goto(workspace);
+    await checkBoth(page);
+    await applyCategory(page, 'Scans');
+    await expect(toast(page)).toHaveText('Category “Scans” set on 2 images.');
+    expect(writes).toEqual([{ method: 'PUT', path: IMAGE_CATEGORY,
+        body: { items: await targetsOf(request, ['0:shared/same.png', '1:shared/same.png']), category: 'Scans' } }]);
+    await expect(categoryFilter(page).locator('option')).toHaveText(['All categories', 'Scans']);
+    await categoryFilter(page).selectOption('Scans');
     await expect(cards(page)).toHaveCount(2);
-    let posted = 0;
-    await page.route(categoryRoute, route => { posted += 1; return route.continue(); });
-    await checkbox(cards(page).last(), 'same.png').check();
-    await categoryButton(page).click();
-    await expect(toast(page)).toHaveText("None of the selected images is linked to a saved prompt, so there is no prompt category to set.");
+    expect(await cardKeys(page)).toEqual(['0:shared/same.png', '1:shared/same.png']);
+    // The field suggests the toolbar's categories through its own datalist.
+    await checkbox(cards(page).first(), 'same.png').check();
+    const dialog = await openSetCategory(page);
+    await expect(dialog.getByLabel('Category', { exact: true })).toHaveAttribute('list', 'workspace-input-suggestions');
+    expect(await dialog.locator('datalist#workspace-input-suggestions option').evaluateAll(nodes => nodes.map(node => node.value))).toEqual(['Scans']);
+    await dialog.getByRole('button', { name: 'Cancel', exact: true }).click();
     await expect(page.locator('dialog[open]')).toHaveCount(0);
-    expect(posted).toBe(0);
-    await expect(bulkbar(page).locator('.bulkbar > strong')).toHaveText('1 selected');
+    expect(writes).toHaveLength(1);
+});
+
+test('Use prompt category removes the own category only after Remove in its confirmation (#332 CUJ 3)', async ({ page, request }) => {
+    const positiveId = await seedBatch(request);
+    await putOwnCategory(request, ['0:bulk/0001.png'], 'Portraits');
+    const writes = categoryWrites(page);
+    await page.goto(workspace);
+    await expect(cards(page)).toHaveCount(5);
+    await expect(categoryFilter(page).locator('option')).toHaveText(['All categories', 'Landscapes', 'Portraits']);
+    await checkbox(cardOf(page, '0:bulk/0001.png'), '0001.png').check();
+    // Cancel in the confirmation sends nothing and keeps the selection.
+    await (await openSetCategory(page)).getByRole('button', { name: 'Use prompt category', exact: true }).click();
+    await expect(categoryDialog(page)).toHaveCount(0);
+    const confirm = removeDialog(page);
+    await expect(confirm).toBeVisible();
+    await expect(confirm.locator('p').first()).toHaveText("Remove the image category from the 1 selected image? Each one then shows its prompt's category, or none if it has no linked prompt. This cannot be undone.");
+    await expect(confirm.locator('.dialog-actions > button')).toHaveText(['Cancel', 'Remove']);
+    await expect(confirm.getByRole('button', { name: 'Remove', exact: true })).toHaveClass(/danger/);
+    await expect(confirm.getByRole('button', { name: 'Cancel', exact: true })).toBeFocused();
+    await confirm.getByRole('button', { name: 'Cancel', exact: true }).click();
+    await expect(page.locator('dialog[open]')).toHaveCount(0);
+    await expect(selectedCount(page)).toHaveText('1 selected');
+    expect(writes).toEqual([]);
+    expect(await filteredKeys(request, 'Portraits')).toEqual(['0:bulk/0001.png']);
+    // Remove sends exactly one DELETE naming the selected image.
+    await (await openSetCategory(page)).getByRole('button', { name: 'Use prompt category', exact: true }).click();
+    await removeDialog(page).getByRole('button', { name: 'Remove', exact: true }).click();
+    await expect(toast(page)).toHaveText('Removed the image category from 1 image.');
+    expect(writes).toEqual([{ method: 'DELETE', path: IMAGE_CATEGORY, body: { items: await targetsOf(request, ['0:bulk/0001.png']) } }]);
+    await expect(bulkbar(page)).toBeEmpty();
+    // The image shows its prompt's category again: "Landscapes" lists all four, and "Portraits" is gone.
+    await expect(categoryFilter(page).locator('option')).toHaveText(['All categories', 'Landscapes']);
+    await categoryFilter(page).selectOption('Landscapes');
+    await expect(cards(page)).toHaveCount(4);
+    expect(await cardKeys(page)).toEqual(BATCH);
+    expect((await positiveOf(request, positiveId)).category).toBe('Landscapes');
+});
+
+test('a saved view filtered by a category lists an image categorized after it was saved (#332 CUJ 8)', async ({ page, request }) => {
+    await seedBatch(request);
+    await putOwnCategory(request, ['0:bulk/0001.png'], 'Portraits');
+    await page.goto(workspace);
+    await categoryFilter(page).selectOption('Portraits');
+    await expect(cards(page)).toHaveCount(1);
+    await page.locator('#workspace-main search.toolbar').getByRole('button', { name: 'Save view', exact: true }).click();
+    const save = page.getByRole('dialog', { name: 'Save this view', exact: true });
+    await save.getByRole('textbox', { name: 'View name', exact: true }).fill('Portraits');
+    await save.getByRole('button', { name: 'Save', exact: true }).click();
+    await expect(toast(page)).toHaveText('Saved view added to the sidebar.');
+    // Another image gets "Portraits" through Set category.
+    await categoryFilter(page).selectOption('');
+    await expect(cards(page)).toHaveCount(5);
+    await checkbox(cardOf(page, '0:bulk/0002.png'), '0002.png').check();
+    await applyCategory(page, 'Portraits');
+    await expect(toast(page)).toHaveText('Category “Portraits” set on 1 image.');
+    // Reopening the view lists both.
+    await page.getByRole('navigation', { name: 'Saved views', exact: true }).getByRole('link', { name: 'Portraits', exact: true }).click();
+    await expect(page.locator('#workspace-main h1')).toHaveText('Portraits');
+    await expect(categoryFilter(page)).toHaveValue('Portraits');
+    await expect(cards(page)).toHaveCount(2);
+    expect(await cardKeys(page)).toEqual(['0:bulk/0001.png', '0:bulk/0002.png']);
+});
+
+test('at 390px in light theme the Set category dialog and the category chip fit (#332 CUJ 10)', async ({ page, request }) => {
+    const LONG = 'Portraits taken on a phone at the end of a long walk through the old harbour at dusk';
+    await page.addInitScript(() => { try { localStorage.setItem('pm_workspace_theme', 'light'); } catch { /* the default theme */ } });
+    await page.setViewportSize({ width: 390, height: 844 });
+    await seedBatch(request);
+    await putOwnCategory(request, ['0:bulk/0001.png'], LONG);
+    await page.goto(workspace);
+    await expect(cards(page)).toHaveCount(5);
+    await expect(page.locator('html')).toHaveCSS('color-scheme', 'light');
+    const card = cardOf(page, '0:bulk/0001.png');
+    // The chip wraps inside the side panel; its origin never splits.
+    await card.getByRole('button', { name: 'Inspect 0001.png', exact: true }).click();
+    const chip = details(page).locator('span.chip', { has: page.locator('span.chip-source') });
+    await expect(chip).toHaveText(`Image category: ${LONG} · this image`);
+    const fit = await chip.evaluate(node => {
+        const panel = node.closest('aside, [role="complementary"]').getBoundingClientRect(), box = node.getBoundingClientRect();
+        const source = node.querySelector('.chip-source');
+        const line = parseFloat(getComputedStyle(source).lineHeight) || source.getBoundingClientRect().height;
+        return { inside: box.left >= panel.left - 0.5 && box.right <= panel.right + 0.5, sourceLines: source.getClientRects().length,
+            wrapped: box.height > line * 1.5, pageScroll: document.documentElement.scrollWidth - window.innerWidth };
+    });
+    expect(fit).toEqual({ inside: true, sourceLines: 1, wrapped: true, pageScroll: 0 });
+    // The dialog fits the width with no horizontal scroll, and its three buttons wrap without overlap.
+    await checkbox(card, '0001.png').check();
+    const dialog = await openSetCategory(page);
+    const geometry = await dialog.evaluate(node => {
+        const box = node.getBoundingClientRect();
+        const buttons = [...node.querySelectorAll('.dialog-actions > button')].map(button => button.getBoundingClientRect())
+            .map(({ left, right, top, bottom }) => ({ left, right, top, bottom }));
+        const overlaps = buttons.some((a, i) => buttons.some((b, j) => j > i && a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom));
+        const scrollers = [node, ...node.querySelectorAll('*')].filter(item => item.scrollWidth > item.clientWidth + 1 && getComputedStyle(item).overflowX !== 'visible');
+        return { fits: box.left >= 0 && box.right <= window.innerWidth, scrollers: scrollers.length, count: buttons.length, overlaps,
+            inside: buttons.every(b => b.left >= box.left && b.right <= box.right), pageScroll: document.documentElement.scrollWidth - window.innerWidth };
+    });
+    expect(geometry).toEqual({ fits: true, scrollers: 0, count: 3, overlaps: false, inside: true, pageScroll: 0 });
+});
+
+test('Set category of more than 500 images says so before any dialog or request (#332)', async ({ page, request }) => {
+    await page.route(url => url.pathname === '/prompt_manager/images/output' && url.searchParams.get('limit') !== '1', async route => {
+        const response = await route.fetch();
+        const body = await response.json();
+        await route.fulfill({ response, json: { ...body, total: 501 } });
+    });
+    await bulkReset(page, request);
+    await cardAt(page, 0).getByRole('button', { name: /^Open / }).focus();
+    await page.keyboard.press('ControlOrMeta+a');
+    await bulkbar(page).getByRole('button', { name: 'Select all 501 matching', exact: true }).click();
+    await expect(selectedCount(page)).toHaveText('All 501 matching selected');
+    const writes = categoryWrites(page);
+    await categoryButton(page).click();
+    await expect(toast(page)).toHaveText('Select at most 500 images.');
+    await expect(page.locator('dialog[open]')).toHaveCount(0);
+    expect(writes).toEqual([]);
+    await expect(selectedCount(page)).toHaveText('All 501 matching selected');
+});
+
+test('a changed source says so and reloads the listing (#332)', async ({ page }) => {
+    await page.goto(workspace);
+    await checkBoth(page);
+    await page.route(categoryRoute, route => route.fulfill({ status: 409,
+        json: { success: false, code: 'source-changed', error: 'The output sources changed. Refresh the images and try again.' } }));
+    const reloaded = page.waitForRequest(item => imagePages(new URL(item.url())));
+    await applyCategory(page, 'Landscapes');
+    await expect(toast(page)).toHaveText('The sources changed. Refresh the images and try again.');
+    await reloaded;
+    await expect(cards(page)).toHaveCount(2);
+    // The reload hides the bar with Set category in it: focus moves to the page heading, as after a success.
+    await expect(page.locator('#workspace-main h1')).toBeFocused();
+});
+
+test('a recipe-linked image is listed under its recipe\'s category (#332 D142)', async ({ page, request }) => {
+    await expect(await request.post('/__test__/reset', { data: { native_library: true } })).toBeOK();
+    await page.goto(workspace);
+    await expect(cards(page)).toHaveCount(3);
+    await expect(categoryFilter(page).locator('option')).toHaveText(['All categories', 'Animals', 'Experiments', 'Portraits']);
+    // The output same.png is linked to recipe "Portrait variant 1" (Portraits), the input copy to variant 2 (Experiments);
+    // only the image without a recipe shows its positive's "Animals".
+    for (const [category, keys] of [['Portraits', ['0:shared/same.png']], ['Experiments', ['1:shared/same.png']], ['Animals', ['0:legacy-unassigned.png']]]) {
+        await categoryFilter(page).selectOption(category);
+        await expect(cards(page)).toHaveCount(keys.length);
+        expect(await cardKeys(page)).toEqual(keys);
+    }
 });
 
 test('Set category reports a failure, keeps the selection and ignores a second press while it runs', async ({ page }) => {
@@ -2059,9 +2275,7 @@ test('Set category reports a failure, keeps the selection and ignores a second p
     await checkBoth(page);
     const held = [];
     await page.route(categoryRoute, route => { held.push(route); });
-    await categoryButton(page).click();
-    await categoryDialog(page).getByLabel('Category', { exact: true }).fill('Landscapes');
-    await categoryDialog(page).getByRole('button', { name: 'Apply', exact: true }).click();
+    await applyCategory(page, 'Landscapes');
     await expect.poll(() => held.length).toBe(1);
     await expect(categoryButton(page)).toHaveAttribute('aria-disabled', 'true');
     // Playwright waits on an aria-disabled control, so the second press is a dispatched click.
@@ -2098,14 +2312,12 @@ test('leaving Images during Set category finishes the write, and the return relo
     await checkBoth(page);
     const held = [];
     await page.route(categoryRoute, route => { held.push(route); });
-    await categoryButton(page).click();
-    await categoryDialog(page).getByLabel('Category', { exact: true }).fill('Landscapes');
-    await categoryDialog(page).getByRole('button', { name: 'Apply', exact: true }).click();
+    await applyCategory(page, 'Landscapes');
     await expect.poll(() => held.length).toBe(1);
     await page.evaluate(() => { window.location.hash = '/overview'; });
     await expect(page.locator('#workspace-main h1')).toHaveText('Overview');
     // The write is not aborted with the page: the server still receives and answers it.
-    const answered = page.waitForResponse(response => response.url().endsWith('/prompt_manager/bulk/category'));
+    const answered = page.waitForResponse(response => new URL(response.url()).pathname === IMAGE_CATEGORY);
     await held[0].continue();
     expect((await answered).ok()).toBe(true);
     await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 150)));
@@ -2116,23 +2328,25 @@ test('leaving Images during Set category finishes the write, and the return relo
     await expect(cards(page)).toHaveCount(2);
     await expect(bulkbar(page)).toBeEmpty();
     await expect(cards(page).getByRole('checkbox', { checked: true })).toHaveCount(0);
-    await expect(page.getByRole('combobox', { name: 'Filter by category', exact: true }).locator('option')).toContainText(['Landscapes']);
+    await expect(categoryFilter(page).locator('option')).toContainText(['Landscapes']);
 });
 
-test('Set category limits the field to the server length, shows the server count, and a rejection keeps the selection', async ({ page }) => {
+test('Set category shows the server counts and coded refusals, and a rejection keeps the selection', async ({ page }) => {
     await page.goto(workspace);
     await checkBoth(page);
     const answers = [
         { status: 400, json: { success: false, error: 'Category cannot exceed 100 characters' } },
-        { status: 200, json: { success: true, updated_count: 0 } },
+        { status: 404, json: { success: false, code: 'files-not-found', error: 'None of the images could be found.' } },
+        { status: 200, json: { success: true, category: 'Landscapes', updated: 1, unchanged: 0, not_found: 1 } },
     ];
     await page.route(categoryRoute, route => route.fulfill(answers.shift()));
-    for (const expected of ['Category could not be set. Try again.', 'Category set on 0 prompts.']) {
-        await categoryButton(page).click();
-        const field = categoryDialog(page).getByLabel('Category', { exact: true });
-        await expect(field).toHaveAttribute('maxlength', '100');
-        await field.fill('Landscapes');
-        await categoryDialog(page).getByRole('button', { name: 'Apply', exact: true }).click();
+    for (const expected of ['Category could not be set. Try again.',
+        'None of the selected images could be found. Refresh the images and try again.',
+        'Category “Landscapes” set on 1 image. 1 could not be found.']) {
+        const dialog = await openSetCategory(page);
+        await expect(dialog.getByLabel('Category', { exact: true })).toHaveAttribute('maxlength', '100');
+        await dialog.getByLabel('Category', { exact: true }).fill('Landscapes');
+        await dialog.getByRole('button', { name: 'Apply', exact: true }).click();
         await expect(toast(page)).toHaveText(expected);
         if (answers.length) await expect(bulkbar(page).locator('.bulkbar > strong')).toHaveText('2 selected');
     }
@@ -2381,24 +2595,20 @@ test('all matching sets the category through the listing filter and survives a r
     // Export metadata waits for loaded images: a press does nothing.
     const exportButton = bulkbar(page).getByRole('button', { name: 'Export metadata', exact: true });
     await expect(exportButton).toHaveAttribute('title', 'Export metadata reads each image in the browser, so it works on loaded images only.');
-    // No match linked (a stubbed answer): the nothing-linked sentence, and the selection stays.
-    await page.route('**/prompt_manager/bulk/category', route => route.fulfill({ json: { success: true, updated_count: 0, prompt_count: 0, skipped: 202 } }), { times: 1 });
-    const categorize = page.getByRole('dialog', { name: 'Categorize selected images', exact: true });
-    await bulkbar(page).getByRole('button', { name: 'Set category', exact: true }).click();
-    await categorize.getByRole('textbox', { name: 'Category', exact: true }).fill('Bulk392');
-    await categorize.getByRole('button', { name: 'Apply', exact: true }).click();
-    await expect(toast(page)).toHaveText("None of the selected images is linked to a saved prompt, so there is no prompt category to set.");
+    // No match listed any more (a stubbed answer): the not-found sentence, and the selection stays.
+    await page.route(categoryRoute, route => route.fulfill({ status: 404, json: { success: false, code: 'files-not-found', error: 'None of the images could be found.' } }), { times: 1 });
+    await applyCategory(page, 'Bulk392');
+    await expect(toast(page)).toHaveText('None of the selected images could be found. Refresh the images and try again.');
     await expect(selectedCount(page)).toHaveText('All 202 matching selected');
-    // The real write: one request with the filter, every matching image's positive changes.
-    await bulkbar(page).getByRole('button', { name: 'Set category', exact: true }).click();
-    await categorize.getByRole('textbox', { name: 'Category', exact: true }).fill('Bulk392');
-    const posted = page.waitForRequest(item => item.method() === 'POST' && new URL(item.url()).pathname === '/prompt_manager/bulk/category');
-    await categorize.getByRole('button', { name: 'Apply', exact: true }).click();
-    expect((await posted).postDataJSON()).toEqual({ images_filter: { sort: 'newest' }, category: 'Bulk392' });
-    await expect(toast(page)).toHaveText(/^Category set on \d+ prompts?\.$/);
+    // The real write: one PUT with the listing filter sets every matching image's own category; no prompt changes.
+    const writes = categoryWrites(page);
+    await applyCategory(page, 'Bulk392');
+    await expect(toast(page)).toHaveText('Category “Bulk392” set on 202 images.');
+    expect(writes).toEqual([{ method: 'PUT', path: IMAGE_CATEGORY, body: { filter: { sort: 'newest' }, category: 'Bulk392' } }]);
     await expect(bulkbar(page)).toBeEmpty();
     const filtered = await (await request.get('/prompt_manager/images/output?mode=workspace&limit=1&category=Bulk392')).json();
     expect(filtered.total).toBe(202);
+    expect((await (await request.get('/prompt_manager/library/options')).json()).categories).not.toContain('Bulk392');
     // A return visit keeps "all matching" as the loaded images, and the offer shows again.
     await cardAt(page, 0).getByRole('button', { name: /^Open / }).focus();
     await page.keyboard.press('ControlOrMeta+a');
@@ -2426,10 +2636,12 @@ test('all matching over 10,000 images says so before any dialog or request', asy
     await bulkbar(page).getByRole('button', { name: 'Select all 20,002 matching', exact: true }).click();
     await expect(selectedCount(page)).toHaveText('All 20,002 matching selected');
     let posted = 0;
-    page.on('request', item => { if (item.method() === 'POST') posted += 1; });
-    for (const action of ['Set category', 'Add tags', 'Auto-tag selected']) {
+    page.on('request', item => { if (item.method() !== 'GET') posted += 1; });
+    // Set category names at most 500 images (#332); the tagging jobs take up to 10,000.
+    for (const [action, sentence] of [['Set category', 'Select at most 500 images.'], ['Add tags', 'Narrow the view to at most 10,000 images.'],
+        ['Auto-tag selected', 'Narrow the view to at most 10,000 images.']]) {
         await bulkbar(page).getByRole('button', { name: action, exact: true }).click();
-        await expect(toast(page)).toHaveText('Narrow the view to at most 10,000 images.');
+        await expect(toast(page)).toHaveText(sentence);
         await expect(page.locator('dialog[open]')).toHaveCount(0);
     }
     expect(posted).toBe(0);

tests/browser/workspace-vocabulary.spec.mjs

@@ -383,6 +383,62 @@ test('manage categories previews real impact before applying',async({page,reques
     expect(after.prompts.filter(row=>row[2]==='Scenery')).toHaveLength(3);
 });
 
+// #332 MC9, MC10: image categories (their own, set on Images) count beside the prompts. The vocabulary fixture has no
+// image files, so these tests add two committed files to the output folder and set their categories through the API.
+async function imageCategories(request,category) {
+    for(const name of ['f02.png','f03.png']) await expect(await request.post('/__test__/add-local-inspect-file',{data:{name}})).toBeOK();
+    const listing=await(await request.get('/prompt_manager/images/output?mode=workspace&subfolder=local-inspect&limit=40')).json();
+    const items=listing.images.map(({root_index,root_scope,path})=>({root_index,root_scope,path}));expect(items).toHaveLength(2);
+    const response=await request.put('/prompt_manager/images/category',{data:{items,category}});await expect(response).toBeOK();
+    expect((await response.json()).updated).toBe(2);
+}
+const ownCategories=async request=>(await(await request.get('/prompt_manager/images/categories')).json()).categories;
+const IMAGE_KEYS=['0:local-inspect/f02.png','0:local-inspect/f03.png'];
+
+test('manage categories renames the images\' own categories too and the preview counts them (#332 CUJ 6)',async({page,request})=>{
+    await imageCategories(request,'Landscapes');
+    const writes=trackWrites(page);await openPage(page);
+    await expect(categoryRow(page,'Landscapes').locator('p')).toHaveText('3 positive prompts · 2 images');
+    const box=await openManage(page);
+    await expect(field(box,'Category')).toHaveValue('Landscapes');
+    await field(box,'Proposed new category name').fill('Landscape');await button(box,'Preview').click();
+    await expect(box.locator('p.small')).toHaveText('“Landscapes” is used by 3 positive prompts and 2 images. Apply renames it to “Landscape”.');
+    await button(box,'Apply').click();
+    await expect(box).toHaveCount(0);await expect(toast(page)).toHaveText('Category renamed.');
+    expect(writes.at(-1)).toMatchObject({url:'/prompt_manager/vocabulary/categories/apply',body:{source:'Landscapes',target:'Landscape'}});
+    await expect(categoryRow(page,'Landscapes')).toHaveCount(0);
+    await expect(categoryRow(page,'Landscape').locator('p')).toHaveText('3 positive prompts · 2 images');
+    // The prompts and both images carry the new name; nothing keeps the old one.
+    expect((await snapshot(request)).prompts.filter(row=>row[2]==='Landscape')).toHaveLength(3);
+    expect(await ownCategories(request)).toEqual(['Landscape']);
+    for(const [category,total] of [['Landscape',2],['Landscapes',0]]) {
+        const listing=await(await request.get(`/prompt_manager/images/output?mode=workspace&limit=40&category=${category}`)).json();
+        expect(listing.images.map(image=>`${image.root_index}:${image.path}`).sort()).toEqual(total?IMAGE_KEYS:[]);
+    }
+});
+
+test('a category only images hold is listed after the prompt-backed ones and Browse opens Images (#332 CUJ 7)',async({page,request})=>{
+    await imageCategories(request,'Scans');
+    await openPage(page);
+    const operations=surfaces(page).nth(1).locator('.operation');
+    await expect(operations.locator('h3')).toHaveText([...CATEGORIES.map(([name])=>name),'Scans','Manage category']);
+    await expect(categoryRow(page,'Scans').locator('p')).toHaveText('2 images');
+    for(const [name,count] of CATEGORIES) await expect(categoryRow(page,name).locator('p')).toHaveText(`${count} positive prompt${count===1?'':'s'}`);
+    // Manage category can rename it: its select lists it last.
+    const box=await openManage(page);
+    await expect(field(box,'Category').locator('option')).toHaveText([...CATEGORIES.map(([name])=>name),'Scans']);
+    await button(box,'Cancel').click();await expect(box).toHaveCount(0);
+    // Browse opens Images filtered by it (its Library would be empty).
+    await categoryRow(page,'Scans').getByRole('button',{name:'Browse',exact:true}).click();
+    await expect(page).toHaveURL(/#\/images$/);
+    await expect(main(page).getByRole('heading',{level:1})).toHaveText('Images');
+    await expect(page.getByRole('combobox',{name:'Filter by category',exact:true})).toHaveValue('Scans');
+    const cards=page.locator('article[data-image-key]');await expect(cards).toHaveCount(2);
+    expect((await cards.evaluateAll(nodes=>nodes.map(node=>node.dataset.imageKey))).sort()).toEqual(IMAGE_KEYS);
+    await expect(page.getByRole('searchbox',{name:'Search workspace',exact:true})).toHaveValue('');
+    await expect(page.locator('#workspace-main search.toolbar').getByRole('button',{name:'Filters',exact:true})).toBeVisible();
+});
+
 test('an edit during a pending preview needs a new Preview; Apply never sends the old values',async({page,request})=>{
     const writes=trackWrites(page);await openPage(page);const before=await snapshot(request);
     let release;const held=new Promise(resolve=>{release=resolve;});

tests/browser/workspace_vocabulary_fixture.py

@@ -72,6 +72,10 @@ CONCEPT_RECIPES = (
         "negative": "oversaturated, flat lighting, watermark, text",
     },
 )
+# #332 D143/D144 (opt-in, ``image_categories``): own image categories, one on
+# images only and one shared with prompts. Stored rows count whether or not the
+# files exist, so the keys name files the fixture never writes.
+IMAGE_CATEGORY_ROWS = (("Landscapes", 2), ("Portraits", 1))
 PAIR_ONLY_TAG = "pair_only_detail"
 ARCHIVED_ONLY_TAG = "archived_pair_detail"
 NEGATIVE_ONLY_TAG = "legacy_negative_detail"
@@ -112,8 +116,26 @@ _SNAPSHOT = {
 }
 
 
+def _seed_image_categories(api: PromptManagerAPI) -> dict:
+    """Own image category rows keyed as Images keys them; ``{value: count}``."""
+    from py.api.images import image_category_key
+
+    sources = list(api._get_all_output_dirs())
+    for category, count in IMAGE_CATEGORY_ROWS:
+        keys = [
+            image_category_key(sources, str(Path(sources[0]) / f"{category}_{n}.png"))
+            for n in range(count)
+        ]
+        api.db.set_image_categories(keys, category)
+    return dict(IMAGE_CATEGORY_ROWS)
+
+
 def seed_vocabulary(
-    api: PromptManagerAPI, root: Path, extra_tags: int = 0, extra_categories: int = 0
+    api: PromptManagerAPI,
+    root: Path,
+    extra_tags: int = 0,
+    extra_categories: int = 0,
+    image_categories: bool = False,
 ) -> dict:
     """Replace this server's disposable rows with the concept vocabulary."""
     db = api.db
@@ -167,6 +189,7 @@ def seed_vocabulary(
                 "category": f"bulk_category_{number:04}",
             },
         )
+    images = _seed_image_categories(api) if image_categories else {}
     with db.model.get_connection() as conn:
         tags = [row[0] for row in conn.execute("SELECT name FROM tags ORDER BY id")]
     api.invalidate_gallery_cache()
@@ -180,6 +203,7 @@ def seed_vocabulary(
         "archived_only_tag": ARCHIVED_ONLY_TAG,
         "negative_only_tag": NEGATIVE_ONLY_TAG,
         "unused_tag": UNUSED_TAG,
+        "image_categories": images,
     }
 
 
@@ -200,7 +224,14 @@ def register_vocabulary_commands(
     @routes.post("/__test__/vocabulary/reset")
     async def reset(request: web.Request) -> web.Response:
         data = await request.json() if request.can_read_body else {}
-        if not isinstance(data, dict) or set(data) - {"extra_tags", "extra_categories"}:
+        if not isinstance(data, dict) or set(data) - {
+            "extra_tags",
+            "extra_categories",
+            "image_categories",
+        }:
+            raise web.HTTPBadRequest()
+        images = data.get("image_categories", False)
+        if not isinstance(images, bool):
             raise web.HTTPBadRequest()
         extra = data.get("extra_tags", 0)
         categories = data.get("extra_categories", 0)
@@ -215,7 +246,7 @@ def register_vocabulary_commands(
         if request.query:
             raise web.HTTPBadRequest()
         manifest = await api._run_in_executor(
-            seed_vocabulary, api, root, extra, categories
+            seed_vocabulary, api, root, extra, categories, images
         )
         return web.json_response({"success": True, **manifest})
 

tests/js/workspace-file-inspector.test.js

@@ -384,7 +384,7 @@ test('the D117 wrap rule targets only the settings summary button', async () =>
     assert.doesNotMatch(css, /#viewer-details > div > button/);
 });
 
-test('category chip names its origin and shows an own category for any link status (#332)', async () => {
+test('category chip names its origin visibly and shows an own category for any link status (#332 D146)', async () => {
     const base = await localRecord(localPng('a.png'));
     const chipTexts = record => {
         const {f, done} = renderFull(record);
@@ -393,11 +393,11 @@ test('category chip names its origin and shows an own category for any link stat
         } finally { done(); }
     };
     const cases = [
-        [{status:'none', category:'Scans', category_scope:'image'}, 'Image category: Scans'],
-        [{status:'ambiguous', category:'Scans', category_scope:'image'}, 'Image category: Scans'],
-        [{status:'linked', category:'Portraits', category_scope:'image'}, 'Image category: Portraits'],
-        [{status:'linked', category:'Landscapes', category_scope:'positive'}, 'Positive prompt category: Landscapes'],
-        [{status:'linked', category:'Recipes', category_scope:'pair'}, 'Recipe category: Recipes'],
+        [{status:'none', category:'Scans', category_scope:'image'}, 'Image category: Scans · this image'],
+        [{status:'ambiguous', category:'Scans', category_scope:'image'}, 'Image category: Scans · this image'],
+        [{status:'linked', category:'Portraits', category_scope:'image'}, 'Image category: Portraits · this image'],
+        [{status:'linked', category:'Landscapes', category_scope:'positive'}, 'Positive prompt category: Landscapes · prompt'],
+        [{status:'linked', category:'Recipes', category_scope:'pair'}, 'Recipe category: Recipes · recipe'],
     ];
     for (const [library, text] of cases) {
         const chips = chipTexts({...base, library:{...base.library, tags:[], tags_scope:null, ...library}});

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

@@ -1,53 +1,61 @@
 const test = require('node:test');
 const assert = require('node:assert/strict');
+
+// #332 D140: Set category writes each selected image's own category; Use prompt category removes it.
 const source = import('../../web/js/workspace/images-category.mjs');
 
-const linked = (id, extra = {}) => ({path:`p${id}.png`, linked:{status:'linked', positive_id:id, ...extra}});
-
-test('targets are the distinct linked positives, in selection order, and the rest count as skipped', async () => {
-    const {categoryTargets} = await source;
-    const images = [
-        linked(7), linked(3), linked(7),
-        {path:'u.png', linked:{status:'unlinked', positive_id:null}},
-        {path:'a.png', linked:{status:'ambiguous', positive_id:4}},
-        {path:'v.png', linked:{status:'unavailable', positive_id:null}},
-        {path:'none.png'},
-        {path:'bad.png', linked:{status:'linked', positive_id:'9'}},
-        {path:'zero.png', linked:{status:'linked', positive_id:0}},
-        {path:'frac.png', linked:{status:'linked', positive_id:1.5}},
-        null,
-    ];
-    assert.deepEqual(categoryTargets(images), {promptIds:[7, 3], skipped:8});
-    assert.deepEqual(categoryTargets([]), {promptIds:[], skipped:0});
-    assert.deepEqual(categoryTargets([linked(2)]), {promptIds:[2], skipped:0});
-});
-
-test('the outcome toast counts the prompts and the skipped images', async () => {
-    const {categoryOutcome} = await source;
-    assert.equal(categoryOutcome(3, 0), 'Category set on 3 prompts.');
-    assert.equal(categoryOutcome(1, 0), 'Category set on 1 prompt.');
-    assert.equal(categoryOutcome(2, 4), 'Category set on 2 prompts. 4 selected images had no linked prompt and were skipped.');
-    assert.equal(categoryOutcome(1, 1), 'Category set on 1 prompt. 1 selected image had no linked prompt and was skipped.');
-});
-
-test('the dialog and failure copy is the plan\'s', async () => {
-    const {CATEGORY_DIALOG, CATEGORY_NONE_LINKED, CATEGORY_FAILED} = await source;
-    assert.deepEqual(CATEGORY_DIALOG, {title:'Categorize selected images', label:'Category', action:'Apply'});
-    assert.equal(CATEGORY_NONE_LINKED, "None of the selected images is linked to a saved prompt, so there is no prompt category to set.");
+test('the dialog keeps the concept\'s simpleInput words and names the routes', async () => {
+    const {CATEGORY_DIALOG, USE_PROMPT_CATEGORY, REMOVE_DIALOG, CATEGORY_URL, IMAGE_CATEGORIES_URL, CATEGORY_FAILED,
+        CATEGORY_MAX_LENGTH, MAX_CATEGORY_IMAGES} = await source;
+    assert.deepEqual({...CATEGORY_DIALOG}, {title:'Categorize selected images', label:'Category', action:'Apply'});
+    assert.equal(USE_PROMPT_CATEGORY, 'Use prompt category');
+    assert.deepEqual({...REMOVE_DIALOG}, {title:'Use prompt category', action:'Remove'});
+    assert.equal(CATEGORY_URL, '/prompt_manager/images/category');
+    assert.equal(IMAGE_CATEGORIES_URL, '/prompt_manager/images/categories');
     assert.equal(CATEGORY_FAILED, 'Category could not be set. Try again.');
-    assert.ok(Object.isFrozen(CATEGORY_DIALOG));
+    assert.equal(CATEGORY_MAX_LENGTH, 100);
+    assert.equal(MAX_CATEGORY_IMAGES, 500);
 });
 
-test('the updated count is the server\'s when it is a count, else the number of prompts posted', async () => {
-    const {updatedCount} = await source;
-    assert.equal(updatedCount({updated_count:0}, 3), 0);
-    assert.equal(updatedCount({updated_count:2}, 3), 2);
-    for (const result of [{}, {updated_count:-1}, {updated_count:1.5}, {updated_count:'2'}, null, undefined]) {
-        assert.equal(updatedCount(result, 3), 3, JSON.stringify(result));
+test('a set counts unchanged files as set and names files that could not be found', async () => {
+    const {setOutcome} = await source;
+    assert.equal(setOutcome({updated:1, unchanged:0, not_found:0}, 'Portraits'), 'Category “Portraits” set on 1 image.');
+    assert.equal(setOutcome({updated:1, unchanged:2, not_found:0}, 'Scans'), 'Category “Scans” set on 3 images.');
+    assert.equal(setOutcome({updated:2, unchanged:0, not_found:1}, 'Scans'), 'Category “Scans” set on 2 images. 1 could not be found.');
+    assert.equal(setOutcome({updated:0, unchanged:1, not_found:3}, 'Scans'), 'Category “Scans” set on 1 image. 3 could not be found.');
+    assert.equal(setOutcome({}, 'Scans'), 'Category “Scans” set on 0 images.');
+});
+
+test('a removal says how many lost their own category, or that none had one', async () => {
+    const {clearOutcome, NONE_HAD_OWN} = await source;
+    assert.equal(clearOutcome({cleared:1}), 'Removed the image category from 1 image.');
+    assert.equal(clearOutcome({cleared:4}), 'Removed the image category from 4 images.');
+    assert.equal(clearOutcome({cleared:0}), NONE_HAD_OWN);
+    assert.equal(NONE_HAD_OWN, 'None of the selected images had its own category.');
+});
+
+test('the confirmation states the count', async () => {
+    const {removeQuestion} = await source;
+    assert.equal(removeQuestion(1), "Remove the image category from the 1 selected image? Each one then shows its prompt's " +
+        'category, or none if it has no linked prompt. This cannot be undone.');
+    assert.match(removeQuestion(1200), /^Remove the image category from the 1,200 selected images\? /);
+});
+
+test('coded failures have their own sentences, anything else the fixed one', async () => {
+    const {failureMessage, NONE_FOUND, SOURCES_CHANGED, CATEGORY_FAILED} = await source;
+    assert.equal(failureMessage({code:'files-not-found'}), NONE_FOUND);
+    assert.equal(NONE_FOUND, 'None of the selected images could be found. Refresh the images and try again.');
+    assert.equal(failureMessage({code:'source-changed'}), SOURCES_CHANGED);
+    assert.equal(SOURCES_CHANGED, 'The sources changed. Refresh the images and try again.');
+    assert.equal(failureMessage({code:'too-many-images', message:'Select at most 500 images.'}), 'Select at most 500 images.');
+    for (const error of [null, undefined, new Error('x'), {code:'other', message:'secret'}]) {
+        assert.equal(failureMessage(error), CATEGORY_FAILED);
     }
 });
 
-test('the category field is limited to the server\'s 100 characters', async () => {
-    const {CATEGORY_MAX_LENGTH} = await source;
-    assert.equal(CATEGORY_MAX_LENGTH, 100);
+test('the toolbar list merges prompt and image categories once each', async () => {
+    const {mergeCategories} = await source;
+    assert.deepEqual(mergeCategories(['Landscapes', 'Portraits'], ['Scans', 'Landscapes']), ['Landscapes', 'Portraits', 'Scans']);
+    assert.deepEqual(mergeCategories(['A', '', '  ', 7], null), ['A']);
+    assert.deepEqual(mergeCategories(undefined, ['landscapes', 'Landscapes']), ['landscapes', 'Landscapes']);
 });

tests/js/workspace-toolbar.test.js

@@ -567,6 +567,43 @@ test('an input dialog with a fallback applies it for an empty value', async () =
     }
 });
 
+// #332: Set category's field suggests the categories under its own datalist id, and "Use prompt category" sits
+// between Cancel and Apply, closing the dialog before it runs.
+test('an input dialog offers suggestions and a secondary action', async () => {
+    const { openInputDialog, closeWorkspaceDialog, INPUT_SUGGESTIONS_ID } = await dialogsModule;
+    const dom = fakeDOM();
+    const scope = (await coreModule).createScope();
+    try {
+        const calls = [];
+        openInputDialog({ scope, title: 'Categorize selected images', label: 'Category', action: 'Apply', maxLength: 100,
+            suggestions: ['Landscapes', 'Scans'], secondary: { label: 'Use prompt category', onClick: () => calls.push('secondary') },
+            onApply: value => calls.push(value) });
+        assert.equal(INPUT_SUGGESTIONS_ID, 'workspace-input-suggestions');
+        const body = byId(dom, 'modal-body');
+        const [field, list, actions] = body.children;
+        const input = field.children[1];
+        assert.equal(input.getAttribute('list'), 'workspace-input-suggestions');
+        assert.equal(list.tagName.toLowerCase(), 'datalist');
+        assert.equal(list.id, 'workspace-input-suggestions');
+        assert.deepEqual(list.children.map(option => option.value), ['Landscapes', 'Scans']);
+        assert.deepEqual(actions.children.map(node => node.textContent), ['Cancel', 'Use prompt category', 'Apply']);
+        actions.children[1].click();
+        assert.deepEqual(calls, ['secondary']);
+        // No suggestions: no datalist and no list attribute.
+        openInputDialog({ scope, title: 'T', label: 'L', action: 'A', onApply() {} });
+        const [plainField, plainActions] = byId(dom, 'modal-body').children;
+        assert.equal(plainField.children[1].getAttribute('list'), null);
+        assert.deepEqual(plainActions.children.map(node => node.textContent), ['Cancel', 'A']);
+        assert.throws(() => openInputDialog({ scope, title: 'T', label: 'L', action: 'A', suggestions: [1], onApply() {} }), TypeError);
+        assert.throws(() => openInputDialog({ scope, title: 'T', label: 'L', action: 'A', secondary: { label: '' }, onApply() {} }), TypeError);
+        assert.throws(() => openInputDialog({ scope, title: 'T', label: 'L', action: 'A', secondary: { label: 'X' }, onApply() {} }), TypeError);
+    } finally {
+        closeWorkspaceDialog();
+        scope.dispose();
+        dom.restore();
+    }
+});
+
 test('dialogs restore focus to the trigger on Escape', async () => {
     const { openRefineDialog, openImportDialog, openCopyFallback, closeWorkspaceDialog } = await dialogsModule;
     const dom = fakeDOM();

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

@@ -553,3 +553,16 @@ test('delete text names the tag, its real links and what stays unchanged', async
     assert.equal(deleteTagText('unused', zero),
         '“unused” is not linked to any saved prompt or image. Deleting it removes only the name.');
 });
+
+test('a category row counts prompts and images, and an image-only row browses Images (#332 D143)', async () => {
+    const {categoryRowText, categoryBrowseTarget, categoryPreviewText} = await import('../../web/js/workspace/vocabulary-state.mjs');
+    assert.equal(categoryRowText({value: 'L', prompt_count: 3}), '3 positive prompts');
+    assert.equal(categoryRowText({value: 'L', prompt_count: 1, image_count: 0}), '1 positive prompt');
+    assert.equal(categoryRowText({value: 'L', prompt_count: 3, image_count: 2}), '3 positive prompts · 2 images');
+    assert.equal(categoryRowText({value: 'S', prompt_count: 0, image_count: 1}), '1 image');
+    assert.equal(categoryBrowseTarget({value: 'L', prompt_count: 3, image_count: 2}), 'library');
+    assert.equal(categoryBrowseTarget({value: 'S', prompt_count: 0, image_count: 2}), 'images');
+    const impact = {positive_prompts: 3, other_prompts: 0, negative_variants: 0, archived_negative_variants: 0, images: 2};
+    assert.equal(categoryPreviewText({source: 'Landscapes', target: 'Landscape', target_exists: false, impact}),
+        '“Landscapes” is used by 3 positive prompts and 2 images. Apply renames it to “Landscape”.');
+});

web/js/workspace/file-inspector.mjs

@@ -20,8 +20,9 @@ const REPRESENTATIONS = {
     limited: 'Record exceeds inspection limits; text is unavailable',
 };
 const TEXTLESS = new Set(['invalid', 'limited']);
-// #332: the hidden prefix that names where a category chip's value came from.
+// #332: the hidden prefix and the visible origin word that name where a category chip's value came from (D146).
 const CATEGORY_PREFIX = {image: 'Image category: ', positive: 'Positive prompt category: ', pair: 'Recipe category: '};
+const CATEGORY_ORIGIN = {image: 'this image', positive: 'prompt', pair: 'recipe'};
 const REVEAL_URL = '/prompt_manager/images/reveal';
 // D38 Show in folder: the route's answers, in the maintainer's words.
 const REVEAL_OPENED = 'Opened the folder on this computer.';
@@ -193,6 +194,17 @@ export function inspectorTagChips(record, {filterable}) {
     return chips;
 }
 /** A concept chip whose visible text carries a visually hidden prefix naming what it is. */
+/**
+ * The category chip (#332 D146): the hidden prefix, the category, then `span.chip-source` " · this image", " · prompt"
+ * or " · recipe" (visible, never split), so the chip names where its value came from.
+ */
+export function categoryChip(library) {
+    const scope = CATEGORY_ORIGIN[library.category_scope] ? library.category_scope : 'positive';
+    const chip = prefixedChip(CATEGORY_PREFIX[scope], library.category);
+    chip.append(el('span', ` · ${CATEGORY_ORIGIN[scope]}`, 'chip-source'));
+    return chip;
+}
+
 function prefixedChip(prefix, text) {
     const chip = el('span', undefined, 'chip');
     chip.append(el('span', prefix, 'ca-visually-hidden'), text);
@@ -268,9 +280,7 @@ export function mountFileInspector(container, {api, sender, parentScope, variant
         const badges = el('div', undefined, 'tags'), badge = evidenceBadge(record.prompts);
         if (badge) badges.append(el('span', badge, 'chip blue'));
         // #332: an image's own category shows for any link status; an inherited one only when linked.
-        if (library?.category && (library.category_scope === 'image' || linked)) {
-            badges.append(prefixedChip(CATEGORY_PREFIX[library.category_scope] ?? CATEGORY_PREFIX.positive, library.category));
-        }
+        if (library?.category && (library.category_scope === 'image' || linked)) badges.append(categoryChip(library));
         if (badges.childNodes.length) inner.append(badges);
         const prompts = el('div'); inner.append(prompts);
         const blocks = mountPromptBlocks(prompts, {sender, parentScope:contentScope, includePairAction:false, contextLabel:promptContext, title});

web/js/workspace/images-category.mjs

@@ -1,42 +1,62 @@
-import { countOf, noun } from './plural.mjs';
+import { countOf } from './plural.mjs';
 
 /**
- * The Images selection bar's "Set category" (#249 D8). Images have no category of their own: the listing's category
- * filter matches the linked positive prompt's, so the action sets the category on those prompts.
+ * The Images selection bar's "Set category" (#332, D140; the concept's bulk-category → simpleInput). Apply sets each
+ * selected image's own category (`PUT /prompt_manager/images/category`); "Use prompt category" removes it after a
+ * confirmation (`DELETE`), so the image shows its prompt's category again. It never writes a prompt: prompt
+ * categories are set in the Prompt library editor and on the legacy admin page's "Set Category".
  */
+export const CATEGORY_URL = '/prompt_manager/images/category';
+export const IMAGE_CATEGORIES_URL = '/prompt_manager/images/categories';
 export const CATEGORY_DIALOG = Object.freeze({title:'Categorize selected images', label:'Category', action:'Apply'});
-export const CATEGORY_NONE_LINKED = "None of the selected images is linked to a saved prompt, so there is no prompt category to set.";
+export const USE_PROMPT_CATEGORY = 'Use prompt category';
+export const REMOVE_DIALOG = Object.freeze({title:'Use prompt category', action:'Remove'});
 export const CATEGORY_FAILED = 'Category could not be set. Try again.';
+export const NONE_FOUND = 'None of the selected images could be found. Refresh the images and try again.';
+export const NONE_HAD_OWN = 'None of the selected images had its own category.';
+export const SOURCES_CHANGED = 'The sources changed. Refresh the images and try again.';
 // The server's limit (`validate_category`): the field stops there instead of failing on Apply.
 export const CATEGORY_MAX_LENGTH = 100;
+// One request names at most 500 images (DC2), as "Add tags" does.
+export const MAX_CATEGORY_IMAGES = 500;
 
-function linkedPositive(image) {
-    const link = image?.linked;
-    if (link?.status !== 'linked') return null;
-    return Number.isSafeInteger(link.positive_id) && link.positive_id > 0 ? link.positive_id : null;
+/** The success toast of a set: unchanged files count as set; files no source lists are named after. */
+export function setOutcome(result, category) {
+    const updated = Number(result?.updated) || 0, unchanged = Number(result?.unchanged) || 0;
+    const missing = Number(result?.not_found) || 0;
+    const done = `Category “${category}” set on ${countOf(updated + unchanged, 'image')}.`;
+    return missing ? `${done} ${missing.toLocaleString()} could not be found.` : done;
 }
 
-/** The distinct linked positives of `images`, first-seen order; `skipped` counts the images without one. */
-export function categoryTargets(images) {
-    const ids = new Set();
-    let skipped = 0;
-    for (const image of images) {
-        const id = linkedPositive(image);
-        if (id === null) skipped += 1;
-        else ids.add(id);
+/** The toast of a removal. */
+export function clearOutcome(result) {
+    const cleared = Number(result?.cleared) || 0;
+    return cleared ? `Removed the image category from ${countOf(cleared, 'image')}.` : NONE_HAD_OWN;
+}
+
+/** The confirmation sentence before "Use prompt category" removes the own category of `count` images. */
+export function removeQuestion(count) {
+    const which = count === 1 ? 'the 1 selected image' : `the ${count.toLocaleString()} selected images`;
+    return `Remove the image category from ${which}? Each one then shows its prompt's category, or none if it has no ` +
+        'linked prompt. This cannot be undone.';
+}
+
+/** The toast for a failed write: the coded answers the routes give, else the fixed failure. */
+export function failureMessage(error) {
+    if (error?.code === 'files-not-found') return NONE_FOUND;
+    if (error?.code === 'source-changed') return SOURCES_CHANGED;
+    if (error?.code === 'too-many-images' && typeof error.message === 'string' && error.message) return error.message;
+    return CATEGORY_FAILED;
+}
+
+/** The toolbar's category list: the prompt and recipe categories plus the listed images' own ones, each once. */
+export function mergeCategories(promptCategories, imageCategories) {
+    const merged = [];
+    const seen = new Set();
+    for (const value of [...(promptCategories ?? []), ...(imageCategories ?? [])]) {
+        if (typeof value !== 'string' || !value.trim() || seen.has(value)) continue;
+        seen.add(value);
+        merged.push(value);
     }
-    return {promptIds:[...ids], skipped};
-}
-
-/** The success toast: the prompts changed, then any selected images that had no linked prompt. */
-export function categoryOutcome(prompts, skipped) {
-    const done = `Category set on ${countOf(prompts, 'prompt')}.`;
-    if (!skipped) return done;
-    return `${done} ${countOf(skipped, 'selected image')} had no linked prompt and ${noun(skipped, 'was', 'were')} skipped.`;
-}
-
-/** The prompts the server reports changed; without a count, the number of prompts posted. */
-export function updatedCount(result, posted) {
-    const count = result?.updated_count;
-    return Number.isSafeInteger(count) && count >= 0 ? count : posted;
+    return merged;
 }

web/js/workspace/images-selection.mjs

@@ -2,16 +2,16 @@ import { createButton } from '../shared/toolkit/core.js';
 import { imageKey, toggleSelection, selectionLabel } from './images-state.mjs';
 import { inspectPath, toInspectionRecord } from './inspection-state.mjs';
 import { BUNDLE_FILENAME, metadataBundle, collectImagesMetadata, exportOutcome } from './images-export.mjs';
-import { CATEGORY_DIALOG, CATEGORY_FAILED, CATEGORY_MAX_LENGTH, CATEGORY_NONE_LINKED, categoryOutcome, categoryTargets, updatedCount } from './images-category.mjs';
-import { openInputDialog } from './workspace-dialogs.mjs';
-import { MAX_FILTER_IMAGES, TOO_MANY_MATCHING, openAddTags, openAutoTag } from './images-tagging-bulk.mjs';
+import { CATEGORY_DIALOG, CATEGORY_MAX_LENGTH, CATEGORY_URL, MAX_CATEGORY_IMAGES, REMOVE_DIALOG, USE_PROMPT_CATEGORY,
+    NONE_FOUND, clearOutcome, failureMessage, removeQuestion, setOutcome } from './images-category.mjs';
+import { closeWorkspaceDialog, openContentDialog, openInputDialog } from './workspace-dialogs.mjs';
+import { TOO_MANY, bulkTargets, openAddTags, openAutoTag } from './images-tagging-bulk.mjs';
 import { showWorkspaceToast } from './toast.mjs';
 import { applyKeys, createLongPress, matchingLabel, matchingOffer, offersAllMatching, rangeKeys } from './images-multiselect.mjs';
 
 const CHECKBOX = '.image-overlays input[type="checkbox"]';
 const CHECKBOX_LABEL = '.image-overlays > label';
 const CARD = 'article[data-image-key]';
-const CATEGORY_URL = '/prompt_manager/bulk/category';
 // D135: Export metadata reads every image's inspection in the browser, so it waits for loaded images.
 export const EXPORT_LOADED_ONLY = 'Export metadata reads each image in the browser, so it works on loaded images only.';
 
@@ -29,8 +29,9 @@ function el(tag, text, className) {
  * checkbox from `isChecked`; this module follows the boxes through the grid's `change` events.
  *
  * - `getItems()` is the listing in its order; `checked` restores a saved visit's selection.
- * - `onCategorySet()` reloads the categories and the listing after a successful Set category (the reload clears the
- *   selection through `clear`); focus then moves to `focusFallback` if it was on the hidden action.
+ * - `onCategorySet()` reloads the categories and the listing after a successful Set category or Use prompt category
+ *   (the reload clears the selection through `clear`); focus then moves to `focusFallback` if it was on the hidden
+ *   action. `getCategories()` gives the toolbar's categories, the field's suggestions.
  * - `retain(kept)` drops the checked files a refreshed listing no longer holds (a tag save under a filter, I7).
  * - With the Activity store `activity`, Add tags and Auto-tag selected (D85) follow the count, as the concept's Add tags
  *   leads its actions; `onTagged(keys)` re-reads the files a finished tagging job tagged. The selection stays.
@@ -43,7 +44,7 @@ function el(tag, text, className) {
  * matching", whose actions send that filter to the server.
  */
 export function mountSelectionBar({ scope, api, grid, getItems, focusFallback, onCategorySet, activity = null, onTagged,
-    getListing, getFilter, checked: initial = Object.freeze(new Set()) }) {
+    getListing, getFilter, getCategories, checked: initial = Object.freeze(new Set()) }) {
     let checked = initial;
     let exporting = false, categorizing = false;
     // D135: the range anchor, "all N matching" mode, touch selection mode and a pending Shift+click on a checkbox.
@@ -261,42 +262,65 @@ export function mountSelectionBar({ scope, api, grid, getItems, focusFallback, o
         timer = setTimeout(release, 1000);
     }
     /**
-     * Set category (app.js bulk-category → simpleInput): images have no category, so Apply sets it on the selection's
-     * distinct linked positives, taken when the (modal) dialog opens. With no linked image there is nothing to change:
-     * a toast says so and no dialog opens.
+     * Set category (app.js bulk-category → simpleInput, #332 D140): Apply sets each selected image's own category, linked
+     * or not; "Use prompt category" removes it after a confirmation that states the count. Up to 500 images (DC2): an
+     * explicit selection or "all N matching" (the listing filter, resolved by the server); more opens nothing.
      */
     function openCategory(button) {
         if (categorizing) return;
-        // All matching (D135): the listing's positive count says whether any match is linked; the server resolves.
-        if (allMatching && getListing().total > MAX_FILTER_IMAGES) { showWorkspaceToast(TOO_MANY_MATCHING); return; }
-        const targets = allMatching ? {filter: getFilter()} : categoryTargets(checkedImages());
-        const linked = allMatching ? getListing().positiveCount !== 0 : targets.promptIds.length > 0;
-        if (!linked) { showWorkspaceToast(CATEGORY_NONE_LINKED); return; }
+        const count = allMatching ? getListing().total : checked.size;
+        const targets = allMatching ? {filter: getFilter()} : {items: bulkTargets(checkedImages())};
+        if (count > MAX_CATEGORY_IMAGES) { showWorkspaceToast(TOO_MANY); return; }
+        // Checked files the listing no longer holds (a refresh dropped them): nothing to send.
+        if (!allMatching && !targets.items?.length) { showWorkspaceToast(NONE_FOUND); return; }
         openInputDialog({ scope, trigger: button, title: CATEGORY_DIALOG.title, label: CATEGORY_DIALOG.label,
-            action: CATEGORY_DIALOG.action, maxLength: CATEGORY_MAX_LENGTH, onApply: category => applyCategory(button, targets, category) });
+            action: CATEGORY_DIALOG.action, maxLength: CATEGORY_MAX_LENGTH, suggestions: getCategories(),
+            secondary: { label: USE_PROMPT_CATEGORY, onClick: () => confirmRemove(button, targets, count) },
+            onApply: category => writeCategory(button, () => api.put(CATEGORY_URL, {...targets, category}),
+                result => setOutcome(result, category)) });
+    }
+    /** "Use prompt category": nothing is sent until Remove; Cancel leaves every category as it was. */
+    function confirmRemove(button, targets, count) {
+        const text = el('p', removeQuestion(count));
+        const actions = el('div', undefined, 'dialog-actions');
+        const cancel = createButton('Cancel'), remove = createButton(REMOVE_DIALOG.action, 'danger');
+        actions.append(cancel, remove);
+        cancel.addEventListener('click', () => closeWorkspaceDialog());
+        remove.addEventListener('click', () => {
+            closeWorkspaceDialog();
+            writeCategory(button, () => api.del(CATEGORY_URL, {body: targets}), clearOutcome);
+        });
+        openContentDialog({ scope, trigger: button, title: REMOVE_DIALOG.title, nodes: [text, actions] });
+        cancel.focus();
     }
     /**
      * The write carries no page signal: once sent it finishes even if the page is left (`writing` then tells the page
-     * not to save a visit that predates it). A failure keeps the selection; a success reloads through `onCategorySet`.
+     * not to save a visit that predates it). A failure keeps the selection, except a changed source, which reloads the
+     * listing as a success does (`onCategorySet`).
      */
-    async function applyCategory(button, { promptIds, skipped, filter }, category) {
+    async function writeCategory(button, send, outcome) {
         categorizing = true;
         const release = busy(button);
-        let result = null;
+        let result = null, failure = null;
         try {
-            result = await api.post(CATEGORY_URL, filter ? { images_filter: filter, category } : { prompt_ids: promptIds, category });
-        } catch {
-            // Reported below; the selection stays as it was.
+            result = await send();
+        } catch (error) {
+            failure = error;
         } finally {
             categorizing = false;
             release();
         }
         if (scope.signal.aborted) return;
-        if (!result) { showWorkspaceToast(CATEGORY_FAILED); return; }
-        if (filter && !result.prompt_count) { showWorkspaceToast(CATEGORY_NONE_LINKED); return; }
-        showWorkspaceToast(filter ? categoryOutcome(updatedCount(result, result.prompt_count), Number(result.skipped) || 0)
-            : categoryOutcome(updatedCount(result, promptIds.length), skipped));
         const focused = document.activeElement === button;
+        if (failure !== null || !result) {
+            showWorkspaceToast(failureMessage(failure));
+            // A changed source reloads the listing (clearing the selection); any other failure keeps it.
+            if (failure?.code !== 'source-changed') return;
+            onCategorySet();
+            if (focused) focusFallback.focus({ preventScroll: true });
+            return;
+        }
+        showWorkspaceToast(outcome(result));
         onCategorySet();
         // The reload hides the bar with the focused action in it, as Clear does: focus moves to the page heading.
         if (focused) focusFallback.focus({ preventScroll: true });

web/js/workspace/images.mjs

@@ -16,6 +16,7 @@ import { RESCAN_FAILED, RESCAN_STARTED, openImportDialog, openRefineDialog, resc
 import { openMetadataScan } from './activity-scan.mjs';
 import { showWorkspaceToast } from './toast.mjs';
 import { imagesFilters, imagesViewState } from './saved-views.mjs';
+import { IMAGE_CATEGORIES_URL, mergeCategories } from './images-category.mjs';
 import { displayPreferences } from './preferences.mjs';
 import { onImageTagsSaved } from './image-tagging.mjs';
 import { followImageTagSaves, openCardTagging } from './images-tagging.mjs';
@@ -81,6 +82,17 @@ setFavoriteVisitTarget((key, favorite) => {
 
 // A tag save made while Images is left (Tags › Auto-tag images) may change what a filtered visit lists: it reloads (M6).
 onImageTagsSaved(() => { if (lastVisit?.filters.tags.length || lastVisit?.filters.q) lastVisit = {...lastVisit, stale: true}; });
+// The filter state a Tags & categories Browse hands to the next Images mount (#332 MC10).
+let browseState = null;
+/**
+ * Open Images filtered by `category` only (every other filter at its default), as Browse opens the Library: Tags &
+ * categories' Browse of a category only images use (#332 MC10, D143).
+ */
+export function browseImages({category} = {}) {
+    if (typeof category !== 'string' || !category) throw new TypeError('browseImages needs a category');
+    browseState = {category};
+    window.location.hash = '#/images';
+}
 /** Forget the last Images visit (its listing, scroll and selection): the next visit reads everything again (S9). */
 export function forgetImagesVisit() {
     lastVisit = null;
@@ -113,8 +125,12 @@ export function mountImages(main, api, parentScope, {embedded = false, fetchPage
     scope.cleanup(inspection.subscribe(next => detailInspector?.setState(next)));
     scope.cleanup(() => inspection.dispose());
     scope.cleanup(() => detailInspector?.dispose());
+    // A Tags & categories Browse (browseImages) is handed to this mount once: a fresh Images visit filtered by its
+    // category, which becomes the Images return state like any plain visit (as Browse does for the Library).
+    const handed = !embedded && !favorites && !savedState ? browseState : null;
+    if (!embedded && !favorites) browseState = null;
     const saved = embedded || !savedState ? null : imagesFilters(savedState);
-    const prior = embedded || saved || favorites ? null : lastVisit;
+    const prior = embedded || saved || favorites || handed ? null : lastVisit;
     // A stale visit keeps its filters, layout and size, and lists again instead of restoring (M6).
     const visit = prior?.stale ? null : prior;
     // The layout and size defaults are the Images page's: an embedded gallery (a prompt history's, its dialogs) has no
@@ -126,11 +142,14 @@ export function mountImages(main, api, parentScope, {embedded = false, fetchPage
     let state, geometry = { positions: [], columns: 1, height: 0, maxHeight: 0 }, galleryWidth = 0, optionsRequest, categoryRequest, recovering = false, rescanning = false;
     // Discovered sources (each with its own folders) and every folder, for "Refine this view" and the scope chip.
     let roots = [], folders = [];
+    // The toolbar's current category list (loadCategories), also the Set category suggestions.
+    let categoryNames = [];
     // The open "Refine this view", so a discovery that settles after it opened still lists its sources and folders.
     let refine = null;
     const rendered = new Map();
     const itemIndexes = new Map();
     const filters = { root: 'all', q: '', category: '', tags: [], subfolder: '', media: 'all', sort: 'newest', ...prior?.filters, ...saved,
+        ...(handed ? {category: handed.category} : {}),
         favorites: favorites || saved?.favorites === true };
     filters.tags = [...filters.tags];
     if (!IMAGE_SORT_OPTIONS.some(([value]) => value === filters.sort)) filters.sort = 'newest';
@@ -256,6 +275,8 @@ export function mountImages(main, api, parentScope, {embedded = false, fetchPage
     // selection is kept across appended batches and cleared with the collection; the Library-embedded gallery has none.
     const bar = embedded ? null : mountSelectionBar({scope, api, grid, getItems:() => state?.items ?? [], focusFallback,
         checked:visit?.checked, onCategorySet:() => { loadCategories(); reset(); }, activity, onTagged:keys => refreshTagged(keys),
+        // The Set category field suggests the toolbar's categories (#332 MC13).
+        getCategories:() => categoryNames,
         // #392 "Select all N matching": the listing's total and its filter, as the server lists them.
         getListing:() => ({total:state?.total ?? 0, hasMore:Boolean(state?.hasMore), positiveCount:state?.positiveCount ?? null}),
         // A Source filter carries its root's scope, so a renumbered source is refused (source-changed), not acted on.
@@ -712,24 +733,27 @@ export function mountImages(main, api, parentScope, {embedded = false, fetchPage
             return false;
         }
     }
-    /** The toolbar's categories are the Library's (the linked positive's category, D13). */
+    /**
+     * The toolbar's categories: the Library's (prompts and recipes) and the listed images' own ones (D141, #332), read
+     * in parallel. If only the image list fails, the prompt categories show and the categories alert is raised.
+     */
     async function loadCategories() {
         if (!toolbar) return;
         categoryRequest?.abort();
         const request = new AbortController(); categoryRequest = request;
-        try {
-            const data = await api.get('/prompt_manager/library/options', {signal:request.signal});
-            if (scope.signal.aborted || request !== categoryRequest) return;
-            if (!Array.isArray(data?.categories)) throw new TypeError('Invalid categories');
-            // D36: alphabetical (case-insensitive) whatever order the server sends, a restored category among them.
-            const names = new Set([...data.categories.filter(value => typeof value === 'string' && value), filters.category]);
-            names.delete('');
-            toolbar.setCategories([...names].sort((a, b) => a.localeCompare(b, 'en-US', {sensitivity:'base'}) || (a < b ? -1 : a > b ? 1 : 0)));
-            categoriesFailed = false;
-        } catch {
-            if (scope.signal.aborted || request !== categoryRequest) return;
-            categoriesFailed = true;
-        }
+        const [library, images] = await Promise.allSettled([
+            api.get('/prompt_manager/library/options', {signal:request.signal}),
+            api.get(IMAGE_CATEGORIES_URL, {signal:request.signal}),
+        ]);
+        if (scope.signal.aborted || request !== categoryRequest) return;
+        const valid = result => result.status === 'fulfilled' && Array.isArray(result.value?.categories);
+        if (!valid(library)) { categoriesFailed = true; return; }
+        // D36: alphabetical (case-insensitive) whatever order the server sends, a restored category among them.
+        const names = new Set(mergeCategories(library.value.categories, valid(images) ? images.value.categories : []));
+        if (filters.category) names.add(filters.category);
+        categoryNames = [...names].sort((a, b) => a.localeCompare(b, 'en-US', {sensitivity:'base'}) || (a < b ? -1 : a > b ? 1 : 0));
+        toolbar.setCategories(categoryNames);
+        categoriesFailed = !valid(images);
     }
     scope.cleanup(() => { optionsRequest?.abort(); categoryRequest?.abort(); });
     updateScope();

web/js/workspace/vocabulary-state.mjs

@@ -254,6 +254,23 @@ export function browseFilters(kind, value) {
         : {text: '', category: value, tags: [], sort: 'newest'};
 }
 
+/**
+ * A category row's count (#332 D143): "N positive prompts" when no image holds it as its own category, "N positive
+ * prompts · M images" when both do, "M images" when only images do (stored rows, files on disk or not).
+ */
+export function categoryRowText(category) {
+    const prompts = count(category?.prompt_count) ? category.prompt_count : 0;
+    const images = count(category?.image_count) ? category.image_count : 0;
+    if (!images) return countOf(prompts, 'positive prompt');
+    if (!prompts) return countOf(images, 'image');
+    return `${countOf(prompts, 'positive prompt')} · ${countOf(images, 'image')}`;
+}
+
+/** Where a category's Browse opens: the Library while prompts hold it, else Images (MC10, its Library would be empty). */
+export function categoryBrowseTarget(category) {
+    return count(category?.prompt_count) && category.prompt_count > 0 ? 'library' : 'images';
+}
+
 /** The exact tag's current owner counts, for the delete confirmation. Throws on any unconfirmed shape. */
 export function readTagImpact(api, row, {signal} = {}) {
     requireRow(row);

web/js/workspace/vocabulary.mjs

@@ -9,12 +9,11 @@
  * constraint to the existing Library filters.
  */
 import { createButton } from '../shared/toolkit/core.js';
-import { browseFilters, createVocabularyCommand, createVocabularyStream } from './vocabulary-state.mjs';
-import { countOf } from './plural.mjs';
+import { browseFilters, categoryBrowseTarget, categoryRowText, createVocabularyCommand, createVocabularyStream } from './vocabulary-state.mjs';
 import { browseLibrary, invalidateLibraryAfterWrite } from './library.mjs';
 import { createVocabularyDialog } from './vocabulary-dialog.mjs';
 import { pageHeading } from './heading.mjs';
-import { selectedImage } from './images.mjs';
+import { browseImages, selectedImage } from './images.mjs';
 import { onImageTagsSaved, openImageTagging } from './image-tagging.mjs';
 import { showWorkspaceToast } from './toast.mjs';
 
@@ -64,7 +63,7 @@ function tagRow(tag) {
 }
 
 function categoryRow(category) {
-    const {row, button} = operation(category.value, countOf(category.prompt_count, 'positive prompt'), 'Browse');
+    const {row, button} = operation(category.value, categoryRowText(category), 'Browse');
     button.dataset.action = 'browse';
     return row;
 }
@@ -211,7 +210,10 @@ export function mountVocabulary(main, api, scope) {
     scope.listen(categoryRows, 'click', event => {
         const button = event.target.closest('button[data-action="browse"]');
         const category = button && categories.itemOf(button.closest('.operation'));
-        if (category) browseLibrary(browseFilters('categories', category.value));
+        if (!category) return;
+        // MC10: a category only images hold opens Images filtered by it; the Library would be empty.
+        if (categoryBrowseTarget(category) === 'images') browseImages({category: category.value});
+        else browseLibrary(browseFilters('categories', category.value));
     });
 
     let settled = Promise.resolve();

web/js/workspace/workspace-dialogs.mjs

@@ -316,18 +316,29 @@ export function openCopyFallback(text, { scope, trigger = null, title = 'Copy pr
     area.select();
 }
 
+export const INPUT_SUGGESTIONS_ID = 'workspace-input-suggestions';
+
 /**
  * The concept's `simpleInput`: one labelled `input#action-input` (starting at `value`), then Cancel and the primary
  * `action`. The action reports the trimmed value and closes; an empty value keeps the dialog open on its field, or
  * reports `fallback` when one is given (Save view's "Saved view", a1339). A positive `maxLength` limits the field.
  * `validate(value)` may refuse a value with a message: the dialog then stays open with the typed text and the field
- * reports the message (its native validity) until it is edited.
+ * reports the message (its native validity) until it is edited. `suggestions` (text list) offers values in a
+ * `<datalist>` under the field; `secondary` (`{label, onClick}`) adds a button between Cancel and the action that
+ * closes the dialog and runs `onClick` (#332).
  */
 export function openInputDialog({ scope, title, label, action, value = '', maxLength, fallback, onApply, trigger = null,
-    validate = null }) {
+    validate = null, suggestions = null, secondary = null }) {
     requireScope(scope);
     requireCallbacks({ onApply });
     if (validate !== null) requireCallbacks({ validate });
+    if (suggestions !== null && (!Array.isArray(suggestions) || suggestions.some(item => typeof item !== 'string'))) {
+        throw new TypeError('The input dialog suggestions must be text');
+    }
+    if (secondary !== null && (typeof secondary?.label !== 'string' || !secondary.label)) {
+        throw new TypeError('The input dialog secondary action needs a label');
+    }
+    if (secondary !== null) requireCallbacks({ onClick: secondary.onClick });
     for (const [name, text] of Object.entries({ title, label, action })) {
         if (typeof text !== 'string' || !text) throw new TypeError(`The input dialog needs a ${name}`);
     }
@@ -355,8 +366,25 @@ export function openInputDialog({ scope, title, label, action, value = '', maxLe
         onApply(entered);
     });
     const actions = el('div', undefined, 'dialog-actions');
-    actions.append(cancel, apply);
-    show(title, [field(label, input, 'action-input'), actions], { scope, trigger, focusTarget: input });
+    actions.append(cancel);
+    if (secondary !== null) {
+        // Between Cancel and the primary action; it closes the dialog first (#332 "Use prompt category").
+        const other = createButton(secondary.label);
+        other.addEventListener('click', () => { finish(); secondary.onClick(); });
+        actions.append(other);
+    }
+    actions.append(apply);
+    const nodes = [field(label, input, 'action-input')];
+    if (suggestions?.length) {
+        // Its own id: `datalist#categories` and `#vocabulary-category-options` belong to other pages' fields.
+        const list = el('datalist');
+        list.id = INPUT_SUGGESTIONS_ID;
+        for (const value of suggestions) { const option = el('option'); option.value = value; list.append(option); }
+        input.setAttribute('list', INPUT_SUGGESTIONS_ID);
+        nodes.push(list);
+    }
+    nodes.push(actions);
+    show(title, nodes, { scope, trigger, focusTarget: input });
 }
 
 /**

web/js/workspace/workspace.css

@@ -446,3 +446,7 @@ pre.prompt-text { font: inherit; font-size: 12px; line-height: 1.75; margin-bloc
    outside 1–500 is highlighted as a refused setting is (D92). */
 .toolbar #log-limit { inline-size: 6em; min-height: 36px; font-size: 11px; /* D109 */ }
 .toolbar #log-limit[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; /* D109 */ }
+
+/* #332 D146: the category chip names its origin (" · this image", " · prompt", " · recipe") in muted text that never
+   splits; at 390px the chip may wrap between the category and its origin. */
+.chip .chip-source { color: var(--ca-muted); white-space: nowrap; }