merge: UI polish bundle (#73)

Five small design/layout nits from the UI sweep:

- form.selectPlaceholder "— select —" → "Select…" / "Välj…", matching
  the affordance style of every other placeholder (Filter…, Search…).
- FieldForm in edit mode now explains its locked controls with a muted
  fields.lockedNote caption ("Key and type can't be changed after
  creation.") instead of leaving four silently disabled inputs.
- FieldList rows truncate long labels (min-w-0 on the row button +
  truncate on the label, shrink-0 on the badge and required marker)
  instead of overflowing the 20rem column.
- The sidebar collapse toggle is hidden on narrow viewports (hidden
  md:flex) instead of rendered permanently disabled/grayed — the rail
  is forced collapsed there anyway.
- PageTitle gains text-balance so long titles wrap evenly.

Closes #73

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitea/workflows/ci.yaml

@@ -7,7 +7,9 @@ on:
 
 jobs:
   web:
-    runs-on: ubuntu-latest
+    runs-on: aceofba-cluster
+    container:
+      image: ghcr.io/catthehacker/ubuntu:act-22.04
     defaults:
       run:
         working-directory: web
@@ -18,12 +20,13 @@ jobs:
           version: 11
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: pnpm
           cache-dependency-path: web/pnpm-lock.yaml
       - run: pnpm install --frozen-lockfile
       - run: pnpm typecheck
       - run: pnpm lint
+      - run: pnpm exec playwright install --with-deps chromium
       - run: pnpm test
       - run: pnpm build
       - run: pnpm check:size

CLAUDE.md

@@ -28,3 +28,4 @@ cargo clippy --workspace --all-targets -- -D warnings   # lint before committing
 - **Code navigation:** prefer the insikt LSP server over grep/glob — it resolves macro-generated symbols that text search misses. (insikt runs standalone, not via the gateway MCP.)
 - **Dependencies:** manage via the `cargo-mcp` server rather than editing `Cargo.toml` by hand.
 - **Formatting:** `cargo +nightly fmt` (nightly toolchain required).
+- **Frontend guardrails:** before touching `web/`, read **[web/GUARDRAILS.md](web/GUARDRAILS.md)** — it covers the CI gate (`check:size` 250 KB-gz budget, `check:colors` design-token enforcement) and the test-harness quirks (MSW `onUnhandledRequest: "error"`, the jsdom/storybook vitest split, RTL accessible-name collisions, Storybook nested-router and portal handling, and the `components/ui/` code-style split).

crates/api/src/admin_search.rs

@@ -30,6 +30,7 @@ pub(crate) struct SearchHitView {
     pub brief_description: Option<String>,
     #[schema(value_type = domain::Visibility)]
     pub visibility: String,
+    pub recording_date: Option<String>,
     pub snippet: Option<String>,
 }
 
@@ -103,6 +104,7 @@ pub(crate) async fn search_objects(
                 object_name: h.object_name,
                 brief_description: h.brief_description,
                 visibility: h.visibility,
+                recording_date: h.recording_date,
                 snippet: h.snippet,
             })
             .collect(),

crates/search/src/lib.rs

@@ -34,6 +34,7 @@ pub struct SearchDocument {
     pub brief_description: Option<String>,
     pub current_owner: Option<String>,
     pub recorder: Option<String>,
+    pub recording_date: Option<String>,
     /// Filterable: "draft" | "internal" | "public".
     pub visibility: String,
     /// Flexible field values flattened to searchable text.
@@ -55,6 +56,7 @@ pub struct SearchHit {
     pub object_name: String,
     pub brief_description: Option<String>,
     pub visibility: String,
+    pub recording_date: Option<String>,
     pub snippet: Option<String>,
 }
 
@@ -233,6 +235,7 @@ impl SearchClient {
                     object_name: doc.object_name,
                     brief_description: doc.brief_description,
                     visibility: doc.visibility,
+                    recording_date: doc.recording_date,
                     snippet,
                 }
             })
@@ -367,6 +370,7 @@ pub async fn build_document(
         brief_description: object.brief_description.clone(),
         current_owner: object.current_owner.clone(),
         recorder: object.recorder.clone(),
+        recording_date: object.recording_date.map(|d| d.to_string()),
         visibility: object.visibility.as_str().to_owned(),
         fields_text,
     })

crates/search/tests/search.rs

@@ -19,6 +19,7 @@ fn doc(id: &str, object_name: &str, fields_text: &[&str]) -> SearchDocument {
         brief_description: None,
         current_owner: None,
         recorder: None,
+        recording_date: None,
         visibility: "draft".to_string(),
         fields_text: fields_text.iter().map(|s| s.to_string()).collect(),
     }
@@ -66,6 +67,7 @@ async fn search_objects_returns_hits_with_highlight_filter_and_paging() {
         &["cast bronze with green patina"],
     );
     bronze_a.visibility = "public".to_string();
+    bronze_a.recording_date = Some("1962-04-03".to_string());
     let mut bronze_b = doc(&b.to_string(), "Ceremonial bowl", &["bronze alloy rim"]);
     bronze_b.visibility = "public".to_string();
     let mut bronze_c = doc(&c.to_string(), "Door fitting", &["bronze hinge"]);
@@ -87,6 +89,7 @@ async fn search_objects_returns_hits_with_highlight_filter_and_paging() {
         "snippet must mark the match"
     );
     assert!(snippet.contains(search::HL_POST));
+    assert_eq!(hit.recording_date.as_deref(), Some("1962-04-03"));
 
     let public = client
         .search_objects("bronze", Some("public"), 0, 20)

docs/superpowers/plans/2026-06-07-header-wayfinding.md

@@ -0,0 +1,521 @@
+# App Header Wayfinding Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fill the empty app header with wayfinding — a route-driven breadcrumb (left), a signed-in user menu + compact global search (right) — and render the configured `app_name` for the brand + login.
+
+**Architecture:** A page-driven breadcrumb (a `BreadcrumbProvider` context + `useBreadcrumb(trail)` hook, parallel to #57's `useDocumentTitle`) that each route sets and the header renders. A reusable `ui/menu.tsx` Base UI Menu wrapper powers a `UserMenu` (email/role + Sign out). A `HeaderSearch` input navigates to `/search?q=`. Brand + login read `useConfig().app_name`. No new dependency.
+
+**Tech Stack:** React 19 + TS + pnpm, Tailwind v4, react-router 7, react-i18next, Base UI (`@base-ui/react/menu` — namespace `Menu`), lucide-react, Vitest + RTL + MSW + Storybook. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity; **ui/ files = no-semicolon base-nova style** (match `alert-dialog.tsx`); **app source (shell/, lib/, pages) = double-quote + semicolon**; stories = single-quote + no-semicolon; token classes only (`check:colors`); guard DOM globals.
+
+**Spec:** `docs/superpowers/specs/2026-06-07-header-wayfinding-design.md`
+
+**Key facts (verified):** `useMe()` (`api/queries.ts:30`) → `UserView | null` = `{ email, id, role }`. `useLogout()` (`queries.ts:129`). `useVocabularies()` (`queries.ts:258`) → `VocabularyView[]` with `.key` (the display name). Current logout flow in `app-shell.tsx`: `logout.mutate(undefined, { onSuccess: () => navigate("/login", { replace: true }) })`. Base UI render-prop pattern: see `ui/alert-dialog.tsx` (namespace import, `data-slot`, `cn()`).
+
+**File structure:**
+- `web/src/components/ui/menu.tsx` (new) + `menu.stories.tsx` (new)
+- `web/src/shell/breadcrumb-context.ts` (new), `breadcrumb-provider.tsx` (new), `use-breadcrumb.ts` (new), `breadcrumb.tsx` (new render component)
+- `web/src/shell/user-menu.tsx` (new), `header-search.tsx` (new)
+- Modify: `web/src/shell/app-shell.tsx`, `sidebar.tsx`, `auth/login-page.tsx`, the 9 page/detail components, `i18n/en.json`, `i18n/sv.json`, `shell/app-shell.test.tsx`, `auth/login-page.test.tsx`.
+
+---
+
+# Task 1: Render `app_name` for brand + login; remove dead `app.name` key
+
+**Files:** `web/src/shell/sidebar.tsx`, `web/src/auth/login-page.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/auth/login-page.test.tsx`.
+
+- [ ] **Step 1: Sidebar brand.** In `web/src/shell/sidebar.tsx` add `import { useConfig } from "../config/config-context";`, get `const { app_name } = useConfig();` in the component, and change line ~76:
+  `{!collapsed && <span className="font-semibold">{t("app.name")}</span>}` →
+  `{!collapsed && <span className="font-semibold">{app_name}</span>}`.
+
+- [ ] **Step 2: Login.** In `web/src/auth/login-page.tsx`: add `import { useConfig } from "../config/config-context";`, `const { app_name } = useConfig();`. Change the `<h1>` (line ~38) to `{app_name}` and the title effect (line ~18) to `document.title = app_name;` with deps `[app_name]`. Remove the now-unused `t` for that purpose only if `t` is otherwise unused (check — login uses `t` for field labels/errors, so keep the `useTranslation` import).
+
+- [ ] **Step 3: Remove the dead i18n key.** Delete the `"app": { "name": "..." }` entry from BOTH `web/src/i18n/en.json` and `web/src/i18n/sv.json` (grep first: `grep -rn 'app\.name\|"app"' web/src` — confirm no remaining `t("app.name")` after Steps 1–2). en/sv must stay in parity (remove from both).
+
+- [ ] **Step 4: Update login test if needed.** Read `web/src/auth/login-page.test.tsx`. If it asserts the heading text via `t("app.name")` / "Collection", update it to the config default `"Collection Management System"` (the value `useConfig` returns in tests via `DEFAULTS`). Do NOT weaken; just match the new source.
+
+- [ ] **Step 5: Verify (run vitest once for these files).**
+  `cd web && pnpm vitest run src/auth src/shell/app-shell.test.tsx && pnpm typecheck && pnpm lint`
+  Expected: PASS. The sidebar brand + login now show "Collection Management System" (config default) in tests.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/shell/sidebar.tsx web/src/auth/login-page.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/auth/login-page.test.tsx
+git commit -m "feat(web): render configured app_name for brand + login; drop hardcoded app.name (#54)"
+```
+
+---
+
+# Task 2: `ui/menu.tsx` Base UI Menu wrapper + story (validate by running)
+
+**Files:** `web/src/components/ui/menu.tsx` (new), `web/src/components/ui/menu.stories.tsx` (new).
+
+- [ ] **Step 1: Read the reference** `web/src/components/ui/alert-dialog.tsx` for the exact house pattern (namespace import, `data-slot`, `cn()`, no semicolons, token classes). The Base UI Menu API is `import { Menu } from "@base-ui/react/menu"` then `Menu.Root`, `Menu.Trigger`, `Menu.Portal`, `Menu.Positioner`, `Menu.Popup`, `Menu.Item`, `Menu.Separator`. **This is novel — you MUST validate the exact part tree by running the story (Step 3).**
+
+- [ ] **Step 2: Implement** `web/src/components/ui/menu.tsx` (no-semicolon style). Export: `Menu` (Root re-export with data-slot), `MenuTrigger`, `MenuContent` (composes Portal + Positioner + Popup), `MenuItem`, `MenuSeparator`. Skeleton (adapt class/props to what runs):
+```tsx
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+
+function Menu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="menu" {...props} />
+}
+
+function MenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />
+}
+
+function MenuContent({
+  className,
+  sideOffset = 6,
+  align = "end",
+  ...props
+}: MenuPrimitive.Popup.Props & { sideOffset?: number; align?: MenuPrimitive.Positioner.Props["align"] }) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner sideOffset={sideOffset} align={align} className="z-50">
+        <MenuPrimitive.Popup
+          data-slot="menu-content"
+          className={cn(
+            "min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function MenuItem({ className, ...props }: MenuPrimitive.Item.Props) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="menu-item"
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator }
+```
+IMPORTANT: the exact prop names (`sideOffset`, `align`, `Popup` vs `Popup`+`Positioner` arrangement) MUST be confirmed against the installed `@base-ui/react` types — open `web/node_modules/@base-ui/react/menu/` or check via the editor/types and adjust. Do not guess; if a prop/part errors at typecheck or runtime, fix it to match the real API. No `data-[highlighted]` raw colors — `bg-accent`/`text-accent-foreground` are tokens (OK).
+
+- [ ] **Step 3: Story** `web/src/components/ui/menu.stories.tsx` (single-quote, no-semicolon). Render a `Menu` with a `MenuTrigger` (a Button via `render` or as child) + `MenuContent` with two `MenuItem`s; a `play` test that opens the menu (click the trigger) and asserts an item is visible:
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from './menu'
+import { Button } from './button'
+
+const meta = {
+  component: Menu,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Menu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger render={<Button variant="ghost">Open</Button>} />
+      <MenuContent>
+        <MenuItem>First</MenuItem>
+        <MenuSeparator />
+        <MenuItem>Second</MenuItem>
+      </MenuContent>
+    </Menu>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Open' }))
+    await expect(await canvas.findByText('First')).toBeInTheDocument()
+  },
+}
+```
+If `MenuTrigger render={<Button/>}` isn't the right composition for Base UI Menu, use the pattern that works (e.g. `<MenuTrigger><Button/></MenuTrigger>` or `render` per the alert-dialog usage). The story passing IS the validation.
+
+- [ ] **Step 4: Run the story-as-test + typecheck + lint.**
+  `cd web && pnpm vitest run src/components/ui/menu.stories.tsx && pnpm typecheck && pnpm lint`
+  Expected: PASS. If the menu doesn't open / portal isn't found, fix the part tree until the play test passes (this is the validate-by-running step). The portal renders to document.body — `findByText` on the canvas/body should find it; if the addon's `canvas` is scoped, query `within(document.body)` or use the screen — match how other portal-using stories (drawer/combobox/toast) assert.
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/components/ui/menu.tsx web/src/components/ui/menu.stories.tsx
+git commit -m "feat(web): ui/menu Base UI dropdown wrapper + story (#54)"
+```
+
+---
+
+# Task 3: Breadcrumb infrastructure + mount in header + wire objects-page
+
+**Files:** `web/src/shell/breadcrumb-context.ts` (new), `breadcrumb-provider.tsx` (new), `use-breadcrumb.ts` (new), `breadcrumb.tsx` (new), `web/src/shell/app-shell.tsx` (modify), `web/src/objects/objects-page.tsx` (modify), `web/src/shell/breadcrumb.test.tsx` (new).
+
+- [ ] **Step 1: Context** `web/src/shell/breadcrumb-context.ts`:
+```ts
+import { createContext, useContext } from "react";
+
+export type BreadcrumbItem = { label: string; to?: string };
+
+type BreadcrumbContextValue = {
+  trail: BreadcrumbItem[];
+  setTrail: (trail: BreadcrumbItem[]) => void;
+};
+
+export const BreadcrumbContext = createContext<BreadcrumbContextValue>({
+  trail: [],
+  setTrail: () => {},
+});
+
+export function useBreadcrumbTrail(): BreadcrumbItem[] {
+  return useContext(BreadcrumbContext).trail;
+}
+```
+
+- [ ] **Step 2: Provider** `web/src/shell/breadcrumb-provider.tsx`:
+```tsx
+import { useState, type ReactNode } from "react";
+
+import { BreadcrumbContext, type BreadcrumbItem } from "./breadcrumb-context";
+
+export function BreadcrumbProvider({ children }: { children: ReactNode }) {
+  const [trail, setTrail] = useState<BreadcrumbItem[]>([]);
+  return (
+    <BreadcrumbContext.Provider value={{ trail, setTrail }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+}
+```
+
+- [ ] **Step 3: Hook** `web/src/shell/use-breadcrumb.ts`:
+```ts
+import { useContext, useEffect } from "react";
+
+import { BreadcrumbContext, type BreadcrumbItem } from "./breadcrumb-context";
+
+export function useBreadcrumb(trail: BreadcrumbItem[]): void {
+  const { setTrail } = useContext(BreadcrumbContext);
+  const key = trail.map((i) => `${i.label}${i.to ?? ""}`).join("
");
+  useEffect(() => {
+    setTrail(trail);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, setTrail]);
+}
+```
+NOTE on the disable: the effect intentionally depends on the serialized `key` (stable) instead of the `trail` array identity. **Do NOT add `eslint-disable` if the linter doesn't require it** — first try `[key, setTrail]` with no comment; only if `react-hooks/exhaustive-deps` errors on the missing `trail` dep, prefer refactoring (e.g. build the trail inside the effect from primitive args) over disabling. If a clean form isn't possible, a single scoped disable on that line is acceptable here (the serialization is the correct dep). Use judgment; document the choice in the commit.
+
+- [ ] **Step 4: Render component** `web/src/shell/breadcrumb.tsx`:
+```tsx
+import { Fragment } from "react";
+import { Link } from "react-router-dom";
+
+import { useBreadcrumbTrail } from "./breadcrumb-context";
+
+export function Breadcrumb() {
+  const trail = useBreadcrumbTrail();
+  if (trail.length === 0) return <div className="min-w-0 flex-1" />;
+  return (
+    <nav aria-label="Breadcrumb" className="flex min-w-0 flex-1 items-center gap-1 text-sm">
+      {trail.map((item, i) => {
+        const last = i === trail.length - 1;
+        return (
+          <Fragment key={`${item.label}-${i}`}>
+            {i > 0 && <span className="text-muted-foreground">/</span>}
+            {item.to && !last ? (
+              <Link to={item.to} className="truncate text-muted-foreground hover:text-foreground">
+                {item.label}
+              </Link>
+            ) : (
+              <span className={last ? "truncate text-foreground" : "truncate text-muted-foreground"}>
+                {item.label}
+              </span>
+            )}
+          </Fragment>
+        );
+      })}
+    </nav>
+  );
+}
+```
+(The empty-trail branch renders the `flex-1` spacer so the right-side controls stay right-aligned.)
+
+- [ ] **Step 5: Mount in app-shell.** In `web/src/shell/app-shell.tsx`: wrap the inner `<div className="flex flex-1 flex-col">…</div>` (header+main) — actually wrap the whole returned tree's header+main region — in `<BreadcrumbProvider>`. Simplest: wrap the `return (<div className="flex min-h-screen">…)` content's right column. Concretely, import `BreadcrumbProvider` and `Breadcrumb`, and render `<BreadcrumbProvider>` around the `<div className="flex flex-1 flex-col">` (so both header and `<Outlet/>` are inside it). Replace the header's leading `<div className="flex-1" />` with `<Breadcrumb />` (which itself provides the flex-1). Leave ThemeSwitch/LangSwitch/Sign out as-is for now (Task 5/6 handle the right side).
+
+- [ ] **Step 6: Wire objects-page** (proof of the pipe). In `web/src/objects/objects-page.tsx` add `import { useBreadcrumb } from "../shell/use-breadcrumb";` and call `useBreadcrumb([{ label: t("nav.objects") }]);` near the top (alongside the existing `useDocumentTitle`).
+
+- [ ] **Step 7: Test** `web/src/shell/breadcrumb.test.tsx` — render the provider + a setter component + the Breadcrumb, assert it renders the crumbs and a non-leaf links:
+```tsx
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderApp } from "../test/render";
+import { BreadcrumbProvider } from "./breadcrumb-provider";
+import { Breadcrumb } from "./breadcrumb";
+import { useBreadcrumb } from "./use-breadcrumb";
+
+function Setter() {
+  useBreadcrumb([
+    { label: "Objects", to: "/objects" },
+    { label: "LM-0042" },
+  ]);
+  return null;
+}
+
+test("renders the trail with a link on non-leaf crumbs", async () => {
+  renderApp(
+    <BreadcrumbProvider>
+      <Breadcrumb />
+      <Setter />
+    </BreadcrumbProvider>,
+  );
+  const link = await screen.findByRole("link", { name: "Objects" });
+  expect(link).toHaveAttribute("href", "/objects");
+  expect(screen.getByText("LM-0042")).toBeInTheDocument();
+});
+```
+(`renderApp` provides the Router so `<Link>` works.)
+
+- [ ] **Step 8: Verify (vitest once).**
+  `cd web && pnpm vitest run src/shell src/objects/objects-page.test.tsx && pnpm typecheck && pnpm lint`
+  Expected: PASS (breadcrumb test + existing shell/objects tests). The objects-page test from #57 still passes; optionally assert the header crumb there too.
+
+- [ ] **Step 9: Commit**
+```bash
+git add web/src/shell/breadcrumb-context.ts web/src/shell/breadcrumb-provider.tsx web/src/shell/use-breadcrumb.ts web/src/shell/breadcrumb.tsx web/src/shell/app-shell.tsx web/src/objects/objects-page.tsx web/src/shell/breadcrumb.test.tsx
+git commit -m "feat(web): page-driven breadcrumb context + header render + objects wiring (#54)"
+```
+
+---
+
+# Task 4: Wire `useBreadcrumb` into the remaining routes
+
+**Files (modify):** `web/src/objects/object-new-page.tsx`, `web/src/objects/object-detail.tsx`, `web/src/objects/object-edit-form.tsx`, `web/src/vocab/vocabularies-page.tsx`, `web/src/vocab/vocabulary-terms.tsx`, `web/src/authorities/authorities-page.tsx`, `web/src/fields/fields-page.tsx`, `web/src/search/search-page.tsx`.
+
+For each: add `import { useBreadcrumb } from "../shell/use-breadcrumb";` (verify depth: all these dirs are one level under `src/`, so `../shell/...` is correct) and call it near the top (after `useTranslation`). Reuse existing i18n keys.
+
+- [ ] **Step 1: object-new-page** — `useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: t("objects.new") }]);`
+
+- [ ] **Step 2: object-detail** — in the inner `ObjectDetailLoaded({ object })` component (added in #57), add `useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: object.object_number }]);` (it has `t` via `useTranslation` — add if missing). This covers `/objects/:id` AND `/search/:id` (reused).
+
+- [ ] **Step 3: object-edit-form** — read the file; if it loads the object (has `object_number` + the `:id`), add `useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: object.object_number, to: \`/objects/${id}\` }, { label: t("actions.edit") }]);` in the loaded branch (split like ObjectDetail if it early-returns before data — same rules-of-hooks care). If it does NOT have the object loaded (only the form), use `[{ label: t("nav.objects"), to: "/objects" }, { label: t("actions.edit") }]`. Choose based on what the component actually has; don't add a fetch just for this.
+
+- [ ] **Step 4: vocabularies-page** — `useBreadcrumb([{ label: t("nav.vocabularies") }]);`
+
+- [ ] **Step 5: vocabulary-terms** — it has only `id` (UUID). Add the vocab name via the cached list:
+```tsx
+import { useVocabularies } from "../api/queries";
+// inside, after const { id } = useParams():
+const { data: vocabularies } = useVocabularies();
+const vocabKey = vocabularies?.find((v) => v.id === id)?.key;
+useBreadcrumb(
+  vocabKey
+    ? [{ label: t("nav.vocabularies"), to: "/vocabularies" }, { label: vocabKey }]
+    : [{ label: t("nav.vocabularies"), to: "/vocabularies" }],
+);
+```
+(`useVocabularies()` is cache-shared with the vocabularies list — no extra request. `.key` is the display name, per `vocabulary-list.tsx`.) Place the hook BEFORE the existing `if (!id) return null;` early return.
+
+- [ ] **Step 6: authorities-page** — `useBreadcrumb([{ label: t("nav.authorities") }]);` (place before the `isValidKind` early return, like `useDocumentTitle`).
+
+- [ ] **Step 7: fields-page** — `useBreadcrumb([{ label: t("nav.fields") }]);`
+
+- [ ] **Step 8: search-page** — `useBreadcrumb([{ label: t("nav.search") }]);`
+
+- [ ] **Step 9: Integration test.** Add a test (in `breadcrumb.test.tsx` or `objects-page.test.tsx`) that rendering a nested route shows the breadcrumb in the header. Easiest reliable one: at `/objects/new`, the header shows "Objects" (link → /objects) and "New". Use the existing app-shell/objects render setup (the route must render inside `AppShell` so the header + provider are present). If wiring a full-route render is heavy, assert via the objects route that the header `<nav aria-label="Breadcrumb">` contains the section label. Do not weaken; pick a route that reliably mounts AppShell.
+
+- [ ] **Step 10: Verify (vitest once).**
+  `cd web && pnpm vitest run src/objects src/vocab src/authorities src/fields src/search src/shell && pnpm typecheck && pnpm lint`
+  Expected: PASS. Existing tests unaffected (breadcrumb context default is a no-op when no provider; inside AppShell the provider is present).
+
+- [ ] **Step 11: Commit**
+```bash
+git add web/src/objects/object-new-page.tsx web/src/objects/object-detail.tsx web/src/objects/object-edit-form.tsx web/src/vocab/vocabularies-page.tsx web/src/vocab/vocabulary-terms.tsx web/src/authorities/authorities-page.tsx web/src/fields/fields-page.tsx web/src/search/search-page.tsx web/src/shell/breadcrumb.test.tsx
+git commit -m "feat(web): set breadcrumb trails on all AppShell routes (#54)"
+```
+
+---
+
+# Task 5: `UserMenu` + `HeaderSearch` components
+
+**Files:** `web/src/shell/user-menu.tsx` (new), `web/src/shell/header-search.tsx` (new), `web/src/i18n/en.json`, `web/src/i18n/sv.json`, plus tests `web/src/shell/user-menu.test.tsx` (new), `web/src/shell/header-search.test.tsx` (new).
+
+- [ ] **Step 1: i18n** — add `"headerPlaceholder": "Search…"` to the `search` namespace in `en.json` and `"headerPlaceholder": "Sök…"` in `sv.json` (parity). (Confirm a `search` namespace exists; if not, add it in both.)
+
+- [ ] **Step 2: UserMenu** `web/src/shell/user-menu.tsx`:
+```tsx
+import { CircleUser } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { useLogout, useMe } from "../api/queries";
+import { Button } from "@/components/ui/button";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "@/components/ui/menu";
+
+export function UserMenu() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { data: me } = useMe();
+  const logout = useLogout();
+
+  const onSignOut = () =>
+    logout.mutate(undefined, {
+      onSuccess: () => navigate("/login", { replace: true }),
+    });
+
+  if (!me) return null;
+
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button variant="ghost" size="sm" className="max-w-44">
+            <CircleUser className="h-4 w-4" aria-hidden />
+            <span className="truncate">{me.email}</span>
+          </Button>
+        }
+      />
+      <MenuContent>
+        <div className="px-2 py-1.5">
+          <div className="truncate text-sm font-medium">{me.email}</div>
+          <div className="text-xs text-muted-foreground">{me.role}</div>
+        </div>
+        <MenuSeparator />
+        <MenuItem onClick={onSignOut}>{t("auth.signOut")}</MenuItem>
+      </MenuContent>
+    </Menu>
+  );
+}
+```
+Adjust `MenuTrigger`/`render` to the form Task 2 validated. The `MenuItem` action prop may be `onClick` or Base UI's `onClick`/`render` — match the wrapper. Ensure clicking it triggers `onSignOut`.
+
+- [ ] **Step 3: HeaderSearch** `web/src/shell/header-search.tsx`:
+```tsx
+import { Search } from "lucide-react";
+import { useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { Input } from "@/components/ui/input";
+
+export function HeaderSearch() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [q, setQ] = useState("");
+
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const query = q.trim();
+    if (query) navigate(`/search?q=${encodeURIComponent(query)}`);
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="hidden sm:block">
+      <div className="relative">
+        <Search className="pointer-events-none absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
+        <Input
+          type="search"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder={t("search.headerPlaceholder")}
+          aria-label={t("nav.search")}
+          className="w-48 pl-8 lg:w-64"
+        />
+      </div>
+    </form>
+  );
+}
+```
+
+- [ ] **Step 4: Tests.**
+  - `web/src/shell/user-menu.test.tsx`: render `<UserMenu/>` via `renderApp` with MSW returning a `me` user (reuse `web/src/test/handlers.ts`; if `/api/admin/me` isn't in handlers, add a handler or override per-test). Assert the email shows; open the menu; click Sign out → assert the logout POST fired (MSW) / navigation. Mirror how the existing `app-shell.test.tsx` tested sign-out. If asserting navigation is awkward, assert the logout request was made.
+  - `web/src/shell/header-search.test.tsx`: render `<HeaderSearch/>` via `renderApp`; type "amphora" + submit (Enter); assert navigation to `/search?q=amphora` (use a `MemoryRouter` location probe or render a small route tree that shows the location — mirror existing navigation tests; if none, render with a `*` route echoing `useLocation().search`).
+
+- [ ] **Step 5: Verify (vitest once).**
+  `cd web && pnpm vitest run src/shell/user-menu.test.tsx src/shell/header-search.test.tsx && pnpm typecheck && pnpm lint`
+  Expected: PASS.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/shell/user-menu.tsx web/src/shell/header-search.tsx web/src/shell/user-menu.test.tsx web/src/shell/header-search.test.tsx web/src/i18n/en.json web/src/i18n/sv.json
+git commit -m "feat(web): UserMenu (email/role + sign out) + HeaderSearch components (#54)"
+```
+
+---
+
+# Task 6: Header assembly + app-shell test + final gate
+
+**Files:** `web/src/shell/app-shell.tsx`, `web/src/shell/app-shell.test.tsx`.
+
+- [ ] **Step 1: Assemble the header.** In `web/src/shell/app-shell.tsx`:
+  - Import `HeaderSearch` and `UserMenu`.
+  - Remove the standalone Sign out `<Button>` and the now-unused `onSignOut`/`useLogout`/`navigate`/`t` (the logout flow now lives in `UserMenu`). Keep imports only if still used.
+  - Header becomes:
+```tsx
+<header className="flex items-center gap-4 border-b px-4 py-2">
+  <Breadcrumb />
+  <HeaderSearch />
+  <ThemeSwitch />
+  <LangSwitch />
+  <UserMenu />
+</header>
+```
+  (`<Breadcrumb />` provides the `flex-1`; if both Breadcrumb's flex-1 and a spacer fight, ensure exactly one flex-1 between left and right — Breadcrumb already has `flex-1`, so no extra spacer.) Keep `BreadcrumbProvider` wrapping header+main (from Task 3).
+
+- [ ] **Step 2: Update `app-shell.test.tsx`.** The Sign out button moved into `UserMenu` (a menu). Update the existing sign-out test: it must now open the user menu first, then click Sign out. Ensure `useMe` resolves a user in the test (MSW handler for `/api/admin/me`). If the test renders `AppShell` directly, the header now needs `me` + breadcrumb provider (provider is inside AppShell, fine). Don't weaken; adapt to the menu interaction. Keep the language-switch + nav-links tests.
+
+- [ ] **Step 3: FULL GATE (single test pass — run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+Expected: all green. **Report the `check:size` value** — adding Base UI Menu to the always-loaded shell may increase the largest chunk. If it EXCEEDS 250 KB gz, STOP and report to the controller (do not raise the budget yourself). If under, report the number.
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no codename matches.
+
+- [ ] **Step 5: Manual smoke (recommended).** `pnpm dev`: header shows breadcrumb (left) that updates per route (Objects / New, Objects / {number}, Vocabularies / {key}); the user menu shows email/role + Sign out works; the search box navigates to /search?q=; brand + login show the configured app name; search hidden below sm.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/shell/app-shell.tsx web/src/shell/app-shell.test.tsx
+git commit -m "feat(web): assemble header — breadcrumb, search, user menu; remove standalone sign out (#54)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** app_name brand+login + dead-key removal (T1); ui/menu Base UI wrapper + validate-by-running (T2); breadcrumb context/provider/hook/render + header mount (T3) + all routes wired incl. object_number & vocab .key (T3/T4); UserMenu email/role/sign-out (T5) + HeaderSearch → /search?q= (T5); header assembly removing the standalone Sign out (T6); check:size reported/flagged (T6); tests for breadcrumb, menu story, user-menu, header-search, app-shell update; en/sv parity (one new key, one removed); no new dep. Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the Base UI Menu part tree/props are "confirm against installed types + validate by running" — a deliberate validation step (the primitive is novel), not a TODO; concrete skeleton + reference file given. object-edit-form trail is conditional on what the component already has (explicit branch). No vague steps. ✓
+
+**Type consistency:** `BreadcrumbItem = { label: string; to?: string }` defined in T3, used by the hook (T3), render (T3), and all page trails (T3/T4); `useBreadcrumb(trail)` signature consistent; `useMe()` → `{email, role}` used in UserMenu (T5); `useVocabularies().key` used in T4. Menu exports (`Menu/MenuTrigger/MenuContent/MenuItem/MenuSeparator`) defined in T2, consumed in T5. ✓
+
+## Notes
+- No new dependency (Base UI + lucide already present); one new i18n key (`search.headerPlaceholder`), one removed (`app.name`).
+- The breadcrumb mirrors #57's page-driven title pattern — pages now call both `useDocumentTitle` and `useBreadcrumb`; a future consolidation into one `usePageMeta` is possible but out of scope.
+- `check:size` is the one budget risk (Menu in the shell) — measured and flagged in T6, not silently bumped.
+- Validate-by-running (T2/T4) is mandatory for the novel Base UI Menu, per the established repo pattern (combobox/drawer/tooltip/toast).

docs/superpowers/plans/2026-06-07-object-form-robustness.md

@@ -0,0 +1,372 @@
+# Object Form Robustness Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the object create/edit form safe for long daily sessions — no double-submit, an unsaved-changes guard, one consistent partial-failure recovery, code-aware validation messages, and batch-entry ergonomics.
+
+**Architecture:** Migrate to a React Router data router (enables `useBlocker`) keeping the route tree verbatim. The form is react-hook-form; `isSubmitting` (made real by returning the async `onSubmit` from `handleSubmit`) drives submit-disable, and `useBlocker(isDirty && !isSubmitting)` drives the dirty guard — so save-driven navigation is never falsely blocked and Cancel flows through the same dialog. `onSubmit` returns a success boolean so the form can reset for "Save & create another".
+
+**Tech Stack:** React 19 + TS + pnpm, react-router-dom 7 (data router), react-hook-form, react-i18next, Base UI (alert-dialog), Vitest + RTL + MSW. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity; ui/ no-semicolon, app source double-quote+semicolon; token classes only; guard DOM globals; **run tests exactly once per task.**
+
+**Spec:** `docs/superpowers/specs/2026-06-07-object-form-robustness-design.md`
+
+**Key facts (from the code):**
+- `object-form.tsx`: RHF `useForm<FormShape>`; `submit = handleSubmit((data) => { onSubmit(...) })` — **does not return the promise** (so `isSubmitting` never tracks it; fix in T2). Props: `mode/defaults/onSubmit/onCancel/formError/fieldErrorKey`. `coreField` renders `errors.core?.[key] && t("form.required")` always. `number_of_objects` registered via `coreField(..., { type: "number", required: true })`.
+- `object-new-page.tsx`: `onSubmit` create→setFields; on setFields fail `navigate(\`/objects/${id}/edit\`, { state: { fieldsError, fieldErrorKey } })`; success → `/objects/${id}`.
+- `object-edit-form.tsx`: split into `ObjectEditFormLoaded`; reads `location.state` (`fieldsError`/`fieldErrorKey`) to seed the banner; `onSubmit` update→setFields; on `FieldRejection` sets `fieldErrorKey` + banner, stays.
+- `FieldRejection` carries `field` + `code`. `useCreateObject/useUpdateObject/useSetFields` expose `.isPending` (unused today).
+- Router: `app.tsx` `<BrowserRouter><Routes>` (3 top-level siblings). `renderApp` wraps `ui` in `<MemoryRouter>` with no `<Routes>`.
+
+---
+
+# Task 1: Migrate to a data router (foundation)
+
+**Files:** `web/src/app.tsx`, `web/src/test/render.tsx`. (Possibly `main.tsx` — only if needed; it should NOT need changes since `App` stays the exported component.)
+
+- [ ] **Step 1: `app.tsx` → data router.** Convert the JSX route tree verbatim using `createRoutesFromElements`. Replace the `import { BrowserRouter, Navigate, Route, Routes }` with `import { createBrowserRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from "react-router-dom";`. Keep all the `lazy`/`Suspense` wrappers and every `<Route>` exactly as-is. New shape:
+```tsx
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<RequireAuth />}>
+        <Route element={<AppShell />}>
+          {/* ...all the existing nested <Route> elements, verbatim... */}
+        </Route>
+      </Route>
+      <Route path="*" element={<Navigate to="/objects" replace />} />
+    </>,
+  ),
+);
+
+export function App() {
+  return <RouterProvider router={router} />;
+}
+```
+Do NOT change any path, element, Suspense, or nesting. (The `FormFallback` + lazy imports stay.)
+
+- [ ] **Step 2: `test/render.tsx` → `createMemoryRouter`.** Replace `MemoryRouter` usage:
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+
+import "../i18n";
+
+export function renderApp(ui: ReactElement, { route = "/" } = {}) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const router = createMemoryRouter([{ path: "*", element: ui }], { initialEntries: [route] });
+
+  return render(
+    <QueryClientProvider client={qc}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+```
+This is behavior-preserving: `ui` renders at `route`; tests that include their own `<Routes>` still nest under the `*` route; now a data-router context exists (so `useBlocker` works later).
+
+- [ ] **Step 3: Full suite must stay green (the migration gate). Run ONCE:**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build
+```
+Expected: ALL existing tests pass unchanged. If a test fails because it relied on `MemoryRouter`-specific behavior (e.g., asserting a redirect, or a component that rendered without its own `<Routes>` and needs params), investigate and fix the test's setup to the data-router equivalent WITHOUT weakening it. Report any test that needed adjustment and why. If many break, STOP and report (the migration approach may need a tweak) rather than mass-editing.
+
+- [ ] **Step 4: Commit**
+```bash
+git add web/src/app.tsx web/src/test/render.tsx
+git commit -m "refactor(web): migrate to data router (createBrowserRouter) to enable useBlocker (#46)"
+```
+
+---
+
+# Task 2: Submit-disable + keyboard submit + "Save & create another"
+
+**Files:** `web/src/objects/object-form.tsx`, `web/src/objects/object-new-page.tsx`, `web/src/objects/object-edit-form.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, tests.
+
+- [ ] **Step 1: i18n** — add to the `form` namespace in BOTH locales (parity):
+  - en: `"saving": "Saving…"`, `"createAnother": "Save & create another"`
+  - sv: `"saving": "Sparar…"`, `"createAnother": "Spara & skapa ny"`
+
+- [ ] **Step 2: ObjectForm — make `isSubmitting` real + disable + the new button + Cmd/Ctrl+Enter.**
+  - Change the `onSubmit` prop type to: `onSubmit: (values: ObjectFormValues, opts?: { createAnother?: boolean }) => Promise<boolean> | boolean;`
+  - Destructure `isSubmitting`: `const { register, handleSubmit, formState: { errors, isSubmitting } } = form;`
+  - Add a ref: `const createAnotherRef = useRef(false);`
+  - Rewrite `submit` to RETURN/await the promise (so RHF tracks it) and reset on create-another success:
+```tsx
+const submit = handleSubmit(async (data) => {
+  const fields = pruneFields(data.fields, localizedTextKeys, default_language);
+  const values =
+    mode === "create"
+      ? { core: data.core, visibility: data.visibility, fields }
+      : { core: data.core, fields };
+  const createAnother = createAnotherRef.current;
+  createAnotherRef.current = false;
+  const ok = await onSubmit(values, { createAnother });
+  if (ok && createAnother) {
+    form.reset({ core: EMPTY_CORE, visibility: "draft", fields: {} });
+    document.getElementById("object_number")?.focus();
+  }
+});
+```
+  - Add a keydown handler on the `<form>` for Cmd/Ctrl+Enter:
+    `onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); void submit(); } }}`
+  - Footer buttons:
+```tsx
+<div className="flex gap-2 pt-2">
+  <Button type="submit" disabled={isSubmitting} onClick={() => (createAnotherRef.current = false)}>
+    {isSubmitting ? t("form.saving") : mode === "create" ? t("form.create") : t("form.save")}
+  </Button>
+  {mode === "create" && (
+    <Button
+      type="submit"
+      variant="secondary"
+      disabled={isSubmitting}
+      onClick={() => (createAnotherRef.current = true)}
+    >
+      {t("form.createAnother")}
+    </Button>
+  )}
+  <Button type="button" variant="ghost" disabled={isSubmitting} onClick={onCancel}>
+    {t("form.cancel")}
+  </Button>
+</div>
+```
+  (Add `useRef` to the React import. `variant="secondary"` — confirm it exists in `ui/button.tsx`; if not, use `variant="outline"` or default — check.)
+
+- [ ] **Step 3: Update pages' `onSubmit` to return `boolean` + honor `createAnother`.**
+  - `object-new-page.tsx`:
+```tsx
+const onSubmit = async (values: ObjectFormValues, opts?: { createAnother?: boolean }): Promise<boolean> => {
+  setError(null);
+  let id: string;
+  try {
+    const created = await create.mutateAsync({ ...values.core, visibility: values.visibility ?? "draft" });
+    id = created.id;
+  } catch {
+    setError(t("form.rejected"));
+    return false;
+  }
+  if (Object.keys(values.fields).length > 0) {
+    try {
+      await setFields.mutateAsync({ id, fields: values.fields });
+    } catch (e) {
+      const fieldErrorKey = e instanceof FieldRejection ? e.field : undefined;
+      const fieldErrorCode = e instanceof FieldRejection ? e.code : undefined;
+      navigate(`/objects/${id}/edit`, { state: { created: true, fieldErrorKey, fieldErrorCode } });
+      return true;
+    }
+  }
+  if (opts?.createAnother) return true; // success; ObjectForm resets, stays on /objects/new
+  navigate(`/objects/${id}`);
+  return true;
+};
+```
+  - `object-edit-form.tsx` `ObjectEditFormLoaded.onSubmit`: return `false` in the catch, `true` after the success navigate. (Edit mode never passes `createAnother`.)
+
+- [ ] **Step 4: Tests.** Extend `object-form.test.tsx` / `object-new-page.test.tsx`:
+  - During an in-flight create (MSW delayed handler, or assert the button is `disabled` + shows "Saving…" synchronously after submit), the create mutation is called exactly once on a double-click. (If timing is hard, at minimum assert the button becomes `disabled` while submitting and reads `t("form.saving")`.)
+  - "Save & create another": click it in create mode with a delayed/immediate success handler → after success the form is reset (e.g., `object_number` input is empty) and the location is still `/objects/new` (no navigation to detail). Use the renderApp data-router harness; assert location via a probe or that the form is still present + cleared.
+  - Cmd/Ctrl+Enter triggers submit (fireEvent.keyDown with `{ key: "Enter", metaKey: true }` → the create mutation fires).
+
+- [ ] **Step 5: Verify (vitest ONCE).** `cd web && pnpm vitest run src/objects && pnpm typecheck && pnpm lint`. Expected: PASS.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/objects/object-form.tsx web/src/objects/object-new-page.tsx web/src/objects/object-edit-form.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/objects/object-form.test.tsx web/src/objects/object-new-page.test.tsx
+git commit -m "feat(web): disable submit while saving + Save & create another + Cmd/Ctrl+Enter (#46)"
+```
+
+---
+
+# Task 3: Validation messages (server code echo, type-specific core errors, min count)
+
+**Files:** `web/src/objects/object-form.tsx`, `web/src/objects/object-new-page.tsx`, `web/src/objects/object-edit-form.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, tests.
+
+- [ ] **Step 1: i18n** — add to the `form` namespace (both locales, parity):
+  - en: `"minCount": "Must be at least 1"`, and a nested `"fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }`.
+  - sv: `"minCount": "Måste vara minst 1"`, `"fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }`.
+
+- [ ] **Step 2: ObjectForm — carry the rejection `code` + type-specific messages.**
+  - Add prop `fieldErrorCode?: string | null;` (alongside `fieldErrorKey`).
+  - The highlight effect picks the code-specific message:
+```tsx
+useEffect(() => {
+  if (fieldErrorKey) {
+    const codeKey = fieldErrorCode ? `form.fieldError.${fieldErrorCode}` : "";
+    const message =
+      fieldErrorCode && t(codeKey) !== codeKey ? t(codeKey) : t("form.fieldRejected", { field: fieldErrorKey });
+    form.setError(`fields.${fieldErrorKey}` as never, { type: "server", message });
+  }
+}, [fieldErrorKey, fieldErrorCode, form, t]);
+```
+  - Core error render → message-aware (so `min` shows minCount, required falls back):
+```tsx
+{errors.core?.[key] && (
+  <p role="alert" className="text-xs text-destructive">
+    {errors.core[key]?.message || t("form.required")}
+  </p>
+)}
+```
+  - `number_of_objects` min: in `coreField`, when registering a number with required, also pass `min`. Simplest: special-case the count field by giving `coreField` an optional `min` and rendering. Concretely change the `number_of_objects` registration to include `min: { value: 1, message: t("form.minCount") }`. Implement by extending `coreField`'s `opts` with `min?: number` and, when set, register `{ valueAsNumber: true, required, min: { value: opts.min, message: t("form.minCount") } }`; call `coreField("number_of_objects", "count", { type: "number", required: true, min: 1 })`.
+
+- [ ] **Step 3: Pass the code through the pages.**
+  - `object-edit-form.tsx`: in the `FieldRejection` catch, also `setFieldErrorCode(e.code)` (add a `fieldErrorCode` state) and pass `fieldErrorCode` to `<ObjectForm>`. Also seed it from `location.state.fieldErrorCode` (set by the create teleport). The banner stays `form.fieldRejected` (or upgrade to code-specific too — optional; the field highlight is the key UX).
+  - `<ObjectForm ... fieldErrorKey={fieldErrorKey} fieldErrorCode={fieldErrorCode} />`.
+
+- [ ] **Step 4: Tests.** Extend `object-edit-form.test.tsx`:
+  - A `setFields` 422 with `{ field: "...", code: "type_mismatch" }` → the field shows the `form.fieldError.type_mismatch` message (assert the text).
+  - `number_of_objects` set to `0` and submit → the `form.minCount` message shows and NO create/update mutation is called (client-side block). (In `object-form.test.tsx` or a page test.)
+
+- [ ] **Step 5: Verify (vitest ONCE).** `cd web && pnpm vitest run src/objects && pnpm typecheck && pnpm lint`. PASS.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/objects/object-form.tsx web/src/objects/object-edit-form.tsx web/src/objects/object-new-page.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/objects/object-edit-form.test.tsx web/src/objects/object-form.test.tsx
+git commit -m "feat(web): code-aware field errors + min count validation (#46)"
+```
+
+---
+
+# Task 4: Unsaved-changes guard
+
+**Files:** `web/src/lib/use-unsaved-changes.tsx` (new), `web/src/objects/object-form.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/lib/use-unsaved-changes.test.tsx` (new) or extend object-form tests.
+
+- [ ] **Step 1: i18n** — add a `form.unsaved` namespace (both locales, parity):
+  - en: `"unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" }`
+  - sv: `"unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" }`
+
+- [ ] **Step 2: The hook + dialog** `web/src/lib/use-unsaved-changes.tsx`:
+```tsx
+import { useEffect } from "react";
+import { useBlocker } from "react-router-dom";
+
+export function useUnsavedChanges(active: boolean) {
+  const blocker = useBlocker(active);
+
+  useEffect(() => {
+    if (!active) return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [active]);
+
+  return blocker;
+}
+```
+And an `UnsavedChangesDialog` component (same file or a sibling) using `ui/alert-dialog`, driven by the blocker:
+```tsx
+import { useTranslation } from "react-i18next";
+import type { Blocker } from "react-router-dom";
+import {
+  AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+
+export function UnsavedChangesDialog({ blocker }: { blocker: Blocker }) {
+  const { t } = useTranslation();
+  const open = blocker.state === "blocked";
+  return (
+    <AlertDialog open={open} onOpenChange={(o) => { if (!o) blocker.reset?.(); }}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("form.unsaved.title")}</AlertDialogTitle>
+          <AlertDialogDescription>{t("form.unsaved.body")}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={() => blocker.reset?.()}>{t("form.unsaved.stay")}</AlertDialogCancel>
+          <AlertDialogAction onClick={() => blocker.proceed?.()}>{t("form.unsaved.leave")}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialog>
+    </AlertDialog>
+  );
+}
+```
+IMPORTANT: open `web/src/components/ui/alert-dialog.tsx` and match the EXACT exported part names/props (`AlertDialog` may take `open`/`onOpenChange`, or be trigger-driven — adapt to the real API; the delete dialogs in `web/src/objects/delete-object-dialog.tsx` / `components/delete-confirm-dialog.tsx` show the controlled usage to mirror). The dialog must be openable WITHOUT a trigger (controlled by `open`). Validate by running the test.
+
+- [ ] **Step 3: Wire into ObjectForm.**
+  - `const isDirty = form.formState.isDirty;`
+  - `const blocker = useUnsavedChanges(isDirty && !isSubmitting);`
+  - Render `<UnsavedChangesDialog blocker={blocker} />` inside the form's container.
+  - **Cancel** now just calls `onCancel` (which navigates) — the blocker intercepts it and shows the dialog automatically when dirty. (No separate confirm needed; confirm this in the test.)
+
+- [ ] **Step 4: Tests** `web/src/lib/use-unsaved-changes.test.tsx` (and/or extend object-form):
+  - Render a small component (or the ObjectForm) under the `renderApp` data-router harness with two routes; with a dirty form, click a `<Link>`/Cancel → the dialog appears; "Keep editing" stays (location unchanged), "Discard" proceeds (location changes).
+  - `beforeunload`: with `active=true`, a `beforeunload` event is registered (spy on `window.addEventListener`) and not when inactive.
+  - A clean form navigates without the dialog.
+  - Saving (isSubmitting true) does NOT block — simulate or assert via the `isDirty && !isSubmitting` condition (e.g., the blocker arg is false during submit).
+
+- [ ] **Step 5: Verify (vitest ONCE).** `cd web && pnpm vitest run src/objects src/lib && pnpm typecheck && pnpm lint`. PASS.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/lib/use-unsaved-changes.tsx web/src/objects/object-form.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/lib/use-unsaved-changes.test.tsx
+git commit -m "feat(web): unsaved-changes guard (useBlocker + beforeunload) on the object form (#46)"
+```
+
+---
+
+# Task 5: Partial-failure unification + final gate
+
+**Files:** `web/src/objects/object-edit-form.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, tests.
+
+(Task 2 already changed the create page to pass `state: { created: true, fieldErrorKey, fieldErrorCode }`. This task handles the edit page's reading of it + messaging.)
+
+- [ ] **Step 1: i18n** — add (both locales, parity): en `"createdButFieldRejected": "Object created, but a field was rejected — fix it below."`; sv `"createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan."`.
+
+- [ ] **Step 2: Edit page reads `created`.** In `ObjectEditFormLoaded`, broaden the `locationState` type to `{ created?: boolean; fieldsError?: boolean; fieldErrorKey?: string; fieldErrorCode?: string } | null` and seed the banner:
+```tsx
+const [error, setError] = useState<string | null>(() => {
+  if (locationState?.created) return t("form.createdButFieldRejected");
+  if (locationState?.fieldErrorKey) return t("form.fieldRejected", { field: locationState.fieldErrorKey });
+  if (locationState?.fieldsError) return t("form.rejected");
+  return null;
+});
+const [fieldErrorKey, setFieldErrorKey] = useState<string | null>(locationState?.fieldErrorKey ?? null);
+const [fieldErrorCode, setFieldErrorCode] = useState<string | null>(locationState?.fieldErrorCode ?? null);
+```
+  (Keep backward compatibility: the create page from T2 sends `created`; older `fieldsError` branch can remain or be removed since T2 replaced it — remove `fieldsError` seeding if no longer sent.)
+
+- [ ] **Step 3: Tests.** Update `object-new-page.test.tsx`: the create→setFields-422 path now navigates to `/objects/:id/edit` and the edit form shows the `form.createdButFieldRejected` banner + highlights the field. (The existing partial-failure test asserted the old `fieldsError` flow — update it to the new `created` message, not weakened.)
+
+- [ ] **Step 4: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk, check:colors line.
+
+- [ ] **Step 5: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 6: Manual smoke (recommended).** `pnpm dev`: create with a bad field → lands on edit with "Object created, but a field was rejected"; submit disables + "Saving…"; edit a field then try to leave (sidebar/Cancel/reload) → guard prompts; "Save & create another" resets; count 0 blocked client-side; Cmd+Enter submits.
+
+- [ ] **Step 7: Commit**
+```bash
+git add web/src/objects/object-edit-form.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/objects/object-new-page.test.tsx
+git commit -m "feat(web): unify create/edit partial-failure recovery with 'created' banner (#46)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** data-router migration + harness, full suite green (T1); submit-disable via real `isSubmitting` + Cmd/Ctrl+Enter + Save-&-create-another (T2); code-aware field errors + type-specific core errors + min count (T3); unsaved-changes guard via `useBlocker(isDirty && !isSubmitting)` + beforeunload + dialog, Cancel through the blocker (T4); partial-failure unified to the edit route with a "created" banner (T5, building on T2's create-side state). All acceptance criteria 1–7 mapped. ✓
+
+**Placeholder scan:** the alert-dialog wiring says "match the exact exported parts" with the delete dialogs named as the reference — a concrete adapt-to-real-API step, not a TODO. `variant="secondary"` flagged to verify against button.tsx. No vague steps; all code blocks complete. ✓
+
+**Type/flow consistency:** `onSubmit` returns `Promise<boolean>|boolean` (T2) — both pages updated to return booleans; `createAnotherRef` gates the reset; `fieldErrorCode` prop added (T3) and threaded from both the edit catch and the create teleport state (T2/T5); the guard condition `isDirty && !isSubmitting` ensures save/teleport navigation (still submitting) is never blocked — consistent across T2/T4/T5. ✓
+
+## Notes
+- The single biggest correctness lever: `handleSubmit` must RETURN/await `onSubmit` so `isSubmitting` is real (T2) — both the submit-disable AND the guard's non-blocking-while-saving depend on it.
+- `useBlocker(boolean)` (RR v7) blocks all nav when true; Cancel and sidebar links both flow through the one dialog. Save-driven nav happens while `isSubmitting` → condition false → not blocked.
+- No new dependency. New i18n keys: `form.saving/createAnother/minCount/createdButFieldRejected` + `form.fieldError.*` + `form.unsaved.*` (en+sv parity). No keys removed.

docs/superpowers/plans/2026-06-08-a11y-defect-bundle.md

@@ -0,0 +1,256 @@
+# Accessibility Defect Bundle — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fix five remaining a11y defects — label-id collision, unnamed drawer/breadcrumb, untranslated combobox strings (Task 1); invalid table-row semantics, missing pill focus ring, unannounced table load/error states (Task 2).
+
+**Architecture:** Task 1 is a labelling/i18n cluster across four small components plus 5 new i18n keys. Task 2 reworks the objects-table data rows to use a real `<Link>` with `aria-current`, restores `focusRing` on the filter pills, and adds `aria-busy` + a live `<caption>` + `role="alert"` for load/error announcement.
+
+**Tech Stack:** React 19 + TS + pnpm, React Router 7, Base UI, react-i18next, Vitest 4 (jsdom) + RTL + MSW.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity; app source double-quote+semicolon; `components/ui/*` untouched; token classes only (`focusRing` is token-based). Run a single test pass.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-a11y-defect-bundle-design.md`
+
+**Key facts:**
+- Existing i18n keys: `common.noMatches` ("No matches"), `common.loading` ("Loading"), `nav.objects`, `objects.loadError` ("Could not load objects"), `actions.closeDetail`. NEW keys to add (en/sv): `common.clear`, `common.open`, `nav.breadcrumb`, `objects.detailTitle`, `objects.tableLabel`.
+- `lib/focus-ring.ts` exports `focusRing` (a class string). Imported elsewhere as `import { focusRing } from "../lib/focus-ring";`.
+- `components/label-editor.test.tsx`, `objects/options-combobox.test.tsx`, `shell/breadcrumb.test.tsx` exist. `objects/object-detail-drawer.test.tsx` does NOT.
+- `objects/objects-table.test.tsx`: imports `renderApp`, `objectsPage` (from `../test/fixtures`), `ObjectsTable`, `ObjectDetail`, `i18n`, `Routes`/`Route`. Its `tree()` mounts `ObjectsTable` at `/objects` and `ObjectDetail` at `/objects/:id` as siblings. Fixtures: `objectsPage.items[0]` = `{ object_number: "LM-0042", object_name: "Amphora", … }`, `[1]` = `"LM-0043"`/`"Bronze fibula"`. The "clicking a row deep-links…" test clicks the **name** ("Amphora"), which stays plain text — it survives unchanged.
+- `combobox.tsx` wrapper: `ComboboxClear`/`ComboboxTrigger` pass `aria-label` through to Base UI; `ComboboxEmpty` renders children. Do NOT modify `components/ui/combobox.tsx`.
+- `object-detail-drawer.tsx`: `DrawerContent` spreads `...props` onto the Base UI `Drawer.Popup`, so `aria-label` passes through.
+
+---
+
+# Task 1: Labelling + i18n cluster (label-editor, combobox, breadcrumb, drawer)
+
+**Files:** Modify `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/components/label-editor.tsx`, `web/src/objects/options-combobox.tsx`, `web/src/shell/breadcrumb.tsx`, `web/src/objects/object-detail-drawer.tsx`; tests `web/src/components/label-editor.test.tsx`, `web/src/objects/options-combobox.test.tsx`, `web/src/shell/breadcrumb.test.tsx`.
+
+- [ ] **Step 1: Add the 5 i18n keys (both locales, parity).** In `web/src/i18n/en.json`, add to the relevant blocks: under `common` → `"clear": "Clear", "open": "Open"`; under `nav` → `"breadcrumb": "Breadcrumb"`; under `objects` → `"detailTitle": "Object detail", "tableLabel": "Objects"`. In `web/src/i18n/sv.json`, the same keys: `common.clear` = `"Rensa"`, `common.open` = `"Öppna"`, `nav.breadcrumb` = `"Brödsmulor"`, `objects.detailTitle` = `"Objektdetalj"`, `objects.tableLabel` = `"Objekt"`. (Valid JSON; mind commas. Place each new key beside its existing siblings in the same nested object.)
+
+- [ ] **Step 2: `label-editor.tsx` — `useId()`.** Add `useId` to the React import (`import { useId } from "react";`). Inside the component, add `const inputId = useId();` and change the two lines to:
+```tsx
+      <Label htmlFor={inputId}>{t("labels.label")}</Label>
+      <Input id={inputId} value={current} onChange={(e) => set(e.target.value)} />
+```
+
+- [ ] **Step 3: `options-combobox.tsx` — translate.** Add `import { useTranslation } from "react-i18next";` and `const { t } = useTranslation();` at the top of the component body. Change:
+```tsx
+        <ComboboxClear aria-label={t("common.clear")} />
+        <ComboboxTrigger aria-label={t("common.open")} />
+```
+and
+```tsx
+        <ComboboxEmpty>{t("common.noMatches")}</ComboboxEmpty>
+```
+
+- [ ] **Step 4: `breadcrumb.tsx` — translate the nav label.** Add `import { useTranslation } from "react-i18next";` and `const { t } = useTranslation();` inside `Breadcrumb` (before the `if (trail.length === 0)` guard). Change `<nav aria-label="Breadcrumb" …>` to `<nav aria-label={t("nav.breadcrumb")} …>`.
+
+- [ ] **Step 5: `object-detail-drawer.tsx` — name the dialog.** Change `<DrawerContent>` to `<DrawerContent aria-label={t("objects.detailTitle")}>` (the `t` from `useTranslation` is already in scope in this file).
+
+- [ ] **Step 6: Tests.**
+  - **`label-editor.test.tsx`** — append (reuse the file's existing render harness / providers, e.g. `renderApp` or whatever wraps `useConfig`; read the top of the file first):
+```tsx
+test("each LabelEditor instance gets a unique input id", () => {
+  renderApp(
+    <>
+      <LabelEditor value={[]} onChange={() => {}} />
+      <LabelEditor value={[]} onChange={() => {}} />
+    </>,
+  );
+  const inputs = screen.getAllByLabelText(/label/i);
+  expect(inputs).toHaveLength(2);
+  expect(inputs[0].id).not.toBe("");
+  expect(inputs[0].id).not.toBe(inputs[1].id);
+});
+```
+(If `LabelEditor` needs config context that `renderApp` doesn't provide, mirror the wrapper the existing tests in this file use. Keep existing tests green.)
+  - **`options-combobox.test.tsx`** — append (mirror the file's existing render of `OptionsCombobox`):
+```tsx
+test("the clear and open controls and empty text are translated", async () => {
+  // render OptionsCombobox with empty options so the empty state is reachable,
+  // using the same harness the other tests in this file use.
+  // …render…
+  expect(screen.getByRole("button", { name: /open/i })).toBeInTheDocument();
+});
+```
+(Adapt to the existing test's setup. The key assertion: the open/clear controls have accessible names from `t()`. If the existing test already opens the popup, also assert `screen.getByText("No matches")`.)
+  - **`breadcrumb.test.tsx`** — append:
+```tsx
+test("the breadcrumb nav has a translated accessible name", () => {
+  // render Breadcrumb with a non-empty trail using the file's existing harness
+  // (it needs a BreadcrumbContext provider with a trail).
+  expect(screen.getByRole("navigation", { name: /breadcrumb/i })).toBeInTheDocument();
+});
+```
+(Mirror the existing breadcrumb test's provider setup; if the file already renders a trail, just add the `getByRole("navigation", { name })` assertion.)
+
+- [ ] **Step 7: Verify (vitest ONCE), typecheck, lint:**
+```bash
+cd web && pnpm vitest run src/components/label-editor.test.tsx src/objects/options-combobox.test.tsx src/shell/breadcrumb.test.tsx src/i18n && pnpm typecheck && pnpm lint
+```
+Expected: green (incl. i18n parity covering the 5 new keys). Keep all existing tests in those files green.
+
+- [ ] **Step 8: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/i18n/en.json web/src/i18n/sv.json web/src/components/label-editor.tsx web/src/objects/options-combobox.tsx web/src/shell/breadcrumb.tsx web/src/objects/object-detail-drawer.tsx web/src/components/label-editor.test.tsx web/src/objects/options-combobox.test.tsx web/src/shell/breadcrumb.test.tsx
+git commit -m "fix(web): a11y labelling — useId, named drawer/breadcrumb, translated combobox (#62)"
+```
+
+---
+
+# Task 2: objects-table — real-link rows, pill focus ring, announced load/error
+
+**Files:** Modify `web/src/objects/objects-table.tsx`, `web/src/objects/objects-table.test.tsx`.
+
+- [ ] **Step 1: Import `focusRing`.** Add `import { focusRing } from "../lib/focus-ring";` to `objects-table.tsx`. (`Link` is already imported from `react-router-dom`.)
+
+- [ ] **Step 2: Filter pills — add the focus ring.** In the `toolbar`, change the pill `className` to:
+```tsx
+              className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`}
+```
+
+- [ ] **Step 3: Rows — real link + `aria-current`, plain `<tr>`.** Replace the data-row `<tr>` (the `role="link"` one) with:
+```tsx
+            <tr
+              key={object.id}
+              onClick={() => navigate(`/objects/${object.id}?${params}`)}
+              className={`cursor-pointer border-b text-sm ${
+                selected ? "bg-primary/10" : "hover:bg-muted"
+              }`}
+            >
+              <td className="px-3 py-2 text-muted-foreground">
+                <Link
+                  to={`/objects/${object.id}?${params}`}
+                  aria-current={selected ? "page" : undefined}
+                  onClick={(event) => event.stopPropagation()}
+                  className={`${focusRing} rounded-sm hover:underline`}
+                >
+                  {object.object_number}
+                </Link>
+              </td>
+              <td className="px-3 py-2 font-medium">{object.object_name}</td>
+              <td className="px-3 py-2">
+                <VisibilityBadge visibility={object.visibility} />
+              </td>
+              <td className="px-3 py-2 text-muted-foreground">{object.current_location ?? "—"}</td>
+              <td className="px-3 py-2 text-right tabular-nums">{object.number_of_objects}</td>
+              <td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>
+            </tr>
+```
+(Drops `role="link"`, `tabIndex={0}`, `aria-selected`, and `onKeyDown` from the `<tr>`; the object-number cell now holds the `<Link>`. Every other cell is unchanged.)
+
+- [ ] **Step 4: Error cell — `role="alert"`.** In the `isError` branch, change the error `<td>` to:
+```tsx
+          <td colSpan={6} role="alert" className="px-3 py-6 text-center text-sm text-destructive">
+            {t("objects.loadError")}
+          </td>
+```
+
+- [ ] **Step 5: Table — `aria-busy` + live caption.** Change the `<table>` element and add the caption as its first child:
+```tsx
+        <table className="w-full border-collapse" aria-busy={isLoading || undefined}>
+          <caption className="sr-only" aria-live="polite">
+            {isLoading ? t("common.loading") : t("objects.tableLabel")}
+          </caption>
+          {columns}
+          {body}
+        </table>
+```
+
+- [ ] **Step 6: Tests — extend `objects-table.test.tsx`.** Add a nested-route helper (so `ObjectsTable` is mounted WITH a `:id` param, mirroring the real `ObjectsPage` nesting) and the new assertions. Add near the existing `tree()`:
+```tsx
+function nestedTree() {
+  return (
+    <Routes>
+      <Route
+        path="/objects"
+        element={
+          <>
+            <ObjectsTable />
+            <Outlet />
+          </>
+        }
+      >
+        <Route path=":id" element={<div>detail pane</div>} />
+      </Route>
+    </Routes>
+  );
+}
+```
+(Add `Outlet` to the `react-router-dom` import.) Then add these tests:
+```tsx
+test("the object number cell is a real link", async () => {
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByRole("link", { name: "LM-0042" })).toBeInTheDocument();
+});
+
+test("the selected row's link is marked aria-current=page", async () => {
+  // objectsPage.items[0] has object_number "LM-0042"; read its id from the fixture.
+  const first = objectsPage.items[0];
+  renderApp(nestedTree(), { route: `/objects/${first.id}` });
+  const link = await screen.findByRole("link", { name: first.object_number });
+  expect(link).toHaveAttribute("aria-current", "page");
+  // a different row's link is not current
+  const other = await screen.findByRole("link", { name: objectsPage.items[1].object_number });
+  expect(other).not.toHaveAttribute("aria-current");
+});
+
+test("the table is marked aria-busy while loading", async () => {
+  server.use(
+    http.get("/api/admin/objects", async () => {
+      await delay(50);
+      return HttpResponse.json(objectsPage);
+    }),
+  );
+  renderApp(tree(), { route: "/objects" });
+  expect(screen.getByRole("table")).toHaveAttribute("aria-busy", "true");
+  await screen.findByRole("link", { name: "LM-0042" });
+  expect(screen.getByRole("table")).not.toHaveAttribute("aria-busy");
+});
+
+test("a failed objects fetch is announced via role=alert", async () => {
+  server.use(http.get("/api/admin/objects", () => new HttpResponse(null, { status: 500 })));
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByRole("alert")).toHaveTextContent(/could not load/i);
+});
+```
+(Add `delay` to the `msw` import: `import { delay, http, HttpResponse } from "msw";`. The existing "clicking a row deep-links…" test clicks "Amphora" — the name cell, still plain text + whole-row `onClick` — so it stays green. If `objectsPage.items[0]` doesn't carry an `id`, read `src/test/fixtures.ts` to use the correct id field.)
+
+- [ ] **Step 7: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (gz), and the `check:colors` line.
+
+- [ ] **Step 8: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 9: Manual smoke (recommended).** `pnpm dev`: tab into the objects table — the visibility pills show a focus ring; Tab reaches each row's object-number link (Enter opens; Cmd/middle-click opens a new tab); the open object's row link is `aria-current`; a slow/failed load is announced.
+
+- [ ] **Step 10: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/objects/objects-table.tsx web/src/objects/objects-table.test.tsx
+git commit -m "fix(web): objects-table a11y — real-link rows, pill focus ring, announced load/error (#62)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 LabelEditor useId (T1 S2); AC2 row real-link + aria-current + plain tr + pill focusRing (T2 S2-S3); AC3 aria-busy + live caption + role=alert (T2 S4-S5); AC4 drawer + breadcrumb names + combobox translation (T1 S3-S5); AC5 gate/parity/codename (T2 S7-S8, T1 S1/S7). ✓
+
+**Placeholder scan:** every code step shows full code; tests give concrete role/name assertions; the two "mirror the existing harness" notes (label-editor/options-combobox/breadcrumb tests) point at named existing files to copy from, not vague TODOs; the fixture-id note names the exact field to read. No TBD. ✓
+
+**Type/consistency:** `focusRing` (string) imported once in T2 and used on pills + row link; `aria-current={selected ? "page" : undefined}` consistent; the 5 i18n keys added in T1 S1 are consumed in T1 S3-S5 (`common.clear/open`, `nav.breadcrumb`, `objects.detailTitle`) and T2 S5 (`objects.tableLabel`). ✓
+
+## Notes
+- No new dependency. `components/ui/*` untouched (combobox/drawer wrappers unchanged; only props passed from callers). `check:colors` stays green — `focusRing` uses `ring-ring` tokens, no raw palette.
+- The combobox wrapper's own raw-palette internals and the segmented-control extraction are #66, not here.

docs/superpowers/plans/2026-06-08-a11y-focus.md

@@ -0,0 +1,217 @@
+# Accessibility — Focus, Route Management, Honest Semantics — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Give every custom control a keyboard focus ring, make the authority "tabs" + lang switch honest, add a skip link + route focus management, and sync `<html lang>` on language change.
+
+**Architecture:** A shared `focusRing` class is applied to the five bare controls. Authority tabs become honest `NavLink`s (`aria-current`), the lang switch gains a `role="group"`. The app-shell adds a skip link, a focusable `<main>`, and a route-change focus effect. A single `i18n.on("languageChanged")` listener syncs `document.documentElement.lang`.
+
+**Tech Stack:** React 19 + TS + pnpm, react-router 7 (`NavLink`/`useLocation`), react-i18next, Tailwind v4, Vitest + RTL. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity (2 new keys); app source double-quote+semicolon; token classes only (`focus-visible:ring-ring` is a token); `focus-visible:` (not `:focus`) so mouse clicks don't ring.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-a11y-focus-design.md`
+
+**Key facts (from code):**
+- Bare controls lacking a ring: `lang-switch.tsx` (2 buttons, no `type`, inactive `text-muted-foreground`), `theme-switch.tsx` (3 icon buttons, `cn(...)`), `search-panel.tsx` facet chips (`className={\`rounded-md px-2 py-0.5 ${active ? … : "border"}\`}`), `field-list.tsx` row `<button className="flex flex-1 items-center gap-2 text-left">`, `authorities-page.tsx` tab `NavLink`s.
+- `authorities-page.tsx`: `<div role="tablist" className="mb-3 flex gap-2">` + `NavLink ... role="tab" aria-selected={k === currentKind}`. `NavLink` adds `aria-current="page"` to the active link by default.
+- `app-shell.tsx`: `<main className="flex-1 overflow-hidden"><Outlet/></main>`, no id/tabIndex/skip link/route effect.
+- `i18n/index.ts`: i18n init; `i18n.language`; no html-lang sync.
+- `ui/button.tsx` ring: `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`.
+- Tests to update: `authorities.test.tsx` ("kind tabs link…" + "aria-selected…" use `getByRole("tab")`/`aria-selected`); `app-shell.test.tsx` (`tree()` has `/objects` + `/login`; nav + lang tests).
+
+---
+
+# Task 1: Focus rings + honest control semantics
+
+**Files:** `web/src/lib/focus-ring.ts` (new), `web/src/shell/lang-switch.tsx`, `web/src/shell/theme-switch.tsx`, `web/src/search/search-panel.tsx`, `web/src/fields/field-list.tsx`, `web/src/authorities/authorities-page.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/authorities/authorities.test.tsx`.
+
+- [ ] **Step 1: `web/src/lib/focus-ring.ts`:**
+```ts
+export const focusRing = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
+```
+
+- [ ] **Step 2: i18n** — add `"language"` to the `common` namespace (en "Language" / sv "Språk"), both locales (parity).
+
+- [ ] **Step 3: lang-switch.tsx** — wrap in a labelled group + add `type="button"` + ring (import `useTranslation`, `focusRing`, `cn`):
+```tsx
+import { useTranslation } from "react-i18next";
+
+import { useLocale } from "../i18n/use-locale";
+import { focusRing } from "../lib/focus-ring";
+import { cn } from "@/lib/utils";
+
+export function LangSwitch() {
+  const { t } = useTranslation();
+  const { locale, setLocale } = useLocale();
+  const base = locale.startsWith("sv") ? "sv" : "en";
+
+  return (
+    <div role="group" aria-label={t("common.language")} className="flex gap-1 text-xs">
+      {(["sv", "en"] as const).map((lng) => (
+        <button
+          key={lng}
+          type="button"
+          onClick={() => setLocale(lng)}
+          aria-pressed={base === lng}
+          className={cn("rounded-sm px-1", focusRing, base === lng ? "font-bold" : "text-muted-foreground")}
+        >
+          {lng.toUpperCase()}
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: theme-switch.tsx** — add `focusRing` to the button `cn(...)`: change the `cn("rounded-md p-1 transition-colors", active ? … : …)` to include `focusRing` as a class arg. Import `focusRing`.
+
+- [ ] **Step 5: search-panel.tsx** — the facet chip `<button>` className: add `focusRing`. Use `cn` (import it) or append the string:
+  `className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}`. Import `focusRing` + `cn`.
+
+- [ ] **Step 6: field-list.tsx** — the row `<button className="flex flex-1 items-center gap-2 text-left">`: add `rounded-sm` + `focusRing` (import `focusRing` + `cn`): `className={cn("flex flex-1 items-center gap-2 rounded-sm text-left", focusRing)}`.
+
+- [ ] **Step 7: authorities-page.tsx — honest semantics + ring.** Replace the `<div role="tablist">` block:
+```tsx
+<nav aria-label={t("nav.authorities")} className="mb-3 flex gap-2">
+  {KINDS.map((k) => (
+    <NavLink
+      key={k}
+      to={`/authorities/${k}`}
+      className={({ isActive }) =>
+        cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")
+      }
+    >
+      {t(`authorities.${k}`)}
+    </NavLink>
+  ))}
+</nav>
+```
+  Drop `role="tab"` + `aria-selected` (NavLink applies `aria-current="page"` to the active link automatically). Import `focusRing` + `cn`.
+
+- [ ] **Step 8: Update `authorities.test.tsx`** — the two tab tests:
+  - "kind tabs link to the other kinds": `findByRole("tab", { name: /place/i })` → `findByRole("link", { name: /place/i })` (still assert `href="/authorities/place"`).
+  - "aria-selected…": rename to active-kind via `aria-current`: `expect(await screen.findByRole("link", { name: /^person$/i })).toHaveAttribute("aria-current", "page");` and `expect(screen.getByRole("link", { name: /^place$/i })).not.toHaveAttribute("aria-current");`.
+  (Confirm no link-name ambiguity — the page renders only the 3 kind links + the breadcrumb/PageTitle; if the harness includes other "person/place"-named links, scope with `within`. Don't weaken.)
+
+- [ ] **Step 9: Verify (vitest ONCE):** `cd web && pnpm vitest run src/authorities src/shell src/search src/fields && pnpm typecheck && pnpm lint && pnpm check:colors`. PASS. (The ring classes are token-based → check:colors clean. The other tests must stay green.)
+
+- [ ] **Step 10: Commit**
+```bash
+git add web/src/lib/focus-ring.ts web/src/shell/lang-switch.tsx web/src/shell/theme-switch.tsx web/src/search/search-panel.tsx web/src/fields/field-list.tsx web/src/authorities/authorities-page.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/authorities/authorities.test.tsx
+git commit -m "feat(web): focus-visible rings on custom controls; honest authority links + lang group (#52)"
+```
+
+---
+
+# Task 2: Skip link + route focus + html lang sync
+
+**Files:** `web/src/shell/app-shell.tsx`, `web/src/i18n/index.ts`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/shell/app-shell.test.tsx`, `web/src/i18n/i18n.test.tsx`.
+
+- [ ] **Step 1: i18n** — add `"skipToContent"` to `common` (en "Skip to content" / sv "Hoppa till innehåll"), both locales (parity).
+
+- [ ] **Step 2: app-shell.tsx — skip link + focusable main + route focus.**
+```tsx
+import { useEffect, useRef } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+// …existing imports…
+
+export function AppShell() {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const mainRef = useRef<HTMLElement>(null);
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      return;
+    }
+    mainRef.current?.focus();
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:border focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:ring-3 focus:ring-ring/50"
+      >
+        {t("common.skipToContent")}
+      </a>
+      <Sidebar />
+      <BreadcrumbProvider>
+        <div className="flex flex-1 flex-col">
+          <header className="flex items-center gap-4 border-b px-4 py-2">
+            <Breadcrumb />
+            <HeaderSearch />
+            <ThemeSwitch />
+            <LangSwitch />
+            <UserMenu />
+          </header>
+          <main ref={mainRef} id="main-content" tabIndex={-1} className="flex-1 overflow-hidden outline-none">
+            <Outlet />
+          </main>
+        </div>
+      </BreadcrumbProvider>
+    </div>
+  );
+}
+```
+  Verify `sr-only`/`focus:not-sr-only` exist in this Tailwind v4 setup (they're standard utilities; if the focus reveal doesn't work, use an explicit visually-hidden style and confirm by running the test). The skip link is the FIRST focusable element.
+
+- [ ] **Step 3: i18n/index.ts — html lang sync.** After the `i18n.init(...)` call, add:
+```ts
+function syncHtmlLang(lng: string) {
+  if (typeof document !== "undefined") {
+    document.documentElement.lang = lng.startsWith("sv") ? "sv" : "en";
+  }
+}
+
+i18n.on("languageChanged", syncHtmlLang);
+syncHtmlLang(i18n.language);
+```
+  (Place before `export default i18n;`.)
+
+- [ ] **Step 4: Tests.**
+  - **app-shell.test.tsx — skip link + route focus.** Add:
+    - skip link: `expect(screen.getByRole("link", { name: /skip to content/i })).toHaveAttribute("href", "#main-content");` and the `<main>` has `id="main-content"` (query `document.getElementById("main-content")` → truthy, `tabIndex === -1`).
+    - route focus: extend `tree()` with a second route under `<AppShell>` (e.g. `<Route path="/fields" element={<div>fields outlet</div>} />`); render at `/objects`, click the sidebar **Fields** link (`screen.getByRole("link", { name: /fields/i })`), `await screen.findByText("fields outlet")`, then assert `document.activeElement === document.getElementById("main-content")` (the route change focused main). (Initial mount must NOT focus main — optionally assert activeElement is body/not-main right after the first render.)
+  - **i18n.test.tsx — html lang.** Add a test: after `await i18n.changeLanguage("sv")`, `expect(document.documentElement.lang).toBe("sv")`; after `await i18n.changeLanguage("en")`, `toBe("en")`. (The file already toggles language; the `afterEach` resets to en, so assert within the test.)
+
+- [ ] **Step 5: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk, check:colors line. (Storybook-cache flake remedy if needed: `rm -rf node_modules/.cache/storybook node_modules/.vite`, re-run ONCE.)
+
+- [ ] **Step 6: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 7: Manual smoke (recommended).** `pnpm dev`: Tab from the top → "Skip to content" appears first and jumps focus to the content; every custom control shows a focus ring on keyboard focus; navigating routes moves focus to the content region; the authority kind links read as links with the current one marked; switching to SV sets `<html lang="sv">` (check devtools).
+
+- [ ] **Step 8: Commit**
+```bash
+git add web/src/shell/app-shell.tsx web/src/i18n/index.ts web/src/i18n/en.json web/src/i18n/sv.json web/src/shell/app-shell.test.tsx web/src/i18n/i18n.test.tsx
+git commit -m "feat(web): skip link + route focus management + html lang sync (#52)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** focusRing + 5 controls (T1 S1,S3–S7); lang group + authority honest links (T1 S3,S7); i18n common.language/skipToContent (T1 S2, T2 S1); skip link + focusable main + route focus (T2 S2); html lang sync (T2 S3); tests for tabs→links, skip link, route focus, html lang (T1 S8, T2 S4); gate (T2 S5). Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the `sr-only`/`focus:not-sr-only` reveal is "verify it works by running" (a real validation, with an explicit fallback), not a TODO. Test steps name exact queries + the harness extension. No vague steps. ✓
+
+**Type/consistency:** `focusRing` (string) defined in T1 S1, imported by all 5 controls + applied via `cn`; `NavLink` `aria-current` (native) replaces `role="tab"`/`aria-selected` consistently in the component + the test; `mainRef`/`didMount` refs + `useLocation().pathname` dependency consistent. ✓
+
+## Notes
+- No new dependency; 2 new i18n keys (`common.language`, `common.skipToContent`), en+sv.
+- `focus-visible:` (keyboard) vs `:focus` — rings only on keyboard focus.
+- `<main tabIndex={-1}>` + `outline-none` is programmatically focusable but not in the tab order and shows no container outline; the skip link + route effect both target it.
+- The i18n parity test (#60) will guard the 2 new keys.

docs/superpowers/plans/2026-06-08-design-kit-consistency.md

@@ -0,0 +1,211 @@
+# Design-Kit Consistency — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add three shared helpers (`useLang`, `segmentClass`, `rowStateClass`), adopt them across the duplicated sites, and apply behavior-preserving kit one-offs (delete dead Card, sidebar focusRing, login PageTitle, field-list Badge, size-4, icon dismiss buttons).
+
+**Architecture:** Task 1 creates the helpers + deletes Card (additive/safe). Task 2 adopts the 3 helpers across 6 + 3 + 4 sites. Task 3 applies the one-off cleanups + full gate. Behavior-preserving throughout; `check:colors`/`check:size`/existing component tests are the guards.
+
+**Tech Stack:** React 19 + TS + pnpm, Tailwind v4 (token classes + `cn`), react-i18next, Base UI, Vitest 4 + RTL.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon; token classes only (`check:colors`). `tsconfig` has `noUnusedLocals`, so remove any destructure that becomes unused.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-design-kit-consistency-design.md`
+
+**Key facts (verified current):**
+- `lib/focus-ring.ts` exports `focusRing = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"`. `cn` is `@/lib/utils`.
+- `Button` (`@/components/ui/button`) has sizes incl. `icon-sm`. `Badge` (`@/components/ui/badge`) has a `secondary` variant. `PageTitle` (`@/components/ui/page-title`) is an `<h1>` styled `text-2xl font-semibold tracking-tight`.
+- `components/ui/card.tsx` has ZERO importers and no `card.stories`.
+- `useLang` sites (each currently `const lang = i18n.language.startsWith("sv") ? "sv" : "en";`): `objects/object-detail.tsx:59`, `objects/field-input.tsx:32`, `vocab/vocabulary-terms.tsx:13`, `vocab/vocabulary-list.tsx:17`, `fields/field-list.tsx:27`, `authorities/authorities-page.tsx:19`.
+- `segmentClass` sites: `objects/objects-table.tsx:174` (`` className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`} ``), `search/search-panel.tsx:76` (`className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}`), `authorities/authorities-page.tsx:41` (`cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")`).
+- `rowStateClass` sites: `objects/objects-table.tsx:252` (`selected ? "bg-primary/10" : "hover:bg-muted"`), `vocab/vocabulary-list.tsx:113` (`isActive ? "bg-primary/10" : "hover:bg-muted"`), `search/search-result-row.tsx:15` (`isActive ? "bg-primary/10" : "hover:bg-muted"`), `fields/field-list.tsx:86` (`def.key === selectedKey ? "bg-primary/10" : ""` — note the missing idle hover).
+
+---
+
+# Task 1: Create helpers + delete dead Card
+
+**Files:** Create `web/src/lib/use-lang.ts`, `web/src/lib/class-recipes.ts`, `web/src/lib/class-recipes.test.ts`; Delete `web/src/components/ui/card.tsx`.
+
+- [ ] **Step 1: `web/src/lib/use-lang.ts`:**
+```ts
+import { useTranslation } from "react-i18next";
+
+/** The instance's active UI language, narrowed to the two supported locales. */
+export function useLang(): "sv" | "en" {
+  const { i18n } = useTranslation();
+  return i18n.language.startsWith("sv") ? "sv" : "en";
+}
+```
+
+- [ ] **Step 2: `web/src/lib/class-recipes.ts`:**
+```ts
+import { cn } from "@/lib/utils";
+
+import { focusRing } from "./focus-ring";
+
+/** Segmented-control / filter-pill item. Unifies the active/inactive token recipe +
+ *  focus ring; callers pass their contextual padding/size via `className`. */
+export function segmentClass(active: boolean, className?: string): string {
+  return cn("rounded-md", focusRing, active ? "bg-primary text-primary-foreground" : "border", className);
+}
+
+/** Selected vs idle row background for master-detail / list rows. */
+export function rowStateClass(active: boolean): string {
+  return active ? "bg-primary/10" : "hover:bg-muted";
+}
+```
+
+- [ ] **Step 3: `web/src/lib/class-recipes.test.ts`** (write + run):
+```ts
+import { expect, test } from "vitest";
+
+import { rowStateClass, segmentClass } from "./class-recipes";
+
+test("segmentClass active uses the primary tokens + focus ring", () => {
+  const cls = segmentClass(true, "px-2 py-1");
+  expect(cls).toContain("bg-primary");
+  expect(cls).toContain("text-primary-foreground");
+  expect(cls).toContain("focus-visible:ring-ring/50");
+  expect(cls).toContain("px-2");
+});
+
+test("segmentClass inactive uses border, not the primary fill", () => {
+  const cls = segmentClass(false);
+  expect(cls).toContain("border");
+  expect(cls).not.toContain("bg-primary");
+});
+
+test("rowStateClass toggles selected vs idle-hover", () => {
+  expect(rowStateClass(true)).toBe("bg-primary/10");
+  expect(rowStateClass(false)).toBe("hover:bg-muted");
+});
+```
+Run: `cd web && pnpm vitest run src/lib/class-recipes.test.ts` → 3 passing.
+
+- [ ] **Step 4: Delete the dead Card component:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git rm web/src/components/ui/card.tsx
+```
+(Confirm no references first: `git grep -n "components/ui/card\"" web/src` returns nothing.)
+
+- [ ] **Step 5: Verify + lint:**
+```bash
+cd web && pnpm vitest run src/lib/class-recipes.test.ts && pnpm typecheck && pnpm lint
+```
+Expected: green (Card had no importers, so its deletion can't break typecheck/lint).
+
+- [ ] **Step 6: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/lib/use-lang.ts web/src/lib/class-recipes.ts web/src/lib/class-recipes.test.ts
+git rm -q web/src/components/ui/card.tsx 2>/dev/null; git add -A web/src/components/ui
+git commit -m "feat(web): useLang + segmentClass/rowStateClass helpers; delete dead Card (#66)"
+```
+
+---
+
+# Task 2: Adopt the helpers across the duplicated sites
+
+**Files:** Modify `objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`, `vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`, `objects/objects-table.tsx`, `search/search-panel.tsx`, `search/search-result-row.tsx`.
+
+- [ ] **Step 1: Adopt `useLang()` in the 6 components.** In each of `objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`, `vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`: add `import { useLang } from "../lib/use-lang";` and replace `const lang = i18n.language.startsWith("sv") ? "sv" : "en";` with `const lang = useLang();`. Then, if `i18n` is no longer referenced anywhere else in that component, change `const { t, i18n } = useTranslation();` to `const { t } = useTranslation();` (the `noUnusedLocals` typecheck will fail otherwise — so this removal is required wherever `i18n` becomes unused). Note `authorities/authorities-page.tsx` also imports `focusRing` and uses `cn` — leave those.
+
+- [ ] **Step 2: Adopt `segmentClass` at the 3 segmented sites.**
+  - `objects/objects-table.tsx`: add `import { segmentClass } from "../lib/class-recipes";`; change the pill `className` (currently `` `${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}` ``) to `className={segmentClass(active, "px-2 py-1")}`. If `focusRing` is now unused in this file, remove its import. (The object-number `<Link>` also uses `focusRing` — if so, KEEP the import.)
+  - `search/search-panel.tsx`: add the import; change `className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}` to `className={segmentClass(active, "px-2 py-0.5")}`. Remove now-unused `focusRing`/`cn` imports if they're unused elsewhere in the file.
+  - `authorities/authorities-page.tsx`: add the import; change the NavLink className callback body `cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")` to `segmentClass(isActive, "px-3 py-1 text-sm")`. Remove now-unused `focusRing`/`cn` imports if unused elsewhere.
+
+- [ ] **Step 3: Adopt `rowStateClass` at the 4 selected-row sites.** Add `import { rowStateClass } from "…/lib/class-recipes";` (or extend the existing class-recipes import) to each:
+  - `objects/objects-table.tsx`: in the row `className`, change `${selected ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(selected)}`.
+  - `vocab/vocabulary-list.tsx`: change `${isActive ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(isActive)}`.
+  - `search/search-result-row.tsx`: change `${isActive ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(isActive)}`.
+  - `fields/field-list.tsx`: change `${def.key === selectedKey ? "bg-primary/10" : ""}` to `${rowStateClass(def.key === selectedKey)}` (this ADDS the `hover:bg-muted` idle hover the others have — an intended consistency fix).
+
+- [ ] **Step 4: Verify (vitest ONCE for the affected suites), typecheck, lint:**
+```bash
+cd web && pnpm vitest run src/objects src/vocab src/fields src/authorities src/search && pnpm typecheck && pnpm lint
+```
+Expected: green. These are class-string-equivalent changes (segmentClass/rowStateClass produce the same token sets; `cn` ordering is irrelevant to Tailwind), so the existing component tests pass unchanged. `field-list`'s row now also carries `hover:bg-muted` (additive). If a test asserted the exact old className string, update it to match the new equivalent (unlikely — tests query by role/text).
+
+- [ ] **Step 5: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/objects/object-detail.tsx web/src/objects/field-input.tsx web/src/vocab/vocabulary-terms.tsx web/src/vocab/vocabulary-list.tsx web/src/fields/field-list.tsx web/src/authorities/authorities-page.tsx web/src/objects/objects-table.tsx web/src/search/search-panel.tsx web/src/search/search-result-row.tsx
+git commit -m "refactor(web): adopt useLang + segmentClass/rowStateClass across sites (#66)"
+```
+
+---
+
+# Task 3: One-off kit cleanups + full gate
+
+**Files:** Modify `shell/sidebar.tsx`, `auth/login-page.tsx`, `fields/field-list.tsx`, `shell/theme-switch.tsx`, `shell/user-menu.tsx`, `shell/header-search.tsx`, `objects/objects-page.tsx`, `objects/object-detail-drawer.tsx`.
+
+- [ ] **Step 1: `shell/sidebar.tsx`** — use the `focusRing` constant. Add `import { focusRing } from "../lib/focus-ring";` (if not already imported). At the two `cn(...)` sites (lines ~46 and ~88) replace the literal `"focus-visible:ring-3 focus-visible:ring-ring/50"` entry with `focusRing`. (Both are inside `cn(...)` lists, so just swap the string for the constant.)
+
+- [ ] **Step 2: `auth/login-page.tsx`** — use `PageTitle`. Add `import { PageTitle } from "@/components/ui/page-title";` and change `<h1 className="text-2xl font-semibold">{app_name}</h1>` to `<PageTitle>{app_name}</PageTitle>`.
+
+- [ ] **Step 3: `fields/field-list.tsx`** — type-tag → `Badge`. Add `import { Badge } from "@/components/ui/badge";` and change the type-tag `<span className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{…}</span>` (line ~97) to `<Badge variant="secondary">{…}</Badge>` (keep the inner expression/children unchanged).
+
+- [ ] **Step 4: Icon sizing → `size-4`** in the 3 app-source sites: `shell/theme-switch.tsx:39` (`<Icon className="h-4 w-4" …>` → `className="size-4"`), `shell/user-menu.tsx:27` (`<CircleUser className="h-4 w-4" …>` → `size-4`), `shell/header-search.tsx:23` (the search icon's `… h-4 w-4 …` → replace `h-4 w-4` with `size-4`, keeping the other classes). Do NOT touch `components/ui/select.tsx`.
+
+- [ ] **Step 5: Icon dismiss buttons → kit Button.**
+  - `objects/objects-page.tsx:54`: add `import { Button } from "@/components/ui/button";` (if absent) and change the `<button type="button" onClick={closeDetail} aria-label={t("actions.closeDetail")} className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"><X className="size-4" aria-hidden="true" /></button>` to:
+```tsx
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={closeDetail}
+                aria-label={t("actions.closeDetail")}
+              >
+                <X className="size-4" aria-hidden="true" />
+              </Button>
+```
+  - `objects/object-detail-drawer.tsx:31-36`: add `import { Button } from "@/components/ui/button";` and render the `DrawerClose` AS the kit Button via the render prop:
+```tsx
+          <DrawerClose
+            aria-label={t("actions.closeDetail")}
+            render={<Button variant="ghost" size="icon-sm" />}
+          >
+            <X className="size-4" aria-hidden="true" />
+          </DrawerClose>
+```
+  (This mirrors the `AlertDialogTrigger render={<Button … />}` pattern in `components/delete-confirm-dialog.tsx`; the `DrawerClose` keeps its close-on-click behaviour and the `aria-label`.)
+
+- [ ] **Step 6: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (gz) from check:size (should be ≤ the prior ~216.5 KB — the Card delete only removes dead code), and the `check:colors` line. The existing `user-menu`, `objects-table`, `object-detail`/drawer, `login-page`, sidebar, `field-list`, search tests must pass unchanged (the icon buttons keep their `aria-label`s; the drawer still closes; login still renders an `<h1>` via PageTitle).
+
+- [ ] **Step 7: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 8: Manual smoke (recommended).** `pnpm dev`: the visibility pills / authority tabs / search facets look unchanged and keep their focus rings; the selected list rows (objects, vocab, search, fields) highlight identically and field rows now have a hover; the object-detail close buttons (wide pane + drawer) work; the login title and field-list type tag look right.
+
+- [ ] **Step 9: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/shell/sidebar.tsx web/src/auth/login-page.tsx web/src/fields/field-list.tsx web/src/shell/theme-switch.tsx web/src/shell/user-menu.tsx web/src/shell/header-search.tsx web/src/objects/objects-page.tsx web/src/objects/object-detail-drawer.tsx
+git commit -m "refactor(web): kit consistency — focusRing, PageTitle, Badge, size-4, icon buttons (#66)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 `useLang` + 6 sites (T1 S1, T2 S1); AC2 `segmentClass`/`rowStateClass` + adoption + field-list hover fix (T1 S2-S3, T2 S2-S3); AC3 Card deleted (T1 S4); AC4 one-offs — sidebar focusRing, login PageTitle, field-list Badge, size-4, icon buttons (T3 S1-S5); AC5 gate/check:size/codename (T3 S6-S7). ✓
+
+**Placeholder scan:** every edit gives the exact before string + after code; helper bodies are complete; the test has concrete assertions. The "remove `i18n` if unused" instructions are concrete (driven by `noUnusedLocals`). No TBD. ✓
+
+**Type/consistency:** `useLang()` (T1) returns `"sv" | "en"` consumed as `const lang` (T2 S1); `segmentClass(active, className?)` / `rowStateClass(active)` (T1) called with the exact args in T2 S2-S3; `Button size="icon-sm"`, `Badge variant="secondary"`, `PageTitle` all confirmed to exist. ✓
+
+## Notes
+- No new dependency, no new i18n keys. `check:colors` stays green — `segmentClass`/`rowStateClass` and all edits use tokens (`bg-primary`, `border`, `ring-ring`, `bg-muted`). Card deletion only removes dead code.
+- `cn()` (tailwind-merge) makes class ordering irrelevant, so the helper outputs are visually identical to the prior inline strings (except field-list's intended added hover).
+- The `<SegmentedControl>` component and the form-spacing scale are deferred (out of scope).

docs/superpowers/plans/2026-06-08-form-field-grouping.md

@@ -0,0 +1,191 @@
+# Object-Form Flexible-Field Grouping — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Group the object form's flexible-field inputs by `def.group` (definition order, "Other" last) with subheadings, reusing one shared helper so the form and the detail view group identically.
+
+**Architecture:** Extract the detail view's defs-grouping into `lib/group-fields.ts` (`groupDefinitions`), unit-test it, refactor `object-detail.tsx` to use it (output-preserving), then render the form's flexible block grouped via the same helper.
+
+**Tech Stack:** React 19 + TS + pnpm, react-hook-form, react-i18next, Vitest + RTL. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity (no new keys); app source double-quote+semicolon; token classes only; no behavior change to the form (inputs/validation/submission).
+
+**Spec:** `docs/superpowers/specs/2026-06-08-form-field-grouping-design.md`
+
+**Key facts:**
+- `object-detail.tsx` builds groups inline (`const other = t("fields.other"); const present = (definitions ?? []).filter(d => object.fields[d.key] != null); const groups: { group, defs }[] = []; for (const def of present) { … } ` + orphan push + `groups.sort((a,b) => Number(a.group===other) - Number(b.group===other));`). Type alias `FieldDefinitionView = components["schemas"]["FieldDefinitionView"]` already imported.
+- `object-form.tsx` flexible block: `<fieldset className="space-y-3 border-t pt-3"><legend className="label-caption">{t("form.flexibleHeading")}</legend>{definitions.map((def) => <div key={def.key}><FieldInput definition={def} form={form} />{errors.fields?.[def.key] && <p role="alert" className="text-xs text-destructive">{errors.fields[def.key]?.message ?? t("form.required")}</p>}</div>)}</fieldset>`.
+- Field-def fixtures have `group: "Description"` (inscription) and `group: null` (the rest).
+- `sr-only` is a valid utility (used in the #52 skip link). `fields.other` + `form.flexibleHeading` are existing i18n keys.
+
+---
+
+# Task 1: Shared `groupDefinitions` helper + unit test + detail refactor
+
+**Files:** `web/src/lib/group-fields.ts` (new), `web/src/lib/group-fields.test.ts` (new), `web/src/objects/object-detail.tsx`.
+
+- [ ] **Step 1: `web/src/lib/group-fields.ts`:**
+```ts
+import type { components } from "../api/schema";
+
+type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
+
+export type FieldGroup = { group: string; defs: FieldDefinitionView[] };
+
+/** Group field definitions by `def.group` (trimmed), preserving definition order
+ *  within and across groups; ungrouped defs fall into a trailing `otherLabel` bucket. */
+export function groupDefinitions(
+  definitions: FieldDefinitionView[],
+  otherLabel: string,
+): FieldGroup[] {
+  const groups: FieldGroup[] = [];
+  for (const def of definitions) {
+    const group = def.group?.trim() ? def.group : otherLabel;
+    let bucket = groups.find((g) => g.group === group);
+    if (!bucket) {
+      bucket = { group, defs: [] };
+      groups.push(bucket);
+    }
+    bucket.defs.push(def);
+  }
+  groups.sort((a, b) => Number(a.group === otherLabel) - Number(b.group === otherLabel));
+  return groups;
+}
+```
+
+- [ ] **Step 2: `web/src/lib/group-fields.test.ts`** (write + run, must pass):
+```ts
+import { expect, test } from "vitest";
+import { groupDefinitions } from "./group-fields";
+
+type Def = { key: string; group?: string | null };
+const def = (key: string, group: string | null): Def => ({ key, group });
+
+function keysByGroup(defs: Def[]) {
+  // cast through unknown — the helper only reads key/group
+  return groupDefinitions(defs as never, "Other").map((g) => ({
+    group: g.group,
+    keys: g.defs.map((d) => (d as unknown as Def).key),
+  }));
+}
+
+test("preserves definition order within and across groups; Other is last", () => {
+  const result = keysByGroup([
+    def("a", "Description"),
+    def("b", null),
+    def("c", "Description"),
+    def("d", "Provenance"),
+    def("e", "  "),
+  ]);
+  expect(result).toEqual([
+    { group: "Description", keys: ["a", "c"] },
+    { group: "Provenance", keys: ["d"] },
+    { group: "Other", keys: ["b", "e"] },
+  ]);
+});
+
+test("all-ungrouped → a single trailing Other group", () => {
+  expect(keysByGroup([def("x", null), def("y", null)])).toEqual([
+    { group: "Other", keys: ["x", "y"] },
+  ]);
+});
+```
+Run: `cd web && pnpm vitest run src/lib/group-fields.test.ts` → PASS (2 tests). (If the `as never`/`as unknown` casts trip lint, type the test `def` as the real `FieldDefinitionView` partial via `Partial<…> as …` — keep it lint-clean and `any`-free; the helper only reads `key`/`group`.)
+
+- [ ] **Step 3: Refactor `object-detail.tsx`** to use the helper. Add `import { groupDefinitions } from "../lib/group-fields";`. Replace the inline group-building loop + the final `groups.sort(...)` with:
+```tsx
+const other = t("fields.other");
+const present = (definitions ?? []).filter((d) => object.fields[d.key] != null);
+const groups = groupDefinitions(present, other);
+```
+Keep the orphan handling exactly as-is AFTER this (`const definedKeys = …; const orphans = …; if (orphans.length > 0 && !groups.some((g) => g.group === other)) groups.push({ group: other, defs: [] });`). The appended Other bucket remains last (the helper already put any Other last, and appending when absent adds it at the end). Do NOT re-add a `groups.sort(...)` — appending keeps Other last. The render (`groups.map(...)`) is unchanged.
+
+- [ ] **Step 4: Verify (vitest ONCE):** `cd web && pnpm vitest run src/lib/group-fields.test.ts src/objects/object-detail.test.tsx && pnpm typecheck && pnpm lint`. PASS — the object-detail tests must stay green (output-preserving refactor).
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/lib/group-fields.ts web/src/lib/group-fields.test.ts web/src/objects/object-detail.tsx
+git commit -m "refactor(web): extract groupDefinitions helper; object-detail uses it (#45)"
+```
+
+---
+
+# Task 2: Group the object-form flexible inputs + test + gate
+
+**Files:** `web/src/objects/object-form.tsx`, `web/src/objects/object-form.test.tsx`.
+
+- [ ] **Step 1: Group the flexible block** in `object-form.tsx`. Add `import { groupDefinitions } from "../lib/group-fields";`. Replace the flexible `<fieldset>` body:
+```tsx
+{definitions && definitions.length > 0 && (
+  <fieldset className="space-y-3 border-t pt-3">
+    <legend className="sr-only">{t("form.flexibleHeading")}</legend>
+    {groupDefinitions(definitions, t("fields.other")).map((g) => (
+      <div key={g.group} className="space-y-3">
+        <div className="label-caption">{g.group}</div>
+        {g.defs.map((def) => (
+          <div key={def.key}>
+            <FieldInput definition={def} form={form} />
+            {errors.fields?.[def.key] && (
+              <p role="alert" className="text-xs text-destructive">
+                {errors.fields[def.key]?.message ?? t("form.required")}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    ))}
+  </fieldset>
+)}
+```
+  Change ONLY this block: the `<legend>` goes from visible `label-caption` to `sr-only`; the flat `definitions.map` becomes grouped. Field inputs + error markup are identical, just nested under group wrappers. No change anywhere else (core fields, visibility, footer, submit logic).
+
+- [ ] **Step 2: Test** — extend `object-form.test.tsx`. The field-def fixtures have `inscription` in group `"Description"` and the rest ungrouped → "Other". Add a test that renders `<ObjectForm mode="create" …>` and asserts the group subheadings + membership:
+```tsx
+test("groups flexible fields by definition group with subheadings", async () => {
+  renderApp(<ObjectForm mode="create" onSubmit={() => {}} onCancel={() => {}} />);
+  // the "Description" group heading and the "Other" group heading both render
+  expect(await screen.findByText("Description")).toBeInTheDocument();
+  expect(screen.getByText(/^Other$/)).toBeInTheDocument();
+  // the Description-grouped field input is present (Inscription) and appears before an ungrouped one (Material)
+  const inscription = screen.getByLabelText(/inscription/i);
+  const material = screen.getByLabelText(/material/i);
+  expect(inscription.compareDocumentPosition(material) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+});
+```
+  (Adjust field labels to the fixtures' actual rendered labels — read `web/src/test/fixtures.ts` `fieldDefinitions` for the exact `labels`/keys and `web/src/objects/field-input.tsx` for how each renders its label, so the `getByLabelText`/`findByText` queries match. The key assertion: a named group heading + the "Other" heading both appear, and a grouped field precedes an ungrouped one in the DOM.) Keep the existing object-form tests green.
+
+- [ ] **Step 3: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk, check:colors line.
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 5: Manual smoke (recommended).** `pnpm dev`: open New object / edit — the flexible fields now appear under group subheadings (e.g. "Description", "Other") matching the detail view's grouping; inputs/validation/submit still work.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/objects/object-form.tsx web/src/objects/object-form.test.tsx
+git commit -m "feat(web): group object-form flexible fields by definition group (#45)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** shared `groupDefinitions` + unit test (T1 S1–S2); detail refactor output-preserving (T1 S3–S4); form grouped via the helper with `sr-only` legend + visible subheadings (T2 S1); form grouping test (T2 S2); gate (T2 S3). Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the form test says "adjust labels to the fixtures' actual rendered labels" with the files named (fixtures.ts, field-input.tsx) — a concrete match-the-data step, not a TODO; the core assertion (named + Other headings, order) is explicit. The helper-test cast note keeps it `any`-free. No vague steps. ✓
+
+**Type/consistency:** `groupDefinitions(defs, otherLabel): FieldGroup[]` defined in T1, consumed by detail (`present`) and form (all `definitions`); detail's orphan-Other append stays last; the form reuses the existing `FieldInput`/error markup unchanged. ✓
+
+## Notes
+- No new dependency; no new i18n keys (`fields.other` + `form.flexibleHeading` exist).
+- The refactor of object-detail is output-preserving — its tests are the guard.
+- Field-list's A–Z grouping is intentionally NOT unified (different purpose).

docs/superpowers/plans/2026-06-08-loading-skeletons.md

@@ -0,0 +1,247 @@
+# Standardize Loading States on Skeleton — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the "…" text and empty `role="status"` divs with shared `Skeleton`-based loading recipes that mirror the loaded layout and announce loading to screen readers.
+
+**Architecture:** A new `ui/skeletons.tsx` exports `ListSkeleton`, `FormSkeleton`, `AppShellSkeleton` (each a `role="status" aria-label={t("common.loading")}` live region built on the existing `Skeleton`). Apply them at every inconsistent loading site; retrofit the two good list-like skeletons to `ListSkeleton`.
+
+**Tech Stack:** React 19 + TS + pnpm, react-i18next, Vitest + RTL + Storybook. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity (one new key); **ui/ files = no-semicolon** (match `ui/skeleton.tsx`); app source = double-quote+semicolon; stories single-quote/no-semicolon; token classes only; never nest `<div>` inside `<ul>`.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-loading-skeletons-design.md`
+
+**Key facts:**
+- `ui/skeleton.tsx`: `function Skeleton({ className, ...props }: React.ComponentProps<"div">) { return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} /> }` (no-semicolon).
+- "…" sites render `<li>…</li>` inside a `<ul>` — `vocabulary-list.tsx` (`<ul className="flex-1 overflow-auto">`, loading `<li className="p-3 text-sm text-muted-foreground">…</li>`), `vocabulary-terms.tsx` (`<ul className="mb-4">`), `authorities-page.tsx` (`<ul className="mb-4">`).
+- empty status divs: `require-auth.tsx` `if (isLoading) return <div role="status" aria-label="loading" />;` (pre-shell); `object-edit-form.tsx` `if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;`.
+- `app.tsx`: `function FormFallback() { return <div role="status" className="p-4 text-sm text-muted-foreground">Loading…</div> }` used in 3 Suspense fallbacks (ObjectNewPage, ObjectEditForm, FieldsPage).
+- retrofits: `field-list.tsx` (`space-y-2 p-3` + 6 × `<Skeleton className="h-9 w-full" />`), `search-panel.tsx` (`space-y-2 p-3` + 5 × `<Skeleton className="h-12 w-full" />`).
+- i18n `common` namespace exists in both locales: `{ "yes", "no", "close" }` — add `"loading"`.
+
+---
+
+# Task 1: Shared skeleton recipes + i18n + story
+
+**Files:** `web/src/components/ui/skeletons.tsx` (new), `web/src/components/ui/skeletons.stories.tsx` (new), `web/src/i18n/en.json`, `web/src/i18n/sv.json`.
+
+- [ ] **Step 1: i18n** — add `"loading"` to the `common` namespace in BOTH locales (keep parity):
+  - en: `"common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading" },`
+  - sv: `"common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar" },`
+
+- [ ] **Step 2: Implement `web/src/components/ui/skeletons.tsx`** (no-semicolon, ui/* style):
+```tsx
+import { useTranslation } from "react-i18next"
+
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+function ListSkeleton({
+  rows = 6,
+  rowClassName = "h-9 w-full",
+  className,
+}: {
+  rows?: number
+  rowClassName?: string
+  className?: string
+}) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-2 p-3", className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className={rowClassName} />
+      ))}
+    </div>
+  )
+}
+
+function FormSkeleton({ fields = 5, className }: { fields?: number; className?: string }) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-4 p-4", className)}>
+      {Array.from({ length: fields }).map((_, i) => (
+        <div key={i} className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      ))}
+      <Skeleton className="h-8 w-28" />
+    </div>
+  )
+}
+
+function AppShellSkeleton() {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className="flex min-h-screen">
+      <aside className="w-44 space-y-2 border-r p-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-8 w-full" />
+        ))}
+      </aside>
+      <div className="flex flex-1 flex-col">
+        <div className="flex items-center border-b px-4 py-2">
+          <Skeleton className="h-6 w-40" />
+        </div>
+        <div className="flex-1 space-y-2 p-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-9 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { ListSkeleton, FormSkeleton, AppShellSkeleton }
+```
+(`AppShellSkeleton` inlines its content rows rather than nesting `ListSkeleton`, so there's ONE `role="status"` for the whole boot screen. Token classes only.)
+
+- [ ] **Step 3: Story `web/src/components/ui/skeletons.stories.tsx`** (single-quote, no-semicolon; match an existing story, e.g. `menu.stories.tsx`/`page-title.stories.tsx`). Export three stories (`List`, `Form`, `AppShellLoading`) each rendering the respective recipe; one `play` test (on `List`) asserting a `role="status"` region is present:
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { AppShellSkeleton, FormSkeleton, ListSkeleton } from './skeletons'
+
+const meta = { title: 'ui/Skeletons', tags: ['ai-generated'] } satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const List: Story = {
+  render: () => <ListSkeleton rows={4} />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('status')).toBeInTheDocument()
+  },
+}
+
+export const Form: Story = { render: () => <FormSkeleton /> }
+
+export const AppShellLoading: Story = { render: () => <AppShellSkeleton /> }
+```
+(Adjust the `Meta`/`StoryObj` typing to the house pattern if `satisfies Meta` without a component arg complains — these are render-only stories; mirror how an existing component-less story is typed, or pass `component: ListSkeleton`.)
+
+- [ ] **Step 4: Verify (vitest ONCE):**
+  `cd web && pnpm vitest run src/components/ui/skeletons.stories.tsx && pnpm typecheck && pnpm lint`
+  Expected: PASS, clean. (If a storybook cache flake appears — `Cannot read properties of null (reading 'useEffect')` — `rm -rf node_modules/.cache/storybook node_modules/.vite` and re-run ONCE.)
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/components/ui/skeletons.tsx web/src/components/ui/skeletons.stories.tsx web/src/i18n/en.json web/src/i18n/sv.json
+git commit -m "feat(web): shared loading skeleton recipes (List/Form/AppShell) + common.loading (#53)"
+```
+
+---
+
+# Task 2: Apply skeletons across all loading sites + gate
+
+**Files (modify):** `web/src/vocab/vocabulary-list.tsx`, `web/src/vocab/vocabulary-terms.tsx`, `web/src/authorities/authorities-page.tsx`, `web/src/objects/object-edit-form.tsx`, `web/src/auth/require-auth.tsx`, `web/src/app.tsx`, `web/src/fields/field-list.tsx`, `web/src/search/search-panel.tsx`.
+
+Add `import { ListSkeleton } from "@/components/ui/skeletons";` (and `FormSkeleton`/`AppShellSkeleton` where used) to each. NEVER nest a `<div>` (the recipe) inside a `<ul>` — render the skeleton in place of the `<ul>`.
+
+- [ ] **Step 1: vocabulary-list.tsx.** Read the loading region. The list is `<ul className="flex-1 overflow-auto">` with a loading `<li>…</li>`. Render the skeleton in place of the `<ul>` during load:
+```tsx
+{isLoading ? (
+  <ListSkeleton className="flex-1 overflow-auto" />
+) : (
+  <ul className="flex-1 overflow-auto">
+    {isError && (<li className="p-3 text-sm text-destructive">{t("vocab.loadError")}</li>)}
+    {data?.length === 0 && (/* keep existing empty state */)}
+    {data?.map(/* keep existing rows */)}
+  </ul>
+)}
+```
+Keep the `isError`/empty/rows branches exactly as they are now (just move them under the `!isLoading` `<ul>`; remove the loading `<li>`). Preserve the `flex-1 overflow-auto` layout via the skeleton's `className`.
+
+- [ ] **Step 2: vocabulary-terms.tsx.** The `<ul className="mb-4">` has a loading `<li>`. Same approach:
+```tsx
+{isLoading ? (
+  <ListSkeleton className="mb-4" rows={5} />
+) : (
+  <ul className="mb-4">
+    {isError && (/* keep */)}
+    {terms?.length === 0 && (/* keep */)}
+    {terms?.map(/* keep TermRow */)}
+  </ul>
+)}
+```
+
+- [ ] **Step 3: authorities-page.tsx.** The `<ul className="mb-4">` has a loading `<li>`. Same:
+```tsx
+{isLoading ? (
+  <ListSkeleton className="mb-4" rows={5} />
+) : (
+  <ul className="mb-4">
+    {isError && (/* keep */)}
+    {authorities?.length === 0 && (/* keep */)}
+    {authorities?.map(/* keep AuthorityRow */)}
+  </ul>
+)}
+```
+
+- [ ] **Step 4: object-edit-form.tsx.** Replace the outer loading branch:
+  `if (isLoading) return <div className="p-4" role="status" aria-label="loading" />;`
+  →
+  `if (isLoading) return <FormSkeleton />;`
+  (Import `FormSkeleton`. The not-found branch stays unchanged.)
+
+- [ ] **Step 5: require-auth.tsx.** Replace:
+  `if (isLoading) return <div role="status" aria-label="loading" />;`
+  →
+  `if (isLoading) return <AppShellSkeleton />;`
+  (Import `AppShellSkeleton`. It uses only `useTranslation` — safe pre-shell.)
+
+- [ ] **Step 6: app.tsx lazy fallbacks.** Remove the `FormFallback` function. Import `FormSkeleton` and `ListSkeleton` from `@/components/ui/skeletons`. Replace the three Suspense fallbacks:
+  - ObjectNewPage: `fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}`
+  - ObjectEditForm: `fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}`
+  - FieldsPage: `fallback={<ListSkeleton />}`
+  Keep the `<Suspense>` wrappers + lazy imports; only the `fallback` prop changes (and `FormFallback` is deleted).
+
+- [ ] **Step 7: field-list.tsx (retrofit).** Replace the inline `isLoading` block:
+  `return (<div className="space-y-2 p-3">{Array.from({length:6}).map(... <Skeleton h-9 w-full/>)}</div>)`
+  → `return <ListSkeleton rows={6} />;`
+  Remove the now-unused `Skeleton` import if nothing else uses it (check).
+
+- [ ] **Step 8: search-panel.tsx (retrofit).** Replace the `hasQuery && search.isLoading` block's inline skeleton:
+  `<div className="space-y-2 p-3">{Array.from({length:5}).map(... <Skeleton h-12 w-full/>)}</div>`
+  → `<ListSkeleton rows={5} rowClassName="h-12 w-full" />`
+  Remove the now-unused `Skeleton` import if nothing else uses it (check).
+
+- [ ] **Step 9: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. The existing suite must stay green (no test asserts the old "…"/empty-div markup; tests `findBy` content). If a test fails because it queried `getByRole("status")` and now finds a labelled region (or multiple), update it minimally without weakening. Report test totals, largest chunk (KB gz), check:colors line.
+
+- [ ] **Step 10: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 11: Manual smoke (recommended).** `pnpm dev`: first load shows the app-shell skeleton (no blank flash); navigating to /vocabularies, /authorities, /search, /fields shows list skeletons (no "…"); opening /objects/:id/edit and /objects/new shows a form skeleton (no full-pane "Loading…"); all transition into content without an obvious jump.
+
+- [ ] **Step 12: Commit**
+```bash
+git add web/src/vocab/vocabulary-list.tsx web/src/vocab/vocabulary-terms.tsx web/src/authorities/authorities-page.tsx web/src/objects/object-edit-form.tsx web/src/auth/require-auth.tsx web/src/app.tsx web/src/fields/field-list.tsx web/src/search/search-panel.tsx
+git commit -m "feat(web): standardize loading on shared skeleton recipes; retire '…' + empty status divs (#53)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** recipes List/Form/AppShell as `role="status"` live regions + `common.loading` + story (T1); three "…" → ListSkeleton, object-edit-form → FormSkeleton, require-auth → AppShellSkeleton, per-route lazy fallbacks replacing FormFallback (T2 S1–S6); field-list + search-panel retrofit (T2 S7–S8); gate (T2 S9). Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the per-site replacements show the exact before→after and say "keep the existing error/empty/row branches" with the files/lines named — concrete, not vague. The story typing has an explicit fallback note. No TODOs. ✓
+
+**Type/consistency:** `ListSkeleton({rows,rowClassName,className})`, `FormSkeleton({fields,className})`, `AppShellSkeleton()` defined in T1, consumed with matching props in T2; import path `@/components/ui/skeletons` uniform. ✓
+
+## Notes
+- No new dependency; one new i18n key (`common.loading`, en+sv).
+- HTML validity: list skeletons replace the `<ul>` during load (never `<div>`-in-`<ul>`).
+- `check:size` ≈ unchanged (small components) — report it.
+- Retrofitting field-list/search-panel may leave an unused `Skeleton` import — remove it (lint will catch).

docs/superpowers/plans/2026-06-08-mutation-error-feedback.md

@@ -0,0 +1,421 @@
+# Consistent, Status-Aware Mutation Error Feedback — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the generic, inconsistent mutation-error feedback with one status-aware mapping rendered consistently inline across every create/edit/delete surface.
+
+**Architecture:** A shared `errorMessageKey(error)` maps `InUseError`/`HttpError(status)` → i18n keys (single source of truth). A shared `<MutationError error>` renders the inline alert. Mutations throw `HttpError(status)` so the status reaches the helper. All inline sites adopt the helper/component; the two non-suppressed update mutations suppress the toast and show inline like their siblings.
+
+**Tech Stack:** React 19 + TS + pnpm, TanStack Query v5, openapi-fetch, react-i18next, Vitest 4 (jsdom) + RTL + MSW. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity; app source double-quote+semicolon; `ui/` files untouched; token classes only. Run a single test pass.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-mutation-error-feedback-design.md`
+
+**Key facts:**
+- `HttpError`/`InUseError`/`FieldRejection` are exported from `web/src/api/queries.ts` (lines 6, 13, 20). `HttpError(status)` carries `.status`; `InUseError(count)` carries `.count`.
+- `web/src/api/query-client.ts:11-23` `mutationErrorMessage(error, meta)` currently special-cases `InUseError`, `HttpError 503 → search.unavailable`, `meta.errorMessage`, else `toast.error`. The `MutationCache.onError` skips when `meta.suppressErrorToast`.
+- **16 of 18 mutations already `suppressErrorToast`.** Only `useUpdateTerm` (`queries.ts:444`) and `useUpdateAuthority` (`:521`) do not — they have `meta: { successMessage: "toast.saved" }`.
+- The 16 **mutation** `throw new Error("…")` sites: `queries.ts:184,203,230,248,279,306,331,382,441,458,475,492,518,535,562,579`. `useCreateObject` (`:184`) and `useCreateVocabulary` (`:279`) destructure `{ data, error }` (no `response`) — add `response`. Lines `38,73,90,105,152,169,264` are **query** fetch errors and `:121` is the login map — **do not change these**. `useSearch` (`:360`) already throws `HttpError`.
+- Inline generic-error sites (all render `{X.isError && <p role="alert" className="text-xs text-destructive">{t("form.rejected")}</p>}`): `authorities-page.tsx:144-148` (`create`), `vocabulary-terms.tsx:119-123` (`addTerm`), `vocabulary-list.tsx:57-61` (`create`) + `:109-113` (`renameVocabulary`), `field-form.tsx:201-205` (`failed = isEdit ? update.isError : create.isError`, line 98). `delete-confirm-dialog.tsx:40` sets `err instanceof InUseError ? actions.inUse : form.rejected`. `object-new-page.tsx:36-39` and `object-edit-form.tsx:86-88` set `t("form.rejected")` in a catch else.
+- `objects.loadError` ("Could not load objects") already exists in both locales. `term-row.tsx`/`authority-row.tsx` Edit-button `onClick` currently does `setLabels(...); setUri(...); setEditing(true);`.
+- Test env: jsdom project, MSW `onUnhandledRequest:"error"`. `renderApp` (`src/test/render.tsx`) mounts `ui` at `path:"*"` in a memory router. `src/api/mutation-feedback.test.tsx` exists (tests toast wiring via `makeQueryClient` + `ToastRegion` + `renderHook`).
+
+---
+
+# Task 1: Shared helper + `<MutationError>` + i18n + query-client rewire
+
+**Files:** Create `web/src/api/error-message.ts`, `web/src/api/error-message.test.ts`, `web/src/components/mutation-error.tsx`, `web/src/components/mutation-error.test.tsx`; Modify `web/src/api/query-client.ts`, `web/src/api/mutation-feedback.test.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`.
+
+- [ ] **Step 1: Add the 5 i18n keys (both locales, parity).** Add a new top-level `"errors"` object to `web/src/i18n/en.json`:
+```json
+  "errors": {
+    "forbidden": "You don't have permission to do that.",
+    "notFound": "That item no longer exists.",
+    "conflict": "That conflicts with existing data.",
+    "validation": "Some values weren't accepted.",
+    "server": "The server had a problem. Please try again."
+  },
+```
+and to `web/src/i18n/sv.json`:
+```json
+  "errors": {
+    "forbidden": "Du har inte behörighet att göra det.",
+    "notFound": "Objektet finns inte längre.",
+    "conflict": "Det står i konflikt med befintliga data.",
+    "validation": "Vissa värden godtogs inte.",
+    "server": "Servern hade ett problem. Försök igen."
+  },
+```
+(Valid JSON — mind commas. Place it consistently in both files, e.g. before `toast`.)
+
+- [ ] **Step 2: Create `web/src/api/error-message.ts`:**
+```ts
+import { HttpError, InUseError } from "./queries";
+
+/** Maps a caught mutation error to an i18n key (+ interpolation opts). The single
+ *  source of truth shared by the global toast fallback and every inline display. */
+export function errorMessageKey(error: unknown): { key: string; opts?: Record<string, unknown> } {
+  if (error instanceof InUseError) return { key: "actions.inUse", opts: { count: error.count } };
+  if (error instanceof HttpError) return { key: statusKey(error.status) };
+  return { key: "toast.error" };
+}
+
+function statusKey(status: number): string {
+  if (status === 403) return "errors.forbidden";
+  if (status === 404) return "errors.notFound";
+  if (status === 409) return "errors.conflict";
+  if (status === 422) return "errors.validation";
+  if (status >= 500) return "errors.server";
+  return "toast.error";
+}
+```
+
+- [ ] **Step 3: Create `web/src/api/error-message.test.ts`** (write + run):
+```ts
+import { expect, test } from "vitest";
+
+import { errorMessageKey } from "./error-message";
+import { HttpError, InUseError } from "./queries";
+
+test("maps HTTP statuses to specific keys", () => {
+  expect(errorMessageKey(new HttpError(403))).toEqual({ key: "errors.forbidden" });
+  expect(errorMessageKey(new HttpError(404))).toEqual({ key: "errors.notFound" });
+  expect(errorMessageKey(new HttpError(409))).toEqual({ key: "errors.conflict" });
+  expect(errorMessageKey(new HttpError(422))).toEqual({ key: "errors.validation" });
+  expect(errorMessageKey(new HttpError(500))).toEqual({ key: "errors.server" });
+  expect(errorMessageKey(new HttpError(502))).toEqual({ key: "errors.server" });
+});
+
+test("an unmapped status falls back to the generic key", () => {
+  expect(errorMessageKey(new HttpError(418))).toEqual({ key: "toast.error" });
+});
+
+test("InUseError carries the count", () => {
+  expect(errorMessageKey(new InUseError(3))).toEqual({ key: "actions.inUse", opts: { count: 3 } });
+});
+
+test("a bare Error or unknown maps to the generic key", () => {
+  expect(errorMessageKey(new Error("boom"))).toEqual({ key: "toast.error" });
+  expect(errorMessageKey(null)).toEqual({ key: "toast.error" });
+});
+```
+Run: `cd web && pnpm vitest run src/api/error-message.test.ts` → 4 passing.
+
+- [ ] **Step 4: Create `web/src/components/mutation-error.tsx`:**
+```tsx
+import { useTranslation } from "react-i18next";
+
+import { errorMessageKey } from "../api/error-message";
+
+/** Renders a caught mutation error as an inline alert, or nothing when error is falsy.
+ *  Replaces the duplicated `<p role="alert" className="text-xs text-destructive">` markup. */
+export function MutationError({ error }: { error: unknown }) {
+  const { t } = useTranslation();
+  if (!error) return null;
+  const { key, opts } = errorMessageKey(error);
+  return (
+    <p role="alert" className="text-xs text-destructive">
+      {t(key, opts)}
+    </p>
+  );
+}
+```
+
+- [ ] **Step 5: Create `web/src/components/mutation-error.test.tsx`** (write + run):
+```tsx
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import "../i18n";
+import { MutationError } from "./mutation-error";
+import { HttpError, InUseError } from "../api/queries";
+
+test("renders the status-specific message for an HttpError", () => {
+  render(<MutationError error={new HttpError(403)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/permission/i);
+});
+
+test("renders the in-use count for an InUseError", () => {
+  render(<MutationError error={new InUseError(2)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/2/);
+});
+
+test("renders nothing when there is no error", () => {
+  const { container } = render(<MutationError error={null} />);
+  expect(container).toBeEmptyDOMElement();
+});
+```
+Run: `cd web && pnpm vitest run src/components/mutation-error.test.tsx` → 3 passing.
+
+- [ ] **Step 6: Rewire `web/src/api/query-client.ts`.** Change the import line `import { HttpError, InUseError } from "./queries";` to `import { errorMessageKey } from "./error-message";`, and replace the whole `mutationErrorMessage` function body with:
+```ts
+function mutationErrorMessage(
+  error: unknown,
+  meta: MutationMeta | undefined,
+): string {
+  if (meta?.errorMessage) return i18n.t(meta.errorMessage);
+  const { key, opts } = errorMessageKey(error);
+  return i18n.t(key, opts);
+}
+```
+(Leave the `MutationCache` `onError`/`onSuccess` wiring unchanged.)
+
+- [ ] **Step 7: Rework the obsolete toast test in `web/src/api/mutation-feedback.test.tsx`.** The "a non-suppressed mutation failing shows the catch-all error toast" test uses `useUpdateTerm`, which will suppress in Task 3 — decouple it now by driving the `MutationCache` fallback with a synthetic non-suppressed mutation. Add `useMutation` to the `@tanstack/react-query` import and `HttpError` to the queries import, then replace that single test with:
+```tsx
+  test("a non-suppressed mutation failing shows the status-mapped error toast", async () => {
+    const { result, unmount } = renderHook(
+      () =>
+        useMutation({
+          mutationFn: async () => {
+            throw new HttpError(500);
+          },
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    await expect(result.current.mutateAsync()).rejects.toThrow();
+
+    await waitFor(() => {
+      expect(
+        within(document.body).getByText(i18n.t("errors.server")),
+      ).toBeInTheDocument();
+    });
+
+    unmount();
+  });
+```
+(Keep the other two tests — success toast via `useUpdateTerm`, and suppressed `useDeleteVocabulary` adds no toast — unchanged. Imports: add `useMutation`; add `HttpError` from `./queries`.)
+
+- [ ] **Step 8: Verify (vitest ONCE for the touched files), then typecheck + lint:**
+```bash
+cd web && pnpm vitest run src/api/error-message.test.ts src/components/mutation-error.test.tsx src/api/mutation-feedback.test.tsx src/i18n && pnpm typecheck && pnpm lint
+```
+Expected: all green (helper 4, component 3, feedback 3, i18n parity covering the 5 new keys).
+
+- [ ] **Step 9: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/error-message.ts web/src/api/error-message.test.ts web/src/components/mutation-error.tsx web/src/components/mutation-error.test.tsx web/src/api/query-client.ts web/src/api/mutation-feedback.test.tsx web/src/i18n/en.json web/src/i18n/sv.json
+git commit -m "feat(web): shared status-aware error-message helper + MutationError component (#63)"
+```
+
+---
+
+# Task 2: Make mutation errors load-bearing (throw `HttpError(status)`)
+
+**Files:** Modify `web/src/api/queries.ts`.
+
+- [ ] **Step 1: Convert the 16 mutation throws to `HttpError`.** In `web/src/api/queries.ts`, at each of these lines replace `throw new Error("…")` with `throw new HttpError(response.status)` — keeping every surrounding `InUseError` (409) and `FieldRejection` (422) branch exactly as-is:
+  - `:203` `useUpdateObject` — `if (response.status !== 204) throw new HttpError(response.status);`
+  - `:230` `useSetFields` — the final fallback after the 204/422 checks: `throw new HttpError(response.status);`
+  - `:248` `useDeleteObject` — `throw new HttpError(response.status);`
+  - `:306` `useAddTerm` — `if (response.status !== 201) throw new HttpError(response.status);`
+  - `:331` `useCreateAuthority` — `throw new HttpError(response.status);`
+  - `:382` `useCreateFieldDefinition` — `if (response.status !== 201 || !data) throw new HttpError(response.status);`
+  - `:441` `useUpdateTerm` — `throw new HttpError(response.status);`
+  - `:458` `useDeleteTerm` — the post-409 fallback: `if (response.status !== 204) throw new HttpError(response.status);`
+  - `:475` `useRenameVocabulary` — `throw new HttpError(response.status);`
+  - `:492` `useDeleteVocabulary` — post-409 fallback: `throw new HttpError(response.status);`
+  - `:518` `useUpdateAuthority` — `throw new HttpError(response.status);`
+  - `:535` `useDeleteAuthority` — post-409 fallback: `throw new HttpError(response.status);`
+  - `:562` `useUpdateFieldDefinition` — `throw new HttpError(response.status);`
+  - `:579` `useDeleteFieldDefinition` — post-409 fallback: `throw new HttpError(response.status);`
+
+- [ ] **Step 2: The two POSTs that don't destructure `response`.** For `useCreateObject` (`:184`) and `useCreateVocabulary` (`:279`), change `const { data, error } = await api.POST(...)` to `const { data, error, response } = await api.POST(...)` and replace `if (error || !data) throw new Error("…")` with `if (error || !data) throw new HttpError(response.status);`.
+
+- [ ] **Step 3: Do NOT touch** the query fetch errors (`:38,73,90,105,152,169,264`) or the login map (`:121`) — they keep `throw new Error(...)` (consumed by component `isError`/login mapping, not the toast). `HttpError` is already imported in this file (it's defined here), so no import change.
+
+- [ ] **Step 4: Verify (vitest ONCE), typecheck, lint:**
+```bash
+cd web && pnpm vitest run src/api/queries.test.ts src/api/mutation-feedback.test.tsx && pnpm typecheck && pnpm lint
+```
+Expected: green. `HttpError` extends `Error`, so any `.rejects.toThrow()` assertions still pass (no test asserts the old message strings). If `queries.test.ts` asserts a specific thrown type/message that now differs, update it to assert `HttpError`/status (do not weaken).
+
+- [ ] **Step 5: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/queries.ts
+git commit -m "feat(web): mutations throw HttpError(status) so failures are status-aware (#63)"
+```
+
+---
+
+# Task 3: Edit-row consistency + delete-dialog adoption
+
+**Files:** Modify `web/src/api/queries.ts`, `web/src/vocab/term-row.tsx`, `web/src/authorities/authority-row.tsx`, `web/src/components/delete-confirm-dialog.tsx`, and their tests / `web/src/api/mutation-feedback.test.tsx` consumers.
+
+- [ ] **Step 1: Suppress the two update toasts.** In `web/src/api/queries.ts`, change `useUpdateTerm`'s meta (`:444`) from `meta: { successMessage: "toast.saved" }` to `meta: { successMessage: "toast.saved", suppressErrorToast: true }`, and the same for `useUpdateAuthority` (`:521`).
+
+- [ ] **Step 2: Inline error + reset in `web/src/vocab/term-row.tsx`.** Add the import `import { MutationError } from "../components/mutation-error";`. In the editing view, add `<MutationError error={updateTerm.error} />` immediately after the save/cancel `<div className="flex gap-2">…</div>` (still inside the `<li>`). In the non-editing view's Edit `<Button>` `onClick`, add `updateTerm.reset();` as the first statement (before `setLabels(...)`):
+```tsx
+        onClick={() => {
+          updateTerm.reset();
+          setLabels(term.labels as LabelInput[]);
+          setUri(term.external_uri ?? "");
+          setEditing(true);
+        }}
+```
+
+- [ ] **Step 2b: Same for `web/src/authorities/authority-row.tsx`.** Import `MutationError`; add `<MutationError error={updateAuthority.error} />` after the save/cancel `<div className="flex gap-2">…</div>`; add `updateAuthority.reset();` as the first statement in the Edit button's `onClick`.
+
+- [ ] **Step 3: Status-aware delete dialog (`web/src/components/delete-confirm-dialog.tsx`).** Add `import { errorMessageKey } from "../api/error-message";`, remove the now-unused `import { InUseError } from "../api/queries";`, and change the `catch` block (lines ~37-41) from the `err instanceof InUseError ? … : t("form.rejected")` line to:
+```tsx
+    } catch (err) {
+      // Keep the dialog open; show the blocking reason. Never let the rejected
+      // mutation escape as an unhandled rejection.
+      const { key, opts } = errorMessageKey(err);
+      setMessage(t(key, opts));
+      return;
+    }
+```
+(`errorMessageKey` already maps `InUseError` → `actions.inUse` with the count, so the in-use message is preserved and a 403/404 delete now shows a specific message.)
+
+- [ ] **Step 4: Tests.** Add a failing-update test to `web/src/vocab/term-row.tsx`'s area — create `web/src/vocab/term-row.test.tsx` if absent (check first), else extend. Render a `TermRow` inside `renderApp` with the `makeQueryClient` toast wrapper is overkill — use the existing `renderApp` and MSW. Concretely:
+```tsx
+import { expect, test } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { TermRow } from "./term-row";
+
+const term = { id: "t1", external_uri: null, labels: [{ lang: "en", label: "Bronze" }] };
+
+test("a failed term update shows an inline error and keeps the row editable", async () => {
+  server.use(
+    http.patch("/api/admin/vocabularies/:id/terms/:term_id", () => new HttpResponse(null, { status: 403 })),
+  );
+  renderApp(<ul><TermRow vocabularyId="v1" term={term as never} lang="en" /></ul>);
+
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+
+  expect(await screen.findByRole("alert")).toHaveTextContent(/permission/i);
+  // still editable: the save button is still present (editor did not close)
+  expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
+});
+
+test("re-entering edit after a failure clears the stale error", async () => {
+  server.use(
+    http.patch("/api/admin/vocabularies/:id/terms/:term_id", () => new HttpResponse(null, { status: 403 })),
+  );
+  renderApp(<ul><TermRow vocabularyId="v1" term={term as never} lang="en" /></ul>);
+
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+  expect(await screen.findByRole("alert")).toBeInTheDocument();
+  await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+
+  expect(screen.queryByRole("alert")).toBeNull();
+});
+```
+(Adjust the `lang`/`term` cast to match `TermView`. If a `term-row.test.tsx` already exists, append these and keep existing tests green. The `mutation-feedback.test.tsx` test #1 — `useUpdateTerm` success → `toast.saved` — still passes since suppress only affects errors; confirm it stays green.)
+
+- [ ] **Step 5: Verify (vitest ONCE):**
+```bash
+cd web && pnpm vitest run src/vocab/term-row.test.tsx src/authorities src/components/delete-confirm-dialog.test.tsx src/api/mutation-feedback.test.tsx && pnpm typecheck && pnpm lint
+```
+Expected: green (new row tests pass; delete-dialog story/test still green; authority tests green). If `delete-confirm-dialog.test.tsx` doesn't exist, drop it from the command.
+
+- [ ] **Step 6: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/queries.ts web/src/vocab/term-row.tsx web/src/authorities/authority-row.tsx web/src/components/delete-confirm-dialog.tsx web/src/vocab/term-row.test.tsx
+git commit -m "feat(web): inline status-aware errors on term/authority edit rows + delete dialog (#63)"
+```
+
+---
+
+# Task 4: Create/rename/object form adoption + fetch fix + full gate
+
+**Files:** Modify `web/src/authorities/authorities-page.tsx`, `web/src/vocab/vocabulary-terms.tsx`, `web/src/vocab/vocabulary-list.tsx`, `web/src/fields/field-form.tsx`, `web/src/objects/object-new-page.tsx`, `web/src/objects/object-edit-form.tsx` (+ a test).
+
+- [ ] **Step 1: Adopt `<MutationError>` at the create/rename inline sites.** In each file, add `import { MutationError } from "../components/mutation-error";` (path `../components/mutation-error` from these dirs) and replace the `{X.isError && <p role="alert" className="text-xs text-destructive">{t("form.rejected")}</p>}` block with `<MutationError error={X.error} />`:
+  - `authorities-page.tsx:144-148` → `<MutationError error={create.error} />`
+  - `vocabulary-terms.tsx:119-123` → `<MutationError error={addTerm.error} />`
+  - `vocabulary-list.tsx:57-61` → `<MutationError error={create.error} />`; and `:109-113` → `<MutationError error={renameVocabulary.error} />`
+  - `field-form.tsx:201-205` → `<MutationError error={isEdit ? update.error : create.error} />`; then delete the now-unused `const failed = isEdit ? update.isError : create.isError;` (`:98`). Keep `const pending = …` and the `{error && …form.required}` validation block.
+
+- [ ] **Step 2: Object create/edit catch-else via the helper.** In `web/src/objects/object-new-page.tsx`, add `import { errorMessageKey } from "../api/error-message";` and change the create catch (`:36-39`) from `} catch { setError(t("form.rejected")); return false; }` to:
+```tsx
+    } catch (e) {
+      const { key, opts } = errorMessageKey(e);
+      setError(t(key, opts));
+      return false;
+    }
+```
+In `web/src/objects/object-edit-form.tsx`, add the same import and change the non-`FieldRejection` else (`:86-88`) from `setError(t("form.rejected"));` to:
+```tsx
+      } else {
+        const { key, opts } = errorMessageKey(e);
+        setError(t(key, opts));
+      }
+```
+
+- [ ] **Step 3: Fetch-error fix in `web/src/objects/object-edit-form.tsx`.** Change `const { data: object, isLoading } = useObject(id!);` to `const { data: object, isLoading, isError } = useObject(id!);` and insert, between the `isLoading` and `!object` guards:
+```tsx
+  if (isError) return <p className="p-4 text-sm text-destructive">{t("objects.loadError")}</p>;
+```
+
+- [ ] **Step 4: Test the fetch fix + one create-form adoption.** Add to `web/src/objects/object-edit-form.test.tsx` (create if absent):
+```tsx
+test("renders a load error (not 'not found') when the object fetch fails", async () => {
+  server.use(http.get("/api/admin/objects/:id", () => new HttpResponse(null, { status: 500 })));
+  renderApp(<Routes><Route path="/objects/:id/edit" element={<ObjectEditForm />} /></Routes>, {
+    route: "/objects/abc/edit",
+  });
+  expect(await screen.findByText(/could not load/i)).toBeInTheDocument();
+  expect(screen.queryByText(/not found/i)).toBeNull();
+});
+```
+(Use the file's existing imports/harness; add `http`/`HttpResponse` from `msw`, `Routes`/`Route`, `server`, `renderApp`, `ObjectEditForm` as needed. If the file exists, append and keep its tests green.) Also add to `web/src/authorities/authorities-page.test.tsx` (or the nearest existing authorities test) a case asserting a failed create shows the status message:
+```tsx
+test("a failed create shows a status-aware inline error", async () => {
+  server.use(http.post("/api/admin/authorities", () => new HttpResponse(null, { status: 403 })));
+  // …render the authorities page, fill a label, submit…
+  expect(await screen.findByText(/permission/i)).toBeInTheDocument();
+});
+```
+(Wire the render/fill/submit to match the existing authorities test harness; if that harness isn't readily reusable, cover the create-error path through `field-form` or skip this second assertion — the `MutationError` component test already proves the rendering, and `error-message.test.ts` proves the mapping. Do NOT add a brittle test just to hit a number.)
+
+- [ ] **Step 5: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (gz), and the `check:colors` line.
+
+- [ ] **Step 6: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 7: Manual smoke (recommended).** With the stack + server + `pnpm dev`: cause a failing save (e.g. stop the server, or a 409 on a duplicate) on a term/authority edit row → inline status message appears at the row, row stays editable; a failed create shows the inline message; loading an edit form whose object 500s shows "Could not load objects" not "not found."
+
+- [ ] **Step 8: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/authorities/authorities-page.tsx web/src/vocab/vocabulary-terms.tsx web/src/vocab/vocabulary-list.tsx web/src/fields/field-form.tsx web/src/objects/object-new-page.tsx web/src/objects/object-edit-form.tsx web/src/objects/object-edit-form.test.tsx web/src/authorities/authorities-page.test.tsx
+git commit -m "feat(web): adopt MutationError across create/object forms; distinguish edit-form fetch error (#63)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 `errorMessageKey` + unit test (T1 S2-S3); AC2 `<MutationError>` + adoption at delete-dialog (T3 S3), create/rename forms (T4 S1), object-form `formError` via helper (T4 S2), edit rows (T3 S2); AC3 16 throws → `HttpError` + query-client rewire (T2, T1 S6); AC4 update suppress + inline + reset (T3 S1-S2); AC5 edit-form fetch error (T4 S3); AC6 gate + parity + codename (T4 S5-S6, T1 S1). ✓
+
+**Placeholder scan:** every code step shows complete code; tests have concrete assertions and exact statuses (403/500); the one soft spot (T4 S4 second assertion) is explicitly bounded with "don't add a brittle test to hit a number," and the mapping/rendering are already proven by T1's two test files. No TODO/TBD. ✓
+
+**Type/consistency:** `errorMessageKey(error: unknown): { key: string; opts? }` defined in T1, consumed identically by `query-client.ts`, `MutationError`, `delete-confirm-dialog`, `object-new-page`, `object-edit-form`. `HttpError(status)` (T2) feeds `errorMessageKey`'s `instanceof HttpError` branch. `suppressErrorToast` added (T3 S1) matches the sibling mutations' meta shape. `objects.loadError` pre-exists. ✓
+
+## Notes
+- No new dependency. `ui/*` untouched. en/sv parity preserved (5 new `errors.*` keys, guarded by the #60 parity test).
+- After Task 2 (before Task 3), `useUpdateTerm`/`useUpdateAuthority` are still non-suppressed and now throw `HttpError`, so a failed update shows a status-mapped **toast** — a transient mid-milestone state; Task 3 moves it inline. Each commit is independently green.
+- Error classes stay in `queries.ts`; relocating them to `api/errors.ts` is tracked in #65.

docs/superpowers/plans/2026-06-08-refdata-scannability.md

@@ -0,0 +1,295 @@
+# Reference-Data Scannability + Parity — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Make the three reference-data lists scannable (locale-aware sort + filter), show `external_uri` in read rows, add field-group count badges, and close the small parity/validation gaps — no layout/edit-modality change, no backend change.
+
+**Architecture:** A shared `lib/sort.ts` (memoized `Intl.Collator` comparators) + a tiny `ExternalUriLink` are consumed by the vocab/authorities/fields list components. Each list gets a client-side filter `useState` + `<Input>`; rows are filtered then sorted before render.
+
+**Tech Stack:** React 19 + TS + pnpm, react-i18next, Vitest + RTL + MSW. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity (3 new keys); app source double-quote+semicolon; token classes only; **don't mutate query-cache arrays — sort a copy** (`[...list].sort(...)`).
+
+**Spec:** `docs/superpowers/specs/2026-06-08-refdata-scannability-design.md`
+
+**Key facts (from the code):**
+- `labelText(labels, lang)` in `lib/labels.ts`. `lang = i18n.language.startsWith("sv") ? "sv" : "en"`.
+- term/authority view = `{ id, labels, external_uri?: string|null }` (authority also `kind`); vocabulary = `{ id, key }`; field-def = `{ key, labels, data_type, group?, required, … }`.
+- `term-row.tsx`/`authority-row.tsx`: read mode `<span className="flex-1">{labelText(...)}</span>` + Edit + DeleteConfirmDialog; edit mode has the `external_uri` `<Input>` (no `type`/placeholder).
+- `vocabulary-list.tsx`: create form (has empty-guard) + list; rename `<form onSubmit>` calls `renameVocabulary.mutate({ id, key: draftKey.trim() })` with NO empty-guard.
+- `authorities-page.tsx`: tabs + list + create form; create calls `create.mutate({ kind, external_uri: null, labels })` — hardcoded null, no URI field.
+- `field-list.tsx`: groups built into a `Map`; sorted with `t("fields.other")` last (no A–Z); group header `<div className="… label-caption">{group}</div>`; rows show label+key+type+required.
+- `common` i18n: `{ yes, no, close, loading }`. `labels`: `{ label, externalUri, otherLanguages }`.
+
+---
+
+# Task 1: Shared `sort.ts` + `ExternalUriLink` + i18n + unit test
+
+**Files:** `web/src/lib/sort.ts` (new), `web/src/lib/sort.test.ts` (new), `web/src/components/external-uri-link.tsx` (new), `web/src/i18n/en.json`, `web/src/i18n/sv.json`.
+
+- [ ] **Step 1: i18n (both locales, parity).**
+  - `common`: add `"filter"` (en "Filter…" / sv "Filtrera…") and `"noMatches"` (en "No matches" / sv "Inga träffar").
+  - `labels`: add `"uriPlaceholder": "https://…"` (same string in both).
+
+- [ ] **Step 2: `web/src/lib/sort.ts`:**
+```ts
+import type { components } from "../api/schema";
+
+import { labelText } from "./labels";
+
+type LabelView = components["schemas"]["LabelView"];
+
+const collators = new Map<string, Intl.Collator>();
+
+function collatorFor(lang: string): Intl.Collator {
+  let c = collators.get(lang);
+  if (!c) {
+    c = new Intl.Collator(lang, { sensitivity: "base", numeric: true });
+    collators.set(lang, c);
+  }
+  return c;
+}
+
+export function compareStrings(lang: string, a: string, b: string): number {
+  return collatorFor(lang).compare(a, b);
+}
+
+export function byLabel(lang: string) {
+  return (a: { labels: LabelView[] }, b: { labels: LabelView[] }) =>
+    compareStrings(lang, labelText(a.labels, lang), labelText(b.labels, lang));
+}
+
+export function byKey(lang: string) {
+  return (a: { key: string }, b: { key: string }) => compareStrings(lang, a.key, b.key);
+}
+```
+
+- [ ] **Step 3: `web/src/lib/sort.test.ts`** (write failing first, then it passes with Step 2):
+```ts
+import { expect, test } from "vitest";
+import { byKey, byLabel, compareStrings } from "./sort";
+
+const L = (label: string) => ({ labels: [{ lang: "en", label }] });
+
+test("byLabel sorts case-insensitively and locale-aware", () => {
+  const sorted = [L("Iron"), L("bronze"), L("Amber")].sort(byLabel("en")).map((x) => x.labels[0].label);
+  expect(sorted).toEqual(["Amber", "bronze", "Iron"]);
+});
+
+test("byKey sorts keys with numeric awareness", () => {
+  const sorted = [{ key: "item10" }, { key: "item2" }, { key: "item1" }].sort(byKey("en")).map((x) => x.key);
+  expect(sorted).toEqual(["item1", "item2", "item10"]);
+});
+
+test("compareStrings is case-insensitive", () => {
+  expect(compareStrings("en", "bronze", "BRONZE")).toBe(0);
+});
+```
+Run: `cd web && pnpm vitest run src/lib/sort.test.ts` → PASS (3 tests).
+
+- [ ] **Step 4: `web/src/components/external-uri-link.tsx`** (app-source style):
+```tsx
+export function ExternalUriLink({ uri }: { uri: string }) {
+  return (
+    <a
+      href={uri}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="block truncate text-xs text-muted-foreground hover:text-foreground"
+    >
+      {uri}
+    </a>
+  );
+}
+```
+
+- [ ] **Step 5: Verify (vitest ONCE):** `cd web && pnpm vitest run src/lib/sort.test.ts && pnpm typecheck && pnpm lint`. PASS, clean.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/lib/sort.ts web/src/lib/sort.test.ts web/src/components/external-uri-link.tsx web/src/i18n/en.json web/src/i18n/sv.json
+git commit -m "feat(web): collator sort helpers + ExternalUriLink + filter/uri i18n (#50)"
+```
+
+---
+
+# Task 2: Vocabularies — filter + sort + URI + rename guard
+
+**Files:** `web/src/vocab/vocabulary-list.tsx`, `web/src/vocab/vocabulary-terms.tsx`, `web/src/vocab/term-row.tsx`, `web/src/vocab/vocabularies.test.tsx`.
+
+- [ ] **Step 1: `vocabulary-list.tsx`** — add `i18n` to `useTranslation` (`const { t, i18n } = …`) and `const lang = i18n.language.startsWith("sv") ? "sv" : "en";`; import `byKey` from `../lib/sort` and `Input` is already imported. Add `const [filter, setFilter] = useState("");`.
+  - Add a filter `<Input>` between the create `<form>` and the list block:
+```tsx
+<div className="border-b p-2">
+  <Input
+    aria-label={t("common.filter")}
+    placeholder={t("common.filter")}
+    value={filter}
+    onChange={(e) => setFilter(e.target.value)}
+  />
+</div>
+```
+  - In the loaded `<ul>`, replace `{data?.map((v) => (…` with a filtered+sorted list:
+```tsx
+{(() => {
+  const q = filter.trim().toLowerCase();
+  const rows = [...(data ?? [])]
+    .filter((v) => !q || v.key.toLowerCase().includes(q))
+    .sort(byKey(lang));
+  if (data && data.length > 0 && rows.length === 0)
+    return <li className="p-3 text-sm text-muted-foreground">{t("common.noMatches")}</li>;
+  return rows.map((v) => (/* the EXISTING <li> row markup, unchanged */));
+})()}
+```
+  Keep the `isError`/empty(`data?.length === 0`) branches as-is. (Prefer a clean inline: compute `rows` before the `return`, but the IIFE keeps it local — implementer may hoist `const rows = …` above the JSX instead, whichever is cleaner and lint-clean.)
+  - **Rename empty-guard:** in the rename `<form onSubmit>`, add a guard before mutate:
+```tsx
+onSubmit={(e) => {
+  e.preventDefault();
+  if (!draftKey.trim()) return;
+  renameVocabulary.mutate({ id: v.id, key: draftKey.trim() }, { onSuccess: () => setEditingId(null) });
+}}
+```
+
+- [ ] **Step 2: `vocabulary-terms.tsx`** — add `const [filter, setFilter] = useState("");`; import `byLabel` from `../lib/sort`. Add a filter `<Input>` above the terms list (the component already has `Input` imported; place it above the `{isLoading ? … : <ul>}` block). In the `<ul>`, replace `{terms?.map((term) => …}` with filtered (`labelText(term.labels, lang).toLowerCase().includes(q)`) + `.sort(byLabel(lang))`; filtered-empty (terms exist) → `common.noMatches` `<li>`. Add `type="url"` + `placeholder={t("labels.uriPlaceholder")}` to the add-term `external_uri` `<Input id="term-uri">`.
+
+- [ ] **Step 3: `term-row.tsx`** — import `ExternalUriLink` from `../components/external-uri-link`. In read mode, wrap the label + URI in a flex-1 column so the URI shows under the label:
+```tsx
+<div className="flex-1">
+  <div>{labelText(term.labels, lang)}</div>
+  {term.external_uri && <ExternalUriLink uri={term.external_uri} />}
+</div>
+```
+(Replace the existing `<span className="flex-1">{labelText(...)}</span>`; keep the Edit + DeleteConfirmDialog.) Add `type="url"` + `placeholder={t("labels.uriPlaceholder")}` to the edit-mode `external_uri` `<Input>`.
+
+- [ ] **Step 4: Tests** (`vocabularies.test.tsx`) — extend (mirror the existing MSW/`tree()` setup; check the term/vocab fixtures for labels to assert order):
+  - vocabularies render **sorted by key** (seed/confirm the fixture has out-of-order keys; assert DOM order).
+  - typing in the vocab **filter** narrows the list (type a substring → only matching vocab shows).
+  - **rename with an empty key** does NOT call the rename endpoint (override the PATCH/PUT handler with a spy; clear the rename input and submit; assert no request).
+  - a **term read row shows its `external_uri`** as a link (seed a term fixture with `external_uri`; assert `getByRole("link", { name: /<uri>/ })`). (If the term fixture lacks a URI, add one — check `materialTerms` in `web/src/test/fixtures.ts`.)
+  Keep existing vocab tests green. Don't weaken.
+
+- [ ] **Step 5: Verify (vitest ONCE):** `cd web && pnpm vitest run src/vocab && pnpm typecheck && pnpm lint`. PASS.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/vocab/vocabulary-list.tsx web/src/vocab/vocabulary-terms.tsx web/src/vocab/term-row.tsx web/src/vocab/vocabularies.test.tsx
+git commit -m "feat(web): vocab list/terms sort+filter, external_uri in rows, rename guard, url input (#50)"
+```
+
+---
+
+# Task 3: Authorities — filter + sort + create URI + read URI
+
+**Files:** `web/src/authorities/authorities-page.tsx`, `web/src/authorities/authority-row.tsx`, `web/src/authorities/authorities.test.tsx`.
+
+- [ ] **Step 1: `authorities-page.tsx`** — add `const [filter, setFilter] = useState("");` and `const [uri, setUri] = useState("");`; import `byLabel` from `../lib/sort` and `Input`/`Label` (`Input` may need importing — check; `Button` already imported).
+  - **Filter `<Input>`** above the list block (below the tablist):
+```tsx
+<div className="mb-3">
+  <Input aria-label={t("common.filter")} placeholder={t("common.filter")} value={filter} onChange={(e) => setFilter(e.target.value)} />
+</div>
+```
+  - In the loaded `<ul>`, replace `{authorities?.map((a) => …}` with filtered (`labelText(a.labels, lang).toLowerCase().includes(q)`) + `.sort(byLabel(lang))`; filtered-empty (authorities exist) → `common.noMatches` `<li>`.
+  - **Create form gains an `external_uri` field** (after the `<LabelEditor>`):
+```tsx
+<div className="space-y-1">
+  <Label htmlFor="auth-create-uri">{t("labels.externalUri")}</Label>
+  <Input id="auth-create-uri" type="url" placeholder={t("labels.uriPlaceholder")} value={uri} onChange={(e) => setUri(e.target.value)} />
+</div>
+```
+  - In `onCreate`, send the URI and reset it:
+```tsx
+create.mutate(
+  { kind: kind as string, external_uri: uri.trim() || null, labels },
+  { onSuccess: () => { setLabels([]); setUri(""); } },
+);
+```
+
+- [ ] **Step 2: `authority-row.tsx`** — same as term-row: import `ExternalUriLink`; read mode shows label + `ExternalUriLink` (when `authority.external_uri`) in a `flex-1` column; edit `external_uri` `<Input>` gets `type="url"` + `placeholder={t("labels.uriPlaceholder")}`.
+
+- [ ] **Step 3: Tests** (`authorities.test.tsx`) — extend (mirror existing setup; check `personAuthorities` fixture):
+  - list **sorted by label** (assert DOM order; ensure fixture has out-of-order labels or seed it).
+  - **filter** narrows the list.
+  - the **create form has an `external_uri` field** and a created authority **posts the entered URI** (spy the POST body; type a URI; assert `body.external_uri`).
+  - a **read row shows the `external_uri`** link (seed a fixture authority with a URI).
+  Keep existing authorities tests green (tabs, aria-selected, create-without-label alert, 500, redirect).
+
+- [ ] **Step 4: Verify (vitest ONCE):** `cd web && pnpm vitest run src/authorities && pnpm typecheck && pnpm lint`. PASS.
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/authorities/authorities-page.tsx web/src/authorities/authority-row.tsx web/src/authorities/authorities.test.tsx
+git commit -m "feat(web): authorities sort+filter, create external_uri, external_uri in rows, url input (#50)"
+```
+
+---
+
+# Task 4: Fields — filter + within-group sort + group order + count badges + gate
+
+**Files:** `web/src/fields/field-list.tsx`, `web/src/fields/fields.test.tsx`.
+
+- [ ] **Step 1: `field-list.tsx`** — import `byLabel` and `compareStrings` from `../lib/sort` and `Badge` from `@/components/ui/badge`. Add `const [filter, setFilter] = useState("");` (add `useState` to the React import). After the early returns, before grouping:
+  - Filter `data` by label/key: `const q = filter.trim().toLowerCase(); const filtered = (data ?? []).filter((d) => !q || labelText(d.labels, lang).toLowerCase().includes(q) || d.key.toLowerCase().includes(q));`
+  - Build the `groups` Map from `filtered` (not `data`).
+  - **Sort group entries** named A–Z (collator), `t("fields.other")` last:
+```tsx
+const otherLabel = t("fields.other");
+const entries = [...groups.entries()].sort((a, b) => {
+  if (a[0] === otherLabel) return 1;
+  if (b[0] === otherLabel) return -1;
+  return compareStrings(lang, a[0], b[0]);
+});
+```
+  - **Sort each group's defs** by `byLabel(lang)`: when rendering `defs.map`, use `[...defs].sort(byLabel(lang)).map(...)`.
+  - **Count badge** in each group header:
+```tsx
+<div className="flex items-center justify-between border-b bg-muted px-3 py-1 label-caption">
+  <span>{group}</span>
+  <Badge variant="secondary">{defs.length}</Badge>
+</div>
+```
+  - Render a **filter `<Input>`** above the `<ul>` (wrap the return in a fragment/column): a `<div className="border-b p-2"><Input aria-label={t("common.filter")} placeholder={t("common.filter")} value={filter} onChange={(e) => setFilter(e.target.value)} /></div>` then the `<ul>`. If `filtered.length === 0` (data exists), show `<p className="p-3 text-sm text-muted-foreground">{t("common.noMatches")}</p>` instead of the `<ul>`. (Import `Input` from `@/components/ui/input`.)
+  Note: the filter Input must remain visible during the empty-filter state so the user can clear it.
+
+- [ ] **Step 2: Tests** (`fields.test.tsx`) — extend (mirror existing setup; `fieldDefinitions` fixture):
+  - fields render **sorted within their group by label** (assert relative DOM order of two fields in the same group).
+  - a **group header shows a count badge** (assert the count number is present near a group label).
+  - typing in the **filter** narrows the visible fields (and/or shows `common.noMatches` when nothing matches).
+  Keep the existing fields tests green (grouped list, create text field, reveal pickers).
+
+- [ ] **Step 3: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (KB gz), check:colors line.
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 5: Manual smoke (recommended).** `pnpm dev`: each reference list is alphabetized and has a working filter; term/authority rows show their external_uri as a muted link; field groups show counts; the authority create form has a URI field; renaming a vocab to empty does nothing; URI inputs are `type=url` with a placeholder.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/fields/field-list.tsx web/src/fields/fields.test.tsx
+git commit -m "feat(web): field-list filter, within-group label sort, group order, count badges (#50)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** sort.ts collator + byLabel/byKey + unit test (T1); ExternalUriLink + i18n (T1); vocab list/terms sort+filter + rename guard + read URI + url input (T2); authorities sort+filter + create URI + read URI + url input (T3); fields filter + within-group sort + group A–Z + count badges (T4); gate (T4). Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the list-rewrite steps say "the EXISTING row markup, unchanged" with the files quoted, and tests say "check the fixture / seed a URI" with the fixture files named — concrete, not vague. The IIFE-vs-hoist choice is explicitly the implementer's (both lint-clean). No TODOs. ✓
+
+**Type/consistency:** `byLabel(lang)`/`byKey(lang)`/`compareStrings(lang,a,b)` defined in T1, consumed in T2/T3/T4; `ExternalUriLink({uri})` used in term-row + authority-row; the filter `useState`/predicate pattern is uniform across the four lists; `[...arr].sort(...)` (copy, never mutate cache) everywhere. ✓
+
+## Notes
+- No new dependency; 3 new i18n keys (`common.filter`, `common.noMatches`, `labels.uriPlaceholder`), en+sv.
+- Counts: only field-group counts (client-side). Per-vocab term & per-kind authority counts need backend → follow-up.
+- Always sort a COPY of the react-query data (never mutate the cached array).

docs/superpowers/plans/2026-06-08-search-row-date.md

@@ -0,0 +1,140 @@
+# Search-Result Date Meta + Estimated-Count Copy — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Thread `recording_date` through the search index/hit/view (Rust), show it on the result row, and soften the estimated-count copy.
+
+**Architecture:** Backend adds `recording_date: Option<String>` (`YYYY-MM-DD`) to `SearchDocument` (projected in `build_document`), `SearchHit` (mapped in `search_objects`), and `SearchHitView` (API). The frontend type comes from the regenerated/edited `schema.d.ts`; the row renders the date and the count copy gains a `~`.
+
+**Tech Stack:** Rust (search + api crates, Meilisearch, utoipa), React + TS + pnpm. Tests need the docker stack (Postgres :5442, Meilisearch :7700 — already up). Rust test runner: `cargo nextest`. Frontend: `pnpm test`.
+
+**Conventions:** `cargo +nightly fmt` + `cargo clippy --workspace --all-targets -- -D warnings` for Rust; pnpm + no `any`/`eslint-disable` + en/sv parity for web; no codename; manage deps via cargo-mcp if any (none here). Run a single test pass.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-search-row-date-design.md`
+
+**Key facts:**
+- `crates/search/src/lib.rs`: `SearchDocument` (`:30`), `SearchHit` (`:52`), `build_document` (`:302`, returns the `SearchDocument { … }` literal around `:363`), `search_objects` hit map (`~:220`). `domain::Date` Display = ISO `YYYY-MM-DD`; `CatalogueObject.recording_date: Option<Date>`.
+- `crates/api/src/admin_search.rs`: `SearchHitView` (`:26`) + map closure (`:100`).
+- `crates/search/tests/search.rs`: a `doc(...)` helper builds a `SearchDocument` literal; `search_objects_returns_hits_…` (`:55`) seeds 3 docs + asserts. `tests/sync.rs`/`tests/reindex.rs` construct `CatalogueObject` (already has `recording_date` — unaffected) but may also build `SearchDocument` — check.
+- `web/src/api/schema.d.ts` `SearchHitView` block (`:601`): keys are alphabetized — insert `recording_date?: string | null;` between `object_number` and `snippet`.
+- `web/src/search/search-result-row.tsx`: meta line `<span>{hit.object_number}</span> <VisibilityBadge/>`.
+- i18n `search.resultCount_one/_other`; `web/src/test/fixtures.ts` `searchHits`; `web/src/search/search.test.tsx` asserts `/25 results/i`.
+
+---
+
+# Task 1: Backend — `recording_date` through index → hit → view (+ schema)
+
+**Files:** `crates/search/src/lib.rs`, `crates/api/src/admin_search.rs`, `crates/search/tests/search.rs` (+ any test with a `SearchDocument`/`SearchHit` literal), `web/src/api/schema.d.ts`.
+
+- [ ] **Step 1: `SearchDocument` + `build_document`** (`crates/search/src/lib.rs`):
+  - Add `pub recording_date: Option<String>,` to `SearchDocument` (after `recorder`, before `visibility` — keep a sensible order).
+  - In the `Ok(SearchDocument { … })` literal at the end of `build_document`, add `recording_date: object.recording_date.map(|d| d.to_string()),`.
+
+- [ ] **Step 2: `SearchHit` + `search_objects` mapping** (`crates/search/src/lib.rs`):
+  - Add `pub recording_date: Option<String>,` to `SearchHit` (after `visibility`, before `snippet` or near it).
+  - In `search_objects`, the `SearchHit { id, object_number, object_name, brief_description, visibility, snippet }` literal: add `recording_date: doc.recording_date,`.
+
+- [ ] **Step 3: `SearchHitView`** (`crates/api/src/admin_search.rs`):
+  - Add `pub recording_date: Option<String>,` to `SearchHitView`.
+  - In the `.map(|h| SearchHitView { … })` closure: add `recording_date: h.recording_date,`.
+
+- [ ] **Step 4: Fix test literals + extend the search test** (`crates/search/tests/search.rs`):
+  - The `doc(...)` helper builds a `SearchDocument` literal — add `recording_date: None,` to it (compile fix). Grep the search + api test dirs for other `SearchDocument {`/`SearchHit {` literals and add `recording_date: None` where needed (object fixtures that build `CatalogueObject` are unaffected — they already have `recording_date`).
+  - In `search_objects_returns_hits_with_highlight_filter_and_paging`, set a date on one seeded doc before indexing: `bronze_a.recording_date = Some("1962-04-03".to_string());` and after the existing `hit` lookup assert: `assert_eq!(hit.recording_date.as_deref(), Some("1962-04-03"));`.
+
+- [ ] **Step 5: Build + lint + test (stack is up).**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+cargo build --workspace
+cargo +nightly fmt
+cargo clippy --workspace --all-targets -- -D warnings
+cargo nextest run -p search -p api
+```
+  Expected: compiles, fmt clean, clippy clean, tests pass (incl. the new `recording_date` assertion). Run the test suite ONCE (single Postgres — no concurrent cargo test runs). If clippy/fmt change files, include them.
+
+- [ ] **Step 6: Update `web/src/api/schema.d.ts`** — add the field to the `SearchHitView` block (alphabetical, between `object_number` and `snippet`):
+```ts
+        SearchHitView: {
+            brief_description?: string | null;
+            id: string;
+            object_name: string;
+            object_number: string;
+            recording_date?: string | null;
+            snippet?: string | null;
+            visibility: components["schemas"]["Visibility"];
+        };
+```
+  (This mirrors what `pnpm gen:api` would emit now that the backend returns the field; a later regen reproduces it identically. Optionally verify with `pnpm gen:api` if a server is running — not required.)
+
+- [ ] **Step 7: Commit**
+```bash
+git add crates/search/src/lib.rs crates/api/src/admin_search.rs crates/search/tests/search.rs web/src/api/schema.d.ts
+# (+ any other test files you fixed)
+git commit -m "feat(search): index + return recording_date on search hits (#61)"
+```
+
+---
+
+# Task 2: Frontend — row date + softened count + tests + gate
+
+**Files:** `web/src/search/search-result-row.tsx`, `web/src/i18n/en.json`, `web/src/i18n/sv.json`, `web/src/test/fixtures.ts`, `web/src/search/search.test.tsx`.
+
+- [ ] **Step 1: `search-result-row.tsx`** — show the date on the meta line when present:
+```tsx
+<div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+  <span>{hit.object_number}</span>
+  {hit.recording_date && <span>· {hit.recording_date}</span>}
+  <VisibilityBadge visibility={hit.visibility} />
+</div>
+```
+  (Render the `YYYY-MM-DD` string verbatim — it's a recording date, not a UTC timestamp.)
+
+- [ ] **Step 2: i18n — soften the count** (both locales, parity; the `#60` parity test guards this):
+  - en.json `search`: `"resultCount_one": "~{{count}} result"`, `"resultCount_other": "~{{count}} results"`.
+  - sv.json `search`: `"resultCount_one": "~{{count}} träff"`, `"resultCount_other": "~{{count}} träffar"`.
+  (No code change in `search-panel.tsx` — the key already interpolates `count`.)
+
+- [ ] **Step 3: Fixtures** (`web/src/test/fixtures.ts`) — add `recording_date` to the first `searchHits` entry:
+  `recording_date: "1962-04-03",` (the generated rest can be `recording_date: null` or omit it — it's optional; set `null` on the mapped `Array.from(...)` items to satisfy the type cleanly).
+
+- [ ] **Step 4: Tests** (`web/src/search/search.test.tsx`):
+  - Assert the first result row shows the date: after results render, `expect(screen.getByText("1962-04-03")).toBeInTheDocument();` (or scope within the row).
+  - Tighten the count assertion to require the `~`: change `getByText(/25 results/i)` → `getByText(/~\s*25 results/i)` (or assert `getByText(/~25 results/i)`).
+  Keep the existing load-more + visibility-filter tests green.
+
+- [ ] **Step 5: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk, check:colors line.
+
+- [ ] **Step 6: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src crates; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 7: Manual smoke (recommended).** With the stack + server + web dev up: search the collection — result rows show the recording date (for objects that have one and have been (re)indexed); the count reads "~N results".
+
+- [ ] **Step 8: Commit**
+```bash
+git add web/src/search/search-result-row.tsx web/src/i18n/en.json web/src/i18n/sv.json web/src/test/fixtures.ts web/src/search/search.test.tsx
+git commit -m "feat(web): show recording_date on search rows; flag estimated count as approximate (#61)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** recording_date in SearchDocument/build_document (T1 S1), SearchHit/search_objects (T1 S2), SearchHitView (T1 S3), schema.d.ts (T1 S6); Rust test literal fixes + flow assertion (T1 S4); row date (T2 S1); softened count i18n (T2 S2); fixtures + tests (T2 S3–S4); Rust + frontend gates (T1 S5, T2 S5). Acceptance criteria 1–4 mapped. ✓
+
+**Placeholder scan:** the schema.d.ts edit is given verbatim; the test changes name exact assertions; "grep for other SearchDocument/SearchHit literals" is a concrete compile-driven step (the compiler names them if missed). No vague steps. ✓
+
+**Type/consistency:** `recording_date: Option<String>` (Rust) ↔ `recording_date?: string | null` (TS) consistent; `object.recording_date.map(|d| d.to_string())` (YYYY-MM-DD) matches `AdminObjectView`; the frontend reads `hit.recording_date` from the regenerated type. ✓
+
+## Notes
+- No new dependency. en/sv parity preserved (only `resultCount_*` values change; guarded by #60).
+- Backfill: already-indexed objects show no date until `reindex_all`; new/edited objects index it via `sync_object`. A `reindex` CLI is a follow-up.
+- Rust tests need the docker stack (up); run cargo tests ONCE (shared Postgres).
+- `cargo nextest run -p search -p api` covers the touched crates; a full `cargo build --workspace` ensures nothing else broke from the struct change.

docs/superpowers/plans/2026-06-08-session-expiry-ux.md

@@ -0,0 +1,448 @@
+# Session-Expiry Soft Redirect + Auth Feedback — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the full-page-reload 401 redirect with a router soft-redirect that preserves SPA state, carries a "session expired" reason + return-to path, and add the missing login/logout feedback.
+
+**Architecture:** A non-React navigate-bridge module (`auth-redirect.ts`) holds a settable `navigate` ref; a one-line `NavigationBridge` component (mounted at the router root) registers React Router's navigate into it. The openapi-fetch 401 middleware calls `redirectToLogin()`, which soft-navigates to `/login?reason=expired&from=<path>`. The login page reads `reason`/`from` (validated against open redirects), `RequireAuth` captures the attempted path, and the user menu shows a logout-pending state.
+
+**Tech Stack:** React 19 + TS + pnpm, React Router 7 (data router), TanStack Query v5, react-i18next, Base UI menu, Vitest 4 (jsdom project) + RTL + MSW. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity; app source double-quote+semicolon; token classes only; `ui/` files use no-semicolon style (do not touch `ui/menu.tsx`). Run a single test pass.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-session-expiry-ux-design.md`
+
+**Key facts:**
+- `web/src/api/auth-redirect.ts` currently: `redirectToLogin()` → `window.location.assign("/login")` (guarded by `pathname !== "/login"`). Called from `web/src/api/client.ts` middleware on `response.status === 401`. Do **not** change `client.ts`.
+- `web/src/app.tsx` builds a data router via `createBrowserRouter(createRoutesFromElements(<>…</>))`. Top-level children: `<Route path="/login">`, `<Route element={<RequireAuth/>}>…</Route>`, `<Route path="*">`. Imports `Navigate`, `Route`, `Outlet` is **not** yet imported (add it).
+- `web/src/test/render.tsx` `renderApp(ui, {route})` mounts `ui` at `path:"*"` in a `createMemoryRouter` — tests pass their own `<Routes>` tree. jsdom project url is `http://localhost`.
+- `vi.stubGlobal("location", {...})` is the established way to stub `window.location` here (see `theme-switch.test.tsx` stubbing `matchMedia`); restore with `vi.unstubAllGlobals()`.
+- `login-page.tsx`: `useLogin()` mutation; success currently `navigate("/objects", {replace:true})`; submit `disabled={login.isPending}`; existing error alert uses `role="alert"`. Existing tests: `login-page.test.tsx` (`tree()` with `/login` + `/objects` routes).
+- `require-auth.tsx`: `useMe()`; `isLoading` → `<AppShellSkeleton/>`; `!user` → `<Navigate to="/login" replace/>`. Test: `require-auth.test.tsx`.
+- `user-menu.tsx`: `useLogout()`, `onSignOut` navigates to `/login` on success; `<MenuItem onClick={onSignOut}>{t("auth.signOut")}</MenuItem>`; returns `null` when `!me`. Base UI `MenuItem` supports `closeOnClick` + `disabled`. Test: `user-menu.test.tsx`.
+- i18n `auth` block keys: `email/password/signIn/signOut/invalid/networkError` in both `en.json` and `sv.json`.
+
+---
+
+# Task 1: Navigate bridge + soft redirect
+
+**Files:**
+- Modify: `web/src/api/auth-redirect.ts`
+- Create: `web/src/api/auth-redirect.test.ts`
+- Create: `web/src/shell/navigation-bridge.tsx`
+- Modify: `web/src/app.tsx`
+
+- [ ] **Step 1: Rewrite `web/src/api/auth-redirect.ts`:**
+```ts
+type NavigateFn = (to: string, opts?: { replace?: boolean }) => void;
+
+let navigateFn: NavigateFn | null = null;
+
+/** Register (or clear) the router's navigate fn. Called by NavigationBridge. */
+export function setNavigate(fn: NavigateFn | null): void {
+  navigateFn = fn;
+}
+
+/** Soft-redirect to login on a 401, preserving SPA state and the return path.
+ *  Falls back to a hard navigation when no router navigate is registered yet
+ *  (e.g. a 401 during the very first load). No-op when already on /login. */
+export function redirectToLogin(): void {
+  const { pathname, search } = window.location;
+  if (pathname === "/login") return;
+  const from = encodeURIComponent(pathname + search);
+  const target = `/login?reason=expired&from=${from}`;
+  if (navigateFn) {
+    navigateFn(target, { replace: true });
+  } else {
+    window.location.assign(target);
+  }
+}
+```
+
+- [ ] **Step 2: Write the failing test `web/src/api/auth-redirect.test.ts`:**
+```ts
+import { afterEach, expect, test, vi } from "vitest";
+
+import { redirectToLogin, setNavigate } from "./auth-redirect";
+
+function stubLocation(pathname: string, search = "") {
+  const assign = vi.fn();
+  vi.stubGlobal("location", { pathname, search, assign });
+  return assign;
+}
+
+afterEach(() => {
+  setNavigate(null);
+  vi.unstubAllGlobals();
+});
+
+test("uses the registered navigate to soft-redirect with reason + from", () => {
+  const assign = stubLocation("/objects/abc", "?x=1");
+  const navigate = vi.fn();
+  setNavigate(navigate);
+
+  redirectToLogin();
+
+  expect(navigate).toHaveBeenCalledWith(
+    "/login?reason=expired&from=%2Fobjects%2Fabc%3Fx%3D1",
+    { replace: true },
+  );
+  expect(assign).not.toHaveBeenCalled();
+});
+
+test("falls back to a hard navigation when no navigate is registered", () => {
+  const assign = stubLocation("/objects/abc");
+
+  redirectToLogin();
+
+  expect(assign).toHaveBeenCalledWith("/login?reason=expired&from=%2Fobjects%2Fabc");
+});
+
+test("does nothing when already on /login", () => {
+  stubLocation("/login");
+  const navigate = vi.fn();
+  setNavigate(navigate);
+
+  redirectToLogin();
+
+  expect(navigate).not.toHaveBeenCalled();
+});
+```
+
+- [ ] **Step 3: Run the test — expect PASS** (the implementation in Step 1 already satisfies it):
+```bash
+cd web && pnpm vitest run src/api/auth-redirect.test.ts
+```
+Expected: 3 passing. (If you wrote the test before the impl, it would fail on the missing `setNavigate` export — either order is fine; end state is green.)
+
+- [ ] **Step 4: Create `web/src/shell/navigation-bridge.tsx`:**
+```tsx
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { setNavigate } from "../api/auth-redirect";
+
+/** Bridges React Router's navigate to the non-React 401 handler. Renders nothing. */
+export function NavigationBridge() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setNavigate(navigate);
+    return () => setNavigate(null);
+  }, [navigate]);
+
+  return null;
+}
+```
+
+- [ ] **Step 5: Wrap the routes in `web/src/app.tsx`** so the bridge is always mounted. Add `Outlet` to the `react-router-dom` import and import the bridge:
+```tsx
+import { createBrowserRouter, createRoutesFromElements, Navigate, Outlet, Route, RouterProvider } from "react-router-dom";
+```
+```tsx
+import { NavigationBridge } from "./shell/navigation-bridge";
+```
+Add this component above `const router = …`:
+```tsx
+function RootLayout() {
+  return (
+    <>
+      <NavigationBridge />
+      <Outlet />
+    </>
+  );
+}
+```
+Wrap the existing top-level fragment children in a pathless `<Route element={<RootLayout />}>` — i.e. change `createRoutesFromElements(<> … </>)` so the outer element is `<Route element={<RootLayout />}> … </Route>` containing the existing `/login`, `RequireAuth`, and `*` routes unchanged:
+```tsx
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route element={<RootLayout />}>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<RequireAuth />}>
+        {/* …AppShell subtree exactly as before… */}
+      </Route>
+      <Route path="*" element={<Navigate to="/objects" replace />} />
+    </Route>,
+  ),
+);
+```
+
+- [ ] **Step 6: Verify build + lint + existing app test (vitest ONCE for the touched files):**
+```bash
+cd web && pnpm vitest run src/api/auth-redirect.test.ts src/app.test.tsx && pnpm typecheck && pnpm lint
+```
+Expected: PASS. `app.test.tsx` must stay green (the pathless wrapper is transparent — same rendered routes).
+
+- [ ] **Step 7: Commit**
+```bash
+git add web/src/api/auth-redirect.ts web/src/api/auth-redirect.test.ts web/src/shell/navigation-bridge.tsx web/src/app.tsx
+git commit -m "feat(web): soft-redirect to login on 401 via a navigate bridge (#48)"
+```
+
+---
+
+# Task 2: Login page — reason banner, return-to, empty-field guard
+
+**Files:**
+- Modify: `web/src/auth/login-page.tsx`
+- Modify: `web/src/auth/login-page.test.tsx`
+- Modify: `web/src/i18n/en.json`, `web/src/i18n/sv.json`
+
+- [ ] **Step 1: Add i18n keys** (both locales, parity). In `web/src/i18n/en.json` `auth` block add:
+```json
+    "sessionExpired": "Your session expired — please sign in again.",
+    "signingOut": "Signing out…"
+```
+In `web/src/i18n/sv.json` `auth` block add:
+```json
+    "sessionExpired": "Din session har gått ut — logga in igen.",
+    "signingOut": "Loggar ut…"
+```
+(Place them after the existing `networkError` entry; mind trailing commas. `signingOut` is consumed in Task 3 — add both now so the parity test stays green.)
+
+- [ ] **Step 2: Update `web/src/auth/login-page.tsx`.** Add `useSearchParams` to the import and a `safeFrom` helper; show the reason banner; route to `safeFrom` on success; guard the submit. Full changes:
+
+Import line:
+```tsx
+import { useNavigate, useSearchParams } from "react-router-dom";
+```
+Add a module-level helper (above `export function LoginPage`):
+```tsx
+/** Accept only a single-leading-slash local path; reject protocol-relative
+ *  ("//host") and absolute URLs to avoid an open redirect. */
+function safeFrom(raw: string | null): string {
+  if (!raw) return "/objects";
+  return /^\/(?!\/)/.test(raw) ? raw : "/objects";
+}
+```
+Inside the component, after `const navigate = useNavigate();`:
+```tsx
+  const [params] = useSearchParams();
+  const sessionExpired = params.get("reason") === "expired";
+```
+Change the success navigation:
+```tsx
+      { onSuccess: () => navigate(safeFrom(params.get("from")), { replace: true }) },
+```
+Add the banner just inside the `<form>`, above the email field (after the `<h1>`):
+```tsx
+        {sessionExpired && (
+          <p className="text-sm text-muted-foreground">{t("auth.sessionExpired")}</p>
+        )}
+```
+Change the submit button disabled condition:
+```tsx
+        <Button type="submit" className="w-full" disabled={login.isPending || !email.trim() || !password}>
+```
+
+- [ ] **Step 3: Update `web/src/auth/login-page.test.tsx`.** Extend `tree()` with an `:id` destination and add tests. Replace the file's `tree()` and append the new tests:
+```tsx
+function tree() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/objects" element={<div>objects landing</div>} />
+      <Route path="/objects/:id" element={<div>object detail</div>} />
+    </Routes>
+  );
+}
+```
+Add these tests (keep the two existing ones):
+```tsx
+test("shows the session-expired notice when reason=expired", async () => {
+  renderApp(tree(), { route: "/login?reason=expired" });
+  expect(await screen.findByText(/session expired/i)).toBeInTheDocument();
+});
+
+test("returns to the from path on success", async () => {
+  renderApp(tree(), { route: "/login?from=%2Fobjects%2F123" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+  expect(await screen.findByText("object detail")).toBeInTheDocument();
+});
+
+test("rejects an off-site from and falls back to /objects", async () => {
+  renderApp(tree(), { route: "/login?from=%2F%2Fevil.com" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+  expect(await screen.findByText("objects landing")).toBeInTheDocument();
+});
+
+test("disables submit until both fields are filled", async () => {
+  renderApp(tree(), { route: "/login" });
+  const button = screen.getByRole("button", { name: /sign in/i });
+  expect(button).toBeDisabled();
+  await userEvent.type(screen.getByLabelText(/email/i), "a@b.se");
+  expect(button).toBeDisabled();
+  await userEvent.type(screen.getByLabelText(/password/i), "pw");
+  expect(button).toBeEnabled();
+});
+```
+(The existing "successful login navigates to /objects" test has no `from`, so `safeFrom(null)` → `/objects` keeps it green. The default MSW `/api/admin/login` handler returns 204 for `editor@example.com` / `pw-editor-123`.)
+
+- [ ] **Step 4: Run the login + i18n tests (vitest ONCE):**
+```bash
+cd web && pnpm vitest run src/auth/login-page.test.tsx src/i18n
+```
+Expected: all green (login-page tests + the i18n parity test covering the 2 new keys).
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/auth/login-page.tsx web/src/auth/login-page.test.tsx web/src/i18n/en.json web/src/i18n/sv.json
+git commit -m "feat(web): login reason banner + return-to + empty-field guard (#48)"
+```
+
+---
+
+# Task 3: RequireAuth return-to + logout pending + full gate
+
+**Files:**
+- Modify: `web/src/auth/require-auth.tsx`
+- Modify: `web/src/auth/require-auth.test.tsx`
+- Modify: `web/src/shell/user-menu.tsx`
+- Modify: `web/src/shell/user-menu.test.tsx`
+
+- [ ] **Step 1: Update `web/src/auth/require-auth.tsx`** to capture the attempted path:
+```tsx
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+import { useMe } from "../api/queries";
+import { AppShellSkeleton } from "@/components/ui/skeletons";
+
+export function RequireAuth() {
+  const { data: user, isLoading } = useMe();
+  const location = useLocation();
+
+  if (isLoading) return <AppShellSkeleton />;
+
+  if (!user) {
+    const from = encodeURIComponent(location.pathname + location.search);
+    return <Navigate to={`/login?from=${from}`} replace />;
+  }
+
+  return <Outlet />;
+}
+```
+
+- [ ] **Step 2: Update `web/src/auth/require-auth.test.tsx`** so the login stub echoes the search string, and assert `from` is carried. Replace the `tree()` and the redirect test:
+```tsx
+import { screen, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { expect, test } from "vitest";
+import { Route, Routes, useLocation } from "react-router-dom";
+
+import { server } from "../test/server";
+import { renderApp } from "../test/render";
+import { RequireAuth } from "./require-auth";
+
+function LoginStub() {
+  const location = useLocation();
+  return <div>login page {location.search}</div>;
+}
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginStub />} />
+      <Route element={<RequireAuth />}>
+        <Route path="/objects" element={<div>secret objects</div>} />
+      </Route>
+    </Routes>
+  );
+}
+
+test("renders children when authenticated", async () => {
+  renderApp(tree(), { route: "/objects" });
+  expect(await screen.findByText("secret objects")).toBeInTheDocument();
+});
+
+test("redirects unauthenticated users to /login carrying the attempted path", async () => {
+  server.use(http.get("/api/admin/me", () => new HttpResponse(null, { status: 401 })));
+  renderApp(tree(), { route: "/objects" });
+  await waitFor(() => expect(screen.getByText(/from=%2Fobjects/)).toBeInTheDocument());
+});
+```
+
+- [ ] **Step 3: Update `web/src/shell/user-menu.tsx`** to show a logout-pending state. Change only the `<MenuItem>`:
+```tsx
+        <MenuItem closeOnClick={false} disabled={logout.isPending} onClick={onSignOut}>
+          {logout.isPending ? t("auth.signingOut") : t("auth.signOut")}
+        </MenuItem>
+```
+(Everything else in the file is unchanged. `onSignOut` already navigates to `/login` on success, which unmounts the menu since `useMe` becomes null.)
+
+- [ ] **Step 4: Add a pending-state test to `web/src/shell/user-menu.test.tsx`.** Add `delay` to the msw import and append a test:
+```tsx
+import { delay, http, HttpResponse } from "msw";
+```
+```tsx
+test("shows a pending state on Sign out while logging out", async () => {
+  server.use(
+    http.post("/api/admin/logout", async () => {
+      await delay(50);
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(<UserMenu />);
+
+  const trigger = await screen.findByRole("button", { name: /editor@example.com/ });
+  await userEvent.click(trigger);
+
+  const menu = within(document.body);
+  await userEvent.click(await menu.findByText("Sign out"));
+
+  expect(await menu.findByText(/signing out/i)).toBeInTheDocument();
+});
+```
+(The existing "signs out" test still passes: `closeOnClick={false}` keeps the item, the POST still fires, `loggedOut` flips true.)
+
+- [ ] **Step 5: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (gz), and the `check:colors` line.
+
+- [ ] **Step 6: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no codename matches (`codename-exit=1`).
+
+- [ ] **Step 7: Manual smoke (recommended).** With the stack + server + `pnpm dev` up: open an object edit, let the session expire (or delete the session cookie) and trigger a save → you land on `/login` **without a full reload**, see "Your session expired…", and after re-login return to the same record. Deep-link to a route while logged out → login → returns there. Empty login form → Sign in disabled. Click Sign out → brief "Signing out…".
+
+- [ ] **Step 8: Commit**
+```bash
+git add web/src/auth/require-auth.tsx web/src/auth/require-auth.test.tsx web/src/shell/user-menu.tsx web/src/shell/user-menu.test.tsx
+git commit -m "feat(web): return-to-destination on auth redirect; logout pending state (#48)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** navigate bridge + soft redirect with reason/from (T1 — AC1); login reason banner +
+validated return-to + empty-field guard (T2 — AC2, AC4 first half); `RequireAuth` return-to (T3 S1–S2 —
+AC3); logout pending state (T3 S3–S4 — AC4 second half); i18n 2 keys + parity (T2 S1); full gate +
+codename (T3 S5–S6 — AC5). All 5 acceptance criteria mapped. ✓
+
+**Placeholder scan:** every code step shows complete code; tests have concrete assertions and exact
+encoded URLs (`%2Fobjects%2Fabc%3Fx%3D1`, `%2F%2Fevil.com`); `vi.stubGlobal("location", …)` is the
+established stub. No TODO/TBD. ✓
+
+**Type consistency:** `setNavigate(fn: NavigateFn | null)` defined in T1 and called with React Router's
+`navigate` (compatible signature `(to, {replace})`) in `NavigationBridge`, and with `null` in cleanup;
+`redirectToLogin()` signature unchanged so `client.ts` needs no edit; `safeFrom(raw: string | null)`
+consumed only in `login-page.tsx`. i18n keys `auth.sessionExpired` / `auth.signingOut` added in T2 and
+`auth.signingOut` consumed in T3. ✓
+
+## Notes
+- No new dependency. `ui/menu.tsx` is **not** modified (Base UI `MenuItem` already exposes `closeOnClick`
+  + `disabled`). en/sv parity preserved (2 new keys, guarded by the #60 parity test).
+- `client.ts` is intentionally untouched — only `redirectToLogin`'s behaviour changes.
+- The in-place re-auth modal (full field-level preservation) is a deferred follow-up per the spec.

docs/superpowers/plans/2026-06-08-split-queries.md

@@ -0,0 +1,344 @@
+# Split queries.ts — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extract the 4 error classes to `api/errors.ts`, add a `keys` query-key factory in `api/query-keys.ts` (and invalidate `["search"]` on object writes), then split `queries.ts` into `api/queries/{auth,objects,field-defs,vocab,authorities,search}.ts` behind a stable `api/queries/index.ts` barrel — behavior-preserving except the search invalidation.
+
+**Architecture:** Three ordered, individually-green tasks. Task 1 extracts errors (queries.ts re-exports them). Task 2 adds the key factory + search invalidation (still monolithic). Task 3 moves the now-final hook bodies into domain modules behind a barrel that keeps `../api/queries` stable for all ~30 consumers.
+
+**Tech Stack:** React 19 + TS + pnpm, TanStack Query v5, openapi-fetch, Vitest 4 (jsdom) + RTL + MSW.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon. Run a single test pass per task. Behavior-preserving except the one search-invalidation change.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-split-queries-design.md`
+
+**Key facts:**
+- `web/src/api/queries.ts` (584 lines) currently defines 4 error classes (`HttpError` :6, `FieldRejection` :13, `InUseError` :20, `VisibilityError` :394) + `type ObjectListParams` (:46) + all hooks.
+- Error-class importers (non-test): `api/error-message.ts` (`HttpError, InUseError`), `objects/object-edit-form.tsx` + `objects/object-new-page.tsx` (`FieldRejection`), `objects/publish-control.tsx` (`VisibilityError`), `search/search-panel.tsx` (`HttpError`) — all via `../api/queries`. Tests: `mutation-error.test.tsx`, `labelled-record-row.test.tsx`, `error-message.test.ts` import error classes from `../api/queries`.
+- ~30 files import hooks from `../api/queries`. Query-layer test suites: `queries.test.ts`, `queries.authoring.test.tsx`, `queries.fields.test.tsx`, `queries.search.test.tsx`, `queries.visibility.test.tsx`, `queries.vocab.test.tsx`, `mutation-feedback.test.tsx`.
+- Key literals: `["me"]`, `["config"]` (in `config/config-provider.tsx:10`), `["objects", params]`, `["objects"]`, `["object", id]`, `["field-definitions"]`, `["terms", vocabularyId]`, `["authorities", kind]`, `["vocabularies"]`, `["search", term, visibility]`.
+- `useTerms`/`useAuthorities` key on a `string | null | undefined` arg (enabled-gated), so `keys.terms`/`keys.authorities` must accept that union.
+
+---
+
+# Task 1: Extract error classes → `api/errors.ts`
+
+**Files:** Create `web/src/api/errors.ts`; Modify `web/src/api/queries.ts`, `web/src/api/error-message.ts`.
+
+- [ ] **Step 1: Create `web/src/api/errors.ts`** (move the 4 classes verbatim):
+```ts
+export class HttpError extends Error {
+  constructor(public readonly status: number) {
+    super(`HTTP ${status}`);
+    this.name = "HttpError";
+  }
+}
+
+export class FieldRejection extends Error {
+  constructor(public readonly field: string, public readonly code: string) {
+    super(`field rejected: ${field}`);
+    this.name = "FieldRejection";
+  }
+}
+
+export class InUseError extends Error {
+  constructor(public readonly count: number) {
+    super(`in use: ${count}`);
+    this.name = "InUseError";
+  }
+}
+
+/** Error carrying the HTTP status so callers can branch 422-gate vs 409-illegal. */
+export class VisibilityError extends Error {
+  constructor(public status: number) {
+    super(`visibility change failed (${status})`);
+    this.name = "VisibilityError";
+  }
+}
+```
+
+- [ ] **Step 2: Update `web/src/api/queries.ts`.** DELETE the 4 class definitions (lines ~6-25 `HttpError`/`FieldRejection`/`InUseError`, and ~393-399 `VisibilityError`). At the top of the file (after the existing `import` lines), add an import for use + a re-export for compatibility:
+```ts
+import { HttpError, FieldRejection, InUseError, VisibilityError } from "./errors";
+
+export { HttpError, FieldRejection, InUseError, VisibilityError } from "./errors";
+```
+(The `import` binds them for the throw sites in this file; the `export … from` re-exports them so every consumer importing from `../api/queries` keeps working. Everything else in `queries.ts` is unchanged.)
+
+- [ ] **Step 3: Repoint `web/src/api/error-message.ts`.** Change `import { HttpError, InUseError } from "./queries";` to `import { HttpError, InUseError } from "./errors";`. (This is the decoupling: the toast path no longer transitively loads the hook module.)
+
+- [ ] **Step 4: Verify (vitest ONCE for the affected suites), typecheck, lint:**
+```bash
+cd web && pnpm vitest run src/api/error-message.test.ts src/api/mutation-feedback.test.tsx src/api/queries.test.ts src/components/mutation-error.test.tsx src/components/labelled-record-row.test.tsx && pnpm typecheck && pnpm lint
+```
+Expected: green. The error classes are now sourced from `errors.ts` but re-exported, so all importers resolve. If typecheck flags an unused import in `queries.ts`, ensure each of the 4 classes is actually thrown somewhere in the file (they are: `HttpError` many sites, `FieldRejection` in `useSetFields`, `InUseError` in the delete mutations, `VisibilityError` in `useSetVisibility`) — keep all four in the import.
+
+- [ ] **Step 5: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/errors.ts web/src/api/queries.ts web/src/api/error-message.ts
+git commit -m "refactor(web): extract API error classes to api/errors.ts (#65)"
+```
+
+---
+
+# Task 2: Query-key factory + search invalidation
+
+**Files:** Create `web/src/api/query-keys.ts`, `web/src/api/query-keys.test.ts`, `web/src/api/search-invalidation.test.tsx`; Modify `web/src/api/queries.ts`, `web/src/config/config-provider.tsx`.
+
+- [ ] **Step 1: Create `web/src/api/query-keys.ts`:**
+```ts
+export type ObjectListParams = {
+  limit: number;
+  offset: number;
+  sort?: string;
+  order?: "asc" | "desc";
+  visibility?: string;
+  q?: string;
+};
+
+/** Central query-key factory — the single source of truth for cache keys, so
+ *  query/invalidate/setQueryData sites can't drift. */
+export const keys = {
+  me: () => ["me"] as const,
+  config: () => ["config"] as const,
+  objects: () => ["objects"] as const,
+  objectsPage: (params: ObjectListParams) => ["objects", params] as const,
+  object: (id: string) => ["object", id] as const,
+  fieldDefinitions: () => ["field-definitions"] as const,
+  vocabularies: () => ["vocabularies"] as const,
+  terms: (vocabularyId: string | null | undefined) => ["terms", vocabularyId] as const,
+  authorities: (kind: string | null | undefined) => ["authorities", kind] as const,
+  search: () => ["search"] as const,
+  searchResults: (term: string, visibility: string | null) => ["search", term, visibility] as const,
+};
+```
+
+- [ ] **Step 2: Create `web/src/api/query-keys.test.ts`** (write + run):
+```ts
+import { expect, test } from "vitest";
+
+import { keys } from "./query-keys";
+
+test("the key factory produces the expected arrays", () => {
+  expect(keys.me()).toEqual(["me"]);
+  expect(keys.config()).toEqual(["config"]);
+  expect(keys.objects()).toEqual(["objects"]);
+  const p = { limit: 50, offset: 0 };
+  expect(keys.objectsPage(p)).toEqual(["objects", p]);
+  expect(keys.object("x")).toEqual(["object", "x"]);
+  expect(keys.fieldDefinitions()).toEqual(["field-definitions"]);
+  expect(keys.vocabularies()).toEqual(["vocabularies"]);
+  expect(keys.terms("v1")).toEqual(["terms", "v1"]);
+  expect(keys.authorities("person")).toEqual(["authorities", "person"]);
+  expect(keys.search()).toEqual(["search"]);
+  expect(keys.searchResults("q", null)).toEqual(["search", "q", null]);
+});
+
+test("objects() is a prefix of objectsPage() so invalidation matches", () => {
+  const prefix = keys.objects();
+  const full = keys.objectsPage({ limit: 50, offset: 0 });
+  expect(full.slice(0, prefix.length)).toEqual(prefix);
+});
+```
+Run: `cd web && pnpm vitest run src/api/query-keys.test.ts`.
+
+- [ ] **Step 3: Replace every key literal in `web/src/api/queries.ts` with `keys.*`.** Add `import { keys, type ObjectListParams } from "./query-keys";` and DELETE the local `export type ObjectListParams = {…};` block (now imported). Substitutions (every occurrence):
+  - `queryKey: ["me"]` → `queryKey: keys.me()`; `qc.invalidateQueries({ queryKey: ["me"] })` → `keys.me()`; `qc.setQueryData(["me"], null)` → `qc.setQueryData(keys.me(), null)`
+  - `queryKey: ["objects", params]` → `keys.objectsPage(params)`
+  - `["objects"]` (invalidations) → `keys.objects()`
+  - `["object", id]` → `keys.object(id)`
+  - `["field-definitions"]` → `keys.fieldDefinitions()`
+  - `["terms", vocabularyId]` → `keys.terms(vocabularyId)`
+  - `["authorities", kind]` → `keys.authorities(kind)`
+  - `["vocabularies"]` → `keys.vocabularies()`
+  - `queryKey: ["search", term, visibility]` → `keys.searchResults(term, visibility)`
+  Re-export the type so consumers importing `ObjectListParams` from `../api/queries` keep working: add `export type { ObjectListParams } from "./query-keys";` near the top.
+
+- [ ] **Step 4: Add search invalidation (`web/src/api/queries.ts`).** In each of these `onSuccess` handlers add `void qc.invalidateQueries({ queryKey: keys.search() });`:
+  - `useUpdateObject` onSuccess (after the `objects`/`object` invalidations)
+  - `useDeleteObject` onSuccess (alongside the `objects` invalidation — convert it to a block: `onSuccess: () => { void qc.invalidateQueries({ queryKey: keys.objects() }); void qc.invalidateQueries({ queryKey: keys.search() }); }`)
+  - `useSetVisibility` onSuccess (after the `object`/`objects` invalidations)
+
+- [ ] **Step 5: Update `web/src/config/config-provider.tsx`.** Add `import { keys } from "../api/query-keys";` and change `queryKey: ["config"]` → `queryKey: keys.config()`.
+
+- [ ] **Step 6: Create `web/src/api/search-invalidation.test.tsx`** (write + run) — proves the new behavior:
+```tsx
+import { expect, test } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { http, HttpResponse } from "msw";
+import type { ReactNode } from "react";
+
+import { server } from "../test/server";
+import { useSetVisibility } from "./queries";
+import { keys } from "./query-keys";
+
+test("changing an object's visibility invalidates the active search query", async () => {
+  server.use(
+    http.post("/api/admin/objects/:id/visibility", () => new HttpResponse(null, { status: 204 })),
+  );
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  qc.setQueryData(keys.searchResults("amphora", null), { pages: [], pageParams: [] });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={qc}>{children}</QueryClientProvider>
+  );
+  const { result } = renderHook(() => useSetVisibility(), { wrapper });
+
+  await result.current.mutateAsync({ id: "o1", visibility: "public" });
+
+  await waitFor(() =>
+    expect(qc.getQueryState(keys.searchResults("amphora", null))?.isInvalidated).toBe(true),
+  );
+});
+```
+Run: `cd web && pnpm vitest run src/api/search-invalidation.test.tsx`. (If `isInvalidated` is flaky, assert `qc.getQueryState(keys.searchResults("amphora", null))` exists and was marked stale via `isInvalidated`; the mutation's `onSuccess` runs the invalidation synchronously after the 204.)
+
+- [ ] **Step 7: Verify (vitest ONCE for the query suites), typecheck, lint:**
+```bash
+cd web && pnpm vitest run src/api/query-keys.test.ts src/api/search-invalidation.test.tsx src/api/queries.test.ts src/api/queries.authoring.test.tsx src/api/queries.fields.test.tsx src/api/queries.search.test.tsx src/api/queries.visibility.test.tsx src/api/queries.vocab.test.tsx src/config && pnpm typecheck && pnpm lint
+```
+Expected: green. The key arrays are identical to before, so all existing query tests pass unchanged.
+
+- [ ] **Step 8: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/query-keys.ts web/src/api/query-keys.test.ts web/src/api/search-invalidation.test.tsx web/src/api/queries.ts web/src/config/config-provider.tsx
+git commit -m "refactor(web): central query-key factory + invalidate search on object writes (#65)"
+```
+
+---
+
+# Task 3: Split queries.ts into `api/queries/` domain modules
+
+**Files:** Create `web/src/api/queries/{index,auth,objects,field-defs,vocab,authorities,search}.ts`; Delete `web/src/api/queries.ts`.
+
+**Approach:** Move each hook (and its local `type X = components[...]` aliases) VERBATIM from the current `queries.ts` into its domain module — the bodies already use `keys.*` and the `errors.ts` classes after Tasks 1-2. Only the relative import paths change (`./client`→`../client`, `./schema`→`../schema`, `./errors`, `./query-keys`). Then add the barrel and delete `queries.ts`.
+
+- [ ] **Step 1: `web/src/api/queries/auth.ts`** — header + move `useMe`, `useLogin`, `useLogout`:
+```ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { keys } from "../query-keys";
+
+type UserView = components["schemas"]["UserView"];
+type LoginRequest = components["schemas"]["LoginRequest"];
+```
+(These three throw only plain `Error` — no `errors.ts` import needed here.)
+
+- [ ] **Step 2: `web/src/api/queries/objects.ts`** — header + move `useObjectsPage`, `useObject`, `useCreateObject`, `useUpdateObject`, `useSetFields`, `useDeleteObject`, `useSetVisibility`:
+```ts
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, FieldRejection, VisibilityError } from "../errors";
+import { keys, type ObjectListParams } from "../query-keys";
+
+type ObjectCreateRequest = components["schemas"]["ObjectCreateRequest"];
+type ObjectUpdateRequest = components["schemas"]["ObjectUpdateRequest"];
+type Visibility = "draft" | "internal" | "public";
+```
+(`ObjectListParams` now comes from `query-keys`. `useObjectsPage`/`useObject` query fns throw plain `Error`; the mutations use the imported error classes.)
+
+- [ ] **Step 3: `web/src/api/queries/field-defs.ts`** — header + move `useFieldDefinitions`, `useCreateFieldDefinition`, `useUpdateFieldDefinition`, `useDeleteFieldDefinition`:
+```ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type NewFieldDefinitionRequest = components["schemas"]["NewFieldDefinitionRequest"];
+type LabelInput = components["schemas"]["LabelInput"];
+```
+
+- [ ] **Step 4: `web/src/api/queries/vocab.ts`** — header + move `useVocabularies`, `useCreateVocabulary`, `useRenameVocabulary`, `useDeleteVocabulary`, `useTerms`, `useAddTerm`, `useUpdateTerm`, `useDeleteTerm`:
+```ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type NewVocabularyRequest = components["schemas"]["NewVocabularyRequest"];
+type LabelInput = components["schemas"]["LabelInput"];
+```
+
+- [ ] **Step 5: `web/src/api/queries/authorities.ts`** — header + move `useAuthorities`, `useCreateAuthority`, `useUpdateAuthority`, `useDeleteAuthority`:
+```ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type LabelInput = components["schemas"]["LabelInput"];
+```
+
+- [ ] **Step 6: `web/src/api/queries/search.ts`** — header + move the `SEARCH_PAGE` const and `useSearch`:
+```ts
+import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+
+import { api } from "../client";
+import { HttpError } from "../errors";
+import { keys } from "../query-keys";
+
+const SEARCH_PAGE = 20;
+```
+
+- [ ] **Step 7: `web/src/api/queries/index.ts`** (barrel):
+```ts
+export * from "./auth";
+export * from "./objects";
+export * from "./field-defs";
+export * from "./vocab";
+export * from "./authorities";
+export * from "./search";
+export * from "../errors";
+export type { ObjectListParams } from "../query-keys";
+```
+
+- [ ] **Step 8: Delete the old monolith:** `git rm web/src/api/queries.ts` (every hook has been moved; the barrel + modules now provide the same exports). Confirm no hook/type was dropped: each of the 24 hooks + `ObjectListParams` + the 4 error classes is exported via the barrel.
+
+- [ ] **Step 9: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. The `../api/queries` import path now resolves to `api/queries/index.ts`, so all ~30 consumers + the query-layer test suites resolve unchanged. If typecheck reports a missing export, a hook landed in the wrong module or an import path is off — fix the module, do NOT edit consumers/tests. Report test totals, largest chunk (gz), and the `check:colors` line.
+
+- [ ] **Step 10: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`); `web/src/api/queries.ts` shows as deleted, the 7 new files added.
+
+- [ ] **Step 11: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/api/queries/ && git rm -q web/src/api/queries.ts 2>/dev/null; git add -A web/src/api
+git commit -m "refactor(web): split queries.ts into api/queries/ domain modules behind a barrel (#65)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 errors extracted + error-message repointed + barrel re-export (T1, T3 S7); AC2 directory split + queries.ts deleted + stable path (T3); AC3 key factory used everywhere incl. config-provider (T2 S3/S5); AC4 search invalidation on the 3 object mutations (T2 S4); AC5 existing tests unchanged + gate (T1 S4, T2 S7, T3 S9). ✓
+
+**Placeholder scan:** every new file shown in full or as a precise header + verbatim-move instruction; the move tasks name the exact hook list per module; tests have concrete assertions. No TBD. ✓
+
+**Type/consistency:** `keys` (T2) is the same object consumed in T3's modules; `ObjectListParams` defined in `query-keys.ts` (T2), imported by `objects.ts` (T3 S2) and re-exported by the barrel (T3 S7); error classes from `errors.ts` (T1) imported by `objects/field-defs/vocab/authorities/search` modules (T3) and re-exported by the barrel; `keys.terms`/`keys.authorities` accept `string | null | undefined` to match the enabled-gated query usage. ✓
+
+## Notes
+- No new dependency, no new i18n keys, `components/ui/*` untouched. `check:size` should be unchanged (pure reorg + one invalidate call). Barrel keeps `../api/queries` stable → zero consumer churn.
+- The error classes are intentionally importable from both `../api/errors` (canonical) and `../api/queries` (compat re-export). Repointing the 4 component importers to `../api/errors` is a deferred cosmetic follow-up.
+- `auth.ts` needs no `errors.ts` import (its throws are plain `Error`); every other module imports the error classes it throws.

docs/superpowers/plans/2026-06-08-token-select.md

@@ -0,0 +1,288 @@
+# Token-Styled Select Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the four raw `<select>` elements with a token-styled `ui/Select` (Base UI Select) that matches `ui/Input` and has a visible focus ring.
+
+**Architecture:** A new `ui/select.tsx` wraps Base UI Select (Portal+Positioner+Popup) styled like Input. `object-form` visibility moves to a react-hook-form `Controller`; `field-form`'s three selects use `value`/`onValueChange` directly. Base UI Select is not a native `<select>`, so the affected tests are rewritten from `userEvent.selectOptions` to open-trigger + click-option.
+
+**Tech Stack:** React 19 + TS + pnpm, Base UI (`@base-ui/react/select`, namespace `Select`), react-hook-form (object-form), lucide-react (Chevron/Check), Vitest + RTL + Storybook. Test runner: `pnpm test` (single pass).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; en/sv parity (no new keys expected); **ui/ files = no-semicolon** (match `ui/combobox.tsx`/`ui/menu.tsx`); app source = double-quote+semicolon; stories single-quote/no-semicolon; token classes only; this repo enforces `react-hooks/refs` + `react-refresh/only-export-components` — refactor cleanly, never disable.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-token-select-design.md`
+
+**Key facts:**
+- Base UI: `import { Select as SelectPrimitive } from "@base-ui/react/select"` — parts `Root, Trigger, Value, Icon, Portal, Positioner, Popup, List, Item, ItemIndicator, ItemText`. Mirror `ui/combobox.tsx`/`ui/menu.tsx` wrapper style. **Novel → validate by running.**
+- Input className to match (`ui/input.tsx`): `h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 … focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:… aria-invalid:border-destructive dark:bg-input/30`.
+- `object-form.tsx`: visibility `<select {...register("visibility")}>` (create-mode only), `<Label htmlFor="visibility">`, options draft/internal, default "draft".
+- `field-form.tsx`: useState selects — `dataType` (`id="field-type"`, TYPES, disabled on edit), `vocabularyId` (`id="field-vocab"`, when term, placeholder + `useVocabularies()` `{id,key}`, disabled on edit, required), `authorityKind` (`id="field-kind"`, when authority, "Any"=`""` + KINDS, disabled on edit).
+- Tests: `object-form.test.tsx` (visibility options + edit-mode-absent) and `fields.test.tsx` (selectOptions for type/kind/vocab) — must be rewritten.
+
+---
+
+# Task 1: `ui/select.tsx` + story (validate by running)
+
+**Files:** `web/src/components/ui/select.tsx` (new), `web/src/components/ui/select.stories.tsx` (new).
+
+- [ ] **Step 1: Study the references.** Read `web/src/components/ui/combobox.tsx` and `web/src/components/ui/menu.tsx` for the exact house pattern (namespace import, `data-slot`, `cn()`, NO semicolons, Portal+Positioner+Popup, token classes). Read `web/src/components/ui/input.tsx` for the trigger className to match. **Confirm the real Base UI Select part names/props by inspecting `web/node_modules/@base-ui/react/select/` types** — especially `Trigger`, `Value` (placeholder prop), `Positioner` (sideOffset/anchor), `Item` (`value` prop), `ItemIndicator`, `ItemText`.
+
+- [ ] **Step 2: Implement `web/src/components/ui/select.tsx`** (no-semicolon). Export `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`. Skeleton — adapt every prop/part to what the installed Base UI actually exposes (validate in Step 4):
+```tsx
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { Check, ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select<Value>(props: SelectPrimitive.Root.Props<Value>) {
+  return <SelectPrimitive.Root {...props} />
+}
+
+function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm transition-colors outline-none",
+        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+        "dark:bg-input/30 data-[popup-open]:border-ring",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon className="text-muted-foreground">
+        <ChevronDown className="h-4 w-4" aria-hidden />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return <SelectPrimitive.Value data-slot="select-value" className={cn("truncate", className)} {...props} />
+}
+
+function SelectContent({ className, sideOffset = 6, ...props }: SelectPrimitive.Popup.Props & { sideOffset?: number }) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner sideOffset={sideOffset} className="z-50" alignItemWithTrigger={false}>
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn(
+            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+            className
+          )}
+          {...props}
+        />
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" aria-hidden />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }
+```
+IMPORTANT: `--anchor-width`/`--available-height`, `alignItemWithTrigger`, `data-[popup-open]`, the `Value` placeholder API, and whether `Trigger` is generic — all MUST be confirmed against the installed types/runtime. If a class/prop doesn't exist, drop/replace it. Token classes only (no raw palette). The STORY passing is the proof.
+
+- [ ] **Step 3: Story `web/src/components/ui/select.stories.tsx`** (single-quote, no-semicolon; match `menu.stories.tsx`). A controlled `Select` with a `SelectTrigger`(+`SelectValue placeholder`) and a `SelectContent` of 3 `SelectItem`s; a `play` test that clicks the trigger, clicks an option (queried via `within(document.body)` — Base UI Select options render in a portal with role `option`), and asserts the trigger now shows the chosen label.
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect, within } from 'storybook/test'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
+
+function Controlled() {
+  const [value, setValue] = useState('')
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger aria-label="Fruit"><SelectValue placeholder="Pick one" /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="pear">Pear</SelectItem>
+        <SelectItem value="plum">Plum</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+const meta = { component: Select, tags: ['ai-generated'], render: () => <Controlled /> } satisfies Meta<typeof Select>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('combobox', { name: 'Fruit' }))
+    await userEvent.click(await within(document.body).findByRole('option', { name: 'Pear' }))
+    await expect(canvas.getByRole('combobox', { name: 'Fruit' })).toHaveTextContent('Pear')
+  },
+}
+```
+(If the Base UI Select trigger isn't role `combobox`, adjust the query to what it actually is — discover by running. If `onValueChange`/`value` prop names differ, fix. The story passing IS the validation; report the final working API.)
+
+- [ ] **Step 4: Validate by running (vitest ONCE):**
+  `cd web && pnpm vitest run src/components/ui/select.stories.tsx && pnpm typecheck && pnpm lint`
+  Iterate the wrapper until the story play test passes. Report the FINAL working API (exports, the trigger role/accessible-name mechanism, value/onValueChange names, placeholder mechanism) — Tasks 2/3 depend on it.
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/components/ui/select.tsx web/src/components/ui/select.stories.tsx
+git commit -m "feat(web): ui/select Base UI Select wrapper matching Input + story (#51)"
+```
+
+---
+
+# Task 2: object-form visibility → ui/Select
+
+**Files:** `web/src/objects/object-form.tsx`, `web/src/objects/object-form.test.tsx`.
+
+- [ ] **Step 1: Replace the visibility `<select>`** (create-mode block). Add imports: `import { Controller } from "react-hook-form";` (if not present) and `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";`. Replace:
+```tsx
+{mode === "create" && (
+  <div className="space-y-1">
+    <Label htmlFor="visibility">{t("form.visibility")}</Label>
+    <Controller
+      control={form.control}
+      name="visibility"
+      render={({ field }) => (
+        <Select value={field.value} onValueChange={field.onChange}>
+          <SelectTrigger id="visibility">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="draft">{t("form.draft")}</SelectItem>
+            <SelectItem value="internal">{t("form.internal")}</SelectItem>
+          </SelectContent>
+        </Select>
+      )}
+    />
+  </div>
+)}
+```
+(Use the exact value/onValueChange/trigger-id API confirmed in Task 1. `form.control` is available from `useForm`; destructure `control` or use `form.control`. The default value stays `"draft"` from `defaultValues`.) Keep `<Label htmlFor="visibility">` so the trigger is labelled (the trigger carries `id="visibility"`).
+
+- [ ] **Step 2: Rewrite the visibility test** in `object-form.test.tsx` (the first test, lines 8–26). Replace the `HTMLSelectElement.options` inspection with open-and-assert:
+```tsx
+// after typing object number/name/inscription:
+await userEvent.click(screen.getByLabelText(/visibility/i)); // opens the Select
+expect(await within(document.body).findByRole("option", { name: /draft/i })).toBeInTheDocument();
+expect(within(document.body).getByRole("option", { name: /internal/i })).toBeInTheDocument();
+expect(within(document.body).queryByRole("option", { name: /public/i })).not.toBeInTheDocument();
+// close without changing (Escape) so default "draft" stays, then submit:
+await userEvent.keyboard("{Escape}");
+await userEvent.click(screen.getByRole("button", { name: /create object/i }));
+await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+const values = onSubmit.mock.calls[0][0];
+expect(values.core.object_number).toBe("A-9");
+expect(values.visibility).toBe("draft");
+expect(values.fields.inscription).toBe("To the gods");
+```
+Add `within` to the testing-library import. NOTE: `screen.getByLabelText(/visibility/i)` must resolve the Select trigger — if the Label→trigger association doesn't make `getByLabelText` work (Task 1 should ensure it via `id`), fall back to `screen.getByRole("combobox", { name: /visibility/i })`; use whichever the Task-1 validation showed works, consistently. Do NOT weaken the draft/internal/not-public assertions.
+
+- [ ] **Step 3: Confirm the "edit mode: no visibility control" test (lines 68–82) still passes** — it queries `queryByLabelText(/visibility/i)` which returns null in edit mode (the block isn't rendered). Should pass unchanged. If the query mechanism changed in Step 2, mirror it here (e.g. `queryByRole("combobox", { name: /visibility/i })`).
+
+- [ ] **Step 4: Verify (vitest ONCE):** `cd web && pnpm vitest run src/objects/object-form.test.tsx && pnpm typecheck && pnpm lint`. PASS (the other object-form tests — Cmd+Enter, required, minCount, edit, pruneFields — must stay green).
+
+- [ ] **Step 5: Commit**
+```bash
+git add web/src/objects/object-form.tsx web/src/objects/object-form.test.tsx
+git commit -m "feat(web): object-form visibility uses ui/Select (#51)"
+```
+
+---
+
+# Task 3: field-form's three selects → ui/Select + gate
+
+**Files:** `web/src/fields/field-form.tsx`, `web/src/fields/fields.test.tsx`.
+
+- [ ] **Step 1: Replace the three `<select>`s** in `field-form.tsx`. Add `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";`.
+  - **data_type** (lines 118–133):
+```tsx
+<div className="space-y-1">
+  <Label htmlFor="field-type">{t("fields.type")}</Label>
+  <Select value={dataType} onValueChange={setDataType} disabled={isEdit}>
+    <SelectTrigger id="field-type"><SelectValue /></SelectTrigger>
+    <SelectContent>
+      {TYPES.map((type) => (
+        <SelectItem key={type} value={type}>{t(`fields.types.${type}`)}</SelectItem>
+      ))}
+    </SelectContent>
+  </Select>
+</div>
+```
+  - **vocabulary** (the `dataType === "term"` block): `<Select value={vocabularyId} onValueChange={setVocabularyId} disabled={isEdit}>` with `<SelectTrigger id="field-vocab"><SelectValue placeholder={t("form.selectPlaceholder")} /></SelectTrigger>` and `SelectItem`s from `vocabularies?.map((v) => <SelectItem key={v.id} value={v.id}>{v.key}</SelectItem>)`. (No empty `""` item — the placeholder shows when `vocabularyId===""`; the required check `!vocabularyId` still blocks submit.)
+  - **authority_kind** (the `dataType === "authority"` block): `<Select value={authorityKind} onValueChange={setAuthorityKind} disabled={isEdit}>` with `<SelectTrigger id="field-kind"><SelectValue /></SelectTrigger>`, an `<SelectItem value="">{t("fields.anyKind")}</SelectItem>` then `KINDS.map((k) => <SelectItem key={k} value={k}>{t(`authorities.${k}`)}</SelectItem>)`.
+  Keep every `<Label htmlFor>` and the surrounding `div.space-y-1`. No change to submit/validation/reset logic.
+  - NOTE on Base UI Select value `""`: confirm the authority_kind `""` "Any" item selects/displays correctly, and that vocabulary's `""` shows the placeholder (Task 1 validated the placeholder). If Base UI Select disallows an empty-string item value, use a sentinel (e.g. `"__any__"`) mapped to `""`/`null` at submit — but prefer `""` if it works; verify by running the test.
+
+- [ ] **Step 2: Rewrite `fields.test.tsx`** select interactions (a small helper keeps it readable). Add `within` to the import. Replace `userEvent.selectOptions(...)` with open+click:
+  - A helper:
+```tsx
+async function choose(triggerName: RegExp, optionName: RegExp) {
+  await userEvent.click(screen.getByLabelText(triggerName));
+  await userEvent.click(await within(document.body).findByRole("option", { name: optionName }));
+}
+```
+  - "selecting Authority…": `await choose(/^type$/i, /authority/i);` then `const kind = await screen.findByLabelText(/authority kind/i);` (now a Select trigger) → `await choose(/authority kind/i, /^person$/i);` → create → assert `body.authority_kind === "person"`.
+  - "selecting Term…": `await choose(/^type$/i, /term/i);` then assert the vocabulary trigger appears (`await screen.findByLabelText(/^vocabulary$/i)`); click create → expect the `role="alert"` (blocked, `posted===false`); then `await choose(/^vocabulary$/i, /material/i)` (the seeded vocab `v-material` shows its `key` — match its label; check the MSW vocab fixture for the displayed `key` text and match it) → create → `posted===true`.
+  - "creates a text field" + "lists field definitions…" — default type is text; the type Select isn't opened, so these should pass unchanged (the create posts `data_type: "text"`). Verify.
+  - If `getByLabelText(triggerName)` doesn't resolve the Select trigger, use `getByRole("combobox", { name: triggerName })` (whatever Task 1 validated) — consistently. Keep all `body`/`posted` assertions identical.
+  - IMPORTANT: confirm the vocab option label — the test selected `"v-material"` (the option *value*); with Select the user clicks the visible **label** (the vocab `key`). Read the vocab MSW fixture (`web/src/test/handlers.ts`) to find the `key` displayed for id `v-material` and match the option name to that text.
+
+- [ ] **Step 3: FULL GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report test totals, largest chunk (KB gz; Select adds to the bundle — report and flag if >250), check:colors line.
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+
+- [ ] **Step 5: Manual smoke (recommended).** `pnpm dev`: each select now matches Input (height/radius/border) and shows a focus ring on keyboard focus; data_type/vocab/kind disabled on edit; visibility still defaults to draft and submits correctly; term/authority conditional pickers work.
+
+- [ ] **Step 6: Commit**
+```bash
+git add web/src/fields/field-form.tsx web/src/fields/fields.test.tsx
+git commit -m "feat(web): field-form selects use ui/Select; rewrite select tests (#51)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** ui/Select matching Input + story-validated (T1); visibility via Controller (T2); data_type/vocabulary/authority_kind via value/onValueChange + disabled-on-edit (T3); behavior preserved (placeholder, "Any"=`""`, required-vocab check, reset); tests rewritten to click interaction with identical payload assertions (T2/T3); gate + check:size report (T3). Acceptance criteria 1–5 mapped. ✓
+
+**Placeholder scan:** the Base UI Select part tree/props are "confirm by running" (novel primitive) with a concrete skeleton + the validation step — not a TODO. The `""`-value caveat (authority "Any") has an explicit fallback (sentinel). The vocab option label is "read the fixture and match" with the file named. No vague steps. ✓
+
+**Type/consistency:** exports `Select/SelectTrigger/SelectValue/SelectContent/SelectItem` defined in T1, consumed identically in T2/T3; the trigger query mechanism (getByLabelText vs getByRole combobox) is chosen once in T1 and used consistently. value/onValueChange contract uniform. ✓
+
+## Notes
+- No new dependency (Base UI + lucide already present); no new i18n keys.
+- `check:size` is the one budget risk (Select in the form chunks) — measured + flagged in T3, not silently bumped.
+- Validate-by-running (T1) is mandatory for the novel Base UI Select, per the repo pattern (combobox/menu/toast).
+- Deferred: searchable vocabulary combobox; a raw-`<select>` lint guard.

docs/superpowers/plans/2026-06-08-unify-record-crud.md

@@ -0,0 +1,726 @@
+# Unify Vocabulary + Authority CRUD — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Collapse the duplicated Vocabulary-terms + Authorities CRUD (~280 lines across 4 files) into three shared components, with the rows and pages reduced to thin adapters — behavior-preserving.
+
+**Architecture:** Build `LabelledRecordRow`, `LabelledRecordCreateForm`, and `FilteredRecordList<T>` in `src/components/` (Tasks 1-3, additive — existing app untouched, all existing tests stay green). Then rewire `term-row`/`authority-row` and `authorities-page`/`vocabulary-terms` onto them (Task 4) and run the full gate. Variance (mutation hooks, arg shapes, i18n keys, page chrome) lives entirely in the adapters.
+
+**Tech Stack:** React 19 + TS + pnpm, TanStack Query v5, react-i18next, Base UI, Vitest 4 (jsdom) + RTL.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon; token classes only; `components/ui/*` untouched. Run a single test pass per task.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-unify-record-crud-design.md`
+
+**Key facts:**
+- Types: `type LabelView = components["schemas"]["LabelView"]`, `type LabelInput = components["schemas"]["LabelInput"]`. `labelText(labels: LabelView[], lang)` (`lib/labels`), `byLabel(lang)` returns a comparator over `{ labels: LabelView[] }` (`lib/sort`).
+- Shared building blocks (in `src/components/`): `label-editor` (`LabelEditor`, uses `useId` since #62, needs `useConfig` which defaults to `DEFAULTS` — works under `renderApp`), `delete-confirm-dialog` (`DeleteConfirmDialog` — props `description`, `onConfirm: () => Promise<void>`), `mutation-error` (`MutationError` — prop `error: unknown`), `external-uri-link` (`ExternalUriLink` — prop `uri`).
+- UI kit: `Button`, `Input`, `Label` from `@/components/ui/*`; `ListSkeleton` from `@/components/ui/skeletons` (props `className`, `rows`).
+- Test harness: `renderApp(ui, { route })` from `../test/render` (wraps QueryClient + memory router + i18n; NO ConfigProvider, but `useConfig` falls back to defaults). `HttpError` is exported from `../api/queries`.
+- Existing tests that MUST stay green unchanged: `vocab/term-row.test.tsx`, `authorities/authorities.test.tsx`, `vocab/vocabularies.test.tsx`.
+- Current `term-row.tsx`/`authority-row.tsx` are twins; `authorities-page.tsx` has a kind `<nav>` + `PageTitle` + `Navigate` guard + breadcrumb; `vocabulary-terms.tsx` has a `vocab.terms` caption + breadcrumb. Both pages render the filter input ALWAYS, then `isLoading ? <ListSkeleton/> : <ul>…</ul>`.
+
+---
+
+# Task 1: `LabelledRecordRow`
+
+**Files:** Create `web/src/components/labelled-record-row.tsx`, `web/src/components/labelled-record-row.test.tsx`.
+
+- [ ] **Step 1: Create `web/src/components/labelled-record-row.tsx`:**
+```tsx
+import { useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { LabelEditor } from "./label-editor";
+import { DeleteConfirmDialog } from "./delete-confirm-dialog";
+import { MutationError } from "./mutation-error";
+import { ExternalUriLink } from "./external-uri-link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { labelText } from "../lib/labels";
+
+type LabelView = components["schemas"]["LabelView"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export type RecordLike = { id: string; labels: LabelView[]; external_uri: string | null };
+
+/** One labelled record (term/authority): a display row with edit + delete, or an
+ *  inline editor. All variance (mutation hooks, arg shapes, delete-confirm key) is
+ *  supplied by the caller via callbacks/state — see term-row.tsx / authority-row.tsx. */
+export function LabelledRecordRow({
+  record,
+  lang,
+  deleteConfirmKey,
+  savePending,
+  saveError,
+  onEditOpen,
+  onSave,
+  onDelete,
+}: {
+  record: RecordLike;
+  lang: string;
+  deleteConfirmKey: string;
+  savePending: boolean;
+  saveError: unknown;
+  onEditOpen: () => void;
+  onSave: (labels: LabelInput[], uri: string | null, done: () => void) => void;
+  onDelete: () => Promise<void>;
+}) {
+  const { t } = useTranslation();
+  const uriId = useId();
+
+  const [editing, setEditing] = useState(false);
+  const [labels, setLabels] = useState<LabelInput[]>(record.labels as LabelInput[]);
+  const [uri, setUri] = useState(record.external_uri ?? "");
+
+  if (editing) {
+    return (
+      <li className="space-y-2 border-b py-2">
+        <LabelEditor value={labels} onChange={setLabels} />
+        <div className="space-y-1">
+          <Label htmlFor={uriId}>{t("labels.externalUri")}</Label>
+          <Input
+            id={uriId}
+            type="url"
+            placeholder={t("labels.uriPlaceholder")}
+            value={uri}
+            onChange={(e) => setUri(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            disabled={savePending}
+            onClick={() => onSave(labels, uri.trim() || null, () => setEditing(false))}
+          >
+            {t("actions.save")}
+          </Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
+            {t("form.cancel")}
+          </Button>
+        </div>
+        <MutationError error={saveError} />
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex items-center gap-2 border-b py-1 text-sm">
+      <div className="flex-1">
+        <div>{labelText(record.labels, lang)}</div>
+        {record.external_uri && <ExternalUriLink uri={record.external_uri} />}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          onEditOpen();
+          setLabels(record.labels as LabelInput[]);
+          setUri(record.external_uri ?? "");
+          setEditing(true);
+        }}
+      >
+        {t("actions.edit")}
+      </Button>
+      <DeleteConfirmDialog description={t(deleteConfirmKey)} onConfirm={onDelete} />
+    </li>
+  );
+}
+```
+
+- [ ] **Step 2: Create `web/src/components/labelled-record-row.test.tsx`** (write + run). Type the test record as `RecordLike` (import it) — no `any`/`never`:
+```tsx
+import { expect, test, vi } from "vitest";
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { LabelledRecordRow, type RecordLike } from "./labelled-record-row";
+import { HttpError } from "../api/queries";
+
+const record: RecordLike = { id: "r1", external_uri: null, labels: [{ lang: "en", label: "Bronze" }] };
+
+test("edit → save calls onSave and closes via done()", async () => {
+  const onSave = vi.fn((_labels: unknown, _uri: unknown, done: () => void) => done());
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={null}
+        onEditOpen={() => {}}
+        onSave={onSave}
+        onDelete={async () => {}}
+      />
+    </ul>,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+  expect(onSave).toHaveBeenCalled();
+  expect(screen.queryByRole("button", { name: /save/i })).toBeNull();
+});
+
+test("a save error renders inline and the row stays editable", async () => {
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={new HttpError(403)}
+        onEditOpen={() => {}}
+        onSave={() => {}}
+        onDelete={async () => {}}
+      />
+    </ul>,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  expect(screen.getByRole("alert")).toHaveTextContent(/permission/i);
+  expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
+});
+
+test("confirming delete invokes onDelete", async () => {
+  const onDelete = vi.fn(async () => {});
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={null}
+        onEditOpen={() => {}}
+        onSave={() => {}}
+        onDelete={onDelete}
+      />
+    </ul>,
+  );
+  // open the confirm dialog (trigger button is labelled "Delete")
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+  // the dialog renders in a portal on document.body with a confirm "Delete" action
+  const dialog = within(document.body);
+  const confirmButtons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(confirmButtons[confirmButtons.length - 1]);
+  expect(onDelete).toHaveBeenCalled();
+});
+```
+Run: `cd web && pnpm vitest run src/components/labelled-record-row.test.tsx`. (If the delete-dialog DOM differs, mirror the portal/confirm pattern used in `web/src/shell/user-menu.test.tsx` / the delete-confirm-dialog story — the key assertion is that confirming calls `onDelete`. Don't weaken the save/error assertions.)
+
+- [ ] **Step 3: Verify + lint:** `cd web && pnpm vitest run src/components/labelled-record-row.test.tsx && pnpm typecheck && pnpm lint` — all green.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/components/labelled-record-row.tsx web/src/components/labelled-record-row.test.tsx
+git commit -m "feat(web): shared LabelledRecordRow component (#64)"
+```
+
+---
+
+# Task 2: `LabelledRecordCreateForm`
+
+**Files:** Create `web/src/components/labelled-record-create-form.tsx`, `web/src/components/labelled-record-create-form.test.tsx`.
+
+- [ ] **Step 1: Create `web/src/components/labelled-record-create-form.tsx`:**
+```tsx
+import { useId, useState, type FormEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { LabelEditor } from "./label-editor";
+import { MutationError } from "./mutation-error";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LabelInput = components["schemas"]["LabelInput"];
+
+/** Create form for a labelled record (term/authority): single-language label +
+ *  optional external URI, with required-label validation and a status-aware error.
+ *  `onCreate` performs the mutation and is handed a `reset` to clear the inputs on success. */
+export function LabelledRecordCreateForm({
+  heading,
+  submitLabel,
+  pending,
+  error,
+  onCreate,
+}: {
+  heading: ReactNode;
+  submitLabel: string;
+  pending: boolean;
+  error: unknown;
+  onCreate: (labels: LabelInput[], uri: string | null, reset: () => void) => void;
+}) {
+  const { t } = useTranslation();
+  const uriId = useId();
+
+  const [labels, setLabels] = useState<LabelInput[]>([]);
+  const [uri, setUri] = useState("");
+  const [requiredError, setRequiredError] = useState(false);
+
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!labels.some((l) => l.label)) {
+      setRequiredError(true);
+      return;
+    }
+
+    setRequiredError(false);
+    onCreate(labels, uri.trim() || null, () => {
+      setLabels([]);
+      setUri("");
+    });
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-2 border-t pt-3">
+      <div className="text-sm font-medium">{heading}</div>
+      <LabelEditor value={labels} onChange={setLabels} />
+      <div className="space-y-1">
+        <Label htmlFor={uriId}>{t("labels.externalUri")}</Label>
+        <Input
+          id={uriId}
+          type="url"
+          placeholder={t("labels.uriPlaceholder")}
+          value={uri}
+          onChange={(e) => setUri(e.target.value)}
+        />
+      </div>
+      {requiredError && (
+        <p role="alert" className="text-xs text-destructive">
+          {t("form.required")}
+        </p>
+      )}
+      <MutationError error={error} />
+      <Button type="submit" size="sm" disabled={pending}>
+        {submitLabel}
+      </Button>
+    </form>
+  );
+}
+```
+
+- [ ] **Step 2: Create `web/src/components/labelled-record-create-form.test.tsx`** (write + run):
+```tsx
+import { expect, test, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { LabelledRecordCreateForm } from "./labelled-record-create-form";
+
+test("submitting with empty labels shows the required error and does not call onCreate", async () => {
+  const onCreate = vi.fn();
+  renderApp(
+    <LabelledRecordCreateForm heading="New" submitLabel="Create" pending={false} error={null} onCreate={onCreate} />,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  expect(screen.getByRole("alert")).toBeInTheDocument(); // form.required (MutationError is null → no alert)
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("a valid submit calls onCreate and the reset clears the inputs", async () => {
+  const onCreate = vi.fn((_labels: unknown, _uri: unknown, reset: () => void) => reset());
+  renderApp(
+    <LabelledRecordCreateForm heading="New" submitLabel="Create" pending={false} error={null} onCreate={onCreate} />,
+  );
+  const labelInput = screen.getByLabelText(/^label$/i) as HTMLInputElement;
+  await userEvent.type(labelInput, "Bronze");
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  expect(onCreate).toHaveBeenCalled();
+  expect((screen.getByLabelText(/^label$/i) as HTMLInputElement).value).toBe("");
+});
+```
+Run: `cd web && pnpm vitest run src/components/labelled-record-create-form.test.tsx`. (The required-error `<p role="alert">` is the only alert when `error={null}`; `LabelEditor`'s label is "Label".)
+
+- [ ] **Step 3: Verify + lint:** `cd web && pnpm vitest run src/components/labelled-record-create-form.test.tsx && pnpm typecheck && pnpm lint`.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/components/labelled-record-create-form.tsx web/src/components/labelled-record-create-form.test.tsx
+git commit -m "feat(web): shared LabelledRecordCreateForm component (#64)"
+```
+
+---
+
+# Task 3: `FilteredRecordList<T>`
+
+**Files:** Create `web/src/components/filtered-record-list.tsx`, `web/src/components/filtered-record-list.test.tsx`.
+
+- [ ] **Step 1: Create `web/src/components/filtered-record-list.tsx`:**
+```tsx
+import { Fragment, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { byLabel } from "../lib/sort";
+import { labelText } from "../lib/labels";
+import { Input } from "@/components/ui/input";
+import { ListSkeleton } from "@/components/ui/skeletons";
+
+type LabelView = components["schemas"]["LabelView"];
+
+/** Filterable, alphabetically-sorted list of labelled records with the standard
+ *  loading / error / empty / no-matches states. The filter input stays visible
+ *  during load (matching the prior page behaviour). */
+export function FilteredRecordList<T extends { id: string; labels: LabelView[] }>({
+  records,
+  lang,
+  isLoading,
+  isError,
+  loadErrorText,
+  emptyText,
+  renderRow,
+}: {
+  records: T[] | undefined;
+  lang: string;
+  isLoading: boolean;
+  isError: boolean;
+  loadErrorText: string;
+  emptyText: string;
+  renderRow: (record: T) => ReactNode;
+}) {
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState("");
+
+  const q = filter.trim().toLowerCase();
+  const rows = [...(records ?? [])]
+    .filter((r) => !q || labelText(r.labels, lang).toLowerCase().includes(q))
+    .sort(byLabel(lang));
+
+  return (
+    <>
+      <div className="mb-3">
+        <Input
+          aria-label={t("common.filter")}
+          placeholder={t("common.filter")}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      {isLoading ? (
+        <ListSkeleton className="mb-4" rows={5} />
+      ) : (
+        <ul className="mb-4">
+          {isError && <li className="text-sm text-destructive">{loadErrorText}</li>}
+          {!isError && records?.length === 0 && (
+            <li className="text-sm text-muted-foreground">{emptyText}</li>
+          )}
+          {!isError && records && records.length > 0 && rows.length === 0 && (
+            <li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
+          )}
+          {rows.map((r) => (
+            <Fragment key={r.id}>{renderRow(r)}</Fragment>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}
+```
+
+- [ ] **Step 2: Create `web/src/components/filtered-record-list.test.tsx`** (write + run):
+```tsx
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { FilteredRecordList } from "./filtered-record-list";
+import { labelText } from "../lib/labels";
+
+type Rec = { id: string; labels: { lang: string; label: string }[] };
+const recs: Rec[] = [
+  { id: "a", labels: [{ lang: "en", label: "Alpha" }] },
+  { id: "b", labels: [{ lang: "en", label: "Beta" }] },
+];
+const row = (r: Rec) => <li>{labelText(r.labels, "en")}</li>;
+
+test("filtering narrows the rendered rows", async () => {
+  renderApp(
+    <FilteredRecordList records={recs} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.getByText("Beta")).toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText(/filter/i), "alph");
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.queryByText("Beta")).toBeNull();
+});
+
+test("empty records show the empty text", () => {
+  renderApp(
+    <FilteredRecordList records={[]} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("EmptyMsg")).toBeInTheDocument();
+});
+
+test("non-empty records with a non-matching filter show no-matches", async () => {
+  renderApp(
+    <FilteredRecordList records={recs} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  await userEvent.type(screen.getByLabelText(/filter/i), "zzz");
+  expect(screen.getByText(/no matches/i)).toBeInTheDocument();
+});
+
+test("an error shows the load-error text", () => {
+  renderApp(
+    <FilteredRecordList records={undefined} lang="en" isLoading={false} isError={true}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("LoadErr")).toBeInTheDocument();
+});
+```
+Run: `cd web && pnpm vitest run src/components/filtered-record-list.test.tsx`.
+
+- [ ] **Step 3: Verify + lint:** `cd web && pnpm vitest run src/components/filtered-record-list.test.tsx && pnpm typecheck && pnpm lint`.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/components/filtered-record-list.tsx web/src/components/filtered-record-list.test.tsx
+git commit -m "feat(web): shared FilteredRecordList component (#64)"
+```
+
+---
+
+# Task 4: Wire the adapters + pages, then full gate
+
+**Files:** Modify `web/src/vocab/term-row.tsx`, `web/src/authorities/authority-row.tsx`, `web/src/authorities/authorities-page.tsx`, `web/src/vocab/vocabulary-terms.tsx`.
+
+- [ ] **Step 1: Rewrite `web/src/vocab/term-row.tsx`** (keep the `<TermRow vocabularyId term lang />` API):
+```tsx
+import type { components } from "../api/schema";
+import { useUpdateTerm, useDeleteTerm } from "../api/queries";
+import { LabelledRecordRow } from "../components/labelled-record-row";
+
+type TermView = components["schemas"]["TermView"];
+
+export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; term: TermView; lang: string }) {
+  const update = useUpdateTerm();
+  const del = useDeleteTerm();
+
+  return (
+    <LabelledRecordRow
+      record={term}
+      lang={lang}
+      deleteConfirmKey="actions.confirmDeleteTerm"
+      savePending={update.isPending}
+      saveError={update.error}
+      onEditOpen={() => update.reset()}
+      onSave={(labels, uri, done) =>
+        update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
+      onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
+    />
+  );
+}
+```
+
+- [ ] **Step 2: Rewrite `web/src/authorities/authority-row.tsx`** (keep `<AuthorityRow authority kind lang />`):
+```tsx
+import type { components } from "../api/schema";
+import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
+import { LabelledRecordRow } from "../components/labelled-record-row";
+
+type AuthorityView = components["schemas"]["AuthorityView"];
+
+export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
+  const update = useUpdateAuthority();
+  const del = useDeleteAuthority();
+
+  return (
+    <LabelledRecordRow
+      record={authority}
+      lang={lang}
+      deleteConfirmKey="actions.confirmDeleteAuthority"
+      savePending={update.isPending}
+      saveError={update.error}
+      onEditOpen={() => update.reset()}
+      onSave={(labels, uri, done) =>
+        update.mutate({ id: authority.id, kind, external_uri: uri, labels }, { onSuccess: done })}
+      onDelete={() => del.mutateAsync({ id: authority.id, kind })}
+    />
+  );
+}
+```
+
+- [ ] **Step 3: Rewrite `web/src/authorities/authorities-page.tsx`** to use the shared list + form. Keep the `PageTitle`, kind `<nav>`, `Navigate` guard, `useDocumentTitle`, `useBreadcrumb`. Remove the local `labels`/`uri`/`error`/`filter` state, the `onCreate` handler, and now-unused imports (`useState`, `FormEvent`, `LabelEditor`, `MutationError`, `Input`, `Label`, `ListSkeleton`, `byLabel`, `labelText`). New file:
+```tsx
+import { NavLink, Navigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useAuthorities, useCreateAuthority } from "../api/queries";
+import { FilteredRecordList } from "../components/filtered-record-list";
+import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
+import { PageTitle } from "@/components/ui/page-title";
+import { AuthorityRow } from "./authority-row";
+import { focusRing } from "../lib/focus-ring";
+import { useDocumentTitle } from "../lib/use-document-title";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { cn } from "@/lib/utils";
+
+const KINDS = ["person", "organisation", "place"] as const;
+
+export function AuthoritiesPage() {
+  const { t, i18n } = useTranslation();
+  const { kind } = useParams();
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+
+  const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");
+  const currentKind = isValidKind ? (kind as string) : "person";
+
+  const { data: authorities, isLoading, isError } = useAuthorities(currentKind);
+  const create = useCreateAuthority();
+
+  useDocumentTitle(t("nav.authorities"));
+  useBreadcrumb([{ label: t("nav.authorities") }]);
+
+  if (!isValidKind) return <Navigate to="/authorities/person" replace />;
+
+  return (
+    <div className="overflow-auto p-4">
+      <PageTitle className="mb-3">{t("nav.authorities")}</PageTitle>
+      <nav aria-label={t("nav.authorities")} className="mb-3 flex gap-2">
+        {KINDS.map((k) => (
+          <NavLink
+            key={k}
+            to={`/authorities/${k}`}
+            className={({ isActive }) =>
+              cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")
+            }
+          >
+            {t(`authorities.${k}`)}
+          </NavLink>
+        ))}
+      </nav>
+
+      <FilteredRecordList
+        records={authorities}
+        lang={lang}
+        isLoading={isLoading}
+        isError={isError}
+        loadErrorText={t("authorities.loadError")}
+        emptyText={t("authorities.empty")}
+        renderRow={(a) => <AuthorityRow authority={a} kind={currentKind} lang={lang} />}
+      />
+
+      <LabelledRecordCreateForm
+        heading={`${t("authorities.new")} · ${t(`authorities.${currentKind}`)}`}
+        submitLabel={t("authorities.create")}
+        pending={create.isPending}
+        error={create.error}
+        onCreate={(labels, uri, reset) =>
+          create.mutate({ kind: currentKind, external_uri: uri, labels }, { onSuccess: reset })}
+      />
+    </div>
+  );
+}
+```
+(Note: the original passed `kind: kind as string` to `create.mutate`; `currentKind` is equivalent here since the `isValidKind` guard already returned otherwise — use `currentKind`.)
+
+- [ ] **Step 4: Rewrite `web/src/vocab/vocabulary-terms.tsx`** to use the shared list + form. Keep the `vocab.terms` caption + breadcrumb + the `useVocabularies` lookup. Remove the local form/list state + now-unused imports:
+```tsx
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { FilteredRecordList } from "../components/filtered-record-list";
+import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
+import { TermRow } from "./term-row";
+
+export function VocabularyTerms() {
+  const { t, i18n } = useTranslation();
+  const { id } = useParams();
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+
+  const { data: terms, isLoading, isError } = useTerms(id);
+  const addTerm = useAddTerm();
+
+  const { data: vocabularies } = useVocabularies();
+  const vocabKey = vocabularies?.find((v) => v.id === id)?.key;
+
+  useBreadcrumb(
+    vocabKey
+      ? [{ label: t("nav.vocabularies"), to: "/vocabularies" }, { label: vocabKey }]
+      : [{ label: t("nav.vocabularies"), to: "/vocabularies" }],
+  );
+
+  if (!id) return null;
+
+  return (
+    <div className="overflow-auto p-4">
+      <div className="mb-2 label-caption">{t("vocab.terms")}</div>
+
+      <FilteredRecordList
+        records={terms}
+        lang={lang}
+        isLoading={isLoading}
+        isError={isError}
+        loadErrorText={t("vocab.loadError")}
+        emptyText={t("vocab.noTerms")}
+        renderRow={(term) => <TermRow vocabularyId={id} term={term} lang={lang} />}
+      />
+
+      <LabelledRecordCreateForm
+        heading={t("vocab.addTerm")}
+        submitLabel={t("vocab.addTerm")}
+        pending={addTerm.isPending}
+        error={addTerm.error}
+        onCreate={(labels, uri, reset) =>
+          addTerm.mutate({ vocabularyId: id, external_uri: uri, labels }, { onSuccess: reset })}
+      />
+    </div>
+  );
+}
+```
+(Note: `useTerms(id)` and `if (!id) return null` — `id` is `string | undefined`; the hooks accept it, and the `!id` guard runs after the hooks, matching the original order. `renderRow`/`onCreate` use the narrowed `id` inside JSX where `!id` already returned — but to satisfy TS, `id` is `string` after the guard since the guard is before the `return` JSX. Confirm typecheck is clean; if TS still widens, the original already used `id` directly in the same spot, so it resolves.)
+
+- [ ] **Step 5: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. The existing `term-row.test.tsx`, `authorities.test.tsx`, `vocabularies.test.tsx` MUST pass unchanged (behavior-preserving). Report test totals, largest chunk (gz), and the `check:colors` line. If an existing test fails, the refactor changed behavior — fix the adapter/page to match, do NOT edit the test.
+
+- [ ] **Step 6: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 7: Manual smoke (recommended).** `pnpm dev`: on Authorities and Vocabulary-terms — filter narrows the list; create with an empty label shows the required error; create/edit/delete work; a failed save shows the inline message and keeps the row editable; the authorities kind-tabs + breadcrumbs are unchanged.
+
+- [ ] **Step 8: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/vocab/term-row.tsx web/src/authorities/authority-row.tsx web/src/authorities/authorities-page.tsx web/src/vocab/vocabulary-terms.tsx
+git commit -m "refactor(web): term/authority rows + pages adopt shared CRUD components (#64)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 three components with the prop shapes (T1-T3); AC2 rows + pages de-duplicated (T4 S1-S4); AC3 existing tests green + 3 new component tests (T1-T3 tests, T4 S5); AC4 behavior preserved — edit/save/delete/create/validation/filter/4-states/kind-nav/breadcrumb (T4 + the existing-test guard); AC5 gate/check:size/no-new-keys/codename (T4 S5-S6). ✓
+
+**Placeholder scan:** every component + adapter shown in full; tests have concrete assertions; the two soft spots (delete-dialog portal DOM in T1; `id` narrowing in T4) name the exact mitigation/precedent. No TBD. ✓
+
+**Type/consistency:** `RecordLike = { id; labels: LabelView[]; external_uri }` (T1) is the row's `record`; `TermView`/`AuthorityView` structurally satisfy it (both have those fields). `onSave(labels: LabelInput[], uri: string | null, done)` (T1) matches the adapters' `update.mutate({…, external_uri: uri, labels}, { onSuccess: done })` (T4). `LabelledRecordCreateForm.onCreate(labels, uri, reset)` (T2) matches `create.mutate({…}, { onSuccess: reset })` (T4). `FilteredRecordList<T extends { id; labels: LabelView[] }>` (T3) consumed with `authorities`/`terms` (T4). ✓
+
+## Notes
+- No new dependency, no new i18n keys, `components/ui/*` untouched. Net code reduction → `check:size` should not grow.
+- `TermRow`/`AuthorityRow` keep their public props so `term-row.test.tsx` stays valid unchanged.
+- `vocabulary-list.tsx` (key-based vocabularies) is deliberately NOT touched.

docs/superpowers/plans/2026-06-09-bundle-and-tests.md

@@ -0,0 +1,338 @@
+# Bundle Vendor-Split + Test-Gap Fills — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Split framework deps into cache-stable vendor chunks, and fill the audit's unit-test (prune-fields, delete-confirm-dialog in-use, labels, format-date) + combobox-story gaps.
+
+**Architecture:** Task 1 adds `build.rollupOptions.output.manualChunks` to `vite.config.ts` (production build only). Task 2 adds 4 jsdom unit tests for pure/critical units. Task 3 adds a Storybook story for the combobox primitive and runs the full gate. All additive/behavior-preserving.
+
+**Tech Stack:** Vite 6 (Rollup), React 19 + TS + pnpm, Vitest 4 (jsdom + storybook-browser projects), Storybook, RTL + MSW.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; app/test source double-quote+semicolon; **stories use single-quote + no-semicolon** (mirror existing `ui/*.stories.tsx`). Run a single test pass per task.
+
+**Spec:** `docs/superpowers/specs/2026-06-09-bundle-and-tests-design.md`
+
+**Key facts:**
+- `scripts/check-bundle-size.mjs` fails if the **largest** `dist/assets/*.js` gzip exceeds 250 KB; today ~216.5 KB (one chunk).
+- `vite.config.ts` exports `defineConfig({ plugins, resolve, server, test })` — no `build` block. Deps: `react`, `react-dom`, `react-router-dom` (v7, re-exports `react-router`), `@tanstack/react-query`, `@base-ui/react`, `i18next`, `react-i18next`.
+- `objects/prune-fields.ts`: `pruneFields(fields: Record<string, unknown>, localizedTextKeys: Set<string>, defaultLang: string): Record<string, unknown>`.
+- `lib/labels.ts`: `labelText(labels: LabelView[], lang: string): string` (lang match → `"en"` → first → `""`).
+- `lib/format-date.ts`: `formatDate(value: unknown, lang: string): string` (non-string null→`"—"`, non-string→`String(value)`; invalid→returns value; valid `YYYY-MM-DD`→`Intl.DateTimeFormat(lang,{dateStyle:"medium"})`, parsed at local midnight).
+- `components/delete-confirm-dialog.tsx`: `DeleteConfirmDialog({ description, onConfirm: () => Promise<void>, triggerLabel? })`. Trigger is a `Button` labelled `t("actions.delete")` ("Delete"); the confirm action is also labelled `t("actions.delete")`. On a thrown error it sets a message via `errorMessageKey(err)` and **returns without closing**; on success it closes. `actions.inUse` (en) = "Can't delete — used by {{count}} object(s). Clear those fields first." `InUseError` is exported from `../api/errors` (and re-exported by `../api/queries`).
+- `components/ui/combobox.tsx` exports `ComboboxRoot<Value>`, `ComboboxInputGroup`, `ComboboxInput`, `ComboboxClear`, `ComboboxTrigger`, `ComboboxPopup`, `ComboboxList`, `ComboboxItem`, `ComboboxItemIndicator`, `ComboboxEmpty`. See `objects/options-combobox.tsx` for the composition (ComboboxRoot props: `items`, `value`, `onValueChange`, `itemToStringLabel`, `isItemEqualToValue`; ComboboxList takes a render-function child).
+- Story format (from `components/ui/badge.stories.tsx`): `import type { Meta, StoryObj } from '@storybook/react-vite'`; `import { expect } from 'storybook/test'`; `const meta = { component, tags: ['ai-generated'] } satisfies Meta<typeof X>`; `export default meta`; `type Story = StoryObj<typeof meta>`; `export const Default: Story = { play: async ({ canvas }) => {...} }`.
+
+---
+
+# Task 1: Vendor split (`vite.config.ts`)
+
+**Files:** Modify `web/vite.config.ts`.
+
+- [ ] **Step 1: Add the `build` block.** In `web/vite.config.ts`, add a top-level `build` key to the `defineConfig({...})` object (sibling of `plugins`/`resolve`/`server`/`test`):
+```ts
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          react: ["react", "react-dom", "react-router", "react-router-dom"],
+          "base-ui": ["@base-ui/react"],
+          query: ["@tanstack/react-query"],
+          i18n: ["i18next", "react-i18next"],
+        },
+      },
+    },
+  },
+```
+
+- [ ] **Step 2: Build + verify chunk split + budget:**
+```bash
+cd web && pnpm build && pnpm check:size && ls -1 dist/assets/*.js
+```
+Expected: build succeeds; `check:size` prints `largest JS chunk: <name> = <kb> KB gz (budget 250 KB)` and passes; `dist/assets/` now contains separate `react-*.js`, `base-ui-*.js`, `query-*.js`, `i18n-*.js` chunks plus the app entry. Report the largest chunk size (should be a vendor chunk, well under 250). If the build warns about React being in multiple chunks or a chunk is oversized, confirm `react`+`react-dom`+`react-router`+`react-router-dom` are all in the one `react` group and adjust.
+
+- [ ] **Step 3: typecheck + lint** (config change shouldn't affect them, but confirm):
+```bash
+cd web && pnpm typecheck && pnpm lint
+```
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/vite.config.ts
+git commit -m "build(web): split framework deps into cache-stable vendor chunks (#67)"
+```
+
+---
+
+# Task 2: Unit-test gaps (prune-fields, labels, format-date, delete-confirm-dialog)
+
+**Files:** Create `web/src/objects/prune-fields.test.ts`, `web/src/lib/labels.test.ts`, `web/src/lib/format-date.test.ts`, `web/src/components/delete-confirm-dialog.test.tsx`.
+
+- [ ] **Step 1: `web/src/objects/prune-fields.test.ts`:**
+```ts
+import { expect, test } from "vitest";
+
+import { pruneFields } from "./prune-fields";
+
+test("drops empty/null/undefined scalars, keeps real scalars", () => {
+  const out = pruneFields(
+    { a: "x", b: "", c: null, d: undefined, e: 0, f: false },
+    new Set(),
+    "en",
+  );
+  expect(out).toEqual({ a: "x", e: 0, f: false });
+});
+
+test("a localized_text key keeps only the default-language entry", () => {
+  const out = pruneFields(
+    { title: { en: "Bowl", sv: "Skål" } },
+    new Set(["title"]),
+    "sv",
+  );
+  expect(out).toEqual({ title: { sv: "Skål" } });
+});
+
+test("a non-localized object value keeps all non-empty entries", () => {
+  const out = pruneFields(
+    { dims: { w: "10", h: "", d: "5" } },
+    new Set(),
+    "en",
+  );
+  expect(out).toEqual({ dims: { w: "10", d: "5" } });
+});
+
+test("an object value left with no entries is dropped entirely", () => {
+  const out = pruneFields(
+    { title: { en: "Bowl" }, empty: { en: "", sv: "" } },
+    new Set(["title", "empty"]),
+    "sv",
+  );
+  // title has no `sv` entry → empty after filtering → dropped; empty → dropped
+  expect(out).toEqual({});
+});
+```
+Run: `cd web && pnpm vitest run src/objects/prune-fields.test.ts`. (If a case's expectation mismatches the real semantics, re-read `prune-fields.ts` and correct the EXPECTATION to the true behavior — do not change the source.)
+
+- [ ] **Step 2: `web/src/lib/labels.test.ts`:**
+```ts
+import { expect, test } from "vitest";
+
+import { labelText } from "./labels";
+
+const labels = [
+  { lang: "en", label: "Bowl" },
+  { lang: "sv", label: "Skål" },
+];
+
+test("returns the exact-language label when present", () => {
+  expect(labelText(labels, "sv")).toBe("Skål");
+});
+
+test("falls back to the English label when the requested language is missing", () => {
+  expect(labelText(labels, "de")).toBe("Bowl");
+});
+
+test("falls back to the first label when neither the language nor English is present", () => {
+  expect(labelText([{ lang: "fr", label: "Bol" }], "de")).toBe("Bol");
+});
+
+test("returns an empty string for no labels", () => {
+  expect(labelText([], "en")).toBe("");
+});
+```
+Run: `cd web && pnpm vitest run src/lib/labels.test.ts`.
+
+- [ ] **Step 3: `web/src/lib/format-date.test.ts`:**
+```ts
+import { expect, test } from "vitest";
+
+import { formatDate } from "./format-date";
+
+test("formats a date-only string in the locale without a timezone day-shift", () => {
+  // local-midnight parse must keep the calendar day (3), not shift to the 2nd
+  expect(formatDate("1962-04-03", "en")).toBe("Apr 3, 1962");
+});
+
+test("returns the em-dash placeholder for null", () => {
+  expect(formatDate(null, "en")).toBe("—");
+});
+
+test("returns an unparseable string unchanged", () => {
+  expect(formatDate("not-a-date", "en")).toBe("not-a-date");
+});
+
+test("stringifies a non-string, non-null value", () => {
+  expect(formatDate(42, "en")).toBe("42");
+});
+```
+Run: `cd web && pnpm vitest run src/lib/format-date.test.ts`. (The CI/runtime is full-ICU Node 22, so en `dateStyle:"medium"` → `"Apr 3, 1962"`. If your local ICU formats slightly differently, assert the equivalent string but keep the day as `3` — the day-shift guard is the point.)
+
+- [ ] **Step 4: `web/src/components/delete-confirm-dialog.test.tsx`:**
+```tsx
+import { expect, test, vi } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { DeleteConfirmDialog } from "./delete-confirm-dialog";
+import { InUseError } from "../api/errors";
+
+test("delete-in-use shows the in-use count and keeps the dialog open", async () => {
+  const onConfirm = vi.fn<() => Promise<void>>().mockRejectedValue(new InUseError(3));
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]); // the confirm action
+
+  expect(await dialog.findByText(/used by 3/i)).toBeInTheDocument();
+  // dialog stays open: its description is still shown
+  expect(dialog.getByText("Delete this term?")).toBeInTheDocument();
+});
+
+test("a clean confirm closes the dialog", async () => {
+  const onConfirm = vi.fn<() => Promise<void>>().mockResolvedValue(undefined);
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]);
+
+  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+});
+```
+Run: `cd web && pnpm vitest run src/components/delete-confirm-dialog.test.tsx`. (Before opening, only the trigger "Delete" button exists. After opening, the portal adds the action "Delete"; `findAllByRole` returns both, click the last. `actions.inUse` en contains "used by 3". If `vi.fn<() => Promise<void>>()` generic syntax trips the TS/vitest version, use `vi.fn(() => Promise.reject(new InUseError(3)))` / `vi.fn(() => Promise.resolve())`.)
+
+- [ ] **Step 5: Verify all four (vitest ONCE) + typecheck + lint:**
+```bash
+cd web && pnpm vitest run src/objects/prune-fields.test.ts src/lib/labels.test.ts src/lib/format-date.test.ts src/components/delete-confirm-dialog.test.tsx && pnpm typecheck && pnpm lint
+```
+All green.
+
+- [ ] **Step 6: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/objects/prune-fields.test.ts web/src/lib/labels.test.ts web/src/lib/format-date.test.ts web/src/components/delete-confirm-dialog.test.tsx
+git commit -m "test(web): cover prune-fields, labels, format-date, delete-in-use dialog (#67)"
+```
+
+---
+
+# Task 3: Combobox story + full gate
+
+**Files:** Create `web/src/components/ui/combobox.stories.tsx`.
+
+- [ ] **Step 1: Read `web/src/objects/options-combobox.tsx`** to mirror the exact `ComboboxRoot` composition (generic, props, the `ComboboxList` render-function child), then create `web/src/components/ui/combobox.stories.tsx` (single-quote + no-semicolon, matching `badge.stories.tsx`):
+```tsx
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect } from 'storybook/test'
+
+import {
+  ComboboxRoot,
+  ComboboxInputGroup,
+  ComboboxInput,
+  ComboboxClear,
+  ComboboxTrigger,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxEmpty,
+} from './combobox'
+
+const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry']
+
+function ComboboxDemo() {
+  const [value, setValue] = useState<string | null>(null)
+
+  return (
+    <ComboboxRoot<string | null>
+      items={fruits}
+      value={value}
+      onValueChange={setValue}
+      itemToStringLabel={(item) => item ?? ''}
+      isItemEqualToValue={(a, b) => a === b}
+    >
+      <ComboboxInputGroup>
+        <ComboboxInput placeholder='Pick a fruit' />
+        <ComboboxClear aria-label='Clear' />
+        <ComboboxTrigger aria-label='Open' />
+      </ComboboxInputGroup>
+      <ComboboxPopup>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+        <ComboboxList>
+          {(item: string) => (
+            <ComboboxItem key={item} value={item}>
+              <ComboboxItemIndicator className='text-primary'>✓</ComboboxItemIndicator>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </ComboboxRoot>
+  )
+}
+
+const meta = {
+  component: ComboboxDemo,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof ComboboxDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText('Pick a fruit')).toBeInTheDocument()
+  },
+}
+```
+(Adjust the `ComboboxRoot` generic/props to match `options-combobox.tsx` exactly if they differ — the goal is a rendering `Default` story; keep the `play` minimal to stay stable in the browser project.)
+
+- [ ] **Step 2: Run the storybook project for this story** (browser test):
+```bash
+cd web && pnpm vitest run src/components/ui/combobox.stories.tsx
+```
+Expected: the `Default` story passes (input renders). If the Base UI combobox API needs a different prop shape, fix the story (mirror `options-combobox.tsx`); do not weaken the assertion below a render check.
+
+- [ ] **Step 3: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report total test count (should be prior 268 + 4 unit + 1 story ≈ 273), the largest chunk (gz) from check:size (a vendor chunk, < 250), and the check:colors line.
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 5: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/components/ui/combobox.stories.tsx
+git commit -m "test(web): add a Storybook story for the combobox primitive (#67)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 vendor split + verify (T1); AC2 the 4 unit tests (T2 S1-S4); AC3 combobox story (T3 S1-S2); AC4 full gate + codename (T3 S3-S4). ✓
+
+**Placeholder scan:** every test/story is complete code with concrete assertions; manualChunks is exact; the format-date ICU note and the vi.fn generic note give concrete fallbacks, not vague TODOs. ✓
+
+**Type/consistency:** `pruneFields(fields, Set, lang)`, `labelText(labels, lang)`, `formatDate(value, lang)`, `DeleteConfirmDialog({description,onConfirm})`, `InUseError(count)` from `../api/errors` — all match the spec's documented signatures; the combobox story imports the exact exports from `./combobox`. ✓
+
+## Notes
+- No new dependency, no new i18n keys. `build.rollupOptions` only affects `pnpm build`; the test projects are unaffected.
+- The combobox story is the one item with a (small) CI cost (a browser test on the slow runner); it's isolated in its own task/commit so it can be dropped cleanly if undesired.
+- `check:size` should report a smaller largest chunk after the split (a vendor chunk, not the combined app+vendor chunk).

docs/superpowers/plans/2026-06-09-responsive-master-detail.md

@@ -0,0 +1,425 @@
+# Responsive Master/Detail (vocab/search/fields) — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Bring the Vocabularies, Search, and Fields master/detail screens to the responsive behavior the Objects screen already has — preserving wide side-by-side, collapsing to single-column + a slide-in Drawer (vocab/search) or a stack (fields) on narrow — via one shared `DetailDrawer`.
+
+**Architecture:** Generalize the objects-specific drawer into a reusable `components/detail-drawer.tsx` and retrofit Objects onto it (Task 1). Make vocabularies + search responsive with `useMediaQuery("(min-width: 1024px)")` + `useMatch` + the shared drawer (Tasks 2-3). Make fields a pure-CSS responsive stack (Task 4) + full gate. Behavior-preserving on wide; only narrow changes.
+
+**Tech Stack:** React 19 + TS + pnpm, React Router 7, Base UI Drawer, Tailwind v4, Vitest 4 (jsdom) + RTL + MSW.
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon; token classes only. Breakpoint **1024px** (`useMediaQuery("(min-width: 1024px)")` / Tailwind `lg:`), matching Objects. Run a single test pass per task.
+
+**Spec:** `docs/superpowers/specs/2026-06-09-responsive-master-detail-design.md`
+
+**Key facts:**
+- `lib/use-media-query.ts`: `useMediaQuery(query): boolean` (SSR-safe matchMedia).
+- `objects/object-detail-drawer.tsx` (to be generalized + deleted) is: `<Drawer open onOpenChange={(n)=>{if(!n)onClose()}} swipeDirection="right"><DrawerContent aria-label={t("objects.detailTitle")}><div className="flex justify-end border-b p-2"><DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}><X className="size-4" aria-hidden="true" /></DrawerClose></div><div className="flex-1 overflow-auto"><Outlet/></div></DrawerContent></Drawer>`. `Drawer`/`DrawerClose`/`DrawerContent` from `@/components/ui/drawer`.
+- `objects/objects-page.tsx` currently `lazy()`-loads `ObjectDetailDrawer` + wraps in `<Suspense fallback={null}>`; narrow branch renders `{open && <Suspense><ObjectDetailDrawer open={open} onClose={closeDetail} /></Suspense>}`. The WIDE pane has its own close `<Button … aria-label={t("actions.closeDetail")}><X/></Button>` — keep it (`X` import stays).
+- Existing i18n (no new keys): `objects.detailTitle` ("Object detail"), `vocab.terms` ("Terms"), `actions.closeDetail` ("Close detail").
+- `vocabularies-page.tsx`: `<div flex h-full flex-col><PageTitle>…</PageTitle><div grid grid-cols-[20rem_1fr]><div border-r><VocabularyList/></div><div><Outlet/></div></div></div>`. Routes: `/vocabularies` (index `SelectVocabularyPrompt`) + `/vocabularies/:id` (`VocabularyTerms`).
+- `search-page.tsx`: same shape, `grid-cols-[24rem_1fr]`, `<SearchPanel/>`, routes `/search` (index `SelectSearchPrompt`) + `/search/:id` (`ObjectDetail`).
+- `fields-page.tsx`: `useState`-driven; `<div grid grid-cols-[20rem_1fr]><div border-r><FieldList selectedKey onSelect/></div><div><FieldForm key editing onDone/></div></div>`. No routes.
+- Test harness: `objects-page.test.tsx` has a `setViewport(wide: boolean)` helper that overrides `window.matchMedia` to match `(min-width: 1024px)` only when `wide`; default test setup is narrow (`matches:false`); `afterEach(() => vi.restoreAllMocks())`. Narrow-drawer assertion pattern: deep-link to `:id`, then `within(document.body).findByRole(...)` for the portaled drawer + assert the `/close detail/i` button. No `vocabularies-page`/`search-page`/`fields-page` test files exist yet.
+
+---
+
+# Task 1: Shared `DetailDrawer` + retrofit Objects
+
+**Files:** Create `web/src/components/detail-drawer.tsx`, `web/src/components/detail-drawer.test.tsx`; Modify `web/src/objects/objects-page.tsx`; Delete `web/src/objects/object-detail-drawer.tsx`.
+
+- [ ] **Step 1: Create `web/src/components/detail-drawer.tsx`:**
+```tsx
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+
+/** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports.
+ *  Provides the close affordance + an accessible dialog name; the caller supplies the content. */
+export function DetailDrawer({
+  open,
+  onClose,
+  ariaLabel,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  ariaLabel: string;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Drawer
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+      swipeDirection="right"
+    >
+      <DrawerContent aria-label={ariaLabel}>
+        <div className="flex justify-end border-b p-2">
+          <DrawerClose
+            aria-label={t("actions.closeDetail")}
+            render={<Button variant="ghost" size="icon-sm" />}
+          >
+            <X className="size-4" aria-hidden="true" />
+          </DrawerClose>
+        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+
+- [ ] **Step 2: Create `web/src/components/detail-drawer.test.tsx`** (write + run):
+```tsx
+import { expect, test, vi } from "vitest";
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { DetailDrawer } from "./detail-drawer";
+
+test("renders children in a named drawer and closes via the close button", async () => {
+  const onClose = vi.fn();
+  renderApp(
+    <DetailDrawer open onClose={onClose} ariaLabel="Object detail">
+      <p>detail body</p>
+    </DetailDrawer>,
+  );
+
+  const body = within(document.body);
+  expect(await body.findByText("detail body")).toBeInTheDocument();
+  await userEvent.click(body.getByRole("button", { name: /close detail/i }));
+  expect(onClose).toHaveBeenCalled();
+});
+```
+Run: `cd web && pnpm vitest run src/components/detail-drawer.test.tsx`. (If Base UI requires `open` to mount the portal, it's set; the content is portaled to `document.body`.)
+
+- [ ] **Step 3: Retrofit `web/src/objects/objects-page.tsx`.** Remove `import { lazy, Suspense } from "react";` and the `const ObjectDetailDrawer = lazy(...)` block; add `import { DetailDrawer } from "../components/detail-drawer";`. Replace the narrow `return` block's drawer with:
+```tsx
+  return (
+    <div className="h-full">
+      {table}
+      {open && (
+        <DetailDrawer open={open} onClose={closeDetail} ariaLabel={t("objects.detailTitle")}>
+          <Outlet />
+        </DetailDrawer>
+      )}
+    </div>
+  );
+```
+(Keep everything else — the wide grid branch with its own close `<Button><X/></Button>` is unchanged, so the `X` and `Button` imports stay.)
+
+- [ ] **Step 4: Delete the old drawer:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git rm web/src/objects/object-detail-drawer.tsx
+```
+(Confirm no other importer: `git grep -n object-detail-drawer web/src` → only objects-page, now changed.)
+
+- [ ] **Step 5: Verify (vitest ONCE) + typecheck + lint:**
+```bash
+cd web && pnpm vitest run src/components/detail-drawer.test.tsx src/objects/objects-page.test.tsx && pnpm typecheck && pnpm lint
+```
+Expected: green. The objects-page narrow + wide tests must pass unchanged (the shared `DetailDrawer` renders the same drawer + `/close detail/i` button).
+
+- [ ] **Step 6: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/components/detail-drawer.tsx web/src/components/detail-drawer.test.tsx web/src/objects/objects-page.tsx
+git rm -q web/src/objects/object-detail-drawer.tsx 2>/dev/null; git add -A web/src/objects
+git commit -m "refactor(web): shared DetailDrawer; objects-page uses it (#58)"
+```
+
+---
+
+# Task 2: Responsive Vocabularies page
+
+**Files:** Modify `web/src/vocab/vocabularies-page.tsx`; Create `web/src/vocab/vocabularies-page.test.tsx`.
+
+- [ ] **Step 1: Rewrite `web/src/vocab/vocabularies-page.tsx`:**
+```tsx
+import { Outlet, useMatch, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { VocabularyList } from "./vocabulary-list";
+import { DetailDrawer } from "../components/detail-drawer";
+import { useMediaQuery } from "../lib/use-media-query";
+import { useDocumentTitle } from "../lib/use-document-title";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { PageTitle } from "@/components/ui/page-title";
+
+export function VocabulariesPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const detailMatch = useMatch("/vocabularies/:id");
+  const open = Boolean(detailMatch);
+  const isWide = useMediaQuery("(min-width: 1024px)");
+
+  useDocumentTitle(t("nav.vocabularies"));
+  useBreadcrumb([{ label: t("nav.vocabularies") }]);
+
+  const close = () => navigate("/vocabularies");
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageTitle className="px-4 pt-4 pb-2">{t("nav.vocabularies")}</PageTitle>
+      {isWide ? (
+        <div className="grid flex-1 grid-cols-[20rem_1fr] overflow-hidden">
+          <div className="overflow-hidden border-r">
+            <VocabularyList />
+          </div>
+          <div className="overflow-hidden">
+            <Outlet />
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <VocabularyList />
+        </div>
+      )}
+      {!isWide && open && (
+        <DetailDrawer open={open} onClose={close} ariaLabel={t("vocab.terms")}>
+          <Outlet />
+        </DetailDrawer>
+      )}
+    </div>
+  );
+}
+```
+(The `<Outlet/>` is rendered in exactly one place: the wide grid, OR the narrow drawer when `open`. On narrow with no `:id`, neither renders the Outlet — just the list.)
+
+- [ ] **Step 2: Create `web/src/vocab/vocabularies-page.test.tsx`.** Read `web/src/test/fixtures.ts` + `web/src/test/handlers.ts` for the vocabularies list + terms handlers and a real vocabulary id. Mirror the `objects-page.test.tsx` `setViewport` harness:
+```tsx
+import { afterEach, expect, test, vi } from "vitest";
+import { screen, within } from "@testing-library/react";
+import { Route, Routes } from "react-router-dom";
+
+import { renderApp } from "../test/render";
+import { VocabulariesPage } from "./vocabularies-page";
+import { VocabularyTerms } from "./vocabulary-terms";
+import { SelectVocabularyPrompt } from "./select-vocabulary-prompt";
+
+function setViewport(wide: boolean) {
+  Object.defineProperty(window, "matchMedia", {
+    value: (query: string): MediaQueryList =>
+      ({
+        matches: wide && query === "(min-width: 1024px)",
+        media: query,
+        onchange: null,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+    writable: true,
+  });
+}
+
+afterEach(() => vi.restoreAllMocks());
+
+function tree() {
+  return (
+    <Routes>
+      <Route path="/vocabularies" element={<VocabulariesPage />}>
+        <Route index element={<SelectVocabularyPrompt />} />
+        <Route path=":id" element={<VocabularyTerms />} />
+      </Route>
+    </Routes>
+  );
+}
+
+test("narrow: a selected vocabulary's detail renders in a portaled drawer", async () => {
+  setViewport(false);
+  renderApp(tree(), { route: `/vocabularies/<VOCAB_ID>` });
+
+  const body = within(document.body);
+  expect(
+    await body.findByRole("button", { name: /close detail/i }, { timeout: 5000 }),
+  ).toBeInTheDocument();
+});
+
+test("wide: a selected vocabulary renders inline (no detail drawer)", async () => {
+  setViewport(true);
+  renderApp(tree(), { route: `/vocabularies/<VOCAB_ID>` });
+
+  // the list (master) is present and there is NO close-detail button (inline pane, not a drawer)
+  expect(await screen.findByRole("button", { name: /close detail/i }).catch(() => null)).toBeNull();
+});
+```
+Replace `<VOCAB_ID>` with a real id from `fixtures.ts`. The narrow test asserts the drawer is present (the `/close detail/i` button only exists inside `DetailDrawer`). For the wide test, prefer a positive assertion that the master + inline detail both render (e.g. `await screen.findByText(<a stable vocab list item or the vocab.terms caption>)`) AND `screen.queryByRole("button", { name: /close detail/i })` is null. Adjust the queries to the fixtures' actual rendered text; the load-bearing checks are: **narrow → close-detail button present (drawer); wide → close-detail button absent (inline)**. Reuse the default MSW handlers (don't add new ones unless a handler is missing).
+
+- [ ] **Step 3: Verify (vitest ONCE) + typecheck + lint:**
+```bash
+cd web && pnpm vitest run src/vocab/vocabularies-page.test.tsx src/vocab && pnpm typecheck && pnpm lint
+```
+Green. (Existing vocab tests stay green.)
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/vocab/vocabularies-page.tsx web/src/vocab/vocabularies-page.test.tsx
+git commit -m "feat(web): responsive Vocabularies master/detail (drawer on narrow) (#58)"
+```
+
+---
+
+# Task 3: Responsive Search page
+
+**Files:** Modify `web/src/search/search-page.tsx`; Create `web/src/search/search-page.test.tsx`.
+
+- [ ] **Step 1: Rewrite `web/src/search/search-page.tsx`** (same pattern as vocab; `24rem` master, `SearchPanel`, route `"/search/:id"`, close `"/search"`, drawer ariaLabel `t("objects.detailTitle")` since the search detail is an object):
+```tsx
+import { Outlet, useMatch, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { SearchPanel } from "./search-panel";
+import { DetailDrawer } from "../components/detail-drawer";
+import { useMediaQuery } from "../lib/use-media-query";
+import { useDocumentTitle } from "../lib/use-document-title";
+import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { PageTitle } from "@/components/ui/page-title";
+
+export function SearchPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const detailMatch = useMatch("/search/:id");
+  const open = Boolean(detailMatch);
+  const isWide = useMediaQuery("(min-width: 1024px)");
+
+  useDocumentTitle(t("nav.search"));
+  useBreadcrumb([{ label: t("nav.search") }]);
+
+  const close = () => navigate("/search");
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageTitle className="px-4 pt-4 pb-2">{t("nav.search")}</PageTitle>
+      {isWide ? (
+        <div className="grid flex-1 grid-cols-[24rem_1fr] overflow-hidden">
+          <div className="overflow-hidden border-r">
+            <SearchPanel />
+          </div>
+          <div className="overflow-hidden">
+            <Outlet />
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 overflow-hidden">
+          <SearchPanel />
+        </div>
+      )}
+      {!isWide && open && (
+        <DetailDrawer open={open} onClose={close} ariaLabel={t("objects.detailTitle")}>
+          <Outlet />
+        </DetailDrawer>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Create `web/src/search/search-page.test.tsx`** mirroring the vocab test (the `setViewport` helper, the same narrow→close-detail-present / wide→absent discriminator). Tree: `<Route path="/search" element={<SearchPage/>}><Route index element={<SelectSearchPrompt/>}/><Route path=":id" element={<ObjectDetail/>}/></Route>`. Deep-link `/search/<OBJECT_ID>` (use a real object id from `fixtures.ts`; the search detail loads the object via the same `/api/admin/objects/{id}` handler the objects tests use). Narrow → `within(document.body).findByRole("button", { name: /close detail/i })` present; wide → absent + the object detail renders inline. Reuse the default MSW handlers.
+
+- [ ] **Step 3: Verify (vitest ONCE) + typecheck + lint:**
+```bash
+cd web && pnpm vitest run src/search/search-page.test.tsx src/search && pnpm typecheck && pnpm lint
+```
+Green.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/search/search-page.tsx web/src/search/search-page.test.tsx
+git commit -m "feat(web): responsive Search master/detail (drawer on narrow) (#58)"
+```
+
+---
+
+# Task 4: Responsive Fields page (CSS stack) + full gate
+
+**Files:** Modify `web/src/fields/fields-page.tsx`; Create `web/src/fields/fields-page.test.tsx`.
+
+- [ ] **Step 1: Make `fields-page.tsx` a responsive stack.** Change the grid container + the list pane's border so it stacks on narrow and is side-by-side on `lg`:
+```tsx
+      <div className="grid flex-1 grid-cols-1 overflow-auto lg:grid-cols-[20rem_1fr] lg:overflow-hidden">
+        <div className="overflow-hidden border-b lg:border-r lg:border-b-0">
+          <FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
+        </div>
+        <div className="overflow-hidden">
+          <FieldForm
+            key={selected?.key ?? "create"}
+            editing={selected}
+            onDone={() => setSelected(null)}
+          />
+        </div>
+      </div>
+```
+(On narrow: single column — list then form, the grid container scrolls (`overflow-auto`), the list gets a bottom divider. On `lg`: the two-column grid with the list's right border, clipped overflow as before. If the stacked panes still clip awkwardly in a manual smoke, adjust the narrow pane `overflow` — keep `lg:` behavior identical to today.)
+
+- [ ] **Step 2: Create `web/src/fields/fields-page.test.tsx`:**
+```tsx
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+
+import { renderApp } from "../test/render";
+import { FieldsPage } from "./fields-page";
+
+test("renders the field list and the field form, in a responsive grid", async () => {
+  const { container } = renderApp(<FieldsPage />);
+
+  // both panes present (master + detail)
+  expect(await screen.findByText(/fields/i)).toBeInTheDocument();
+  // the responsive grid: single-column by default, two-column at lg
+  const grid = container.querySelector("div.grid");
+  expect(grid?.className).toContain("grid-cols-1");
+  expect(grid?.className).toContain("lg:grid-cols-[20rem_1fr]");
+});
+```
+Run: `cd web && pnpm vitest run src/fields/fields-page.test.tsx`. (Adjust the `findByText` to a stable rendered string — the `fields.title` PageTitle, the field-list, or the field-form's "Key" label. jsdom can't measure layout, so the class assertion is the responsive guard.)
+
+- [ ] **Step 3: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. Report total test count, largest chunk (gz), the check:colors line. (`check:size` should be unchanged-or-smaller — the objects drawer's separate lazy chunk folds into `base-ui`.)
+
+- [ ] **Step 4: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 5: Manual smoke (recommended).** `pnpm dev`, narrow the window (<1024px): the sidebar is an icon rail; Vocabularies/Search show the list/panel full-width and selecting an item slides in the detail Drawer (close returns to the index); Fields stacks the list above the form (both scrollable). Widen (≥1024): all three return to side-by-side; Objects unchanged.
+
+- [ ] **Step 6: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/fields/fields-page.tsx web/src/fields/fields-page.test.tsx
+git commit -m "feat(web): responsive Fields page (stacks on narrow) (#58)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 `DetailDrawer` + objects retrofit + delete old (T1); AC2 vocab + search responsive drawer (T2-T3); AC3 fields responsive grid (T4 S1); AC4 new tests for drawer/vocab/search/fields + existing green (T1-T4 tests); AC5 gate/codename/no-new-keys (T4 S3-S4). ✓
+
+**Placeholder scan:** full code for `DetailDrawer` + all three pages; tests give the exact `setViewport` harness + the narrow/wide discriminator; the `<VOCAB_ID>`/`<OBJECT_ID>` and `findByText` adjustments are explicit "read fixtures" instructions with a stated load-bearing assertion, not vague TODOs. ✓
+
+**Type/consistency:** `DetailDrawer({ open, onClose, ariaLabel, children })` (T1) is consumed with those exact props in objects/vocab/search (T1-T3); `useMediaQuery("(min-width: 1024px)")` + `useMatch("/<x>/:id")` + `navigate("/<x>")` consistent across vocab/search; ariaLabels use existing keys (`objects.detailTitle`, `vocab.terms`). ✓
+
+## Notes
+- No new dependency; no new i18n keys (`objects.detailTitle`, `vocab.terms`, `actions.closeDetail` all exist). `components/ui/*` untouched (drawer/button wrappers unchanged; only a new app-level `components/detail-drawer.tsx`).
+- The `<Outlet/>` per page is rendered in exactly one place per `isWide` branch — no double-mount.
+- Fields stays `useState`-driven + stacked (no routing change, no "New field" trigger needed); the resizable splitter is deferred.
+- Breakpoint 1024px is consistent with the existing Objects screen.

docs/superpowers/plans/2026-06-09-timestamp-tz.md

@@ -0,0 +1,154 @@
+# Instance-Timezone Timestamp Formatter — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a shared `formatTimestamp(value, timeZone, locale)` helper (date+time in the instance timezone, with an invalid-IANA → UTC fallback) and route the objects-table "Updated" column through it.
+
+**Architecture:** Task 1 adds `lib/format-timestamp.ts` (mirrors `lib/format-date.ts`) + its unit test. Task 2 swaps objects-table's inline `dateFmt`/`formatUpdated` for the helper and runs the full gate. Display-only; UTC stays in storage/transmission.
+
+**Tech Stack:** React 19 + TS + pnpm, `Intl.DateTimeFormat`, Vitest 4 (jsdom).
+
+**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon. No new dependency, no new i18n keys, no backend change.
+
+**Spec:** `docs/superpowers/specs/2026-06-09-timestamp-tz-design.md`
+
+**Key facts:**
+- `lib/format-date.ts` is the sibling pattern (date-only, no tz): `if (typeof value !== "string") return value == null ? "—" : String(value); const date = new Date(\`${value}T00:00:00\`); if (Number.isNaN(date.getTime())) return value; return new Intl.DateTimeFormat(lang, { dateStyle: "medium" }).format(date);`.
+- `objects/objects-table.tsx`: `const { t, i18n } = useTranslation();` (line ~31), `const { default_timezone } = useConfig();` (~32). Lines ~123-131 are the inline `const dateFmt = new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeZone: default_timezone });` + `const formatUpdated = (iso: string) => { const parsed = new Date(iso); return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed); };`. The Updated cell (~line 270): `<td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>`.
+- After removing `dateFmt`/`formatUpdated`, both `i18n` and `default_timezone` remain used (passed to `formatTimestamp`), and `t` is used elsewhere — no unused-locals.
+- `objects-table.test.tsx` does NOT assert the rendered Updated value → no test edit needed there. Fixture `amphora.updated_at = "2026-01-05T14:30:00Z"`.
+
+---
+
+# Task 1: `lib/format-timestamp.ts` + test
+
+**Files:** Create `web/src/lib/format-timestamp.ts`, `web/src/lib/format-timestamp.test.ts`.
+
+- [ ] **Step 1: Create `web/src/lib/format-timestamp.ts`:**
+```ts
+/** Formats a UTC ISO timestamp for display in the instance timezone + active locale.
+ *  Storage/transmission stay UTC — this is display-only. Falls back to UTC formatting on an
+ *  invalid IANA zone (a misconfigured instance) rather than throwing. */
+export function formatTimestamp(value: unknown, timeZone: string, locale: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const opts = { dateStyle: "medium", timeStyle: "short" } as const;
+
+  try {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone }).format(date);
+  } catch {
+    // Invalid IANA timeZone (misconfigured instance) — fall back to UTC rather than crash.
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone: "UTC" }).format(date);
+  }
+}
+```
+
+- [ ] **Step 2: Create `web/src/lib/format-timestamp.test.ts`** (write + run):
+```ts
+import { expect, test } from "vitest";
+
+import { formatTimestamp } from "./format-timestamp";
+
+test("formats a UTC timestamp with date and time in the given locale", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "UTC", "en");
+  expect(out).toContain("2026");
+  expect(out).toContain("12:30");
+});
+
+test("applies the timezone — a near-midnight UTC instant shifts the calendar day", () => {
+  // 02:00 UTC on Jun 8 is 22:00 on Jun 7 in New York (EDT, UTC-4)
+  const ny = formatTimestamp("2026-06-08T02:00:00Z", "America/New_York", "en");
+  const utc = formatTimestamp("2026-06-08T02:00:00Z", "UTC", "en");
+  expect(ny).toContain("Jun 7");
+  expect(utc).toContain("Jun 8");
+});
+
+test("an invalid IANA zone does not throw and falls back to UTC", () => {
+  const out = formatTimestamp("2026-06-08T12:30:00Z", "Not/AZone", "en");
+  expect(out).toContain("2026");
+});
+
+test("null renders the em-dash placeholder; an unparseable string is returned unchanged", () => {
+  expect(formatTimestamp(null, "UTC", "en")).toBe("—");
+  expect(formatTimestamp("not-a-date", "UTC", "en")).toBe("not-a-date");
+});
+```
+Run: `cd web && pnpm vitest run src/lib/format-timestamp.test.ts` → 4 passing. (Full-ICU Node renders en medium+short as e.g. `"Jun 8, 2026, 12:30 PM"`; the assertions check substrings — `2026`, `12:30`, `Jun 7`/`Jun 8` — to stay robust across ICU punctuation. If the local ICU renders the time without a leading-zero/`12:30`, assert the day-shift `Jun 7` vs `Jun 8` which is the load-bearing tz check.)
+
+- [ ] **Step 3: Verify + lint:**
+```bash
+cd web && pnpm vitest run src/lib/format-timestamp.test.ts && pnpm typecheck && pnpm lint
+```
+All green.
+
+- [ ] **Step 4: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/lib/format-timestamp.ts web/src/lib/format-timestamp.test.ts
+git commit -m "feat(web): formatTimestamp helper (instance tz + locale, UTC fallback) (#42)"
+```
+
+---
+
+# Task 2: Route objects-table "Updated" through `formatTimestamp` + full gate
+
+**Files:** Modify `web/src/objects/objects-table.tsx`.
+
+- [ ] **Step 1: Add the import** to `web/src/objects/objects-table.tsx` (alongside the other `../lib/*` imports):
+```ts
+import { formatTimestamp } from "../lib/format-timestamp";
+```
+
+- [ ] **Step 2: Remove the inline formatter.** Delete the `const dateFmt = new Intl.DateTimeFormat(i18n.language, { dateStyle: "medium", timeZone: default_timezone });` block AND the `const formatUpdated = (iso: string) => { … };` function (the ~9 lines, currently around lines 123-131). (`i18n` and `default_timezone` stay declared — they're now passed to `formatTimestamp` at the call site; `t` remains used elsewhere.)
+
+- [ ] **Step 3: Update the Updated cell.** Change:
+```tsx
+              <td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>
+```
+to:
+```tsx
+              <td className="px-3 py-2 text-muted-foreground">
+                {formatTimestamp(object.updated_at, default_timezone, i18n.language)}
+              </td>
+```
+
+- [ ] **Step 4: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
+```bash
+cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
+```
+All green. The objects-table tests stay green (they don't assert the Updated cell's text). Report total test count, largest chunk (gz), the check:colors line. If typecheck flags `i18n`/`default_timezone` as unused, the call site in Step 3 must reference them (it does) — re-check the edit.
+
+- [ ] **Step 5: Codename + status:**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
+git status --short
+```
+Expected: no matches (`codename-exit=1`).
+
+- [ ] **Step 6: Manual smoke (recommended).** `pnpm dev`: the objects list "Updated" column now shows date + time in the instance timezone (e.g. for an instance in `Europe/Stockholm`, a `…T14:30:00Z` value renders ~`Jan 5, 2026, 3:30 PM`); switching the UI language reformats it.
+
+- [ ] **Step 7: Commit**
+```bash
+cd /Users/olsson/Laboratory/biggus-dickus
+git add web/src/objects/objects-table.tsx
+git commit -m "feat(web): render objects 'Updated' as a tz-aware timestamp via formatTimestamp (#42)"
+```
+
+---
+
+## Self-Review (completed)
+
+**Spec coverage:** AC1 `formatTimestamp` helper + unit tests incl. day-shift + invalid-zone (T1); AC2 objects-table adoption, inline formatter removed, date+time (T2 S1-S3); AC3 gate/codename/no-new-dep-or-keys (T2 S4-S5). ✓
+
+**Placeholder scan:** full helper + test code; the ICU-substring note gives a concrete robustness fallback (assert `Jun 7`/`Jun 8`); exact lines/strings for the objects-table edit. No TBD. ✓
+
+**Type/consistency:** `formatTimestamp(value: unknown, timeZone: string, locale: string)` (T1) called as `formatTimestamp(object.updated_at, default_timezone, i18n.language)` (T2) — `updated_at: string`, `default_timezone: string` (useConfig), `i18n.language: string`. ✓
+
+## Notes
+- No new dependency, no new i18n keys, no backend change. `format-date.ts` (plain DATE) is untouched.
+- The helper constructs an `Intl.DateTimeFormat` per call (vs the prior once-per-render memo); negligible for the ≤200-row page.
+- Only the one timestamp display exists today; future displays (object-detail created/updated, audit history) route through the same helper when they land.

docs/superpowers/specs/2026-06-07-header-wayfinding-design.md

@@ -0,0 +1,169 @@
+# App Header Wayfinding — Design
+
+**Date:** 2026-06-07
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #54.
+
+## Context
+
+The `<header>` in `web/src/shell/app-shell.tsx` carries only a flex spacer + ThemeSwitch +
+LangSwitch + a Sign out button — no "where am I", no user identity, no search entry. Three further
+gaps: deep-linking to nested/create routes gives no header cue; the configured `app_name`
+(`useConfig()`, default "Collection Management System") is never shown — the sidebar brand
+(`sidebar.tsx:76`) and login heading (`login-page.tsx:38`) render the hardcoded `t("app.name")` =
+"Collection"; and global search requires a full route change via the sidebar.
+
+Facts established: routes are JSX `<Route>` elements (no `useMatches`/`handle`), so a breadcrumb can't
+use react-router's match data — and the object routes carry a UUID `:id`, not the `object_number` the
+breadcrumb wants. `useMe()` (`api/queries.ts:30`) returns `UserView | null` =
+`{ email, id, role }`. `useLogout()` (`queries.ts:129`) POSTs `/api/admin/logout`. Base UI ships a
+Menu primitive — `import { Menu } from "@base-ui/react/menu"` (namespace export) — no new dependency.
+`#57` added `useDocumentTitle(page)` per page; this milestone adds a parallel page-driven breadcrumb.
+The full ⌘K command palette / in-place search modal is **#33** (out of scope here).
+
+### Decisions (from brainstorming)
+1. **Page-driven breadcrumb context** (`useBreadcrumb(trail)`), parallel to `useDocumentTitle` — the
+   header stays dumb; detail pages supply exact dynamic crumbs (`object_number`, vocab name).
+2. **User-menu dropdown** using a new `ui/menu.tsx` Base UI Menu wrapper; Sign out moves into it.
+3. **Compact header search** that navigates to `/search?q=…` (light entry; the palette is #33).
+4. **Brand + login use `useConfig().app_name`**; the hardcoded `app.name` i18n key is removed.
+
+## Components
+
+### 1. `app_name` everywhere (kill "Collection")
+- `web/src/shell/sidebar.tsx:76`: `t("app.name")` → `useConfig().app_name` (still hidden when the
+  sidebar is collapsed).
+- `web/src/auth/login-page.tsx`: the `<h1>` (line 38) and the `document.title` effect (line 18,
+  added in #57) → `useConfig().app_name`. Login is rendered inside `ConfigProvider` (mounted in
+  `main.tsx` around everything), so `useConfig()` works there; if `/api/config` is auth-gated
+  pre-login, it returns the default "Collection Management System" — still the correct product name,
+  and better than "Collection".
+- Remove the now-unused `app.name` key from `en.json` and `sv.json` (grep confirms only the three
+  usages above; all are migrated). `useDocumentTitle` already reads `app_name` from `useConfig`, not
+  i18n, so nothing else depends on the key.
+
+### 2. Breadcrumb (page-driven context)
+- **`web/src/shell/breadcrumb-context.ts`** — `export type BreadcrumbItem = { label: string; to?: string }`
+  and a context `{ trail: BreadcrumbItem[]; setTrail: (t: BreadcrumbItem[]) => void }` (default
+  `{ trail: [], setTrail: () => {} }`).
+- **`web/src/shell/breadcrumb-provider.tsx`** — holds `useState<BreadcrumbItem[]>([])`, provides
+  `{ trail, setTrail }`. Mounted in `AppShell` wrapping the header + main.
+- **`web/src/shell/use-breadcrumb.ts`** — `useBreadcrumb(trail: BreadcrumbItem[])`: in a `useEffect`
+  calls `setTrail(trail)`, keyed on a **serialized** trail string
+  (`trail.map(i => \`${i.label}
${i.to ?? ""}\`).join("")`) to avoid re-running on every
+  render from a fresh array literal. (No clear-on-unmount: every AppShell route sets its own trail,
+  so the next page overwrites — avoids an empty-then-refill flash.)
+- **Header rendering:** a `Breadcrumb` element on the header's left renders the trail as
+  `crumb / crumb / crumb`; non-terminal crumbs with a `to` are `<Link>`s (`text-muted-foreground
+  hover:text-foreground`), the terminal crumb is `text-foreground`. Separator `/` (muted). Uses
+  `text-sm`. Truncates with `truncate`/`min-w-0` so a long `object_number` doesn't push the right side
+  off. (No `aria` nav landmark needed beyond a simple `<nav aria-label="Breadcrumb">`.)
+
+**Per-page trails** (reusing existing i18n keys; dynamic labels from already-loaded data):
+| Route / component | Trail |
+|---|---|
+| `objects-page` | `[{label: t("nav.objects")}]` |
+| `object-new-page` | `[{label: t("nav.objects"), to: "/objects"}, {label: t("objects.new")}]` |
+| `object-detail` (`ObjectDetailLoaded`) | `[{label: t("nav.objects"), to: "/objects"}, {label: object.object_number}]` |
+| `object-edit-form` (loaded) | `[{nav.objects→/objects}, {object_number→/objects/:id}, {t("actions.edit")}]` |
+| `vocabularies-page` | `[{label: t("nav.vocabularies")}]` |
+| `vocabulary-terms` (loaded) | `[{nav.vocabularies→/vocabularies}, {label: <vocab name>}]` |
+| `authorities-page` | `[{label: t("nav.authorities")}]` |
+| `fields-page` | `[{label: t("nav.fields")}]` |
+| `search-page` | `[{label: t("nav.search")}]` |
+
+`/search/:id` reuses `ObjectDetail`, so it shows the object's canonical `Objects / {number}` trail
+(acceptable — it identifies the record; refining to a search-relative trail is a later nicety).
+
+### 3. `web/src/components/ui/menu.tsx` (new — Base UI Menu wrapper)
+Wrap the Base UI Menu parts in the established `ui/*` style (`data-slot`, `cn()`, `render` prop where
+a part should be a `Button`). Minimum surface needed: `Menu.Root` → `MenuTrigger`, and a
+`MenuContent` composing `Menu.Portal` + `Menu.Positioner` + `Menu.Popup`, plus `MenuItem` and
+`MenuSeparator`. Style the popup as a card (`bg-popover text-popover-foreground border rounded-md
+shadow-md p-1`), items as `data-[highlighted]` rows (mirror the combobox/alert-dialog token classes).
+**Base UI Menu is novel in this repo → the exact part tree + props (`render`, positioner side/align,
+portal) must be validated by running** (a story), as combobox/drawer/tooltip/toast were. A
+`menu.stories.tsx` renders a trigger + a few items and (play test) opens it and asserts an item.
+
+### 4. `web/src/shell/user-menu.tsx`
+- `const { data: me } = useMe();` and the `useLogout()` flow (moved out of the header bar).
+- Trigger: a `Button variant="ghost" size="sm"` with a lucide `User`/`CircleUser` icon + the email
+  (truncated; icon-only below `sm` if needed). Opens `MenuContent`:
+  - email (a non-interactive header row, `label-caption` or muted),
+  - role (secondary muted text — raw `me.role`),
+  - `MenuSeparator`,
+  - `MenuItem` **Sign out** (`t("auth.signOut")`) → triggers logout + navigate to `/login` (the same
+    logic currently in `app-shell.tsx`).
+- If `me` is null (shouldn't happen inside `AppShell`/RequireAuth), render nothing or just the trigger.
+
+### 5. `web/src/shell/header-search.tsx`
+- A small `<form>` with an `<Input>` (lucide `Search` icon, placeholder `t("search.headerPlaceholder")`).
+- `onSubmit`: `navigate("/search?q=" + encodeURIComponent(query.trim()))` when non-empty; clears or
+  keeps the field (keep). The search page already reads `?q=` (`search-panel.tsx`), so it pre-fills +
+  executes. Width compact (`w-48 lg:w-64`); **hidden below `sm`** (`hidden sm:block`) to keep the
+  narrow header uncluttered (full responsive header = #58).
+- New i18n key `search.headerPlaceholder` (en: "Search…", sv: "Sök…") in both locales (parity).
+
+### 6. Header assembly (`app-shell.tsx`)
+```tsx
+<header className="flex items-center gap-4 border-b px-4 py-2">
+  <Breadcrumb />            {/* left, truncates */}
+  <div className="flex-1" />
+  <HeaderSearch />
+  <ThemeSwitch />
+  <LangSwitch />
+  <UserMenu />
+</header>
+```
+The standalone Sign out `<Button>` is removed (now in `UserMenu`); `onSignOut`/logout logic moves to
+`UserMenu`. Wrap header+main in `BreadcrumbProvider` so both the pages (setters) and the header
+(reader) share it.
+
+## Data flow
+Route mounts → page calls `useBreadcrumb(trail)` → provider state updates → header `Breadcrumb`
+renders it. `UserMenu` reads `useMe()` (cached `["me"]` query). `HeaderSearch` submit → router
+navigate to `/search?q=`. Brand/login read `useConfig().app_name`.
+
+## Error handling / edges
+- `useBreadcrumb` effect keyed on serialized trail → no render loop, no stale array identity churn.
+- A page that forgets to set a trail would show the previous page's crumbs; all AppShell routes set
+  one (acceptance check). Login is outside AppShell (no breadcrumb there).
+- Long `object_number`/email truncate (`min-w-0 truncate`) so the header never overflows.
+- Base UI Menu requires Portal + Positioner (like the other primitives) — validate by running.
+- `me` null inside AppShell is not expected (RequireAuth guards), but `UserMenu` guards it.
+
+## Testing
+- **Breadcrumb:** a page sets a trail → the header renders the crumbs; a non-leaf crumb is a working
+  `<Link>` (click navigates). Test via `renderApp` at a nested route (e.g. `/objects/new` shows
+  "Objects / New" with "Objects" linking to `/objects`).
+- **`ui/menu` story** (validate-by-running): open the menu, assert an item is visible.
+- **UserMenu:** renders the email from a mocked `useMe`; opening it shows Sign out; clicking Sign out
+  triggers the logout request (MSW) and navigates to `/login`. (Mirror the existing app-shell signout
+  expectations — move them here.)
+- **HeaderSearch:** typing a query + submit navigates to `/search?q=<encoded>` (assert the resulting
+  route/`?q=`).
+- **app_name:** sidebar brand + login render `useConfig().app_name` (the default in tests).
+- **app-shell.test.tsx:** update — the Sign out button moved into UserMenu; keep/upgrade the signout
+  assertion to go through the menu. Don't weaken.
+- Gate: `pnpm typecheck && lint && test && build && check:size && check:colors`; en/sv parity (one new
+  key `search.headerPlaceholder`; `app.name` removed from both); no codename. **`check:size`:** Base UI
+  Menu is added to the always-loaded shell — it may nudge the largest chunk; report the value (budget
+  250 KB gz; raise only if it genuinely exceeds, and flag to the user rather than silently bumping).
+
+## Acceptance criteria
+1. The header shows a route-driven breadcrumb on the left for every AppShell route (section for list
+   pages; `Section / New|Edit` and `Section / {object_number|vocab name}` for nested), via a
+   page-driven `useBreadcrumb`/context; non-leaf crumbs link.
+2. A user-menu dropdown on the right shows the signed-in email + role and a Sign out item (which logs
+   out); the standalone Sign out button is gone. Built on a reusable `ui/menu` Base UI wrapper.
+3. A compact header search field navigates to `/search?q=…` (hidden below `sm`).
+4. The sidebar brand and the login heading + tab title render `useConfig().app_name`; the hardcoded
+   `app.name` i18n key is removed.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported (within budget or
+   flagged); en/sv parity; no codename; no new npm dependency.
+
+## Out of scope → follow-ups
+- Full ⌘K command palette / in-place search-results modal (#33).
+- Broader responsive header behavior (#58) — this only hides the search field below `sm`.
+- User avatar images, a user/account settings page, role-name i18n mapping.
+- Refining `/search/:id` to a search-relative breadcrumb (currently shows the canonical object trail).

docs/superpowers/specs/2026-06-07-object-form-robustness-design.md

@@ -0,0 +1,164 @@
+# Object Form Robustness — Design
+
+**Date:** 2026-06-07
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #46.
+
+## Context
+
+The object create/edit form has data-integrity gaps that compound in long daily cataloguing sessions
+(High severity):
+- **Submit never disabled during save.** `object-form.tsx` submit button has no `disabled`/pending.
+  Both create (`object-new-page.tsx`) and edit (`object-edit-form.tsx`) do **two sequential awaited
+  mutations** (create/update, then `setFields`) with no feedback → a second click can duplicate-create
+  or race the two-step write. `publish-control.tsx` is the model (disables on `isPending`).
+- **No unsaved-changes guard.** No `isDirty`/`useBlocker`/`beforeunload`; Cancel/nav loses work
+  silently.
+- **Two-phase write recovers inconsistently.** Create teleports to the edit page on `setFields`
+  failure; edit stays put with a banner. The partial write (core saved, field rejected) reads as
+  nothing happened.
+- **Thin validation.** Core errors always show `form.required`; the server `code`
+  (`type_mismatch`/`unresolved`/`unknown`) on `FieldRejection` is discarded; no `number_of_objects >= 1`.
+- No "Save & create another" / keyboard submit for batch entry.
+
+**Facts established:** the form uses **react-hook-form** (so `formState.isDirty` + `isSubmitting` are
+available; `isSubmitting` stays true across both awaited mutations — the unified pending signal).
+`ObjectForm` props: `mode`, `defaults`, `onSubmit`, `onCancel`, `formError`, `fieldErrorKey`; the
+422→highlight path uses `form.setError`. `FieldRejection` (`queries.ts`) carries `field` + `code`.
+The router is `<BrowserRouter>` + `<Routes>` (component router) in `app.tsx`; **`useBlocker` requires
+a data router** (`createBrowserRouter` + `RouterProvider`). `renderApp` wraps `ui` in `<MemoryRouter>`
+with no `<Routes>` (tests supply their own when they need params).
+
+### Decisions (from brainstorming)
+1. **Migrate to a data router** (the long-term-correct foundation; unblocks `useBlocker` and React
+   Router v7 data APIs). Done via `createRoutesFromElements` to keep the exact route tree (minimal
+   diff), isolated as the first task, with the test harness moved to `createMemoryRouter`.
+2. **Unify create partial-failure** to the edit route with a distinct "Object created, but a field was
+   rejected" banner (single recovery surface).
+3. **Include batch entry** ("Save & create another" + Cmd/Ctrl+Enter).
+
+## Components
+
+### 0. Data-router migration (foundation — isolated)
+- **`app.tsx`:** replace `<BrowserRouter><Routes>…</Routes></BrowserRouter>` with a module-level
+  `const router = createBrowserRouter(createRoutesFromElements(<>…the existing <Route> tree…</>))`
+  and `export function App() { return <RouterProvider router={router} />; }`. The route JSX (login,
+  `RequireAuth`→`AppShell` nest with all nested routes, lazy `Suspense` wrappers, splat) moves
+  **verbatim** into `createRoutesFromElements`. No behavior/path change.
+- **`main.tsx`:** unchanged provider stack (QueryClient → Config → Toast) now wraps `<App/>` which is
+  `<RouterProvider/>`.
+- **`test/render.tsx`:** `renderApp(ui, { route })` switches to
+  `createMemoryRouter([{ path: "*", element: ui }], { initialEntries: [route] })` rendered via
+  `<RouterProvider/>` (inside `QueryClientProvider`). Behavior-preserving: `ui` renders at `route`,
+  and tests that supply their own `<Routes>` still nest correctly; now a data-router context exists so
+  `useBlocker` works. **Acceptance: the entire existing suite stays green** before any feature is built
+  on top.
+
+### 1. Submit pending + keyboard + batch (`object-form.tsx`)
+- Submit `<Button type="submit" disabled={form.formState.isSubmitting}>` showing
+  `isSubmitting ? t("form.saving") : (mode === "create" ? t("form.create") : t("form.save"))`. Disable
+  Cancel while submitting. (`isSubmitting` is true across both awaited mutations because RHF awaits the
+  async `onSubmit`.)
+- **Cmd/Ctrl+Enter** submits: a keydown handler on the form (`(e.metaKey||e.ctrlKey) && e.key==="Enter"`
+  → `form.handleSubmit(...)`), or rely on the native submit + a small handler. Implementer picks the
+  clean form; must not double-submit.
+- **"Save & create another"** (create mode only): a secondary submit button. `ObjectForm` gains an
+  optional `onSubmitAndNew?: (values) => Promise<void>` (or a `submitAction` flag passed to `onSubmit`)
+  so the create page knows which button fired. On success it `form.reset(blankDefaults)` and focuses the
+  first field instead of navigating. Edit mode does not show this button.
+
+### 2. Validation messages
+- **Server `code` echo:** when a `FieldRejection` is shown, pick the message by `code` —
+  `form.fieldError.type_mismatch` / `form.fieldError.unresolved` / `form.fieldError.unknown` (fallback
+  to the existing `form.fieldRejected`). The create/edit pages already extract `e.field`; also pass
+  `e.code` through to `ObjectForm` (extend `fieldErrorKey` handling to carry a code, e.g. a
+  `fieldError?: { key: string; code?: string }` prop, or a second `fieldErrorCode?` prop). The
+  highlight `form.setError` message uses the code-specific string.
+- **Core-field messages:** render the RHF error by `type` — `errors.core[key]?.type === "min"` →
+  `form.min` (with the limit), else `form.required`. (Today it's always `form.required`.)
+- **`number_of_objects >= 1`:** register with `min: { value: 1, message: t("form.minCount") }` (RHF,
+  client-side, before the round-trip). Keep `required`.
+
+### 3. Unsaved-changes guard (`lib/use-unsaved-changes.tsx`)
+- `useUnsavedChanges(isDirty: boolean)`: 
+  - adds a `beforeunload` listener while `isDirty` (covers reload / tab-close / browser back),
+  - calls `useBlocker(({currentLocation,nextLocation}) => isDirty && currentLocation.pathname !== nextLocation.pathname)` to block in-app navigation while dirty,
+  - returns the `blocker` so the caller renders an `UnsavedChangesDialog` when `blocker.state === "blocked"` (Stay → `blocker.reset()`, Leave → `blocker.proceed()`).
+- **`UnsavedChangesDialog`** built on `ui/alert-dialog` (title/body/Stay/Leave). New i18n
+  `form.unsaved.{title,body,stay,leave}`.
+- **Wire into `ObjectForm`:** `const isDirty = form.formState.isDirty;` → `useUnsavedChanges(isDirty)`;
+  render the dialog. The **Cancel** button: if dirty, open the same confirm dialog (Leave → `onCancel`);
+  if clean, `onCancel` directly.
+- **Suppress on successful save:** after a successful submit the form navigates; `isDirty` must be false
+  by then (RHF `reset` on success, or the blocker condition excludes the programmatic post-save nav).
+  The create→edit partial-failure nav is programmatic and must not be blocked — reset dirty (or set a
+  "saving" ref that bypasses the blocker) around the save so the post-save/teleport navigation isn't
+  caught. Implementer ensures save-driven navigation never triggers the guard.
+
+### 4. Partial-failure unification
+- **Create** (`object-new-page.tsx`): on `setFields` failure after the core create succeeds, navigate
+  to `/objects/${id}/edit` with `state: { created: true, fieldErrorKey: e.field, fieldErrorCode: e.code }`
+  (today it passes `fieldsError`/`fieldErrorKey`; add `created` + `code`). The core-create already
+  succeeded, so this is correct (the object exists; editing it is the right URL).
+- **Edit** (`object-edit-form.tsx`): read `location.state`. If `created`, show the banner
+  `form.createdButFieldRejected` ("Object created, but a field was rejected — fix it below"); otherwise
+  the existing rejection banner. Both highlight the field (via `fieldErrorKey` + code). Edit's own
+  in-place partial-failure (update ok, setFields fails) keeps staying-put with its banner.
+- Result: a single recovery surface (the edit form) for both flows, with create messaged as "created."
+
+## Data flow
+RHF manages form state → `isSubmitting` disables submit across both mutations → `isDirty` drives the
+guard (beforeunload + useBlocker + dialog) → on save success the form is clean and navigates → on
+create partial-failure it navigates to the edit route with `created` state → the edit form shows the
+"created" banner + field highlight (code-specific message).
+
+## Error handling / edges
+- `isSubmitting` covers the whole two-phase write (RHF awaits `onSubmit`); a second click is a no-op
+  (button disabled).
+- The guard must not fire on save-driven navigation (post-success or create→edit teleport) — reset
+  dirty / bypass ref around saves.
+- `beforeunload` only prompts while dirty (don't attach unconditionally).
+- `useBlocker` now works (data router). Tests render under `createMemoryRouter` (harness change) so the
+  blocker is exercisable.
+- A `FieldRejection` with an unknown `code` falls back to the generic `form.fieldRejected`.
+- `number_of_objects` min is client-side UX; the server remains source of truth.
+
+## Testing
+- **Migration:** the full existing suite passes under the new `createMemoryRouter` harness (no
+  behavior change) — this is the gate for Task 1.
+- **Submit disable:** during an in-flight save the submit button is `disabled` and reads "Saving…";
+  a double-click fires the create mutation once (assert call count). 
+- **Keyboard:** Cmd/Ctrl+Enter submits.
+- **Save & create another:** create mode → success resets the form (fields cleared, stays on /new),
+  does not navigate to detail.
+- **Validation:** a `FieldRejection` with `code: "type_mismatch"` shows the code-specific message;
+  `number_of_objects = 0` shows `form.minCount` without hitting the server.
+- **Dirty guard:** with a dirty form, attempting in-app nav shows the dialog (Stay keeps you, Leave
+  proceeds); Cancel-when-dirty confirms; a clean form navigates freely; `beforeunload` listener added
+  only when dirty (assert via the registered handler / a spy). 
+- **Partial-failure:** create with a `setFields` 422 → lands on `/objects/:id/edit` with the "Object
+  created, but a field was rejected" banner + field highlight; edit's own setFields 422 → stays with
+  its banner. (Extend `object-new-page.test.tsx` / `object-edit-form.test.tsx`.)
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; en/sv parity for all new keys;
+  no codename.
+
+## Acceptance criteria
+1. The app uses a data router (`createBrowserRouter` + `RouterProvider`) with the route tree unchanged;
+   the test harness uses `createMemoryRouter`; the full suite is green.
+2. The submit button is disabled and shows "Saving…" while either mutation is pending; no double-submit
+   / duplicate-create is possible from the UI.
+3. A dirty form guards navigation: `useBlocker` dialog on in-app nav, `beforeunload` on reload/close,
+   and Cancel confirms when dirty; saving navigates without a false prompt.
+4. Create and edit share one partial-failure recovery surface (the edit form); the create case is
+   messaged "Object created, but a field was rejected" and highlights the field.
+5. Field-rejection messages reflect the server `code`; core errors show type-specific messages;
+   `number_of_objects >= 1` is validated client-side.
+6. Create mode offers "Save & create another" (resets the form) and Cmd/Ctrl+Enter submit.
+7. `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; en/sv parity; no codename; no
+   new npm dependency.
+
+## Out of scope → follow-ups
+- Flexible-field grouping/ordering (#45 / detail), per-field server validation rules (#11).
+- Turning core-field 422s into per-field `FieldRejection`s server-side (the core mutations still throw
+  generic errors; only `setFields` yields field-level codes).
+- Autosave / draft persistence.

docs/superpowers/specs/2026-06-08-a11y-defect-bundle-design.md

@@ -0,0 +1,163 @@
+# Accessibility Defect Bundle — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #62 (label-id collision, invalid table row semantics, unnamed drawer, unannounced table states, last untranslated strings).
+
+## Context
+
+A frontend deep audit (post the #52 a11y pass, which is verified correct) found five remaining
+accessibility gaps. They are independent, low-risk fixes; no new dependency. The #52 work (focus ring,
+skip link, route focus, authority nav links, lang group, `<html lang>` sync) stays untouched.
+
+## Components
+
+### 1. `components/label-editor.tsx` — id collision → `useId()`
+`LabelEditor` hardcodes `<Label htmlFor="label">` + `<Input id="label">` (`:35-36`). It renders
+simultaneously in the create form **and** any inline-edit row (authorities + vocab), so two `id="label"`
+inputs coexist and every `<label for="label">` resolves to the first — the second editor's label points
+at the wrong field (WCAG 1.3.1 / 4.1.1 / 4.1.2). Fix with React's `useId()` (zero call-site changes):
+```tsx
+import { useId } from "react";
+// …
+const inputId = useId();
+<Label htmlFor={inputId}>{t("labels.label")}</Label>
+<Input id={inputId} value={current} onChange={(e) => set(e.target.value)} />
+```
+
+### 2. `objects/objects-table.tsx` — rows: real link + `aria-current`
+The data rows are `<tr role="link" tabIndex={0} aria-selected={selected} onClick onKeyDown>` (`:247-259`).
+`aria-selected` is invalid on `role="link"` (AT ignores it). Decision (brainstorming): make the
+object-**number** cell a real React Router `<Link>` and keep the whole row clickable. The `<tr>` becomes a
+plain row:
+```tsx
+<tr
+  key={object.id}
+  onClick={() => navigate(`/objects/${object.id}?${params}`)}
+  className={`cursor-pointer border-b text-sm ${selected ? "bg-primary/10" : "hover:bg-muted"}`}
+>
+  <td className="px-3 py-2 text-muted-foreground">
+    <Link
+      to={`/objects/${object.id}?${params}`}
+      aria-current={selected ? "page" : undefined}
+      onClick={(event) => event.stopPropagation()}
+      className={`${focusRing} rounded-sm hover:underline`}
+    >
+      {object.object_number}
+    </Link>
+  </td>
+  {/* …other cells unchanged… */}
+</tr>
+```
+- Native anchor ⇒ keyboard focus + Enter activation + SR "link" + middle-click / open-in-new-tab, all free.
+- `event.stopPropagation()` on the link prevents the row `onClick` from double-navigating when the link
+  itself is clicked.
+- The whole-row `onClick` stays, so clicking any non-link cell still opens the object (preserves current
+  UX; the existing "clicking a row …" test clicks the object-**name** cell and still passes).
+- Selection is conveyed by `aria-current="page"` on the link (announced when focused); the visual
+  highlight stays on the `<tr>` via the className.
+- Drop `role="link"`, `tabIndex`, `onKeyDown`, and `aria-selected` from the `<tr>`.
+
+### 2b. `objects/objects-table.tsx` — filter pills: restore `focusRing`
+The visibility pills (`:168-177`) lack the keyboard focus ring their siblings (`search-panel`,
+`authorities-page`) have. Import `focusRing` from `../lib/focus-ring` and append it to the pill className:
+```tsx
+className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`}
+```
+
+### 3. `objects/objects-table.tsx` — announce loading / error
+Loading renders bare `<Skeleton>` rows and the error a plain `<td>` — neither is announced (WCAG 4.1.3).
+- Add `aria-busy={isLoading || undefined}` to the `<table>`.
+- Add an `sr-only` live `<caption>` that announces loading and settles to the table name (also gives the
+  table an accessible name):
+```tsx
+<table className="w-full border-collapse" aria-busy={isLoading || undefined}>
+  <caption className="sr-only" aria-live="polite">
+    {isLoading ? t("common.loading") : t("objects.tableLabel")}
+  </caption>
+  {columns}
+  {body}
+</table>
+```
+- Add `role="alert"` to the error `<td>` (`:223`) so a load failure is announced assertively:
+```tsx
+<td colSpan={6} role="alert" className="px-3 py-6 text-center text-sm text-destructive">
+  {t("objects.loadError")}
+</td>
+```
+
+### 4. `objects/object-detail-drawer.tsx` — name the drawer dialog
+The Base UI drawer (a modal dialog) has no accessible name. `DrawerContent` spreads props onto the Popup,
+so pass an `aria-label`:
+```tsx
+<DrawerContent aria-label={t("objects.detailTitle")}>
+```
+(No change to `components/ui/drawer.tsx`.)
+
+### 5. Last untranslated strings
+- `objects/options-combobox.tsx` (`:47-52`): add `import { useTranslation } from "react-i18next";` +
+  `const { t } = useTranslation();`, then `aria-label={t("common.clear")}` on `ComboboxClear`,
+  `aria-label={t("common.open")}` on `ComboboxTrigger`, and `<ComboboxEmpty>{t("common.noMatches")}</ComboboxEmpty>`
+  (`common.noMatches` already exists).
+- `shell/breadcrumb.tsx` (`:10`): add `useTranslation`; `<nav aria-label={t("nav.breadcrumb")}>`.
+
+### i18n (en + sv parity — 5 new keys)
+`common.noMatches` and `common.loading` already exist. New keys:
+| key | en | sv |
+|-----|----|----|
+| `common.clear` | Clear | Rensa |
+| `common.open` | Open | Öppna |
+| `nav.breadcrumb` | Breadcrumb | Brödsmulor |
+| `objects.detailTitle` | Object detail | Objektdetalj |
+| `objects.tableLabel` | Objects | Objekt |
+
+## Data flow / accessibility
+No data-flow changes. Tab order in the objects table becomes: filter input → visibility pills (now with
+ring) → New button → each row's object-number link → pagination. The selected row's link carries
+`aria-current="page"`. Loading politely announces via the caption; a load error asserts via the alert
+cell. The drawer and breadcrumb gain accessible names; every combobox control is named in the active
+locale.
+
+## Error handling / edges
+- `aria-busy={isLoading || undefined}` omits the attribute when not loading (no `aria-busy="false"` noise).
+- `event.stopPropagation()` on the row link means a plain click on the number navigates once (link), not
+  twice; modifier/middle clicks open a new tab natively (React Router `<Link>` respects them).
+- `aria-current` is omitted (not `"false"`) when the row isn't selected.
+- The `<caption>` is `sr-only` — no visual change to the table.
+- `useId()` ids are SSR/StrictMode stable and unique per instance.
+
+## Testing
+- **`label-editor`**: render two `LabelEditor`s together; assert their inputs have **different** ids and
+  each `<label>` is associated with its own input (e.g. `getAllByLabelText` returns two distinct nodes).
+- **`objects-table`**: (a) a data row exposes a `link` named by the object number
+  (`getByRole("link", { name: <object_number> })`); (b) the row matching the selected `:id` has the link
+  with `aria-current="page"`; (c) clicking a row still deep-links (existing test stays green); (d) the
+  loading state sets `aria-busy` on the table; (e) an errored fetch renders `role="alert"`. Update any
+  existing assertion that referenced `aria-selected`/the row as a link.
+- **`options-combobox`**: the clear/open controls are named via `t()` and the empty text is translated
+  (assert the English defaults render; the parity test guards sv).
+- **`breadcrumb`**: the `<nav>` accessible name comes from `t("nav.breadcrumb")`.
+- **`object-detail-drawer`**: the open drawer dialog has an accessible name (`getByRole("dialog", { name })`
+  or equivalent for the Base UI popup).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; en/sv parity (5 new keys,
+  guarded by the #60 parity test); no codename; no new dependency. `focusRing` is token-based so
+  `check:colors` stays green.
+
+## Acceptance criteria
+1. `LabelEditor` uses `useId()`; two instances never share an input id.
+2. Objects-table data rows expose a real `<Link>` (object-number cell) with `aria-current="page"` on the
+   selected row; no `role="link"`/`aria-selected` on the `<tr>`; whole-row click still navigates; the
+   filter pills show the keyboard focus ring.
+3. The table sets `aria-busy` while loading and exposes a polite live caption; a load error renders
+   `role="alert"`.
+4. The object-detail drawer dialog and the breadcrumb `<nav>` have accessible names; the combobox
+   clear/open/empty strings are translated.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity (5 new
+   keys); no codename; no new dependency.
+
+## Out of scope → follow-ups
+- The combobox wrapper's raw palette utilities (`text-neutral-*`, `bg-indigo-50`, `bg-white`) inside
+  `components/ui/combobox.tsx`, and the segmented-control extraction → design-kit issue **#66**.
+- A full ARIA grid for the objects table (sortable/selectable grid semantics) — the navigation-table +
+  real-link pattern is the correct, simpler choice here.
+- Automated axe/CI a11y scanning.

docs/superpowers/specs/2026-06-08-a11y-focus-design.md

@@ -0,0 +1,135 @@
+# Accessibility — Focus, Route Management, Honest Semantics — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #52.
+
+## Context
+
+Keyboard-driven fast data entry is a stated goal and this is a public-institution tool, but several
+custom controls drop the `ui/*` kit's focus ring, route changes leave focus stranded, there's no skip
+link, the authority "tabs" announce tab semantics they don't fulfill, the lang switch lacks a group
+label, and `<html lang>` never updates.
+
+**Current state (post #49/#51/#54/#59):** the four raw `<select>`s are now `ui/Select` (have rings);
+sidebar NavLinks + collapse button have rings; reference-data Edit/Delete are `ui/Button` (rings). The
+**remaining bare controls without a focus ring**: `lang-switch.tsx` buttons, `theme-switch.tsx`
+buttons, `search-panel.tsx` visibility facet chips, `field-list.tsx` row button, and the
+`authorities-page.tsx` tab NavLinks. `ui/Button`'s ring = `focus-visible:border-ring
+focus-visible:ring-3 focus-visible:ring-ring/50`. `app-shell.tsx`: `<main className="flex-1
+overflow-hidden">` (no id/tabIndex), no skip link, no route-focus effect. Authority tabs are router
+`NavLink`s with `role="tablist"`/`role="tab"`/`aria-selected` but no roving tabindex/arrow/aria-controls.
+Lang switch: two `aria-pressed` buttons, no `role="group"`/`aria-label`. `index.html` hardcodes
+`lang="en"`; no `documentElement.lang` sync (i18n init in `i18n/index.ts`, changes via
+`use-locale.ts` `setLocale` + `config-provider` default-language effect).
+
+### Decisions (from brainstorming)
+1. Shared `focusRing` class on the 5 bare controls.
+2. Authority tabs → honest navigation (`NavLink` + `aria-current`, drop tab roles); lang switch →
+   `role="group"` + `aria-label`.
+3. Skip link + focus `<main>` on route change.
+4. Sync `document.documentElement.lang` on every language change.
+
+## Components
+
+### `web/src/lib/focus-ring.ts` (new)
+`export const focusRing = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";` — applied
+via `cn(...)`/template to bare controls (they already have `rounded-md` so the ring shape is correct).
+
+### A. Focus rings (5 controls)
+- `lang-switch.tsx`: each `<button>` gets `type="button"` + `focusRing` (+ `rounded-sm px-1` so the
+  ring has shape).
+- `theme-switch.tsx`: each `<button>` className gains `focusRing` (already `rounded-md`).
+- `search-panel.tsx`: each facet `<button>` className gains `focusRing` (already `rounded-md`).
+- `field-list.tsx`: the row `<button className="flex flex-1 …">` gains `focusRing` + `rounded-sm`.
+- `authorities-page.tsx`: the tab `NavLink`s gain `focusRing` (with the semantics change below).
+
+### B. Honest semantics
+- **Authority tabs** (`authorities-page.tsx`): replace the `<div role="tablist">` + `role="tab"` +
+  `aria-selected` with a `<nav aria-label={t("nav.authorities")}>` containing the `NavLink`s; rely on
+  `NavLink`'s native **`aria-current="page"`** for the active state (drop `role`/`aria-selected`). Keep
+  the segmented styling (active `bg-primary text-primary-foreground`, else `border`) + add `focusRing`.
+- **Lang switch** (`lang-switch.tsx`): wrap the buttons in `<div role="group" aria-label={t("common.language")}>`;
+  keep `aria-pressed`; inactive stays `text-muted-foreground` (token) — the ring + `font-bold` active +
+  group label make state/affordance clear.
+
+### C. Route focus + skip link (`app-shell.tsx`)
+- **Skip link** as the FIRST focusable element (before `<Sidebar/>`): a visually-hidden-until-focused
+  anchor —
+  `<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:ring-3 focus:ring-ring/50">{t("common.skipToContent")}</a>`.
+  (If `sr-only`/`not-sr-only` utilities aren't available in this Tailwind v4 setup, use an explicit
+  visually-hidden pattern; verify by running.)
+- `<main id="main-content" tabIndex={-1} className="flex-1 overflow-hidden …">`.
+- A focus effect: `const location = useLocation();` + `const mainRef = useRef<HTMLElement>(null);` +
+  `useEffect(() => { mainRef.current?.focus(); }, [location.pathname]);` — but **skip the initial
+  mount** (so a deep-link load doesn't yank focus): track a `didMount` ref, focus only on subsequent
+  `pathname` changes. `<main ref={mainRef} …>`. (`tabIndex={-1}` makes `<main>` programmatically
+  focusable without adding it to the tab order; `outline-none` to avoid an outline on the container.)
+
+### D. `<html lang>` sync (`i18n/index.ts`)
+After `i18n.init`, register once:
+```ts
+function syncHtmlLang(lng: string) {
+  if (typeof document !== "undefined") {
+    document.documentElement.lang = lng.startsWith("sv") ? "sv" : "en";
+  }
+}
+i18n.on("languageChanged", syncHtmlLang);
+syncHtmlLang(i18n.language);
+```
+This covers the switcher (`setLocale` → `changeLanguage`), the config default-language effect, and
+startup — a single source of truth.
+
+### i18n (en + sv parity)
+- `common.language` = "Language" / "Språk"
+- `common.skipToContent` = "Skip to content" / "Hoppa till innehåll"
+
+## Data flow / accessibility
+Tab order: skip link → sidebar → header → main content. Activating the skip link (or any route change)
+moves focus into `<main>` (which contains the route's `<h1>` from #57). `aria-current="page"` marks the
+active authority kind + nav route. `documentElement.lang` reflects the active language for SR
+pronunciation / browser translation.
+
+## Error handling / edges
+- `focusRing` uses only `focus-visible:` (keyboard focus), not `:focus`, so mouse clicks don't show the
+  ring.
+- Route-focus effect skips the initial mount; only fires on `pathname` change (covers nav + master-detail
+  open; query-param-only changes like the objects filter/pagination don't change `pathname`, so no
+  refocus there).
+- `<main tabIndex={-1}>` is not in the tab order (negative) — only programmatically focusable.
+- `documentElement.lang` guarded for non-DOM (tests/SSR).
+- The authority tab role change: `aria-current="page"` is the honest active indicator; tests that
+  queried `role="tab"`/`aria-selected` are updated to `role="link"` + `aria-current`.
+
+## Testing
+- **lang-switch:** the buttons are within a `role="group"` named by `common.language`; each is a
+  keyboard-focusable button with `aria-pressed`.
+- **authority tabs:** the kind links are `role="link"` (not `tab`); the active one has
+  `aria-current="page"`; navigating still works. Update the existing `authorities.test.tsx` assertions
+  (tab → link, aria-selected → aria-current) — don't weaken (still assert the active kind + href).
+- **skip link:** an anchor to `#main-content` is the first focusable element; `<main>` has
+  `id="main-content"` + `tabIndex={-1}`.
+- **route focus:** navigating to a new route focuses `<main>` (assert `document.activeElement` is the
+  main element after a nav, or that main received focus). Mirror the app-shell test harness.
+- **html lang sync:** switching the locale sets `document.documentElement.lang` to "sv"/"en" (drive via
+  the lang switch or `i18n.changeLanguage`; assert `document.documentElement.lang`).
+- The i18n **parity test** (#60) covers the 2 new keys automatically.
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; en/sv parity; no codename; no new
+  dependency. **`check:colors`:** `focusRing` uses token utilities (`ring-ring`), not raw palette — OK.
+
+## Acceptance criteria
+1. All five bare controls (lang-switch, theme-switch, search facet chips, field-list row, authority
+   kind links) show a keyboard `focus-visible` ring matching the kit.
+2. A skip-to-content link is the first focusable element; `<main id="main-content" tabIndex={-1}>`
+   receives focus on route change (not on initial mount).
+3. Authority kind links no longer claim `role="tab"`/`aria-selected`; they use `aria-current="page"` in
+   a labelled `<nav>`. The lang switch is a labelled `role="group"`.
+4. `document.documentElement.lang` updates to the active language on every language change.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity (2 new
+   keys); no codename; no new dependency.
+
+## Out of scope → follow-ups
+- A full ARIA tab-widget (roving tabindex/arrows/tabpanel) for authorities — they're navigation, not a
+  tab panel, so honest links are correct.
+- Automated axe/a11y scanning in CI; a broader sweep beyond the listed controls.
+- An `aria-live` route-announcement region (focusing `<main>`/the `<h1>` covers the core need).

docs/superpowers/specs/2026-06-08-design-kit-consistency-design.md

@@ -0,0 +1,122 @@
+# Design-Kit Consistency — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #66 (dead Card, duplicated segmented-control + selected-row recipes, `useLang`/`focusRing` drift, misc kit one-offs).
+
+## Context
+
+A frontend deep audit found subtler design-system inconsistencies the `check:colors` guard doesn't catch
+(the app is already hex-free + token-based + dark-mode-clean). These are duplicated class recipes and
+non-adoption of the `ui/*` kit. All fixes are behavior-preserving; `check:colors`/`check:size`/the existing
+component tests are the guards. State re-verified against the current code (post #62/#64).
+
+## Components
+
+### New shared helpers
+
+**`lib/use-lang.ts`** — `useLang(): "sv" | "en"`
+```ts
+import { useTranslation } from "react-i18next";
+
+/** The instance's active UI language, narrowed to the two supported locales. */
+export function useLang(): "sv" | "en" {
+  const { i18n } = useTranslation();
+  return i18n.language.startsWith("sv") ? "sv" : "en";
+}
+```
+Replaces the inline `const lang = i18n.language.startsWith("sv") ? "sv" : "en";` in **6** components:
+`objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`,
+`vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`. Each switches to
+`const lang = useLang();` and drops the now-unused `i18n` from its `useTranslation()` destructure where
+`i18n` is otherwise unused. (Left untouched: `shell/lang-switch.tsx` — derives from a different `locale`
+var; `i18n/index.ts` — the infra `languageChanged` handler.)
+
+**`lib/class-recipes.ts`** — two shared class helpers
+```ts
+import { cn } from "@/lib/utils";
+import { focusRing } from "./focus-ring";
+
+/** Segmented-control / filter-pill item. Unifies the active/inactive token recipe +
+ *  focus ring; callers pass their contextual padding/size via `className`. */
+export function segmentClass(active: boolean, className?: string): string {
+  return cn("rounded-md", focusRing, active ? "bg-primary text-primary-foreground" : "border", className);
+}
+
+/** Selected vs idle row background for master-detail / list rows. */
+export function rowStateClass(active: boolean): string {
+  return active ? "bg-primary/10" : "hover:bg-muted";
+}
+```
+- **`segmentClass`** is adopted at the 3 segmented sites, each keeping its contextual padding:
+  - `objects/objects-table.tsx:174` → `segmentClass(active, "px-2 py-1")`
+  - `search/search-panel.tsx:76` → `segmentClass(active, "px-2 py-0.5")`
+  - `authorities/authorities-page.tsx:41` (NavLink) → `segmentClass(isActive, "px-3 py-1 text-sm")`
+  This DRYs the bug-prone recipe (the active/inactive token pair + `focusRing` — the part that drifted and
+  caused the #62 missing-ring bug); contextual sizing is intentionally preserved per site.
+- **`rowStateClass`** is adopted at the 4 selected-row sites:
+  - `objects/objects-table.tsx:252` → `rowStateClass(selected)`
+  - `vocab/vocabulary-list.tsx:113` → `rowStateClass(isActive)`
+  - `search/search-result-row.tsx:15` → `rowStateClass(isActive)`
+  - `fields/field-list.tsx:86` → `rowStateClass(def.key === selectedKey)` — **fixes** this site, which
+    currently uses `… ? "bg-primary/10" : ""` (dropping the `hover:bg-muted` idle hover the others have).
+
+### One-off cleanups
+- **Delete `components/ui/card.tsx`** — zero importers (no app/test/story references; no `card.stories`).
+- **`shell/sidebar.tsx:46,88`** — replace the raw `focus-visible:ring-3 focus-visible:ring-ring/50`
+  string (inside the existing `cn(...)`) with the imported `focusRing` constant (adds `outline-none`,
+  matching every other call site).
+- **`auth/login-page.tsx:49`** — `<h1 className="text-2xl font-semibold">{app_name}</h1>` →
+  `<PageTitle>{app_name}</PageTitle>` (`PageTitle` is `text-2xl font-semibold tracking-tight`, restoring
+  the missing `tracking-tight`). Import `PageTitle` from `@/components/ui/page-title`.
+- **`fields/field-list.tsx:97`** — the hand-rolled type-tag `<span className="rounded-md bg-muted px-1.5
+  py-0.5 text-xs text-muted-foreground">` → `<Badge variant="secondary">` (from `@/components/ui/badge`).
+- **Icon sizing** — `h-4 w-4` → `size-4` in the 3 **app-source** sites: `shell/theme-switch.tsx:39`,
+  `shell/user-menu.tsx:27`, `shell/header-search.tsx:23`. (Leave `components/ui/select.tsx` — kit-internal.)
+- **Icon dismiss buttons** → kit `Button variant="ghost" size="icon-sm"`:
+  - `objects/objects-page.tsx:54` (plain `<button onClick={closeDetail} aria-label={…}>`) → `<Button
+    variant="ghost" size="icon-sm" onClick={closeDetail} aria-label={t("actions.closeDetail")}><X
+    className="size-4" aria-hidden="true" /></Button>` (import `Button`).
+  - `objects/object-detail-drawer.tsx:33` (Base UI `<DrawerClose>`) → keep `DrawerClose` for its
+    close-on-click semantics, render it AS the kit Button via the render prop:
+    `<DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}><X
+    className="size-4" aria-hidden="true" /></DrawerClose>` (mirrors the `AlertDialogTrigger render={<Button/>}`
+    pattern in `delete-confirm-dialog.tsx`; import `Button`).
+
+## Error handling / edges
+- `segmentClass`/`rowStateClass` are pure string builders — no runtime concerns. `cn()` (tailwind-merge)
+  resolves any padding/utility overlap predictably.
+- `<Badge variant="secondary">` shifts the type-tag from `bg-muted`/`text-muted-foreground` to the
+  `secondary` token pair — a deliberate, minor visual adoption of the kit; still token-based (check:colors
+  clean).
+- The drawer `DrawerClose render={<Button/>}` keeps Base UI's close behaviour (Base UI merges its props
+  onto the rendered Button); the `aria-label` stays on `DrawerClose`.
+- `useLang` returns the same `"sv" | "en"` the inline code produced — no behaviour change.
+
+## Testing
+- **`lib/class-recipes.test.ts`** (new): `segmentClass(true)` contains `bg-primary` + `text-primary-foreground`
+  and the focus-ring utility; `segmentClass(false)` contains `border` (not `bg-primary`); both contain a
+  passed `className`; `rowStateClass(true)` === `"bg-primary/10"`, `rowStateClass(false)` === `"hover:bg-muted"`.
+- **Behavior guard:** the existing component tests must stay green unchanged — `objects-table.test.tsx`,
+  `authorities.test.tsx`, `vocabularies.test.tsx`, `field-list` / `search` tests, `login-page.test.tsx`,
+  `breadcrumb`/sidebar, `object-detail`/drawer, `user-menu.test.tsx`. (The login `PageTitle` still renders an
+  `<h1>`; the icon buttons keep their `aria-label`s; the drawer close still closes.)
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new
+  i18n keys; no codename. `check:size` unchanged-or-smaller (Card deletion removes dead code).
+
+## Acceptance criteria
+1. `useLang()` exists and replaces the inline lang derivation in the 6 listed components; `lang-switch` and
+   `i18n/index.ts` are untouched.
+2. `segmentClass`/`rowStateClass` exist (unit-tested) and are adopted at the 3 segmented + 4 selected-row
+   sites; `field-list`'s selected row gains the `hover:bg-muted` idle hover.
+3. `components/ui/card.tsx` is deleted (no remaining references).
+4. The one-offs are applied: sidebar uses `focusRing`; login uses `PageTitle`; field-list type-tag uses
+   `Badge`; the 3 app-source icons use `size-4`; both icon dismiss buttons use `Button variant="ghost"
+   size="icon-sm"`.
+5. All existing tests pass unchanged; `typecheck`/`lint`/`build`/`check:colors` green; `check:size`
+   unchanged-or-smaller; no new dependency; no new i18n keys; no codename.
+
+## Out of scope → follow-ups
+- A full `<SegmentedControl>`/`<ToggleGroup>` component (the button-vs-NavLink interaction split makes a
+  class helper the better fit); the form `space-y-*` scale (too subjective — churn risk).
+- Standardizing icon sizing inside `components/ui/*` (kit-internal style, separate from app-source).

docs/superpowers/specs/2026-06-08-form-field-grouping-design.md

@@ -0,0 +1,136 @@
+# Object-Form Flexible-Field Grouping — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #45 (deferred half — the object **form**'s flexible-field grouping; the detail view shipped in `e2ae093`).
+
+## Context
+
+#45 fixed the object **detail** view: flexible fields are now grouped by `FieldDefinitionView.group`
+in definition order with a trailing "Other" bucket (`object-detail.tsx`). The issue's problem #2
+explicitly says "detail **and** form", but the **form** still renders flexible-field inputs flat — one
+`<fieldset>` with a single "Catalogue fields" legend and `definitions.map(...)` (definition order, no
+group subheadings). This milestone brings the form to parity by reusing the *same* grouping the detail
+view uses (extracted into a shared helper so they can't drift).
+
+**Facts:** `object-detail.tsx:71-94` builds `{ group, defs }[]` inline: iterate the definitions
+(filtered to those with a value), bucket by `def.group?.trim()` else `t("fields.other")`, sort so the
+"Other" group is last, plus orphan-key handling. `object-form.tsx` renders the flexible block as
+`<fieldset className="space-y-3 border-t pt-3"><legend className="label-caption">{form.flexibleHeading}</legend>{definitions.map((def) => <div key={def.key}><FieldInput .../>{error}</div>)}</fieldset>`.
+Field-definition fixtures carry `group` (e.g. `"Description"` / `null`). `field-list.tsx` also groups,
+but A–Z (a management list, from #50) — out of scope to unify with it.
+
+### Decisions (from brainstorming)
+1. Extract the definition-grouping into a shared `lib/group-fields.ts` and use it in **both** detail
+   and form (one source of truth).
+2. The form keeps its `<fieldset>` for a11y but with an `sr-only` legend; visible per-group
+   `label-caption` subheadings (matching the detail view) — no redundant double-heading.
+3. Definition order within groups (no re-sort); ungrouped → trailing "Other".
+
+## Components
+
+### `web/src/lib/group-fields.ts` (new)
+```ts
+import type { components } from "../api/schema";
+
+type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
+
+export type FieldGroup = { group: string; defs: FieldDefinitionView[] };
+
+/** Group field definitions by `def.group` (trimmed), preserving definition order
+ *  within and across groups; ungrouped defs fall into a trailing `otherLabel` bucket. */
+export function groupDefinitions(
+  definitions: FieldDefinitionView[],
+  otherLabel: string,
+): FieldGroup[] {
+  const groups: FieldGroup[] = [];
+  for (const def of definitions) {
+    const group = def.group?.trim() ? def.group : otherLabel;
+    let bucket = groups.find((g) => g.group === group);
+    if (!bucket) {
+      bucket = { group, defs: [] };
+      groups.push(bucket);
+    }
+    bucket.defs.push(def);
+  }
+  // Keep definition order among real groups; the "Other" bucket sorts last.
+  groups.sort((a, b) => Number(a.group === otherLabel) - Number(b.group === otherLabel));
+  return groups;
+}
+```
+A unit test asserts: definition order preserved; two defs in the same group bucket together; ungrouped
+defs land in the `otherLabel` bucket which is **last** even when defined before a grouped def.
+
+### `object-detail.tsx` (refactor to the shared helper)
+Replace the inline `for (const def of present) { … }` group-building + final `groups.sort(...)` with
+`const groups = groupDefinitions(present, other);`. Keep the existing orphan handling appended after
+(`if (orphans.length > 0 && !groups.some(g => g.group === other)) groups.push({ group: other, defs: [] });`
+— appending the Other bucket still leaves it last). Render is unchanged. Net: identical output, now via
+the shared helper. (Verify the existing object-detail tests stay green.)
+
+### `object-form.tsx` (group the flexible inputs)
+Replace the flat flexible block with grouped rendering, reusing the FieldInput + per-field error markup
+inside each group:
+```tsx
+{definitions && definitions.length > 0 && (
+  <fieldset className="space-y-3 border-t pt-3">
+    <legend className="sr-only">{t("form.flexibleHeading")}</legend>
+    {groupDefinitions(definitions, t("fields.other")).map((g) => (
+      <div key={g.group} className="space-y-3">
+        <div className="label-caption">{g.group}</div>
+        {g.defs.map((def) => (
+          <div key={def.key}>
+            <FieldInput definition={def} form={form} />
+            {errors.fields?.[def.key] && (
+              <p role="alert" className="text-xs text-destructive">
+                {errors.fields[def.key]?.message ?? t("form.required")}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    ))}
+  </fieldset>
+)}
+```
+- The `<legend>` becomes `sr-only` (a11y-correct fieldset name) while the visible structure is the
+  per-group `label-caption` subheadings — mirroring detail, no double-heading.
+- Field inputs and their error rendering are unchanged (just moved under group wrappers); the submit
+  payload / validation / pruning are untouched (the same `definitions` drive the same inputs).
+- `import { groupDefinitions } from "../lib/group-fields";` (and `fields.other` is an existing key).
+
+## Data flow
+`useFieldDefinitions()` → `groupDefinitions(defs, t("fields.other"))` → grouped subheadings + the same
+`FieldInput`s. No change to form state, RHF registration, pruning, or submission.
+
+## Error handling / edges
+- Definition order preserved; "Other" last (even if an ungrouped def precedes a grouped one).
+- All-ungrouped case → a single "Other" group with a visible "Other" subheading (consistent with the
+  detail view's behavior).
+- The shared helper takes the caller's def list: detail passes `present` (defs with values); the form
+  passes all `definitions`. Orphan handling stays in detail only.
+- `sr-only` legend keeps the fieldset accessible without a visible redundant heading.
+
+## Testing
+- **`group-fields.test.ts`** (unit): order preserved; same-group bucketing; ungrouped → trailing Other.
+- **object-form test:** with the field-definition fixtures (which include `group` values + ungrouped),
+  rendering the form shows the grouped subheadings (e.g. "Description" then "Other") and the fields
+  under them in definition order. (Extend `object-form.test.tsx`; reuse the existing MSW field-def
+  handler / fixtures — add a `group` to one fixture def if needed to exercise a real named group.)
+- **object-detail tests** stay green (the refactor is output-preserving).
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; no new i18n keys (reuse
+  `fields.other`, `form.flexibleHeading`); en/sv parity unaffected; no codename; no new dependency.
+
+## Acceptance criteria
+1. `groupDefinitions` exists (shared, unit-tested) and is used by **both** object-detail and object-form.
+2. The object form renders flexible-field inputs grouped by `def.group` (definition order, "Other" last)
+   with `label-caption` subheadings; the fieldset keeps an `sr-only` legend.
+3. The detail view's grouping is unchanged in output (now via the shared helper).
+4. Form behavior is otherwise unchanged (inputs, validation, errors, submission, pruning).
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity; no
+   codename; no new dependency.
+
+## Out of scope → follow-ups
+- Export/PDF (#39); backend label resolution.
+- Reordering fields within a group beyond definition order; a field-definition "position"/sort concept.
+- Unifying `field-list.tsx`'s (A–Z) grouping with this (different purpose — a management list).

docs/superpowers/specs/2026-06-08-loading-skeletons-design.md

@@ -0,0 +1,115 @@
+# Standardize Loading States on Skeleton — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #53.
+
+## Context
+
+Loading is rendered three incompatible ways: good `Skeleton` (objects-table, object-detail,
+search-panel, field-list); bare "…" text in a `<li>` (vocabulary-list, vocabulary-terms,
+authorities-page) — looks half-rendered; and empty `role="status"` divs (require-auth → blank app on
+first load; object-edit-form → blank form pane). Plus the lazy-route `FormFallback` renders full-pane
+"Loading…" text → flash + layout shift on first nav to `/objects/new`, `/objects/:id/edit`, `/fields`.
+
+`Skeleton` (`ui/skeleton.tsx`) is a simple `animate-pulse rounded-md bg-muted` div. No shared
+skeleton recipes or Spinner exist. No tests assert loading markup (they `findBy` content), so retiring
+the placeholders won't break tests. The three "…" sites render a `<li>` inside a `<ul>` (so a
+`<div>`-based recipe must replace the `<ul>` when loading, not nest inside it). `AppShell` layout:
+`<div flex min-h-screen><aside w-44 border-r>…nav…</aside><div flex-1 flex-col><header border-b px-4
+py-2/><main flex-1><Outlet/></main></div></div>`.
+
+### Decisions (from brainstorming)
+1. **Shared recipes** `ListSkeleton` + `FormSkeleton` (+ `AppShellSkeleton` for boot), built on
+   `Skeleton`, each an `aria` live region.
+2. **require-auth → an app-shell-shaped skeleton** (no blank flash, no shift when the real shell mounts).
+3. Skeleton-only (no Spinner primitive).
+
+## Components
+
+### `web/src/components/ui/skeletons.tsx` (new — `ui/*` no-semicolon style)
+All recipes wrap content in a status region: `<div role="status" aria-label={t("common.loading")}
+aria-busy="true" className={…}>`. New i18n `common.loading` (en "Loading", sv "Laddar").
+- **`ListSkeleton({ rows = 6, rowClassName = "h-9 w-full", className })`** — `space-y-2 p-3` (+ `className`)
+  with `rows` × `<Skeleton className={rowClassName} />`.
+- **`FormSkeleton({ fields = 5, className })`** — `space-y-4 p-4` (+ `className`); `fields` × a
+  `space-y-1` group (`<Skeleton className="h-3 w-24" />` label + `<Skeleton className="h-8 w-full" />`
+  input) + a trailing `<Skeleton className="h-8 w-28" />` (button). Mirrors the object form to avoid shift.
+- **`AppShellSkeleton`** — mirrors `AppShell`: `<div className="flex min-h-screen">` → an `aside
+  w-44 border-r p-3 space-y-2` with ~5 `<Skeleton className="h-8 w-full" />` nav rows, and a
+  `flex-1 flex-col` with a `header border-b px-4 py-2` containing a `<Skeleton className="h-6 w-40" />`
+  and a `<main className="flex-1">` containing `<ListSkeleton />`. Single top-level `role="status"`
+  on the outer div (one live region for the whole boot screen).
+
+A `skeletons.stories.tsx` renders the three (visual check + a smoke `play` asserting a `status` region).
+
+### Apply across sites
+
+**Retire "…" (render `ListSkeleton` in place of the `<ul>` when loading — valid HTML):**
+- `vocabulary-list.tsx`: replace the loading `<li>…</li>`. The list is `<ul className="flex-1
+  overflow-auto">`; render `{isLoading ? <ListSkeleton className="flex-1" /> : null}` and keep the
+  `isError`/empty/data branches in the `<ul>` (rendered when not loading). (Keep the column layout —
+  the skeleton takes the `<ul>`'s place during load.)
+- `vocabulary-terms.tsx`: replace the loading `<li>` — render `<ListSkeleton />` when `isLoading`
+  instead of the loading `<li>` (keep the `<ul>` for the loaded/empty/error branches).
+- `authorities-page.tsx`: same — `<ListSkeleton />` when `isLoading`.
+(Concretely: `{isLoading ? <ListSkeleton/> : <ul>…error/empty/rows…</ul>}`, or render the skeleton as a
+sibling and gate the `<ul>` on `!isLoading`. Implementer picks the cleaner of the two; do not nest a
+`<div>` inside `<ul>`.)
+
+**Retire empty `role="status"` divs:**
+- `object-edit-form.tsx` (outer `ObjectEditForm`, `isLoading` branch): `return <FormSkeleton />` (wrap to
+  match the edit form's container if needed — it renders inside the objects edit pane).
+- `require-auth.tsx` (`isLoading`): `return <AppShellSkeleton />`.
+
+**`app.tsx` lazy fallbacks** — remove `FormFallback`; give each `Suspense` a tailored fallback:
+- `ObjectNewPage`, `ObjectEditForm` → `fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}`
+  (mirrors the new/edit page container `mx-auto max-w-2xl`).
+- `FieldsPage` → `fallback={<ListSkeleton />}` (a simple page skeleton; FieldsPage is a 2-col page, but a
+  list skeleton in the pane is a fine, shift-light placeholder for the brief lazy load).
+
+**Retrofit the good list-like skeletons to `ListSkeleton`** (consistency):
+- `field-list.tsx`: `isLoading` → `<ListSkeleton rows={6} />` (was `space-y-2 p-3` + 6 × `h-9`). Identical output.
+- `search-panel.tsx`: the `hasQuery && search.isLoading` block → `<ListSkeleton rows={5} rowClassName="h-12 w-full" />`.
+- **Keep inline:** `objects-table.tsx` (a `<tbody>` of `<tr>`/`<td>` skeleton rows — table-specific) and
+  `object-detail.tsx` (single `h-40` block) — both already fitting; not worth forcing into a recipe.
+
+## Data flow / accessibility
+Each recipe is a `role="status" aria-busy` live region labelled `common.loading` → screen readers
+announce "Loading" (the empty `role="status"` divs announced nothing). Visual skeletons mirror the
+loaded layout so there's no jump when content arrives.
+
+## Error handling / edges
+- Don't nest `<div>` inside `<ul>` — render the list skeleton in place of the `<ul>`.
+- `AppShellSkeleton` is pre-shell (require-auth) — it must not import anything that assumes the shell/
+  router context beyond `t()` (it only needs `useTranslation`).
+- Multiple `role="status"` regions on one screen are acceptable; `AppShellSkeleton` uses ONE outer
+  region (not one per nested skeleton) to avoid SR noise.
+- `FormSkeleton` in the lazy fallback vs the object-edit-form loading branch: both render the same
+  recipe, so the Suspense fallback → loaded-but-fetching → loaded transition stays visually stable.
+
+## Testing
+- `skeletons.stories.tsx`: render `ListSkeleton`/`FormSkeleton`/`AppShellSkeleton`; a `play` asserts a
+  `role="status"` is present (smoke).
+- Existing suite stays green: no test asserts the old "…"/empty-div markup; tests `findBy` content,
+  which still resolves after loading. (If any test was implicitly relying on the empty `role="status"`
+  via `getByRole("status")` — none found — update it.) 
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; en/sv parity (one new key
+  `common.loading`); no codename; no new dependency.
+
+## Acceptance criteria
+1. `ListSkeleton`, `FormSkeleton`, `AppShellSkeleton` exist (built on `Skeleton`, each a
+   `role="status" aria-label={t("common.loading")}` live region) with a story.
+2. The three "…" placeholders are replaced by `ListSkeleton`; the two empty `role="status"` divs are
+   replaced (object-edit-form → `FormSkeleton`, require-auth → `AppShellSkeleton`); the lazy
+   `FormFallback` is replaced by per-route skeleton fallbacks (no full-pane "Loading…").
+3. `field-list` + `search-panel` use the shared `ListSkeleton`; objects-table/object-detail keep their
+   fitting inline skeletons.
+4. Loading visuals mirror the loaded layout (no obvious shift); screen readers announce loading.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity; no
+   codename; no new dependency.
+
+## Out of scope → follow-ups
+- A `Spinner` primitive (Skeleton-only here).
+- Reworking objects-table / object-detail inline skeletons.
+- Additional route-level Suspense boundaries or data-router `HydrateFallback`s.

docs/superpowers/specs/2026-06-08-mutation-error-feedback-design.md

@@ -0,0 +1,213 @@
+# Consistent, Status-Aware Mutation Error Feedback — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #63 (silent update failures + dead/unreachable mutation error strings).
+
+## Context
+
+A frontend deep audit flagged the TanStack Query mutation layer for inconsistent error feedback.
+Grounding in the code refined the picture:
+
+- **The update mutations are not silent — they're inconsistent.** `useUpdateTerm` (`queries.ts:444`) and
+  `useUpdateAuthority` (`:521`) are the **only 2 of 18 mutations** without `meta.suppressErrorToast`, so on
+  failure they fire the global `MutationCache` error toast while the row stays in edit mode. The matching
+  **create** and **delete** actions on the same screens suppress the toast and show an **inline** message
+  instead. So within one screen, create-failure → inline, delete-failure → inline, edit-failure → a
+  disconnected global toast.
+- **Once the 2 update mutations also suppress (the consistency fix), all 18 mutations suppress** → the
+  global error toast becomes vestigial. Therefore status differentiation only delivers value at the
+  **inline** error sites, which today all render a generic `t("form.rejected")` ("Could not be saved").
+- **The generic error strings are dead.** 16 mutations `throw new Error("update failed" | …)`, but
+  `mutationErrorMessage` (`query-client.ts:11-23`) never reads `.message` — it falls back to
+  `t("toast.error")`. The bespoke strings are unreachable.
+- **`object-edit-form` mislabels a fetch failure.** `objects/object-edit-form.tsx:17` destructures only
+  `{ data, isLoading }` from `useObject`; a non-404 fetch error (network/500) falls through to the
+  "object not found" branch. (The **submit** path already handles `FieldRejection` and a generic else
+  correctly.)
+
+### Decisions (from brainstorming)
+1. Differentiate errors **by HTTP status**, surfaced via one shared mapping.
+2. Because all mutations suppress the toast, apply status-aware messages at **all inline error sites**
+   (via one shared `<MutationError>` component), not the (now-vestigial) toast. Half-applying would
+   create a new inline inconsistency.
+3. Make `useUpdateTerm`/`useUpdateAuthority` consistent with their create/delete siblings (suppress +
+   inline).
+4. Fix the `object-edit-form` fetch mislabel.
+
+## Components
+
+### `web/src/api/error-message.ts` (new) — single source of truth
+```ts
+import { HttpError, InUseError } from "./queries";
+
+/** Maps a caught mutation error to an i18n key (+ interpolation opts). Used by
+ *  both the global toast fallback and every inline error display. */
+export function errorMessageKey(error: unknown): { key: string; opts?: Record<string, unknown> } {
+  if (error instanceof InUseError) return { key: "actions.inUse", opts: { count: error.count } };
+  if (error instanceof HttpError) return { key: statusKey(error.status) };
+  return { key: "toast.error" };
+}
+
+function statusKey(status: number): string {
+  if (status === 403) return "errors.forbidden";
+  if (status === 404) return "errors.notFound";
+  if (status === 409) return "errors.conflict";
+  if (status === 422) return "errors.validation";
+  if (status >= 500) return "errors.server";
+  return "toast.error";
+}
+```
+Returns a key+opts (not a resolved string) so callers render with their own `t` (reactive to language).
+`InUseError` is checked first so 409-with-count keeps its richer message. (No circular import:
+`queries.ts` does not import this module; `query-client.ts` imports both.)
+
+### `web/src/components/mutation-error.tsx` (new) — shared inline display
+```tsx
+import { useTranslation } from "react-i18next";
+
+import { errorMessageKey } from "../api/error-message";
+
+/** Renders a caught mutation error as an inline alert, or nothing when error is falsy.
+ *  Replaces the duplicated `<p role="alert" className="text-xs text-destructive">` markup. */
+export function MutationError({ error }: { error: unknown }) {
+  const { t } = useTranslation();
+  if (!error) return null;
+  const { key, opts } = errorMessageKey(error);
+  return (
+    <p role="alert" className="text-xs text-destructive">
+      {t(key, opts)}
+    </p>
+  );
+}
+```
+
+### `web/src/api/query-client.ts` (rewire)
+`mutationErrorMessage` becomes:
+```ts
+function mutationErrorMessage(error: unknown, meta: MutationMeta | undefined): string {
+  if (meta?.errorMessage) return i18n.t(meta.errorMessage);
+  const { key, opts } = errorMessageKey(error);
+  return i18n.t(key, opts);
+}
+```
+This keeps the toast path as a one-source-of-truth fallback (for any future non-suppressed mutation) and
+drops the old special-cases (`InUseError` and `503 → search.unavailable` now flow through
+`errorMessageKey`; no mutation throws 503, and the search **query**'s own inline 503 handling in
+`search-panel.tsx` is untouched). Import moves from `{ HttpError, InUseError }` to `{ errorMessageKey }`.
+
+### `web/src/api/queries.ts` (load-bearing errors)
+Replace the 16 **mutation** `throw new Error("…")` with `throw new HttpError(response.status)`, preserving
+the existing `InUseError` (409) and `FieldRejection` (422 on `setFields`) branches. Two POSTs
+(`useCreateObject` `:184`, `useCreateVocabulary` `:279`) destructure only `{ data, error }` — add
+`response` so the status is available. **Query** fetch errors (`:38,73,90,105,152,169,264`) and the login
+`"invalid"/"network"` mapping (`:121`) are NOT changed (they're consumed by component `isError`/login
+mapping, not the mutation toast). `useUpdateObject`'s 422 maps to the generic `errors.validation`;
+surfacing a *structured* core-field rejection there is uncertain backend behavior → out of scope.
+
+### Inline-site adoption — replace generic `form.rejected` with `<MutationError>`
+- `web/src/components/delete-confirm-dialog.tsx:33-42` — the `confirm` catch currently sets
+  `err instanceof InUseError ? t("actions.inUse", {count}) : t("form.rejected")`. Replace with
+  `const { key, opts } = errorMessageKey(err); setMessage(t(key, opts));` — `errorMessageKey` already
+  handles `InUseError`, so the dialog simplifies and a 403/404 delete now reads a specific message. (The
+  dialog keeps its own `message` state because it must stay open on failure; it does not render
+  `<MutationError>` directly.)
+- `web/src/authorities/authorities-page.tsx:144-148` — replace the `{create.isError && <p…>form.rejected}`
+  with `<MutationError error={create.error} />`.
+- `web/src/vocab/vocabulary-terms.tsx:119-123` — `<MutationError error={addTerm.error} />`.
+- `web/src/vocab/vocabulary-list.tsx:57-61` (create) and `:109-113` (rename) — `<MutationError error={create.error} />`
+  and `<MutationError error={renameVocabulary.error} />`.
+- `web/src/fields/field-form.tsx:202-204` — replace the `{failed && <p…>form.rejected}` with
+  `<MutationError error={isEdit ? update.error : create.error} />`.
+- **Object create/edit:** `object-new-page.tsx` and `object-edit-form.tsx` keep the `FieldRejection`
+  field-specific branch; in the non-`FieldRejection` else, replace `setError(t("form.rejected"))` with
+  `const { key, opts } = errorMessageKey(e); setError(t(key, opts));` (these set a string passed to
+  `ObjectForm`'s `formError` prop, so they use `errorMessageKey` directly, not `<MutationError>`).
+
+### Edit-row consistency — `term-row.tsx`, `authority-row.tsx`, `queries.ts`
+- Add `suppressErrorToast: true` to `useUpdateTerm` (`:444`) and `useUpdateAuthority` (`:521`) meta.
+- In each row's edit view, render `<MutationError error={updateTerm.error} />` (resp. `updateAuthority.error`)
+  below the save/cancel buttons.
+- Call `updateTerm.reset()` (resp. `updateAuthority.reset()`) inside the Edit button's `onClick` (alongside
+  the existing `setLabels`/`setUri`/`setEditing`) so a stale error from a prior failed save doesn't linger
+  when re-entering edit mode. On a failed save the row already stays editable (the `onSuccess`
+  `setEditing(false)` doesn't fire), preserving the user's input.
+
+### `web/src/objects/object-edit-form.tsx` (fetch fix)
+```tsx
+const { data: object, isLoading, isError } = useObject(id!);
+if (isLoading) return <FormSkeleton />;
+if (isError) return <p className="p-4 text-sm text-destructive">{t("objects.loadError")}</p>;
+if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;
+```
+`objects.loadError` ("Could not load objects") already exists in both locales.
+
+### i18n (en + sv parity — 5 new keys under `errors`)
+| key | en | sv |
+|-----|----|----|
+| `errors.forbidden` | You don't have permission to do that. | Du har inte behörighet att göra det. |
+| `errors.notFound` | That item no longer exists. | Objektet finns inte längre. |
+| `errors.conflict` | That conflicts with existing data. | Det står i konflikt med befintliga data. |
+| `errors.validation` | Some values weren't accepted. | Vissa värden godtogs inte. |
+| `errors.server` | The server had a problem. Please try again. | Servern hade ett problem. Försök igen. |
+
+## Data flow
+mutation rejects → `HttpError(status)` (or `InUseError`/`FieldRejection`) → caught by the component (or
+the `MutationCache` fallback) → `errorMessageKey(error)` → `{key, opts}` → `t(key, opts)` rendered inline
+via `<MutationError>` (or as a `formError` string / dialog message). One mapping, one component, every
+surface.
+
+## Error handling / edges
+- **All mutations suppress** after this change → the `MutationCache.onError` toast path is a dormant
+  fallback; kept (not deleted) so a future non-suppressed mutation still gets a sensible message.
+- **401** isn't in the status map → falls to `toast.error`; the `client.ts` middleware still redirects to
+  login (unchanged). A brief generic toast before redirect is pre-existing, not worsened.
+- **Network error with no response:** openapi-fetch may reject before a `response` exists; those paths
+  keep throwing a generic `Error` → `errorMessageKey` returns `toast.error`. (Only status-bearing
+  failures get differentiated.)
+- **Language reactivity:** `<MutationError>` and the object-form `formError` re-render with the active
+  locale because they call `t` at render (the `formError` string is recomputed on the next failed submit;
+  acceptable — error strings are transient).
+- **Stale row error:** cleared via `mutation.reset()` on re-edit.
+
+## Testing
+- **`web/src/api/error-message.test.ts`** (unit): each status → expected key (403/404/409/422/500/502);
+  `InUseError(3)` → `{ key: "actions.inUse", opts: { count: 3 } }`; a bare `Error`/unknown →
+  `{ key: "toast.error" }`.
+- **`web/src/components/mutation-error.test.tsx`**: renders the mapped text for an `HttpError(403)`;
+  renders nothing for `null`/`undefined`; renders the in-use count for `InUseError`.
+- **`web/src/api/mutation-feedback.test.tsx`** (rework): the "non-suppressed → catch-all toast" test is
+  obsolete (all mutations now suppress). Replace it with a test that a suppressed mutation failing adds
+  **no** toast (keep the existing delete case), plus assert the success-toast case still works. The
+  status→message behavior is covered by `error-message.test.ts`.
+- **`term-row` / `authority-row`** (extend existing or via `mutation-feedback`): a failed update renders
+  the inline `MutationError` text and the row stays editable; a successful update closes the editor;
+  re-entering edit after a failure shows no stale error.
+- **`object-edit-form`**: a `useObject` fetch error (mock `/api/admin/objects/{id}` → 500) renders
+  `objects.loadError`, not `objects.notFound`.
+- **Inline adoption**: at least one create-form test (e.g. authorities) asserts a failed create shows the
+  status-aware message via `MutationError` (e.g. 403 → `errors.forbidden`).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; en/sv parity (the #60
+  parity test guards the 5 new keys); no codename; no new dependency.
+
+## Acceptance criteria
+1. A shared `errorMessageKey(error)` maps `InUseError` and `HttpError` (by status: 403/404/409/422/≥500)
+   to i18n keys, with a `toast.error` fallback; unit-tested.
+2. A shared `<MutationError error>` component renders the mapped inline alert (or nothing) and replaces
+   the duplicated `form.rejected` markup at every inline mutation-error site (delete dialog via the helper
+   directly, create/rename forms, edit rows, object-form `formError` via the helper).
+3. The 16 mutation throws use `HttpError(status)` (queries unchanged); `query-client.ts` routes the toast
+   fallback through `errorMessageKey`.
+4. `useUpdateTerm`/`useUpdateAuthority` suppress the toast and show an inline error at the row, staying
+   editable on failure and clearing stale errors on re-edit.
+5. `object-edit-form` distinguishes a fetch error (`objects.loadError`) from "not found."
+6. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity (5 new
+   keys); no codename; no new dependency.
+
+## Out of scope → follow-ups
+- Structured field-level rejection on **core-object** update 422 (uncertain backend shape).
+- The broader `queries.ts` split + relocating the error classes to `api/errors.ts` (tracked in **#65** —
+  `error-message.ts` imports the classes from `queries.ts` for now).
+- Toast-based error surfacing (deliberately superseded by inline; the toast path remains only as a
+  fallback).
+- Retry affordances / optimistic updates.

docs/superpowers/specs/2026-06-08-refdata-scannability-design.md

@@ -0,0 +1,100 @@
+# Reference-Data Scannability + Parity — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #50 (scoped: scannability + parity; layout/edit-modality unification + API-backed counts are follow-ups).
+
+## Context
+
+The three reference-data screens (vocabularies, authorities, fields) render lists in API
+**creation order** with **no client sort and no filter** — finding "Bronze" in a 200-term vocabulary
+is effectively impossible. Read-mode rows show **only the label**; `external_uri` (the point of
+authority control — distinguishing two "Mercury"s) is visible only in edit mode (`term-row.tsx`,
+`authority-row.tsx`). There are **no counts** anywhere. And there are small parity/validation gaps:
+authority **create** has no `external_uri` field (hardcoded `null`) though edit does; vocab **rename**
+lacks the empty-guard the create form has; URI inputs have no `type="url"`/placeholder.
+
+This milestone fixes the daily-pain "can't find / can't disambiguate" problems + the parity gaps,
+**without** changing layout/edit modality (a separate redesign) and **without** backend changes.
+
+**Facts:** `labelText(labels, lang)` exists (`lib/labels.ts`). No `Intl.Collator` anywhere. List
+shapes: term/authority = `{ id, labels, external_uri?: string|null }` (authority also `kind`);
+vocabulary = `{ id, key }` (no labels); field-definition = `{ key, labels, data_type, group?, required, … }`.
+No count field on any view (so per-vocab term counts + per-kind authority counts need backend →
+deferred; **field-group counts are client-side** and in scope). `Badge`/`Input` exist. Mutations:
+`useCreateAuthority` accepts `external_uri` but the page passes `null`; `useRenameVocabulary` has no
+empty-guard; `useAddTerm`/`useUpdateTerm`/`useUpdateAuthority` already accept `external_uri`.
+
+### Decisions (from brainstorming)
+1. Sort every list by label/key with a locale-aware `Intl.Collator`; add a client-side filter `Input`.
+2. Show `external_uri` (linkified, muted) in term/authority read rows; field-group count `Badge`s.
+3. Close the parity/validation gaps (authority-create URI, rename empty-guard, `type="url"` + placeholder).
+
+## Components
+
+### `web/src/lib/sort.ts` (new)
+- A memoized collator per lang: `Intl.Collator(lang, { sensitivity: "base", numeric: true })` (cache in a `Map<string, Intl.Collator>`).
+- `export function byLabel(lang: string)` → `(a: { labels: LabelView[] }, b) => number` comparing `labelText(a.labels, lang)` vs `labelText(b.labels, lang)` via the collator.
+- `export function byKey(lang: string)` → `(a: { key: string }, b) => number` comparing `a.key` vs `b.key`.
+- (Comparators take the minimal structural type so they work for terms/authorities/fields/vocabs.)
+
+### `web/src/components/external-uri-link.tsx` (new)
+A tiny shared read-mode link: `function ExternalUriLink({ uri }: { uri: string })` →
+`<a href={uri} target="_blank" rel="noopener noreferrer" className="block truncate text-xs text-muted-foreground hover:text-foreground">{uri}</a>`. Used in term-row + authority-row read mode (render only when `external_uri` is truthy).
+
+### i18n (en + sv parity)
+- `common.filter` = "Filter…" / "Filtrera…"
+- `common.noMatches` = "No matches" / "Inga träffar"
+- `labels.uriPlaceholder` = "https://…" (same in both)
+
+### Per-screen changes
+
+**Vocabularies**
+- `vocabulary-list.tsx`: a filter `<Input>` (placeholder `common.filter`) above the list; filter vocabularies by `key` (case-insensitive `includes`) then **sort by `byKey(lang)`**; if filtered-empty but data exists, show muted `common.noMatches`. Add the **rename empty-guard**: `if (!draftKey.trim()) return;` before the rename mutate.
+- `vocabulary-terms.tsx`: a filter `<Input>` above the terms list; filter terms by `labelText` then **sort by `byLabel(lang)`**; filtered-empty → `common.noMatches`. The add-term `external_uri` `<Input>` gets `type="url"` + `placeholder={t("labels.uriPlaceholder")}`.
+- `term-row.tsx`: read mode renders `<ExternalUriLink uri={term.external_uri} />` under the label when present; the edit-mode `external_uri` `<Input>` gets `type="url"` + the placeholder.
+
+**Authorities**
+- `authorities-page.tsx`: a filter `<Input>` above the list; filter by `labelText` then **sort by `byLabel(lang)`**; filtered-empty → `common.noMatches`. The **create form gains an `external_uri` `<Input>`** (`type="url"`, placeholder) mirroring the edit row, stored in a `useState`, sent via `useCreateAuthority` (replace the hardcoded `external_uri: null`).
+- `authority-row.tsx`: read mode renders `<ExternalUriLink uri={authority.external_uri} />` under the label when present; edit `external_uri` `<Input>` gets `type="url"` + placeholder.
+
+**Fields**
+- `field-list.tsx`: a filter `<Input>` above the list; filter by `labelText`/`key`; **sort groups alphabetically with "Other"/ungrouped last, and sort fields within each group by `byLabel(lang)`**; each group header shows a `<Badge variant="secondary">{count}</Badge>` (count of fields in that group, after filtering); filtered-empty → `common.noMatches`.
+
+## Data flow
+Loaded list → client filter (by label/key substring) → collator sort → render. `external_uri` read
+from the existing view field. Field-group counts from the grouped array length. No new queries.
+
+## Error handling / edges
+- Filter is case-insensitive substring on the localized label (or key). Empty filter = show all.
+- Collator memoized per lang; lang from `i18n.language` (sv/en) as elsewhere.
+- `ExternalUriLink` only renders for truthy `external_uri`; `rel="noopener noreferrer"` + `target="_blank"`.
+- `type="url"` gives the browser's basic URL hint (not strict validation — full validation is a follow-up); it must not block submitting an empty optional URI (the field stays optional → send `null`/omit when blank, exactly as today).
+- Sorting must not mutate the query cache array — sort a copy (`[...list].sort(...)`).
+- Field group ordering: a stable rule (named groups A–Z by collator, then the ungrouped "Other" bucket last).
+
+## Testing
+- **`sort.test.ts`** (unit): `byLabel`/`byKey` order case-insensitively + locale-aware (e.g. "ä" sorts sensibly in sv; "bronze" before "Iron").
+- **Vocabularies** (`vocabularies.test.tsx`): vocabularies render sorted by key; typing in the filter narrows the list; rename with an empty key does not fire the mutation.
+- **Authorities** (`authorities.test.tsx`): list sorted by label; filter narrows; the create form has an `external_uri` field and a created authority posts the entered URI; a read row shows the `external_uri` link.
+- **Vocabulary terms / term-row:** terms sorted by label; a term read row shows its `external_uri` link.
+- **Fields** (`fields.test.tsx`): fields sorted within group; a group header shows a count badge; filter narrows. Keep the existing create/reveal-picker assertions green.
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; en/sv parity (3 new keys); no codename; no new dependency.
+
+## Acceptance criteria
+1. Every reference list is sorted by label (terms/authorities/fields) or key (vocabularies) via a
+   locale-aware `Intl.Collator`, and has a client-side filter `Input` (with a `common.noMatches`
+   empty state).
+2. `external_uri` is shown (linkified, muted, truncated) in term + authority read rows when present.
+3. Field-group headers show a count `Badge`.
+4. Parity/validation gaps closed: authority **create** has an `external_uri` field and sends it; vocab
+   **rename** has an empty-guard; all `external_uri` inputs use `type="url"` + a placeholder.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity; no
+   codename; no new dependency; no layout/edit-modality change; no backend change.
+
+## Out of scope → follow-ups
+- The layout + edit-modality **unification** (authorities → two-pane pane-edit; vocab-rename/term/
+  authority → pane-edit; one create location) — a separate redesign.
+- **API-backed counts**: per-vocabulary term counts and per-kind authority-tab counts (need view/count
+  fields or endpoints).
+- Strict URL validation (beyond `type="url"`); linkifying `external_uri` elsewhere (e.g. object detail).

docs/superpowers/specs/2026-06-08-search-row-date-design.md

@@ -0,0 +1,128 @@
+# Search-Result Date Meta + Estimated-Count Copy — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #61 (scoped: add a date to result rows + soften the estimated count; object type/facet is
+declined — no such field exists in the domain).
+
+## Context
+
+Search result rows show name + object_number + visibility badge + snippet, but no date — power users
+disambiguate hits by period. The count copy reads "{{count}} results" though it's Meilisearch's
+`estimated_total`. **There is no object type/category/classification field anywhere in the domain**
+(`CatalogueObject` = object_number/object_name/number_of_objects/brief_description/current_location/
+current_owner/recorder/**recording_date**/visibility + flexible `fields` + timestamps), so a "type"
+meta/facet is impossible without a new domain concept (out of scope). The only disambiguating date
+available is `recording_date` (`YYYY-MM-DD`) — but it is **not indexed** into the search document or
+returned in the hit, so surfacing it needs a backend change.
+
+**Facts:** `SearchDocument` (`crates/search/src/lib.rs:30`) and `SearchHit` (`:52`) carry
+`id/object_number/object_name/brief_description/[current_owner/recorder]/visibility/[snippet]` — no
+date. `build_document` (`:302`) projects a `CatalogueObject` → `SearchDocument` (does not copy
+`recording_date`). `search_objects` (`:185`) maps Meili results → `SearchHit`. `SearchHitView`
+(`crates/api/src/admin_search.rs:26`) mirrors `SearchHit`. The frontend type is
+`components["schemas"]["SearchHitView"]`; `schema.d.ts` is generated by `pnpm gen:api`. `AdminObjectView`
+already serializes `recording_date` as `Option<String>` (`YYYY-MM-DD`, via `format_date`). On-write
+`sync_object` re-projects an object after each catalogue write; `reindex_all` is the full rebuild path.
+
+### Decisions (from brainstorming)
+1. Thread `recording_date` (`YYYY-MM-DD`) through `SearchDocument` → `SearchHit` → `SearchHitView`;
+   show it on the row when present.
+2. Soften the count to `~{{count}}` (it's an estimate).
+3. Decline object type/facet (no domain field).
+
+## Backend (`crates/search`, `crates/api`)
+
+### `SearchDocument` + `build_document` (`crates/search/src/lib.rs`)
+- Add field: `pub recording_date: Option<String>,` to `SearchDocument`.
+- In `build_document`'s returned struct: `recording_date: object.recording_date.map(|d| d.to_string()),`
+  (`domain::Date`'s `Display` is ISO `YYYY-MM-DD`, matching `AdminObjectView`). Index it as a plain
+  string (Meili stores/returns it; it need not be filterable).
+
+### `SearchHit` + `search_objects` mapping (`crates/search/src/lib.rs`)
+- Add `pub recording_date: Option<String>,` to `SearchHit`.
+- In `search_objects`'s hit map: `recording_date: doc.recording_date,` (the executed
+  `SearchDocument` deserialization carries it; old index docs missing the field deserialize to `None`
+  because it's `Option` — graceful).
+
+### `SearchHitView` (`crates/api/src/admin_search.rs`)
+- Add `pub recording_date: Option<String>,` to `SearchHitView`.
+- In the map closure (`:100`): `recording_date: h.recording_date,`.
+
+### Indexing / backfill
+- New & edited objects get `recording_date` automatically via the existing on-write `sync_object`.
+- Already-indexed objects return `recording_date: None` until a `reindex_all` (the existing rebuild
+  path) runs — a graceful, opt-in backfill; **a `reindex` CLI command is a follow-up**, not in scope.
+
+### Tests (Rust — need the docker stack: Postgres :5442, Meilisearch :7700)
+- Update any direct `SearchDocument`/`SearchHit` struct literals in `crates/search/tests/*` /
+  `crates/api/tests/*` to include `recording_date: None` (compile fix). (Object fixtures construct
+  `CatalogueObject`, which already has `recording_date` — unaffected.)
+- Extend `crates/search/tests/search.rs` (the `search_objects_returns_hits_…` test): give one seeded
+  object a `recording_date` and assert the returned hit's `recording_date` is the `YYYY-MM-DD` string
+  (proves it flows index → hit).
+
+## Frontend (`web`)
+
+### `web/src/api/schema.d.ts` (generated)
+After the backend change, regenerate via `pnpm gen:api` (stack + server up) **or** hand-add
+`recording_date?: string | null;` to the `SearchHitView` block (mirroring `brief_description?: string |
+null` / `snippet?: string | null`) — a later `gen:api` reproduces it identically. Either is acceptable;
+the manual edit avoids running the server purely for codegen.
+
+### `search-result-row.tsx`
+Add `recording_date` to the meta line (the `flex items-center gap-2 text-xs text-muted-foreground`
+row), after `object_number`, when present:
+```tsx
+<span>{hit.object_number}</span>
+{hit.recording_date && <span>· {hit.recording_date}</span>}
+<VisibilityBadge visibility={hit.visibility} />
+```
+(Render the `YYYY-MM-DD` string as-is — it's a plain recording date, not a UTC timestamp, so no
+timezone formatting. A separator dot before it keeps the row scannable.)
+
+### `search-panel.tsx` + i18n — soften the count
+The count uses `t("search.resultCount", { count: total })` with `resultCount_one`/`resultCount_other`.
+Change the i18n values to flag the estimate (en + sv, parity preserved):
+- en: `"resultCount_one": "~{{count}} result"`, `"resultCount_other": "~{{count}} results"`
+- sv: `"resultCount_one": "~{{count}} träff"`, `"resultCount_other": "~{{count}} träffar"`
+No code change in `search-panel.tsx` (the key already interpolates `count`).
+
+### Fixtures + tests
+- `web/src/test/fixtures.ts` `searchHits`: add `recording_date` to the first hit (e.g. `"1962-04-03"`);
+  the rest can stay `recording_date: null` (or omit — it's optional).
+- `web/src/search/search.test.tsx`: assert the first result row shows the date (`getByText("1962-04-03")`
+  or within the row); assert the count copy includes the `~` (`getByText(/~\s*25 results/i)` — note the
+  existing `/25 results/i` assertion still matches the new copy; tighten it to require the `~`).
+
+## Data flow
+DB object → `build_document` (now copies `recording_date`) → Meili doc → `search_objects` hit → API
+`SearchHitView` → `useSearch` → `SearchResultRow` renders the date. The count is the same
+`estimated_total`, now labelled `~`.
+
+## Error handling / edges
+- `recording_date` is `Option` end-to-end → absent on objects without a recording date and on
+  not-yet-reindexed docs; the row simply omits it.
+- `Date::to_string()` is ISO `YYYY-MM-DD` (matches `AdminObjectView`); no locale/timezone formatting.
+- The `~` is cosmetic; pluralization (`_one`/`_other`) is unchanged.
+
+## Testing
+- **Rust:** `cargo build --workspace`; `cargo nextest run -p search -p api` (stack up) green, incl. the
+  new recording_date assertion + any literal compile-fixes.
+- **Frontend:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; the new row-date +
+  count tests pass; en/sv parity (the #60 parity test guards the changed values); no codename.
+- No new dependency.
+
+## Acceptance criteria
+1. `recording_date` is projected into the search index (`SearchDocument`/`build_document`) and returned
+   through `SearchHit` → `SearchHitView` → `schema.d.ts` (`SearchHitView.recording_date?: string|null`).
+2. The search result row shows the recording date (when present) on its meta line.
+3. The result-count copy reads `~{{count}} …` to flag the Meilisearch estimate (en + sv).
+4. Rust (`cargo build` + search/api tests) green; frontend gate green; en/sv parity; no codename; no new
+   dependency.
+
+## Out of scope → follow-ups
+- An object **type/classification** domain concept + a **type facet** (no such field exists today).
+- A `reindex` CLI command to backfill `recording_date` onto already-indexed objects (new/edited objects
+  index it automatically; `reindex_all` is the existing rebuild path).
+- Richer faceting; making `recording_date` filterable/sortable in search.

docs/superpowers/specs/2026-06-08-session-expiry-ux-design.md

@@ -0,0 +1,205 @@
+# Session-Expiry Soft Redirect + Auth Feedback — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #48 (Frontend UX: session-expiry handling loses in-progress work; auth feedback gaps).
+
+## Context
+
+The session-expiry path is the most damaging daily failure mode for a long-session data-entry tool.
+Today a 401 from any API call runs `redirectToLogin()` (`web/src/api/auth-redirect.ts`) →
+`window.location.assign("/login")`, a **full page reload**: it tears down the React app and query
+cache, gives the login page no reason ("session expired"), and after re-login drops the user on
+`/objects` rather than where they were. Login also hardcodes `navigate("/objects")` and ignores the
+attempted destination, and the Sign out control has no pending state.
+
+**Already fixed since the audit (verified):** `require-auth.tsx` now renders `<AppShellSkeleton />`
+during the `useMe` fetch (not the blank `<div role="status">` the audit cited), so the "blank screen on
+load" problem is gone and is **out of scope**. Logout **error** feedback also already exists: `useLogout`
+carries no `meta.suppressErrorToast`, so the global `MutationCache.onError` (`api/query-client.ts`)
+already shows an error toast on logout failure — the only remaining logout gap is a pending/disabled
+state.
+
+**The crux:** the 401 handler lives in an openapi-fetch `Middleware` (`api/client.ts`), which runs
+**outside** React and therefore cannot call `useNavigate`. The app uses a React Router 7 **data router**
+(`createBrowserRouter`, `app.tsx`). The test harness `renderApp` (`src/test/render.tsx`) mounts the
+component under test at `path:"*"` in a **fresh `createMemoryRouter`** — it does not use the app's real
+`router` singleton.
+
+### Decisions (from brainstorming)
+1. **Soft redirect + return** (chosen over an in-place re-auth modal): router-navigate (no full reload)
+   to `/login?reason=expired&from=<path>`; login shows the reason and returns the user to `from`. The
+   React app + query cache survive; an unsaved edit form's typed values are still lost, but the user
+   lands back on the same record. (Full field-level preservation via an in-place modal is a deferred
+   follow-up.)
+2. **Navigate-bridge module** (chosen over exporting the `router` singleton or a custom DOM event): a
+   module holds a settable `navigate` ref that a one-line component registers. This is testable with the
+   memory-router harness (tests call `setNavigate(mock)` directly); importing the singleton `router`
+   would be untestable because `renderApp` never mounts it.
+
+## Components
+
+### `api/auth-redirect.ts` (rewrite)
+```ts
+type NavigateFn = (to: string, opts?: { replace?: boolean }) => void;
+
+let navigateFn: NavigateFn | null = null;
+
+/** Register/unregister the router's navigate fn (called by NavigationBridge). */
+export function setNavigate(fn: NavigateFn | null): void {
+  navigateFn = fn;
+}
+
+/** Soft-redirect to login on a 401, preserving SPA state and the return path.
+ *  Falls back to a hard navigation when no router navigate is registered yet
+ *  (e.g. a 401 during the very first load). No-op when already on /login. */
+export function redirectToLogin(): void {
+  const { pathname, search } = window.location;
+  if (pathname === "/login") return;
+  const from = encodeURIComponent(pathname + search);
+  const target = `/login?reason=expired&from=${from}`;
+  if (navigateFn) {
+    navigateFn(target, { replace: true });
+  } else {
+    window.location.assign(target);
+  }
+}
+```
+`api/client.ts` is unchanged — the middleware still calls `redirectToLogin()`; only its behaviour changes.
+
+### `shell/navigation-bridge.tsx` (new)
+```tsx
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { setNavigate } from "../api/auth-redirect";
+
+/** Bridges React Router's navigate to the non-React 401 handler. Renders nothing. */
+export function NavigationBridge() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    setNavigate(navigate);
+    return () => setNavigate(null);
+  }, [navigate]);
+  return null;
+}
+```
+
+### `app.tsx` (wrap routes in a pathless layout)
+Add a pathless layout route around **all** existing routes whose element mounts the bridge plus an
+`<Outlet/>`, so the bridge is always present (covers `/login` and the authed area):
+```tsx
+function RootLayout() {
+  return (
+    <>
+      <NavigationBridge />
+      <Outlet />
+    </>
+  );
+}
+```
+```tsx
+createRoutesFromElements(
+  <Route element={<RootLayout />}>
+    <Route path="/login" element={<LoginPage />} />
+    {/* …existing RequireAuth / AppShell subtree unchanged… */}
+    <Route path="*" element={<Navigate to="/objects" replace />} />
+  </Route>,
+)
+```
+
+### `auth/login-page.tsx` (reason banner + return-to + empty-field guard)
+- `const [params] = useSearchParams();`
+- Reason banner when `params.get("reason") === "expired"`: render `t("auth.sessionExpired")` (a
+  non-error info note, distinct from the existing `role="alert"` invalid-credentials message).
+- On success, navigate to `safeFrom(params.get("from"))` instead of the hardcoded `/objects`:
+```ts
+function safeFrom(raw: string | null): string {
+  if (!raw) return "/objects";
+  // single leading slash only — reject protocol-relative ("//host") / absolute URLs (open redirect)
+  return /^\/(?!\/)/.test(raw) ? raw : "/objects";
+}
+```
+  (`raw` from `useSearchParams` is already percent-decoded.)
+- Disable submit on empty fields: `disabled={login.isPending || !email.trim() || !password}`.
+
+### `auth/require-auth.tsx` (capture the attempted location)
+```tsx
+const location = useLocation();
+// …
+if (!user) {
+  const from = encodeURIComponent(location.pathname + location.search);
+  return <Navigate to={`/login?from=${from}`} replace />;
+}
+```
+No `reason` here — an unauthenticated deep-link is not an expiry; login simply returns the user to `from`.
+
+### `shell/user-menu.tsx` (logout pending state)
+Keep the menu open during logout and show a pending state on the item (Base UI `MenuItem` supports both
+`closeOnClick` and `disabled`):
+```tsx
+<MenuItem closeOnClick={false} disabled={logout.isPending} onClick={onSignOut}>
+  {logout.isPending ? t("auth.signingOut") : t("auth.signOut")}
+</MenuItem>
+```
+On success the mutation sets `me` to null and navigates to `/login`, so `UserMenu` unmounts (it returns
+`null` when `!me`). Logout **error** already surfaces via the global toast (`useLogout` has no
+`suppressErrorToast`). `closeOnClick={false}` also prevents a double-submit (the item is disabled while
+pending).
+
+### i18n (en + sv parity — 2 new keys)
+- `auth.sessionExpired` = "Your session expired — please sign in again." /
+  "Din session har gått ut — logga in igen."
+- `auth.signingOut` = "Signing out…" / "Loggar ut…"
+
+## Data flow
+API 401 → `client.ts` middleware → `redirectToLogin()` → registered `navigate("/login?reason=expired&
+from=<path>", {replace})` (no reload) → `LoginPage` reads `reason`/`from`, shows the banner → on success
+`navigate(safeFrom(from), {replace})`. Deep-link-while-unauthed → `RequireAuth` → `/login?from=<path>` →
+same return-to. The `NavigationBridge` keeps `setNavigate` current for the lifetime of the app.
+
+## Error handling / edges
+- **Already on `/login`:** `redirectToLogin()` is a no-op (no redirect loop).
+- **401 before the bridge mounts** (first paint): `navigateFn` is null → hard `window.location.assign`
+  to `/login?reason=expired&from=…` (graceful fallback; reason/return still preserved).
+- **Open redirect:** `safeFrom` accepts only a single-leading-slash local path; `//evil.com`,
+  `https://…`, and empty → `/objects`.
+- **Login success with no `from`:** defaults to `/objects` (unchanged behaviour).
+- **StrictMode double-invoke:** the bridge effect is idempotent (sets the same fn; cleanup nulls it) —
+  safe.
+- **Reason banner is informational**, not `role="alert"` (it is not an error and should not preempt the
+  credential-error alert region).
+
+## Testing
+- **`api/auth-redirect.test.ts`** (unit, jsdom): with `setNavigate(mock)` and a stubbed
+  `window.location` (pathname `/objects/abc`), `redirectToLogin()` calls `mock` with
+  `"/login?reason=expired&from=%2Fobjects%2Fabc"` and `{replace:true}`; with `setNavigate(null)` it calls
+  `window.location.assign` with the same target; when `pathname === "/login"` it does nothing.
+- **`auth/login-page` test:** rendering at `/login?reason=expired` shows the `auth.sessionExpired` text;
+  a successful login at `/login?from=%2Fobjects%2F123` navigates to `/objects/123`; a bad `from`
+  (`//evil.com`) falls back to `/objects`; the submit button is disabled until both fields are non-empty.
+- **`auth/require-auth` test:** when `useMe` resolves to no user, it renders a redirect to
+  `/login?from=…` carrying the attempted path.
+- **`shell/user-menu` test:** with a delayed logout handler, after clicking Sign out the item shows the
+  `auth.signingOut` pending text (the menu stays open via `closeOnClick={false}`).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; en/sv parity (the #60
+  parity test guards the 2 new keys); no codename; no new dependency.
+
+## Acceptance criteria
+1. A 401 from an API call performs a **router** navigation (no full page reload) to
+   `/login?reason=expired&from=<attempted path>`; the React app/query cache are not torn down.
+2. The login page shows a "session expired" message when `reason=expired`, and on success returns the
+   user to a **validated** `from` path (defaulting to `/objects`); protocol-relative/absolute `from`
+   values are rejected.
+3. `RequireAuth` redirects unauthenticated users to `/login?from=<attempted path>` so deep links return
+   after login.
+4. Login submit is disabled while either field is empty; the Sign out item shows a pending state
+   (`auth.signingOut`, disabled) while logging out.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported; en/sv parity (2 new
+   keys); no codename; no new dependency.
+
+## Out of scope → follow-ups
+- **In-place re-auth modal** that keeps the edit form mounted for full field-level preservation of
+  in-progress work (deferred by decision; soft redirect ships first).
+- Idle/expiry **pre-warning** (e.g. "your session will expire soon") and token/silent refresh.
+- Broader auth-event audit surfacing on the client.

docs/superpowers/specs/2026-06-08-split-queries-design.md

@@ -0,0 +1,146 @@
+# Split queries.ts: Errors + Query-Key Factory + Domain Modules — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #65 (split the 584-line `queries.ts`, extract the error classes, add a query-key factory, decide the search-invalidation gap).
+
+## Context
+
+`web/src/api/queries.ts` is 584 lines spanning 8 domains (error classes, auth, objects, fields-on-object,
+field-definitions, vocab, terms, authorities, search). No hook crosses a domain boundary, so a split is
+low-risk. Three concrete problems:
+
+- **Toast path drags in the hook module.** After #63, `query-client.ts` imports `errorMessageKey` from
+  `error-message.ts`, which imports `{ HttpError, InUseError }` from `./queries` — so the toast wiring
+  transitively loads all the hooks. Extracting the error classes breaks that chain.
+- **No query-key factory.** ~20 key literals (`["objects", params]`, `["object", id]`,
+  `["terms", vocabularyId]`, …) plus `config-provider.tsx`'s `["config"]` are hand-written and
+  typo-prone.
+- **Object writes don't invalidate `["search"]`.** `useUpdateObject`/`useDeleteObject`/`useSetVisibility`
+  invalidate `["objects"]`/`["object", id]` but never the search index, so the search panel keeps stale
+  hits until the user re-searches. **Decision (brainstorming): invalidate** — conventional
+  eventually-consistent behaviour; the query is `enabled` only with a term, so it's a no-op when not
+  searching.
+
+**Constraint:** ~30 files import from `../api/queries`. The public import path must stay stable (a
+barrel), so the refactor touches the data layer only — feature files don't change.
+
+## Components
+
+### `api/errors.ts` (new) — canonical home for the 4 error classes
+Move `HttpError`, `FieldRejection`, `InUseError`, `VisibilityError` here verbatim (no behaviour change).
+`error-message.ts` changes its import from `./queries` to `./errors` — this is the decoupling: the toast
+path (`query-client → error-message → errors`) no longer loads the hook module. The barrel (below)
+**re-exports** the error classes (`export * from "../errors"`), so the existing importers that pull them
+from `../api/queries` — `object-edit-form.tsx`, `object-new-page.tsx`, `publish-control.tsx`,
+`search-panel.tsx`, and the tests `mutation-error.test.tsx` / `labelled-record-row.test.tsx` /
+`error-message.test.ts` — keep working unchanged.
+
+### `api/query-keys.ts` (new) — one key factory
+```ts
+export type ObjectListParams = {
+  limit: number;
+  offset: number;
+  sort?: string;
+  order?: "asc" | "desc";
+  visibility?: string;
+  q?: string;
+};
+
+export const keys = {
+  me: () => ["me"] as const,
+  config: () => ["config"] as const,
+  objects: () => ["objects"] as const,                       // family prefix (invalidation)
+  objectsPage: (p: ObjectListParams) => ["objects", p] as const,
+  object: (id: string) => ["object", id] as const,
+  fieldDefinitions: () => ["field-definitions"] as const,
+  vocabularies: () => ["vocabularies"] as const,
+  terms: (vocabularyId: string) => ["terms", vocabularyId] as const,
+  authorities: (kind: string) => ["authorities", kind] as const,
+  search: () => ["search"] as const,                         // family prefix (invalidation)
+  searchResults: (term: string, visibility: string | null) => ["search", term, visibility] as const,
+};
+```
+- Every `queryKey:` / `invalidateQueries` / `setQueryData` site in the query modules **and**
+  `config-provider.tsx`'s `["config"]` routes through `keys.*` — producing the identical arrays, so
+  cache behaviour is unchanged. (`keys.objects()` prefix-matches `keys.objectsPage(p)` exactly as
+  `["objects"]` matches `["objects", params]` today.)
+- `ObjectListParams` lives here (it *is* part of the key); `objects.ts` imports it from here — one
+  direction, no import cycle. (It moves out of `queries.ts`'s objects section.)
+
+### `api/queries/` (new directory) — split by domain + barrel
+```
+api/
+  client.ts          (unchanged)
+  errors.ts          (new)
+  query-keys.ts      (new)
+  query-client.ts    (unchanged — already imports only error-message)
+  error-message.ts   (one-line change: import errors from ./errors)
+  queries/
+    index.ts         barrel: `export * from "./auth"; … ; export * from "../errors";`
+    auth.ts          useMe, useLogin, useLogout
+    objects.ts       useObjectsPage, useObject, useCreateObject, useUpdateObject, useSetFields, useDeleteObject, useSetVisibility
+    field-defs.ts    useFieldDefinitions, useCreateFieldDefinition, useUpdateFieldDefinition, useDeleteFieldDefinition
+    vocab.ts         useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary, useTerms, useAddTerm, useUpdateTerm, useDeleteTerm
+    authorities.ts   useAuthorities, useCreateAuthority, useUpdateAuthority, useDeleteAuthority
+    search.ts        useSearch, SEARCH_PAGE
+```
+`api/queries.ts` is deleted; `import { … } from "../api/queries"` resolves to `api/queries/index.ts`.
+Each module imports `api` from `../client`, types from `../schema`, error classes from `../errors`, and
+`keys` from `../query-keys`. The hook bodies are moved verbatim (only their key literals → `keys.*`).
+
+### `api/query-client.ts`
+No change needed — after #63 it imports only `errorMessageKey`. (Once `error-message.ts` points at
+`./errors`, the `query-client → error-message → queries` hook dependency is gone.)
+
+### Search invalidation (`objects.ts`)
+`useUpdateObject`, `useDeleteObject`, `useSetVisibility` add
+`void qc.invalidateQueries({ queryKey: keys.search() })` alongside their existing object invalidations.
+
+## Data flow / behaviour
+Identical to today except: after an object update/delete/visibility-change, an active search query
+refetches (eventually-consistent with the Meilisearch reindex). All keys, hooks, error classes, and
+endpoints are otherwise unchanged.
+
+## Error handling / edges
+- The barrel re-exporting errors means the classes are importable from both `../api/errors` (canonical)
+  and `../api/queries` (compat) — intentional, to avoid churning ~6 importers + tests.
+- `as const` keys are readonly tuples; TanStack Query accepts readonly arrays as keys — no type issue.
+- No import cycle: `query-keys.ts` exports `ObjectListParams` + `keys` and imports nothing from
+  `queries/`; `objects.ts` imports both from `query-keys.ts`.
+- The search query stays `enabled: term.length > 0`, so invalidating `["search"]` is a no-op when no
+  search is active.
+
+## Testing
+- **Behavior guard (must pass unchanged):** `queries.test.ts`, `queries.authoring.test.tsx`,
+  `queries.fields.test.tsx`, `queries.search.test.tsx`, `queries.visibility.test.tsx`,
+  `queries.vocab.test.tsx`, `mutation-feedback.test.tsx`, `error-message.test.ts`,
+  `mutation-error.test.tsx`, `labelled-record-row.test.tsx` — all import from `../api/queries` (the
+  barrel) and from the re-exported error classes; they must not need edits. The full app suite is the
+  integration guard.
+- **New `query-keys.test.ts`:** assert the factory arrays — e.g. `keys.objects()` → `["objects"]`,
+  `keys.objectsPage(p)` → `["objects", p]`, `keys.object("x")` → `["object", "x"]`,
+  `keys.searchResults("q", null)` → `["search", "q", null]`.
+- **Search-invalidation assertion:** extend `queries.visibility.test.tsx` (or `.authoring`) to seed an
+  active `["search", …]` query in the cache, run an object update/delete/set-visibility, and assert the
+  search query is invalidated (e.g. its `isInvalidated`/refetch fires).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new
+  i18n keys; no codename; `check:size` unchanged (pure reorg + one invalidate call).
+
+## Acceptance criteria
+1. `api/errors.ts` holds the 4 error classes; `error-message.ts` imports them from `./errors`; the barrel
+   re-exports them so every existing importer (components + tests) still resolves.
+2. `queries.ts` is split into `api/queries/{auth,objects,field-defs,vocab,authorities,search}.ts` +
+   `index.ts`; `api/queries.ts` is deleted; the `../api/queries` import path is unchanged for all ~30
+   consumers.
+3. A `keys` factory in `api/query-keys.ts` is used by every `queryKey`/invalidate/setQueryData site,
+   including `config-provider.tsx`.
+4. `useUpdateObject`/`useDeleteObject`/`useSetVisibility` invalidate `keys.search()`.
+5. All existing tests pass unchanged; `typecheck`/`lint`/`build`/`check:colors` green; `check:size`
+   unchanged; no new dependency; no new i18n keys; no codename.
+
+## Out of scope → follow-ups
+- No hook signature/behaviour changes beyond the search invalidation; no endpoint changes.
+- `staleTime` / `keepPreviousData` choices stay as-is (intentional per #63's note).
+- Repointing the 4 component error-importers from the barrel to `../api/errors` (the re-export keeps them
+  working; a later cosmetic cleanup could do it).

docs/superpowers/specs/2026-06-08-token-select-design.md

@@ -0,0 +1,132 @@
+# Token-Styled Select — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #51.
+
+## Context
+
+Four raw `<select>` elements (`field-form.tsx:120` data_type, `:138` vocabulary, `:158`
+authority_kind; `object-form.tsx:148` visibility) are styled `w-full rounded border px-2 py-1 text-sm`
+— different radius/border/padding/height from the sibling `ui/Input` (`h-8 rounded-lg border-input …
+focus-visible:ring-3 ring-ring/50`), and crucially they have **no focus ring** (keyboard users get no
+focus affordance). This milestone adds a token-styled `ui/Select` (Base UI Select) matching `Input`
+and replaces all four. (Decision: all four → `ui/Select`; making the vocabulary picker a searchable
+combobox is a deferred follow-up — keeps the working object-editing combobox untouched.)
+
+**Facts:** Base UI Select is `import { Select as SelectPrimitive } from "@base-ui/react/select"`
+(namespace; parts Root/Trigger/Value/Icon/Portal/Positioner/Popup/List/Item/ItemIndicator/ItemText) —
+no new dependency. `object-form` is react-hook-form (visibility is `register`'d); `field-form` is
+useState-controlled (all three selects), with `data_type`/`vocabulary_id`/`authority_kind` `disabled`
+on edit. `ui/menu.tsx` + `ui/combobox.tsx` are the established Base UI wrapper patterns. The Input
+className to match is in `ui/input.tsx`. Base UI Select is NOT a native `<select>`, so existing tests
+using `userEvent.selectOptions` / `HTMLSelectElement` must be rewritten to click interaction.
+
+### Decisions (from brainstorming)
+1. **All four selects → `ui/Select`** (uniform token styling + focus ring; lowest risk).
+2. New `ui/select.tsx` wraps Base UI Select; **validated by running** (novel primitive).
+3. Tests rewritten to Base UI Select interaction (open trigger → click item).
+
+## Components
+
+### `web/src/components/ui/select.tsx` (new)
+Wrap Base UI Select in the `ui/*` style (`data-slot`, `cn`, no semicolons), mirroring
+`ui/combobox.tsx`/`ui/menu.tsx`. Exports (names final after validate-by-running):
+- `Select` — `SelectPrimitive.Root` (generic value; `value`/`onValueChange`/`defaultValue`/`disabled`/`name`).
+- `SelectTrigger` — `SelectPrimitive.Trigger` styled to **match Input**: `h-8 w-full rounded-lg border
+  border-input bg-transparent px-2.5 py-1 text-sm inline-flex items-center justify-between
+  transition-colors outline-none focus-visible:border-ring focus-visible:ring-3
+  focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed
+  disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive dark:bg-input/30` + a
+  trailing chevron (`SelectPrimitive.Icon` with a lucide `ChevronDown`, `aria-hidden`) and a
+  `SelectValue` (`SelectPrimitive.Value`) showing the chosen item (with `placeholder`).
+- `SelectContent` — `SelectPrimitive.Portal` + `SelectPrimitive.Positioner` (`sideOffset`, `z-50`) +
+  `SelectPrimitive.Popup` styled as a card (`min-w-[var(--anchor-width)]` if supported, else
+  `min-w-32`; `rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none` +
+  open/close animation data-attrs).
+- `SelectItem` — `SelectPrimitive.Item` row (`flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm
+  outline-none select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground`) +
+  a `SelectPrimitive.ItemIndicator` (lucide `Check`) and `SelectPrimitive.ItemText`.
+- Token classes only (no raw palette). The exact part tree + props (`SelectValue` placeholder,
+  positioner anchoring, item `value`) **must be confirmed by running the story** (Base UI Select is
+  novel here), as combobox/menu/toast were.
+
+**Accessibility:** `SelectTrigger` accepts `id` so the existing `<Label htmlFor={id}>` associates →
+`getByLabelText`/`getByRole("combobox", { name })` keeps working in tests. (Base UI Select trigger has
+role `combobox`; confirm the accessible-name wiring when validating.)
+
+### `web/src/components/ui/select.stories.tsx` (new)
+A `Select` with a few `SelectItem`s; a `play` test that opens the trigger and selects an item, asserting
+the value/label updates (portal content queried via `within(document.body)`, like the menu story). This
+is the validation.
+
+### Replacements
+
+**`object-form.tsx` visibility** (create-mode only): Base UI Select isn't a native input, so replace
+the `register("visibility")` `<select>` with a **`Controller`** (`control={form.control}
+name="visibility"`) rendering `<Select value={field.value} onValueChange={field.onChange}>` with items
+`draft`/`internal` (labels `form.draft`/`form.internal`). Keep `<Label htmlFor="visibility">` → trigger
+`id="visibility"`. Default stays `"draft"` (the form's defaultValues already set it).
+
+**`field-form.tsx`** (useState — pass `value`/`onValueChange` directly, no Controller):
+- **data_type:** `<Select value={dataType} onValueChange={setDataType} disabled={isEdit}>`, items from
+  `TYPES` (labels `fields.types.${type}`). `id="field-type"`.
+- **vocabulary_id** (when `dataType==="term"`): `<Select value={vocabularyId} onValueChange={setVocabularyId}
+  disabled={isEdit}>` with a placeholder (`form.selectPlaceholder`) and items from `vocabularies` (value
+  `vocab.id`, label `vocab.key`). `id="field-vocab"`. The empty/placeholder state: Base UI Select shows
+  the `SelectValue` placeholder when value is `""`; keep `vocabularyId=""` as the unselected state (the
+  existing required-check `!vocabularyId` still works).
+- **authority_kind** (when `dataType==="authority"`): `<Select value={authorityKind}
+  onValueChange={setAuthorityKind} disabled={isEdit}>` with an "Any" item (value `""`, label
+  `fields.anyKind`) + `KINDS` items (labels `authorities.${kind}`). `id="field-kind"`.
+
+No change to submit logic, validation, or the disabled-on-edit behavior — only the control swaps.
+
+## Data flow
+Unchanged: the same state/`register`/`Controller` value drives the same submit payloads. Only the
+rendered control (native `<select>` → Base UI Select) and its styling change.
+
+## Error handling / edges
+- Base UI Select `value=""` must render the placeholder (vocabulary) or the "Any" item (authority_kind)
+  — verify when running. The authority_kind "Any" is a real selectable item with value `""`.
+- `disabled={isEdit}` must visually + functionally disable the trigger (the styling includes
+  `disabled:` classes).
+- The visibility `Controller` default must remain `"draft"` (no regression to the create payload).
+- Keyboard: Base UI Select is fully keyboard-operable (the focus ring is the headline fix).
+
+## Testing
+- **`select.stories.tsx`** validates the primitive by running (open + select).
+- **`object-form.test.tsx`** rewrite the visibility assertions:
+  - "shows visibility (draft/internal only, not public)": open the Select trigger, assert items `Draft`
+    + `Internal` are present and `Public` is absent (query the portal list); select `Internal` and
+    assert it's reflected. (Replaces `HTMLSelectElement.options` inspection.)
+  - "edit mode: no visibility control": keep — query by the visibility Label name returns null.
+- **`fields.test.tsx`** rewrite the select flows to click interaction:
+  - data_type → open, click `Authority` → the kind picker appears → open, click `Person` → assert
+    `authority_kind: "person"` in the create payload.
+  - data_type → open, click `Term` → the vocabulary picker appears → submit blocked until a vocab is
+    chosen → open, click the vocab → assert the create payload. Keep the same payload assertions.
+  - "creates a text field" (default type) — unaffected or minimal change.
+- Keep all payload/mutation assertions identical (don't weaken); only the interaction changes.
+- Gate: `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors`; en/sv parity (no new keys
+  expected); no codename. **`check:size`:** Base UI Select adds to the always-loaded form chunk —
+  report the value (budget 250 KB gz; flag if it exceeds rather than silently raising).
+
+## Acceptance criteria
+1. A `ui/Select` (Base UI Select) exists, styled to match `Input` (h-8, rounded-lg, border-input,
+   focus-visible ring, disabled/aria-invalid states), with a Storybook story validated by running.
+2. All four raw `<select>` elements (object-form visibility; field-form data_type / vocabulary /
+   authority_kind) are replaced by `ui/Select`; they share Input's tokens and have a visible focus ring.
+3. Behavior preserved: same values/payloads, disabled-on-edit, create-mode-only visibility, term/authority
+   conditional pickers, the required-vocabulary check, and the create-form reset.
+4. Tests rewritten to Base UI Select interaction (no native `selectOptions`); all payload assertions
+   unchanged; suite green.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported (within budget or
+   flagged); en/sv parity; no codename; no new npm dependency.
+
+## Out of scope → follow-ups
+- Making the vocabulary picker a **searchable combobox** (generalizing `OptionsCombobox` to `{id,label}`)
+  — deferred; revisit if vocabulary lists grow large.
+- Replacing any other native form controls; a lint guard banning raw `<select>` outside `components/ui/`.
+- The `visibility` select gaining a `public` option (intentionally absent — publishing is via
+  `publish-control`).

docs/superpowers/specs/2026-06-08-unify-record-crud-design.md

@@ -0,0 +1,182 @@
+# Unify Vocabulary + Authority CRUD — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #64 (the duplicated Vocabulary-terms + Authorities CRUD surfaces).
+
+## Context
+
+The Vocabulary-terms and Authorities admin surfaces are two copies of one feature ("a labelled record
+with an optional external URI: filterable list + inline-edit rows + create form"). The duplication spans
+four files and ~280 lines:
+
+- `vocab/term-row.tsx` and `authorities/authority-row.tsx` are byte-for-byte twins except: the mutation
+  hooks (`useUpdateTerm`/`useDeleteTerm` vs `useUpdateAuthority`/`useDeleteAuthority`), the record type
+  (`TermView` vs `AuthorityView`), the URI-input id prefix (`term-uri-` / `auth-uri-`), the mutate-arg
+  shape (`{ vocabularyId, termId, … }` vs `{ id, kind, … }`), and the delete-confirm i18n key.
+- `authorities/authorities-page.tsx` and `vocab/vocabulary-terms.tsx` share the filter input, the
+  4-state list (loading→skeleton / error / empty / no-matches / rows), and the create form
+  (`LabelEditor` + URI input + `labels.some()` validation + `MutationError` + submit). They differ in the
+  i18n keys, the create-form heading, and (authorities only) the kind-tabs `<nav>` + `PageTitle` +
+  `Navigate` guard.
+
+A fix to inline-edit behaviour must currently be made in two places and silently drifts. (These files
+already share `LabelEditor`, `ExternalUriLink`, `DeleteConfirmDialog`, and `MutationError`.)
+
+`vocabulary-list.tsx` (vocabularies are `key`-based, not labelled records) and the `objects` RHF surface
+are intentionally **not** unified — different shapes.
+
+### Decisions (from brainstorming)
+Full unification — three shared components in `src/components/`, with `TermRow`/`AuthorityRow` and the
+two pages reduced to thin adapters. All variance is pushed into props; no generics on the row (the adapter
+owns the mutate-arg shape). Behavior-preserving — existing tests are the guard.
+
+## Components
+
+### `components/labelled-record-row.tsx` (new) — `LabelledRecordRow`
+Owns `editing` / `labels` / `uri` state. Renders the display row (`labelText` + `ExternalUriLink` + Edit
+button + `DeleteConfirmDialog`) or the edit view (`LabelEditor` + URI `<Input>` + Save/Cancel +
+`MutationError`).
+```ts
+type RecordLike = { id: string; labels: LabelView[]; external_uri: string | null };
+
+function LabelledRecordRow(props: {
+  record: RecordLike;
+  lang: string;
+  deleteConfirmKey: string;                                  // i18n key for the confirm prompt
+  savePending: boolean;                                      // update.isPending
+  saveError: unknown;                                        // update.error
+  onEditOpen: () => void;                                    // adapter calls update.reset()
+  onSave: (labels: LabelInput[], uri: string | null, done: () => void) => void;
+  onDelete: () => Promise<void>;
+}): JSX.Element;
+```
+- Edit button onClick: `onEditOpen(); setLabels(record.labels as LabelInput[]); setUri(record.external_uri ?? ""); setEditing(true);` (preserves the #63 reset-on-edit-open behaviour).
+- Save: `onSave(labels, uri.trim() || null, () => setEditing(false))`; Save disabled while `savePending`;
+  `<MutationError error={saveError} />` below the buttons.
+- The URI input id uses `useId()` (replaces the `term-uri-${id}` / `auth-uri-${id}` scheme).
+- `record.labels` is `LabelView[]`; cast to `LabelInput[]` for `LabelEditor` (same cast the current rows do).
+
+### `components/labelled-record-create-form.tsx` (new) — `LabelledRecordCreateForm`
+Owns its own `labels` / `uri` / `requiredError` state. Renders `heading` + `LabelEditor` + URI `<Input>`
+(id via `useId()`) + the `form.required` validation alert + `<MutationError error={error} />` + submit.
+```ts
+function LabelledRecordCreateForm(props: {
+  heading: ReactNode;
+  submitLabel: string;
+  pending: boolean;                                          // create.isPending
+  error: unknown;                                            // create.error
+  onCreate: (labels: LabelInput[], uri: string | null, reset: () => void) => void;
+}): JSX.Element;
+```
+- Submit: `if (!labels.some((l) => l.label)) { setRequiredError(true); return; } setRequiredError(false);
+  onCreate(labels, uri.trim() || null, () => { setLabels([]); setUri(""); });`
+- Submit button disabled while `pending`.
+
+### `components/filtered-record-list.tsx` (new) — `FilteredRecordList<T>`
+Owns the `filter` state. Renders the filter `<Input>` **always**, then (loading → `<ListSkeleton>` else the
+`<ul>`), so the filter stays visible during load (matches current behaviour).
+```ts
+function FilteredRecordList<T extends { id: string; labels: LabelView[] }>(props: {
+  records: T[] | undefined;
+  lang: string;
+  isLoading: boolean;
+  isError: boolean;
+  loadErrorText: string;
+  emptyText: string;
+  renderRow: (record: T) => ReactNode;
+}): JSX.Element;
+```
+- `const q = filter.trim().toLowerCase(); const rows = [...(records ?? [])].filter((r) => !q ||
+  labelText(r.labels, lang).toLowerCase().includes(q)).sort(byLabel(lang));`
+- List states (preserving the current logic exactly): `isError` → `loadErrorText`; `!isError &&
+  records?.length === 0` → `emptyText`; `!isError && records && records.length > 0 && rows.length === 0`
+  → `t("common.noMatches")`; else `rows.map(renderRow)`.
+- Filter input uses `aria-label={t("common.filter")}` + `placeholder={t("common.filter")}` (unchanged).
+
+### Adapters
+
+**`vocab/term-row.tsx`** keeps its public API `<TermRow vocabularyId term lang />` (its #63 test stays
+valid). Body:
+```tsx
+const update = useUpdateTerm();
+const del = useDeleteTerm();
+return (
+  <LabelledRecordRow
+    record={term}
+    lang={lang}
+    deleteConfirmKey="actions.confirmDeleteTerm"
+    savePending={update.isPending}
+    saveError={update.error}
+    onEditOpen={() => update.reset()}
+    onSave={(labels, uri, done) =>
+      update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
+    onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
+  />
+);
+```
+**`authorities/authority-row.tsx`** keeps `<AuthorityRow authority kind lang />`; analogous with
+`useUpdateAuthority`/`useDeleteAuthority`, `deleteConfirmKey="actions.confirmDeleteAuthority"`, save arg
+`{ id: authority.id, kind, external_uri: uri, labels }`, delete `{ id: authority.id, kind }`.
+
+**`authorities/authorities-page.tsx`** keeps the `PageTitle`, kind `<nav>`, `Navigate` guard, breadcrumb,
+and `useDocumentTitle`. Replaces the inline filter/list with `<FilteredRecordList records={authorities}
+lang={lang} isLoading={isLoading} isError={isError} loadErrorText={t("authorities.loadError")}
+emptyText={t("authorities.empty")} renderRow={(a) => <AuthorityRow authority={a} kind={currentKind}
+lang={lang} />} />`, and the inline form with `<LabelledRecordCreateForm heading={`${t("authorities.new")} ·
+${t(\`authorities.${currentKind}\`)}`} submitLabel={t("authorities.create")} pending={create.isPending}
+error={create.error} onCreate={(labels, uri, reset) => create.mutate({ kind, external_uri: uri, labels },
+{ onSuccess: reset })} />`. (Drops the now-unused local `labels`/`uri`/`error`/`filter` state and the
+`onCreate` handler.)
+
+**`vocab/vocabulary-terms.tsx`** keeps its `vocab.terms` caption + breadcrumb. Uses `<FilteredRecordList
+records={terms} … loadErrorText={t("vocab.loadError")} emptyText={t("vocab.noTerms")} renderRow={(term) =>
+<TermRow vocabularyId={id} term={term} lang={lang} />} />` and `<LabelledRecordCreateForm
+heading={t("vocab.addTerm")} submitLabel={t("vocab.addTerm")} pending={addTerm.isPending}
+error={addTerm.error} onCreate={(labels, uri, reset) => addTerm.mutate({ vocabularyId: id, external_uri:
+uri, labels }, { onSuccess: reset })} />`.
+
+## Data flow
+No change to the query/mutation layer. Each page owns its data hooks + the page-specific chrome (nav,
+headings, breadcrumb) and hands records + render callbacks to the shared list, mutate callbacks to the
+shared create form, and per-row mutate callbacks (via the row adapters) to the shared row.
+
+## Error handling / edges
+- Inline save errors and create errors still render via `<MutationError>` (status-aware, from #63),
+  unchanged.
+- The `form.required` validation (empty labels) stays in the create form.
+- Reset-on-edit-open (`update.reset()`) preserved so a stale save error doesn't linger.
+- The empty-vs-no-matches distinction is computed from the **raw** `records` length (empty) vs the
+  **filtered** `rows` length (no matches), exactly as today.
+- `useId()` keeps URI-input ids unique across simultaneously-mounted rows/forms.
+
+## Testing
+- **Behavior guard:** existing tests stay green unchanged — `vocab/term-row.test.tsx`,
+  `authorities/authorities.test.tsx` (page filter/create/list), `vocab/vocabularies.test.tsx`
+  (out-of-scope list, must not break). Same public component APIs + DOM.
+- **New focused tests** for the three components:
+  - `labelled-record-row.test.tsx`: display → click Edit → Save calls `onSave` and closes on `done`; a
+    failed save (passing `saveError`) shows the inline error and the row stays editable; Delete invokes
+    `onDelete`.
+  - `labelled-record-create-form.test.tsx`: submit with empty labels shows `form.required` and does NOT
+    call `onCreate`; a valid submit calls `onCreate` and the `reset` clears the inputs.
+  - `filtered-record-list.test.tsx`: typing in the filter narrows the rendered rows; `records=[]` →
+    `emptyText`; non-empty records + non-matching filter → `common.noMatches`; `isError` → `loadErrorText`;
+    `isLoading` → skeleton.
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new i18n keys; en/sv
+  parity unaffected; no codename; no new dependency. `check:size` should not grow (net code reduction).
+
+## Acceptance criteria
+1. `LabelledRecordRow`, `LabelledRecordCreateForm`, `FilteredRecordList<T>` exist in `src/components/` with
+   the prop shapes above; `TermRow`/`AuthorityRow` and the two pages are adapters over them.
+2. `term-row.tsx` + `authority-row.tsx` no longer duplicate the row body; `authorities-page.tsx` +
+   `vocabulary-terms.tsx` no longer duplicate the filter/list/create-form body.
+3. All existing tests pass unchanged; the three new components have focused tests.
+4. No behavior change: inline edit/save/delete, create + validation, filtering, the 4 list states, the
+   authorities kind-nav, and breadcrumbs all work as before.
+5. `typecheck`/`lint`/`test`/`build`/`check:colors` green; `check:size` reported (not increased); no new
+   i18n keys; no codename; no new dependency.
+
+## Out of scope → follow-ups
+- `vocabulary-list.tsx` (key-based vocabularies) and the `objects` table/detail/RHF surface.
+- A field-definition "position"/ordering concept; server-side filtering for large vocabularies (#43).

docs/superpowers/specs/2026-06-09-bundle-and-tests-design.md

@@ -0,0 +1,111 @@
+# Bundle Vendor-Split + Test-Gap Fills — Design
+
+**Date:** 2026-06-09
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #67 (vendor-split the bundle for cache stability/headroom; fill the audit's unit-test + story gaps).
+
+## Context
+
+The production build emits a single ~216 KB-gz entry chunk (the largest, measured by
+`scripts/check-bundle-size.mjs`, budget 250 KB) that bundles the framework deps (react-dom, react-router 7,
+@tanstack/react-query, @base-ui/react, i18next) together with app code — so every app edit invalidates the
+whole chunk's cache. `vite.config.ts` has no `build.rollupOptions`. Separately, four well-isolated units
+have no direct tests, and the composed combobox primitive has no story.
+
+All changes are additive/low-risk; `check:size`/`check:colors`/the existing tests are the guards.
+
+## Components
+
+### 1. Vendor split — `vite.config.ts`
+Add a top-level `build` block (sibling of `plugins`/`resolve`/`server`/`test`) with `manualChunks`:
+```ts
+build: {
+  rollupOptions: {
+    output: {
+      manualChunks: {
+        react: ["react", "react-dom", "react-router", "react-router-dom"],
+        "base-ui": ["@base-ui/react"],
+        query: ["@tanstack/react-query"],
+        i18n: ["i18next", "react-i18next"],
+      },
+    },
+  },
+},
+```
+- The app entry chunk then carries only app code; the listed deps land in cache-stable vendor chunks
+  (`react-*.js`, `base-ui-*.js`, `query-*.js`, `i18n-*.js`). `react-router` **and** `react-router-dom` are
+  both listed so router code (v7 re-exports `react-router` internally) stays in one chunk and React isn't
+  duplicated.
+- Only affects `pnpm build` (production); the Storybook/vitest browser builder is independent, so the
+  test suite is unaffected.
+- `check:size` measures the largest emitted chunk; after the split the largest is a vendor chunk well under
+  the 250 KB budget (verified in implementation by running `pnpm build` + `pnpm check:size` and reporting
+  the chunk sizes). If a chunk is unexpectedly oversized or React duplicates, adjust the groups.
+
+### 2. Test-gap fills (4 unit tests)
+
+**`objects/prune-fields.test.ts`** (new) — `pruneFields(fields, localizedTextKeys: Set<string>, defaultLang)`:
+- scalars pass through; `undefined`/`null`/`""` top-level values are dropped.
+- a non-array object value whose key is in `localizedTextKeys` keeps **only** the `defaultLang` entry;
+  other-language entries are dropped.
+- a non-array object value whose key is **not** in `localizedTextKeys` keeps all (non-empty) language
+  entries.
+- empty inner entries (`""`/`null`/`undefined`) are filtered, and a map left with zero entries is dropped
+  entirely.
+
+**`components/delete-confirm-dialog.test.tsx`** (new) — the delete-in-use flow:
+- render `<DeleteConfirmDialog description=… onConfirm=… />`, open it (click the trigger), click the
+  confirm action.
+- when `onConfirm` rejects with `InUseError(3)`, the dialog shows the `actions.inUse` message (containing
+  the count `3`) and **stays open** (the confirm action is still present / the dialog isn't dismissed).
+- when `onConfirm` resolves, the dialog closes.
+(`DeleteConfirmDialog` routes its catch through `errorMessageKey`, which maps `InUseError` →
+`actions.inUse` with the count — so this also exercises the shared error mapping.)
+
+**`lib/labels.test.ts`** (new) — `labelText(labels, lang)`:
+- exact `lang` match wins; else falls back to the `"en"` label; else the first label; else `""` for an
+  empty array.
+
+**`lib/format-date.test.ts`** (new) — `formatDate(value, lang)`:
+- a valid `"YYYY-MM-DD"` formats via `Intl.DateTimeFormat(lang, { dateStyle: "medium" })` and is **not**
+  shifted off its calendar day (assert the rendered string contains the expected day number for a fixed
+  date + a fixed `lang` like `"en"`).
+- `null` → `"—"`; a non-date string (e.g. `"not-a-date"`) is returned unchanged; a non-string non-null
+  (e.g. a number) is `String()`-ified.
+
+### 3. Combobox story — `components/ui/combobox.stories.tsx` (new)
+A visual/interactive story for the composed combobox primitive, mirroring the existing `ui/*` story format
+(`@storybook/react-vite` `Meta`/`StoryObj`, single-quote + no-semicolon, `tags: ['ai-generated']`, a `play`
+using `canvas` + `storybook/test`). A small controlled wrapper renders `ComboboxRoot` with a handful of
+string options (`ComboboxInput`/`ComboboxClear`/`ComboboxTrigger`/`ComboboxPopup`/`ComboboxList`/
+`ComboboxItem`/`ComboboxEmpty`), matching how `OptionsCombobox` composes them. A `Default` story; the
+`play` asserts the input renders and (optionally) typing filters the list. (Runs as a browser test in the
+Storybook vitest project — a few seconds in CI.)
+
+## Error handling / edges
+- `manualChunks`: Rollup orders chunks by the import graph, so vendor chunks load before the app chunk that
+  imports them — no load-order/duplicate-React risk when react+react-dom+router share one named chunk.
+- `formatDate` parses `\`${value}T00:00:00\`` (local midnight) to avoid a UTC day-shift; the test pins a
+  fixed `lang` to keep `Intl` output deterministic (assert a substring like the day number, not the full
+  locale string, to stay robust across ICU versions).
+- `delete-confirm-dialog` test drives the Base UI AlertDialog in its portal (`within(document.body)` for the
+  confirm action), mirroring existing portal-aware tests.
+
+## Testing
+- The 4 unit tests run in the jsdom project; the story adds one Storybook browser test.
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; `check:size` reports the
+  new largest (vendor) chunk under budget; no new dependency; no new i18n keys; no codename. en/sv parity
+  unaffected.
+
+## Acceptance criteria
+1. `vite.config.ts` has `build.rollupOptions.output.manualChunks` splitting react/base-ui/query/i18n into
+   their own chunks; `pnpm build` succeeds and `check:size` passes (largest chunk reported, < 250 KB gz, no
+   React duplication).
+2. New tests exist and pass: `prune-fields.test.ts`, `delete-confirm-dialog.test.tsx` (InUseError →
+   `actions.inUse`, stays open), `labels.test.ts`, `format-date.test.ts`.
+3. `components/ui/combobox.stories.tsx` exists with a working `Default` story (browser-test green).
+4. Full gate green; no new dependency; no new i18n keys; no codename; existing tests unchanged.
+
+## Out of scope → follow-ups
+- The buildkit/Dockerfile CI migration (the robust fix for the slow native runner; overlaps #25).
+- Deeper treeshaking/bundle analysis; route-level code-split changes beyond the existing `lazy()` boundaries.

docs/superpowers/specs/2026-06-09-responsive-master-detail-design.md

@@ -0,0 +1,137 @@
+# Responsive Master/Detail for Vocabularies, Search, Fields — Design
+
+**Date:** 2026-06-09
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #58 (master/detail + sidebar layout has no responsive/small-screen handling — remaining half).
+
+## Context
+
+#58 is partially done (commit `0a88a86`, #44): the sidebar collapses to an icon rail, the **Objects** master/detail
+is responsive (wide right-pane / narrow Base UI `Drawer`), and a reusable `lib/use-media-query.ts` exists. The
+**remaining** master/detail screens still use fixed `grid-cols-[20rem_1fr]` / `[24rem_1fr]` with no breakpoints —
+`vocabularies-page.tsx`, `search-page.tsx`, `fields-page.tsx` — so on a small laptop / tablet / split window the
+fixed list + sidebar leave a cramped detail pane, and below ~640px the panes can't coexist.
+
+**Decision (brainstorming): keep the wide side-by-side layout (it's useful for curators); fix only narrow.** Reuse
+one shared drawer + the existing `useMediaQuery` hook. Breakpoint **1024px (`lg`)**, matching Objects. Authorities
+is single-pane → no change. The "resizable splitter" the issue *suggests considering* is out of scope.
+
+The three pages differ: vocabularies + search are **route-driven** (`<Outlet/>`, an index-prompt route + `:id`);
+fields is **`useState`-driven** (FieldList → FieldForm, with the form always present for "create").
+
+## Components
+
+### 1. `components/detail-drawer.tsx` (new) — generalize the Objects drawer
+Today `objects/object-detail-drawer.tsx` is objects-specific (Base UI `Drawer` + close button + a hardcoded
+`<Outlet/>`). Generalize to a reusable component taking `children` + `ariaLabel`:
+```tsx
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+
+/** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports. */
+export function DetailDrawer({
+  open,
+  onClose,
+  ariaLabel,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  ariaLabel: string;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation();
+  return (
+    <Drawer open={open} onOpenChange={(next) => { if (!next) onClose(); }} swipeDirection="right">
+      <DrawerContent aria-label={ariaLabel}>
+        <div className="flex justify-end border-b p-2">
+          <DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}>
+            <X className="size-4" aria-hidden="true" />
+          </DrawerClose>
+        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+```
+- Delete `objects/object-detail-drawer.tsx`.
+- **Drop the `lazy()`/`Suspense`** that objects-page used to wrap the drawer: it kept Base UI's drawer code out of
+  the entry chunk, but #67 already split `@base-ui/react` into its own `base-ui` vendor chunk (loaded app-wide via
+  the menu/select/etc.), so the lazy boundary no longer saves anything. `DetailDrawer` is a normal import.
+- The close-button label keeps the existing generic `actions.closeDetail` key.
+
+### 2. `vocab/vocabularies-page.tsx` + `search/search-page.tsx` — `useMediaQuery` + route drawer
+Mirror the Objects pattern. Add `useMediaQuery("(min-width: 1024px)")` (`isWide`) and a `useMatch` for the detail
+route (`"/vocabularies/:id"` / `"/search/:id"`), `open = Boolean(match)`, `close = () => navigate("/vocabularies")`
+(resp. `"/search"`).
+- **Wide:** the current side-by-side grid with `<Outlet/>` inline (prompt when no `:id`, detail when selected) —
+  unchanged.
+- **Narrow:** the master full-width (`VocabularyList` / `SearchPanel` under the existing `PageTitle`), plus
+  `{open && <DetailDrawer open={open} onClose={close} ariaLabel={…}><Outlet/></DetailDrawer>}`. With no `:id`, just
+  the master (the index-prompt is a wide-only affordance).
+- Drawer `ariaLabel`: vocabularies → `t("vocab.terms")` ("Terms"); search → `t("objects.detailTitle")` ("Object
+  detail", since a search result's detail IS an object). **No new i18n keys.**
+- The `<Outlet/>` is rendered in exactly one place per branch (the `isWide` ternary), so no double-mount.
+
+### 3. `fields/fields-page.tsx` — pure-CSS responsive stack
+`fields-page` is `useState`-driven and its right pane is *always* a form (create when nothing selected), so a
+drawer would need a new "New field" trigger. Instead make it a responsive **stack** (the issue comment explicitly
+allows "or stack"): change the grid container from `grid grid-cols-[20rem_1fr]` to
+`grid grid-cols-1 lg:grid-cols-[20rem_1fr]`, and give the form pane a top border that only shows when stacked
+(`border-t lg:border-t-0`) while the list keeps its `border-r` (which reads as a bottom divider when stacked — or
+add `border-b lg:border-b-0 lg:border-r` for a clean stacked divider). No JS, no drawer, no new trigger, no
+element duplication — the same `FieldForm` reflows from below the list (narrow) to beside it (wide).
+
+### 4. `objects/objects-page.tsx` — retrofit onto `DetailDrawer`
+Replace the `lazy(ObjectDetailDrawer)` import + `<Suspense>` with a direct `DetailDrawer` import; in the narrow
+branch render `{open && <DetailDrawer open={open} onClose={closeDetail} ariaLabel={t("objects.detailTitle")}><Outlet/></DetailDrawer>}`.
+Behavior-preserving — its existing "narrow: detail renders inside a portaled drawer" test stays green.
+
+## Data flow / behaviour
+No data/routing changes. Each page picks layout via `useMediaQuery("(min-width:1024px)")` (vocab/search/objects) or
+pure CSS (fields). The detail content is identical to today; only its container (inline pane vs Drawer) changes by
+width. The detail route/state, breadcrumbs, and titles are unchanged.
+
+## Error handling / edges
+- `useMediaQuery` is SSR-safe (returns `false` server-side / pre-mount → narrow-first, then corrects on mount).
+- Drawer `open` is derived from the route match (`:id`) / nothing on the index, so the Outlet only has content when
+  open; rendering `{open && <DetailDrawer …>}` mounts it only when active (matches the current objects behaviour).
+- Fields stack: `FieldList` is `overflow-hidden` in a `grid-cols-1` row — ensure the stacked list has a sensible
+  height (it's in a flex/grid row that can scroll); the form below scrolls in its own pane. Keep each pane's
+  `overflow` as today.
+- Drawer accessible name comes from `ariaLabel` (required prop) so every detail drawer is a named dialog (the #62
+  a11y fix, preserved + generalized).
+
+## Testing
+- **`components/detail-drawer.test.tsx`** (new): with `open`, the children render inside a dialog whose accessible
+  name is the `ariaLabel`; clicking the close button (labelled `actions.closeDetail`) calls `onClose`.
+- **`vocab/vocabularies-page` + `search/search-page` tests** (new or extended): reuse the `setViewport(wide)`
+  matchMedia mock from `objects-page.test.tsx`. Narrow + a `:id` route → the detail renders in a portaled drawer
+  (`getByRole("dialog", { name })` within `document.body`); wide + `:id` → the detail is the inline pane (no
+  dialog). Closing the drawer navigates back to the index route.
+- **`fields/fields-page` test**: the grid container carries the responsive classes (`grid-cols-1` +
+  `lg:grid-cols-[20rem_1fr]`); both the list and the form render (jsdom can't measure layout, so assert structure).
+- **`objects/objects-page` tests**: stay green unchanged (the drawer is now the shared `DetailDrawer`).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new i18n
+  keys; no codename; en/sv parity unaffected. `check:size` unchanged-or-smaller (dropping the objects drawer's
+  separate lazy chunk folds it into base-ui).
+
+## Acceptance criteria
+1. `components/detail-drawer.tsx` exists (Base UI drawer + close button + `children`/`ariaLabel`); `object-detail-drawer.tsx`
+   is deleted; Objects uses the shared `DetailDrawer` (no `lazy`/`Suspense`); its tests stay green.
+2. Vocabularies + Search: wide = current side-by-side (unchanged); narrow (<1024) = master full-width + the detail
+   in a `DetailDrawer` when a `:id` is active; close returns to the index route.
+3. Fields: responsive grid (`grid-cols-1 lg:grid-cols-[20rem_1fr]`) — stacked on narrow, side-by-side on wide.
+4. New tests for `DetailDrawer`, vocabularies-page, search-page (narrow drawer + wide pane), fields-page (responsive
+   structure); all existing tests pass unchanged.
+5. `typecheck`/`lint`/`build`/`check:colors` green; `check:size` reported (unchanged-or-smaller); no new
+   dependency; no new i18n keys; no codename.
+
+## Out of scope → follow-ups
+- A resizable master/detail splitter (issue "consider"); a per-user pane-width preference.
+- Converting `fields` to a route-driven master/detail (it stays `useState`-driven + stacked).

docs/superpowers/specs/2026-06-09-timestamp-tz-design.md

@@ -0,0 +1,104 @@
+# Instance-Timezone Timestamp Formatter — Design
+
+**Date:** 2026-06-09
+**Status:** Approved (brainstorming) — ready for implementation planning.
+**Issue:** #42 (render UTC timestamps in the instance timezone via Intl — now that a display exists).
+
+## Context
+
+#42 was filed conditionally ("wire up the `default_timezone` formatter when the first timestamp display
+lands"). That condition is now met: the objects-table **"Updated" column** (`updated_at`, a UTC timestamp)
+is rendered — and it's already timezone+locale-aware, but via an **inline** `Intl.DateTimeFormat` in
+`objects-table.tsx` (`dateStyle: "medium"`, `timeZone: default_timezone`) that:
+- is **not** the shared `formatTimestamp` helper the issue asks for,
+- shows **date only** (no time-of-day), and
+- has **no invalid-IANA guard** — a misconfigured `default_timezone` would make `Intl.DateTimeFormat`
+  throw a `RangeError` and crash the table.
+
+`recording_date` (object-detail) is a plain `DATE` formatted by `lib/format-date.ts` (no timezone) — correct
+and out of scope. There are no other UTC-timestamp displays. `default_timezone` is exposed via
+`useConfig().default_timezone` (IANA name; default `"Europe/Stockholm"`).
+
+This is a display-only change: storage/transmission stay UTC. No backend change, no new dependency, no new
+i18n keys.
+
+## Components
+
+### `lib/format-timestamp.ts` (new)
+Mirrors `lib/format-date.ts`'s shape (same null/invalid-string edge handling), for UTC **timestamps**:
+```ts
+/** Formats a UTC ISO timestamp for display in the instance timezone + active locale.
+ *  Storage/transmission stay UTC — this is display-only. Falls back to UTC formatting on an
+ *  invalid IANA zone (a misconfigured instance) rather than throwing. */
+export function formatTimestamp(value: unknown, timeZone: string, locale: string): string {
+  if (typeof value !== "string") return value == null ? "—" : String(value);
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const opts = { dateStyle: "medium", timeStyle: "short" } as const;
+  try {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone }).format(date);
+  } catch {
+    return new Intl.DateTimeFormat(locale, { ...opts, timeZone: "UTC" }).format(date);
+  }
+}
+```
+- **date + short time** (the chosen display) in `timeZone` + `locale`.
+- **Invalid-IANA guard:** `new Intl.DateTimeFormat(locale, { timeZone })` throws `RangeError` for a bad
+  zone → the `catch` re-formats with `timeZone: "UTC"` (no crash).
+- Edge handling matches `format-date.ts`: non-string `null` → `"—"`; other non-strings → `String(value)`;
+  an unparseable string → returned unchanged.
+
+### `objects/objects-table.tsx` (modify)
+Remove the inline `const dateFmt = new Intl.DateTimeFormat(...)` + `formatUpdated` helper. Add
+`import { formatTimestamp } from "../lib/format-timestamp";`. Keep `default_timezone` (from `useConfig()`)
+and `i18n.language`. Render the Updated cell as:
+```tsx
+<td className="px-3 py-2 text-muted-foreground">
+  {formatTimestamp(object.updated_at, default_timezone, i18n.language)}
+</td>
+```
+The column changes from date-only to **date + short time**. (The helper constructs an `Intl.DateTimeFormat`
+per cell rather than once-per-render; negligible for the ≤200-row page — kept simple over re-memoizing.)
+
+## Data flow / behaviour
+`updated_at` (UTC ISO from the API) → `formatTimestamp(value, default_timezone, i18n.language)` → a
+locale-formatted date+time in the instance zone. Identical data; only the display string changes (now
+includes the time and is crash-guarded).
+
+## Error handling / edges
+- Invalid `default_timezone` → UTC-formatted output (guarded), never a thrown render.
+- `null`/non-string `updated_at` → `"—"`/`String(value)` (defensive; in practice `updated_at` is always a
+  string).
+- Unparseable date string → returned verbatim (matches `format-date.ts`).
+- Locale comes from `i18n.language` (full-ICU Node in CI / browsers) — deterministic per locale.
+
+## Testing
+- **`lib/format-timestamp.test.ts`** (new):
+  - valid: `formatTimestamp("2026-06-08T12:30:00Z", "UTC", "en")` contains `"2026"` and `"12:30"` (date +
+    time rendered).
+  - **timezone applied (day-shift):** `formatTimestamp("2026-06-08T02:00:00Z", "America/New_York", "en")`
+    shows `Jun 7` (02:00 UTC = 22:00 prev-day EDT), distinct from the same instant in `"UTC"` (`Jun 8`) —
+    proves the zone is honored.
+  - **invalid IANA:** `formatTimestamp("2026-06-08T12:30:00Z", "Not/AZone", "en")` does **not** throw and
+    returns a non-empty string containing `"2026"` (UTC fallback).
+  - `null` → `"—"`; `"not-a-date"` → `"not-a-date"`.
+- **`objects-table.test.tsx`:** the suite does not assert the rendered Updated value, so it stays green;
+  if any assertion is added/affected, assert the new date+time output loosely (don't pin the exact locale
+  string).
+- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new
+  i18n keys; no codename; en/sv parity unaffected.
+
+## Acceptance criteria
+1. `lib/format-timestamp.ts` exports `formatTimestamp(value, timeZone, locale)` — date+time in the given
+   zone/locale, with a UTC fallback on an invalid IANA zone and the null/invalid edge handling; unit-tested
+   (incl. the day-shift + invalid-zone cases).
+2. `objects-table.tsx` renders `updated_at` via `formatTimestamp(object.updated_at, default_timezone,
+   i18n.language)`; the inline `dateFmt`/`formatUpdated` are removed; the column shows date + short time.
+3. All existing tests pass (objects-table green); `typecheck`/`lint`/`build`/`check:colors` green;
+   `check:size` reported; no new dependency; no new i18n keys; no codename.
+
+## Out of scope → follow-ups
+- Additional timestamp displays (object-detail `created_at`/`updated_at`, an audit-history view) — none
+  exist yet; route them through `formatTimestamp` when they land.
+- Server-side timestamp formatting for the PDF export (#39) — needs a Rust tz library, separate.
+- `recording_date` / `format-date.ts` (plain DATE, no timezone) — unchanged.

web/GUARDRAILS.md

@@ -0,0 +1,146 @@
+# Frontend Guardrails & Test Harness
+
+The web frontend has a handful of CI guardrails and test-harness quirks that trip
+new work in the same predictable ways. This file consolidates them so the lessons
+are enforced up front instead of rediscovered one failing run at a time.
+
+The canonical gate is `.gitea/workflows/ci.yaml`, which runs (in order) from `web/`:
+
+```
+pnpm typecheck    # tsc -b --noEmit
+pnpm lint         # eslint .
+pnpm test         # vitest run  (jsdom + storybook projects)
+pnpm build        # tsc -b && vite build
+pnpm check:size   # scripts/check-bundle-size.mjs
+pnpm check:colors # scripts/check-no-raw-colors.mjs
+```
+
+Run the whole gate locally before pushing. The two `check:*` scripts only have
+meaningful output **after** `pnpm build` has produced `dist/`.
+
+---
+
+## Guardrail: bundle size (`check:size`)
+
+`scripts/check-bundle-size.mjs` fails if the **largest single JS chunk** exceeds
+**250 KB gzipped**. It measures every file in `dist/assets/*.js` and reports the
+biggest.
+
+- The budget is on the *largest chunk*, not the total. Code-split chunks are
+  measured independently — a heavy primitive that lands in its own lazy chunk
+  costs that chunk's size, not the entry bundle's. Past additions (Base UI
+  Select ≈12.6 KB gz, the Drawer ≈12.7 KB gz) paid their cost in a separate
+  `*.js` chunk and left the main `index` chunk untouched.
+- **When a UI primitive pushes the main chunk over budget**, extract the
+  component that uses it into its own module and `React.lazy()` it (the codebase
+  already lazy-loads `ObjectEditForm` / `FieldsPage`). This is the standard fix,
+  especially for anything rendered conditionally (e.g. only on a narrow
+  viewport) — the wide path then never pays for it.
+- Adding one more Base UI primitive to the always-loaded app shell costs
+  single-digit KB gz; there is comfortable headroom under 250.
+
+## Guardrail: design tokens / no raw colors (`check:colors`)
+
+`scripts/check-no-raw-colors.mjs` fails if any raw Tailwind palette utility
+appears **outside `src/components/ui/`**. The regex matches
+`{text|bg|border|ring|fill|stroke|from|to|via|decoration|outline|divide|placeholder}-{palette}-{50..950}`
+(palette = `neutral|gray|slate|…|rose`).
+
+- In app / shell code use **token classes only**: `bg-accent`, `text-foreground`,
+  `text-muted-foreground`, `bg-primary`, etc. Numerics like `gap-2` and token
+  names are never flagged — only `palette-shade` pairs are.
+- `src/components/ui/` (the vendored kit) is **exempt** and may use raw colors.
+- New status/semantic colors must be exposed as tokens, not raw palette classes.
+  In Tailwind v4 a token utility (`bg-success`, `text-warning`) only *exists* if
+  the token is declared in `@theme inline` as `--color-<name>: var(--<name>)` —
+  defining the raw CSS var in `:root` alone is not enough. Opacity modifiers on
+  tokens (`bg-primary/10`) do resolve.
+- For a sweeping token migration, add/enable the `check:colors` guard **last**
+  (after the file-by-file swap) — it can only pass once the whole migration is
+  complete.
+
+> **Contrast caveat:** do not trust a WCAG contrast ratio quoted in a plan or a
+> prior review — recompute it (OKLCH → linear sRGB → relative luminance) before
+> changing a color token. A near-black foreground on a *lighter* colored
+> background has *higher* contrast; a single wrong measurement has propagated
+> through spec + plan more than once here.
+
+---
+
+## Test harness: two vitest projects
+
+`vite.config.ts` defines **two** vitest projects, and a test file is claimed by
+exactly one:
+
+| Project     | Environment          | Claims                  |
+|-------------|----------------------|-------------------------|
+| (default)   | jsdom + `src/test/setup.ts` | `*.test.ts(x)`   |
+| `storybook` | chromium (Playwright, via `storybookTest`) | `*.stories.tsx` |
+
+- Component tests render through **`renderApp`** (`src/test/render.tsx`), which
+  wraps `QueryClientProvider` + a `createMemoryRouter` and **side-imports
+  `../i18n`** — so i18n is auto-initialized and you do **not** add extra
+  providers. Pass an initial route via `renderApp(ui, { route: "/x" })`.
+- Story-as-test runs the story's `play()` fn in a real browser:
+  `pnpm vitest run <file.stories.tsx>`. A canonical pass reports
+  "1 Test File, 1 Test passed". A first-cold-cache storybook run can emit a
+  transient `Cannot read properties of null (reading useEffect)` from
+  `QueryClientProvider` — it does not reproduce once the cache warms; re-run to
+  confirm green.
+
+## Test harness: MSW handlers (`onUnhandledRequest: "error"`)
+
+`src/test/setup.ts` starts the MSW server with **`onUnhandledRequest: "error"`**
+and `resetHandlers()` after each test. Shared handlers live in
+`src/test/handlers.ts`.
+
+- Any request with **no matching handler fails the test** with
+  `[MSW] Cannot bypass a request when using the error strategy`. If a hook hits
+  an endpoint the shared handlers don't cover (e.g. `PATCH /…/terms/:id` for an
+  update-mutation success test), **add a per-test override** —
+  `server.use(http.patch(url, () => new HttpResponse(null, { status: 204 })))` —
+  rather than editing the shared `handlers.ts`. The `afterEach` reset keeps the
+  override test-local.
+
+## Test harness: React Testing Library accessible-name collisions
+
+`getByRole('textbox', { name: /key/i })` throws on **multiple matches** when two
+inputs resolve to the same accessible name — e.g. a create-form input
+(`<Label htmlFor>`) and a rename input (`aria-label`) both named "Key" once a
+rename form is open.
+
+- Use `getAllByRole(...)` and select by position (the rename form renders after
+  the create form in the DOM, so take the last), or give the inputs distinct
+  accessible names.
+
+## Test harness: Storybook routers and portals
+
+- `.storybook/preview.tsx` already wraps every story in
+  `QueryClientProvider` + `ConfigProvider` + `MemoryRouter`. **Do not add a
+  `MemoryRouter` decorator** inside a story — nesting throws
+  *"You cannot render a `<Router>` inside another `<Router>`"*. To exercise
+  URL-dependent state, drive it through `play()` interactions (click a header
+  link) rather than seeding `initialEntries` via a nested router.
+- Portalled content (Base UI Popup/Portal, toasts) renders outside the canvas.
+  Assert it with `within(document.body).findByText(...)`, and open triggers from
+  the `play` context with `userEvent.click(canvas.getByRole('button', { name: 'Open' }))`.
+
+---
+
+## Code-style split (convention, not lint)
+
+ESLint passes either way, so this is enforced by review, not tooling — **check a
+neighbor file before writing**:
+
+- `src/components/ui/` (vendored shadcn / base-nova kit): **no semicolons**,
+  single-quote base style.
+- The rest of `src/` (app source, hooks, pages): **double-quote + semicolons**.
+- `*.stories.tsx`: single-quote, no semicolons.
+
+A component placed in `ui/` must match the no-semicolon kit style even though the
+rest of the app uses semicolons.
+
+> Note: `react-refresh/only-export-components` is configured as `warn`
+> (`allowConstantExport: true`), so exporting a component **and** a helper from
+> one `.tsx` (e.g. `button.tsx` exporting `buttonVariants`) is an accepted
+> tradeoff when a plan needs the helper colocated — `pnpm lint` still exits 0.

web/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#ffffff" />
     <title>Collection</title>
     <script>
       try {
@@ -12,6 +14,9 @@
           (t === "system" &&
             window.matchMedia("(prefers-color-scheme: dark)").matches);
         document.documentElement.classList.toggle("dark", dark);
+        // Keep in sync with THEME_COLORS in src/theme/theme.ts.
+        var meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute("content", dark ? "#0a0a0a" : "#ffffff");
       } catch (e) {}
     </script>
   </head>

web/package.json

@@ -51,8 +51,8 @@
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.3",
     "@vitejs/plugin-react": "^4.5.2",
-    "@vitest/browser": "3.2.6",
+    "@vitest/browser-playwright": "^4.1.8",
-    "@vitest/coverage-v8": "3.2.6",
+    "@vitest/coverage-v8": "4.1.8",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
@@ -69,7 +69,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.60.1",
     "vite": "^6.3.5",
-    "vitest": "^3.2.2"
+    "vitest": "^4.1.8"
   },
   "msw": {
     "workerDirectory": [

web/scripts/check-no-raw-colors.mjs

@@ -5,7 +5,7 @@ import { join, relative } from "node:path";
 const root = "src";
 const excludeDir = join("src", "components", "ui");
 const RAW_COLOR =
-  /(?:text|bg|border|ring|fill|stroke|from|to|via|decoration|outline|divide|placeholder)-(?:neutral|gray|slate|zinc|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)\b/;
+  /(?:text|bg|border|ring|fill|stroke|from|to|via|decoration|outline|divide|placeholder)-(?:(?:neutral|gray|slate|zinc|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)|white|black)\b/;
 
 function walk(dir) {
   const files = [];

web/src/api/auth-redirect.test.ts

@@ -0,0 +1,46 @@
+import { afterEach, expect, test, vi } from "vitest";
+
+import { redirectToLogin, setNavigate } from "./auth-redirect";
+
+function stubLocation(pathname: string, search = "") {
+  const assign = vi.fn();
+  vi.stubGlobal("location", { pathname, search, assign });
+  return assign;
+}
+
+afterEach(() => {
+  setNavigate(null);
+  vi.unstubAllGlobals();
+});
+
+test("uses the registered navigate to soft-redirect with reason + from", () => {
+  const assign = stubLocation("/objects/abc", "?x=1");
+  const navigate = vi.fn();
+  setNavigate(navigate);
+
+  redirectToLogin();
+
+  expect(navigate).toHaveBeenCalledWith(
+    "/login?reason=expired&from=%2Fobjects%2Fabc%3Fx%3D1",
+    { replace: true },
+  );
+  expect(assign).not.toHaveBeenCalled();
+});
+
+test("falls back to a hard navigation when no navigate is registered", () => {
+  const assign = stubLocation("/objects/abc");
+
+  redirectToLogin();
+
+  expect(assign).toHaveBeenCalledWith("/login?reason=expired&from=%2Fobjects%2Fabc");
+});
+
+test("does nothing when already on /login", () => {
+  stubLocation("/login");
+  const navigate = vi.fn();
+  setNavigate(navigate);
+
+  redirectToLogin();
+
+  expect(navigate).not.toHaveBeenCalled();
+});

web/src/api/auth-redirect.ts

@@ -1,7 +1,23 @@
-/** Hard-navigate to login. Isolated so it can be spied/mocked in tests and swapped
+type NavigateFn = (to: string, opts?: { replace?: boolean }) => void;
- *  for a router navigation if needed. */
+
+let navigateFn: NavigateFn | null = null;
+
+/** Register (or clear) the router's navigate fn. Called by NavigationBridge. */
+export function setNavigate(fn: NavigateFn | null): void {
+  navigateFn = fn;
+}
+
+/** Soft-redirect to login on a 401, preserving SPA state and the return path.
+ *  Falls back to a hard navigation when no router navigate is registered yet
+ *  (e.g. a 401 during the very first load). No-op when already on /login. */
 export function redirectToLogin(): void {
-  if (window.location.pathname !== "/login") {
+  const { pathname, search } = window.location;
-    window.location.assign("/login");
+  if (pathname === "/login") return;
+  const from = encodeURIComponent(pathname + search);
+  const target = `/login?reason=expired&from=${from}`;
+  if (navigateFn) {
+    navigateFn(target, { replace: true });
+  } else {
+    window.location.assign(target);
   }
 }

web/src/api/error-message.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from "vitest";
+
+import { errorMessageKey } from "./error-message";
+import { HttpError, InUseError } from "./queries";
+
+test("maps HTTP statuses to specific keys", () => {
+  expect(errorMessageKey(new HttpError(403))).toEqual({ key: "errors.forbidden" });
+  expect(errorMessageKey(new HttpError(404))).toEqual({ key: "errors.notFound" });
+  expect(errorMessageKey(new HttpError(409))).toEqual({ key: "errors.conflict" });
+  expect(errorMessageKey(new HttpError(422))).toEqual({ key: "errors.validation" });
+  expect(errorMessageKey(new HttpError(500))).toEqual({ key: "errors.server" });
+  expect(errorMessageKey(new HttpError(502))).toEqual({ key: "errors.server" });
+});
+
+test("an unmapped status falls back to the generic key", () => {
+  expect(errorMessageKey(new HttpError(418))).toEqual({ key: "toast.error" });
+});
+
+test("InUseError carries the count", () => {
+  expect(errorMessageKey(new InUseError(3))).toEqual({ key: "actions.inUse", opts: { count: 3 } });
+});
+
+test("a bare Error or unknown maps to the generic key", () => {
+  expect(errorMessageKey(new Error("boom"))).toEqual({ key: "toast.error" });
+  expect(errorMessageKey(null)).toEqual({ key: "toast.error" });
+});

web/src/api/error-message.ts

@@ -0,0 +1,18 @@
+import { HttpError, InUseError } from "./errors";
+
+/** Maps a caught mutation error to an i18n key (+ interpolation opts). The single
+ *  source of truth shared by the global toast fallback and every inline display. */
+export function errorMessageKey(error: unknown): { key: string; opts?: Record<string, unknown> } {
+  if (error instanceof InUseError) return { key: "actions.inUse", opts: { count: error.count } };
+  if (error instanceof HttpError) return { key: statusKey(error.status) };
+  return { key: "toast.error" };
+}
+
+function statusKey(status: number): string {
+  if (status === 403) return "errors.forbidden";
+  if (status === 404) return "errors.notFound";
+  if (status === 409) return "errors.conflict";
+  if (status === 422) return "errors.validation";
+  if (status >= 500) return "errors.server";
+  return "toast.error";
+}

web/src/api/errors.ts

@@ -0,0 +1,28 @@
+export class HttpError extends Error {
+  constructor(public readonly status: number) {
+    super(`HTTP ${status}`);
+    this.name = "HttpError";
+  }
+}
+
+export class FieldRejection extends Error {
+  constructor(public readonly field: string, public readonly code: string) {
+    super(`field rejected: ${field}`);
+    this.name = "FieldRejection";
+  }
+}
+
+export class InUseError extends Error {
+  constructor(public readonly count: number) {
+    super(`in use: ${count}`);
+    this.name = "InUseError";
+  }
+}
+
+/** Error carrying the HTTP status so callers can branch 422-gate vs 409-illegal. */
+export class VisibilityError extends Error {
+  constructor(public status: number) {
+    super(`visibility change failed (${status})`);
+    this.name = "VisibilityError";
+  }
+}

web/src/api/mutation-feedback.test.tsx

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from "vitest";
 import { renderHook, waitFor, within } from "@testing-library/react";
-import { QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider, useMutation } from "@tanstack/react-query";
 import { http, HttpResponse } from "msw";
 import type { ReactNode } from "react";
 
@@ -8,7 +8,7 @@ import i18n from "../i18n";
 import { ToastRegion } from "../components/ui/toast";
 import { server } from "../test/server";
 import { makeQueryClient } from "./query-client";
-import { useDeleteVocabulary, useUpdateTerm } from "./queries";
+import { HttpError, useDeleteVocabulary, useUpdateTerm } from "./queries";
 
 // The toast manager is a module-scope singleton shared across renders, so each
 // test mounts a fresh region and tears it down afterwards to keep toasts from
@@ -59,30 +59,22 @@ describe("mutation feedback toasts", () => {
     unmount();
   });
 
-  test("a non-suppressed mutation failing shows the catch-all error toast", async () => {
+  test("a non-suppressed mutation failing shows the status-mapped error toast", async () => {
-    server.use(
+    const { result, unmount } = renderHook(
-      http.patch(
+      () =>
-        "/api/admin/vocabularies/:id/terms/:term_id",
+        useMutation({
-        () => new HttpResponse(null, { status: 500 }),
+          mutationFn: async () => {
-      ),
+            throw new HttpError(500);
+          },
+        }),
+      { wrapper: makeWrapper() },
     );
 
-    const { result, unmount } = renderHook(() => useUpdateTerm(), {
+    await expect(result.current.mutateAsync()).rejects.toThrow();
-      wrapper: makeWrapper(),
-    });
-
-    await expect(
-      result.current.mutateAsync({
-        vocabularyId: "v1",
-        termId: "t1",
-        external_uri: null,
-        labels: [{ lang: "en", label: "Bronze" }],
-      }),
-    ).rejects.toThrow();
 
     await waitFor(() => {
       expect(
-        within(document.body).getByText(i18n.t("toast.error")),
+        within(document.body).getByText(i18n.t("errors.server")),
       ).toBeInTheDocument();
     });
 

web/src/api/queries.ts

@@ -1,584 +0,0 @@
-import { keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-
-import { api } from "./client";
-import type { components } from "./schema";
-
-export class HttpError extends Error {
-  constructor(public readonly status: number) {
-    super(`HTTP ${status}`);
-    this.name = "HttpError";
-  }
-}
-
-export class FieldRejection extends Error {
-  constructor(public readonly field: string, public readonly code: string) {
-    super(`field rejected: ${field}`);
-    this.name = "FieldRejection";
-  }
-}
-
-export class InUseError extends Error {
-  constructor(public readonly count: number) {
-    super(`in use: ${count}`);
-    this.name = "InUseError";
-  }
-}
-
-type UserView = components["schemas"]["UserView"];
-type LoginRequest = components["schemas"]["LoginRequest"];
-
-export function useMe() {
-  return useQuery({
-    queryKey: ["me"],
-    queryFn: async (): Promise<UserView | null> => {
-      const { data, response } = await api.GET("/api/admin/me");
-
-      if (response.status === 401) return null;
-
-      if (!data) throw new Error("failed to load session");
-
-      return data;
-    },
-    retry: false,
-  });
-}
-
-export type ObjectListParams = {
-  limit: number;
-  offset: number;
-  sort?: string;
-  order?: "asc" | "desc";
-  visibility?: string;
-  q?: string;
-};
-
-export function useObjectsPage(params: ObjectListParams) {
-  return useQuery({
-    queryKey: ["objects", params],
-    placeholderData: keepPreviousData,
-    queryFn: async () => {
-      const { data, error } = await api.GET("/api/admin/objects", {
-        params: {
-          query: {
-            limit: params.limit,
-            offset: params.offset,
-            sort: params.sort,
-            order: params.order,
-            visibility: params.visibility,
-            q: params.q,
-          },
-        },
-      });
-
-      if (error || !data) throw new Error("failed to load objects");
-
-      return data;
-    },
-  });
-}
-
-export function useObject(id: string) {
-  return useQuery({
-    queryKey: ["object", id],
-    queryFn: async () => {
-      const { data, response } = await api.GET("/api/admin/objects/{id}", {
-        params: { path: { id } },
-      });
-
-      if (response.status === 404) return null;
-
-      if (!data) throw new Error("failed to load object");
-
-      return data;
-    },
-    // A 404 resolves to null rather than erroring, so don't retry it.
-    retry: false,
-  });
-}
-
-export function useFieldDefinitions() {
-  return useQuery({
-    queryKey: ["field-definitions"],
-    queryFn: async () => {
-      const { data, error } = await api.GET("/api/admin/field-definitions");
-
-      if (error || !data) throw new Error("failed to load field definitions");
-
-      return data;
-    },
-    staleTime: 5 * 60 * 1000,
-  });
-}
-
-export function useLogin() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (body: LoginRequest) => {
-      const { response } = await api.POST("/api/admin/login", { body });
-
-      if (response.status !== 204) {
-        throw new Error(response.status === 401 ? "invalid" : "network");
-      }
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["me"] }),
-    meta: { suppressErrorToast: true },
-  });
-}
-
-export function useLogout() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async () => {
-      await api.POST("/api/admin/logout");
-    },
-    onSuccess: () => qc.setQueryData(["me"], null),
-  });
-}
-
-type ObjectCreateRequest = components["schemas"]["ObjectCreateRequest"];
-type ObjectUpdateRequest = components["schemas"]["ObjectUpdateRequest"];
-
-export function useTerms(vocabularyId: string | null | undefined) {
-  return useQuery({
-    queryKey: ["terms", vocabularyId],
-    enabled: !!vocabularyId,
-    queryFn: async () => {
-      const { data, error } = await api.GET("/api/admin/vocabularies/{id}/terms", {
-        params: { path: { id: vocabularyId! } },
-      });
-
-      if (error || !data) throw new Error("failed to load terms");
-
-      return data;
-    },
-    staleTime: 5 * 60 * 1000,
-  });
-}
-
-export function useAuthorities(kind: string | null | undefined) {
-  return useQuery({
-    queryKey: ["authorities", kind],
-    enabled: !!kind,
-    queryFn: async () => {
-      const { data, error } = await api.GET("/api/admin/authorities", {
-        params: { query: { kind: kind! } },
-      });
-
-      if (error || !data) throw new Error("failed to load authorities");
-
-      return data;
-    },
-    staleTime: 5 * 60 * 1000,
-  });
-}
-
-export function useCreateObject() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (body: ObjectCreateRequest) => {
-      const { data, error } = await api.POST("/api/admin/objects", { body });
-
-      if (error || !data) throw new Error("create failed");
-
-      return data;
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }),
-    meta: { successMessage: "toast.created", suppressErrorToast: true },
-  });
-}
-
-export function useUpdateObject() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id, body }: { id: string; body: ObjectUpdateRequest }) => {
-      const { response } = await api.PUT("/api/admin/objects/{id}", {
-        params: { path: { id } },
-        body,
-      });
-
-      if (response.status !== 204) throw new Error("update failed");
-    },
-    onSuccess: (_d, { id }) => {
-      void qc.invalidateQueries({ queryKey: ["objects"] });
-      void qc.invalidateQueries({ queryKey: ["object", id] });
-    },
-    meta: { successMessage: "toast.saved", suppressErrorToast: true },
-  });
-}
-
-export function useSetFields() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id, fields }: { id: string; fields: Record<string, unknown> }) => {
-      const { response, error } = await api.PUT("/api/admin/objects/{id}/fields", {
-        params: { path: { id } },
-        body: fields as Record<string, never>,
-      });
-
-      if (response.status === 204) return;
-
-      if (response.status === 422 && error && typeof error === "object" && "field" in error) {
-        const detail = error as { field: string; code: string };
-        throw new FieldRejection(detail.field, detail.code);
-      }
-
-      throw new Error("set fields failed");
-    },
-    onSuccess: (_d, { id }) => {
-      void qc.invalidateQueries({ queryKey: ["object", id] });
-    },
-    meta: { suppressErrorToast: true },
-  });
-}
-
-export function useDeleteObject() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (id: string) => {
-      const { response } = await api.DELETE("/api/admin/objects/{id}", {
-        params: { path: { id } },
-      });
-
-      if (response.status !== 204) throw new Error("delete failed");
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }),
-    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
-  });
-}
-
-type NewVocabularyRequest = components["schemas"]["NewVocabularyRequest"];
-type LabelInput = components["schemas"]["LabelInput"];
-
-export function useVocabularies() {
-  return useQuery({
-    queryKey: ["vocabularies"],
-    queryFn: async () => {
-      const { data, error } = await api.GET("/api/admin/vocabularies");
-
-      if (error || !data) throw new Error("failed to load vocabularies");
-
-      return data;
-    },
-    staleTime: 5 * 60 * 1000,
-  });
-}
-
-export function useCreateVocabulary() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (body: NewVocabularyRequest) => {
-      const { data, error } = await api.POST("/api/admin/vocabularies", { body });
-
-      if (error || !data) throw new Error("create vocabulary failed");
-
-      return data;
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }),
-    meta: { successMessage: "toast.created", suppressErrorToast: true },
-  });
-}
-
-export function useAddTerm() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      vocabularyId,
-      external_uri,
-      labels,
-    }: {
-      vocabularyId: string;
-      external_uri: string | null;
-      labels: LabelInput[];
-    }) => {
-      const { response } = await api.POST("/api/admin/vocabularies/{id}/terms", {
-        params: { path: { id: vocabularyId } },
-        body: { external_uri, labels },
-      });
-
-      if (response.status !== 201) throw new Error("add term failed");
-    },
-    onSuccess: (_result, { vocabularyId }) =>
-      qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }),
-    meta: { successMessage: "toast.created", suppressErrorToast: true },
-  });
-}
-
-export function useCreateAuthority() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      kind,
-      external_uri,
-      labels,
-    }: {
-      kind: string;
-      external_uri: string | null;
-      labels: LabelInput[];
-    }) => {
-      const { response } = await api.POST("/api/admin/authorities", {
-        body: { kind, external_uri, labels },
-      });
-
-      if (response.status !== 201) throw new Error("create authority failed");
-    },
-    onSuccess: (_result, { kind }) =>
-      qc.invalidateQueries({ queryKey: ["authorities", kind] }),
-    meta: { successMessage: "toast.created", suppressErrorToast: true },
-  });
-}
-
-const SEARCH_PAGE = 20;
-
-export function useSearch(q: string, visibility: string | null) {
-  const term = q.trim();
-
-  return useInfiniteQuery({
-    queryKey: ["search", term, visibility],
-    enabled: term.length > 0,
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }) => {
-      const { data, error, response } = await api.GET("/api/admin/search", {
-        params: {
-          query: {
-            q: term,
-            ...(visibility ? { visibility } : {}),
-            offset: pageParam,
-            limit: SEARCH_PAGE,
-          },
-        },
-      });
-
-      if (error || !data) throw new HttpError(response.status);
-
-      return data;
-    },
-    placeholderData: keepPreviousData,
-    getNextPageParam: (lastPage, allPages) => {
-      const loaded = allPages.reduce((n, page) => n + page.hits.length, 0);
-
-      return loaded < lastPage.estimated_total ? loaded : undefined;
-    },
-  });
-}
-
-type NewFieldDefinitionRequest = components["schemas"]["NewFieldDefinitionRequest"];
-
-export function useCreateFieldDefinition() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (body: NewFieldDefinitionRequest) => {
-      const { data, response } = await api.POST("/api/admin/field-definitions", { body });
-
-      if (response.status !== 201 || !data) throw new Error("failed to create field definition");
-
-      return data;
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }),
-    meta: { successMessage: "toast.created", suppressErrorToast: true },
-  });
-}
-
-type Visibility = "draft" | "internal" | "public";
-
-/** Error carrying the HTTP status so callers can branch 422-gate vs 409-illegal. */
-export class VisibilityError extends Error {
-  constructor(public status: number) {
-    super(`visibility change failed (${status})`);
-    this.name = "VisibilityError";
-  }
-}
-
-export function useSetVisibility() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id, visibility }: { id: string; visibility: Visibility }) => {
-      const { response } = await api.POST("/api/admin/objects/{id}/visibility", {
-        params: { path: { id } },
-        body: { visibility },
-      });
-
-      if (response.status !== 204) throw new VisibilityError(response.status);
-    },
-    onSuccess: (_result, { id }) => {
-      void qc.invalidateQueries({ queryKey: ["object", id] });
-      void qc.invalidateQueries({ queryKey: ["objects"] });
-    },
-    meta: { successMessage: "toast.published", suppressErrorToast: true },
-  });
-}
-
-export function useUpdateTerm() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      vocabularyId,
-      termId,
-      external_uri,
-      labels,
-    }: {
-      vocabularyId: string;
-      termId: string;
-      external_uri: string | null;
-      labels: LabelInput[];
-    }) => {
-      const { response } = await api.PATCH("/api/admin/vocabularies/{id}/terms/{term_id}", {
-        params: { path: { id: vocabularyId, term_id: termId } },
-        body: { external_uri, labels },
-      });
-
-      if (response.status !== 204) throw new Error("update term failed");
-    },
-    onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }),
-    meta: { successMessage: "toast.saved" },
-  });
-}
-
-export function useDeleteTerm() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ vocabularyId, termId }: { vocabularyId: string; termId: string }) => {
-      const { error, response } = await api.DELETE("/api/admin/vocabularies/{id}/terms/{term_id}", {
-        params: { path: { id: vocabularyId, term_id: termId } },
-      });
-
-      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
-      if (response.status !== 204) throw new Error("delete term failed");
-    },
-    onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }),
-    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
-  });
-}
-
-export function useRenameVocabulary() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id, key }: { id: string; key: string }) => {
-      const { response } = await api.PATCH("/api/admin/vocabularies/{id}", {
-        params: { path: { id } },
-        body: { key },
-      });
-
-      if (response.status !== 204) throw new Error("rename failed");
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }),
-    meta: { successMessage: "toast.renamed", suppressErrorToast: true },
-  });
-}
-
-export function useDeleteVocabulary() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (id: string) => {
-      const { error, response } = await api.DELETE("/api/admin/vocabularies/{id}", {
-        params: { path: { id } },
-      });
-
-      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
-      if (response.status !== 204) throw new Error("delete vocabulary failed");
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }),
-    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
-  });
-}
-
-export function useUpdateAuthority() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      id,
-      external_uri,
-      labels,
-    }: {
-      id: string;
-      kind: string;
-      external_uri: string | null;
-      labels: LabelInput[];
-    }) => {
-      const { response } = await api.PATCH("/api/admin/authorities/{id}", {
-        params: { path: { id } },
-        body: { external_uri, labels },
-      });
-
-      if (response.status !== 204) throw new Error("update authority failed");
-    },
-    onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: ["authorities", kind] }),
-    meta: { successMessage: "toast.saved" },
-  });
-}
-
-export function useDeleteAuthority() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({ id }: { id: string; kind: string }) => {
-      const { error, response } = await api.DELETE("/api/admin/authorities/{id}", {
-        params: { path: { id } },
-      });
-
-      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
-      if (response.status !== 204) throw new Error("delete authority failed");
-    },
-    onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: ["authorities", kind] }),
-    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
-  });
-}
-
-export function useUpdateFieldDefinition() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      key,
-      required,
-      group,
-      labels,
-    }: {
-      key: string;
-      required: boolean;
-      group: string | null;
-      labels: LabelInput[];
-    }) => {
-      const { response } = await api.PATCH("/api/admin/field-definitions/{key}", {
-        params: { path: { key } },
-        body: { required, group, labels },
-      });
-
-      if (response.status !== 204) throw new Error("update field failed");
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }),
-    meta: { successMessage: "toast.saved", suppressErrorToast: true },
-  });
-}
-
-export function useDeleteFieldDefinition() {
-  const qc = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (key: string) => {
-      const { error, response } = await api.DELETE("/api/admin/field-definitions/{key}", {
-        params: { path: { key } },
-      });
-
-      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
-      if (response.status !== 204) throw new Error("delete field failed");
-    },
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }),
-    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
-  });
-}

web/src/api/queries/auth.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { keys } from "../query-keys";
+
+type UserView = components["schemas"]["UserView"];
+type LoginRequest = components["schemas"]["LoginRequest"];
+
+export function useMe() {
+  return useQuery({
+    queryKey: keys.me(),
+    queryFn: async (): Promise<UserView | null> => {
+      const { data, response } = await api.GET("/api/admin/me");
+
+      if (response.status === 401) return null;
+
+      if (!data) throw new Error("failed to load session");
+
+      return data;
+    },
+    retry: false,
+  });
+}
+
+export function useLogin() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: LoginRequest) => {
+      const { response } = await api.POST("/api/admin/login", { body });
+
+      if (response.status !== 204) {
+        throw new Error(response.status === 401 ? "invalid" : "network");
+      }
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.me() }),
+    meta: { suppressErrorToast: true },
+  });
+}
+
+export function useLogout() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      await api.POST("/api/admin/logout");
+    },
+    onSuccess: () => qc.setQueryData(keys.me(), null),
+  });
+}

web/src/api/queries/authorities.ts

@@ -0,0 +1,93 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type LabelInput = components["schemas"]["LabelInput"];
+
+export function useAuthorities(kind: string | null | undefined) {
+  return useQuery({
+    queryKey: keys.authorities(kind),
+    enabled: !!kind,
+    queryFn: async () => {
+      const { data, error } = await api.GET("/api/admin/authorities", {
+        params: { query: { kind: kind! } },
+      });
+
+      if (error || !data) throw new Error("failed to load authorities");
+
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useCreateAuthority() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      kind,
+      external_uri,
+      labels,
+    }: {
+      kind: string;
+      external_uri: string | null;
+      labels: LabelInput[];
+    }) => {
+      const { response } = await api.POST("/api/admin/authorities", {
+        body: { kind, external_uri, labels },
+      });
+
+      if (response.status !== 201) throw new HttpError(response.status);
+    },
+    onSuccess: (_result, { kind }) =>
+      qc.invalidateQueries({ queryKey: keys.authorities(kind) }),
+    meta: { successMessage: "toast.created", suppressErrorToast: true },
+  });
+}
+
+export function useUpdateAuthority() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      id,
+      external_uri,
+      labels,
+    }: {
+      id: string;
+      kind: string;
+      external_uri: string | null;
+      labels: LabelInput[];
+    }) => {
+      const { response } = await api.PATCH("/api/admin/authorities/{id}", {
+        params: { path: { id } },
+        body: { external_uri, labels },
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: keys.authorities(kind) }),
+    meta: { successMessage: "toast.saved", suppressErrorToast: true },
+  });
+}
+
+export function useDeleteAuthority() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id }: { id: string; kind: string }) => {
+      const { error, response } = await api.DELETE("/api/admin/authorities/{id}", {
+        params: { path: { id } },
+      });
+
+      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: keys.authorities(kind) }),
+    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
+  });
+}

web/src/api/queries/field-defs.ts

@@ -0,0 +1,83 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type NewFieldDefinitionRequest = components["schemas"]["NewFieldDefinitionRequest"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export function useFieldDefinitions() {
+  return useQuery({
+    queryKey: keys.fieldDefinitions(),
+    queryFn: async () => {
+      const { data, error } = await api.GET("/api/admin/field-definitions");
+
+      if (error || !data) throw new Error("failed to load field definitions");
+
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useCreateFieldDefinition() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: NewFieldDefinitionRequest) => {
+      const { data, response } = await api.POST("/api/admin/field-definitions", { body });
+
+      if (response.status !== 201 || !data) throw new HttpError(response.status);
+
+      return data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.fieldDefinitions() }),
+    meta: { successMessage: "toast.created", suppressErrorToast: true },
+  });
+}
+
+export function useUpdateFieldDefinition() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      key,
+      required,
+      group,
+      labels,
+    }: {
+      key: string;
+      required: boolean;
+      group: string | null;
+      labels: LabelInput[];
+    }) => {
+      const { response } = await api.PATCH("/api/admin/field-definitions/{key}", {
+        params: { path: { key } },
+        body: { required, group, labels },
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.fieldDefinitions() }),
+    meta: { successMessage: "toast.saved", suppressErrorToast: true },
+  });
+}
+
+export function useDeleteFieldDefinition() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (key: string) => {
+      const { error, response } = await api.DELETE("/api/admin/field-definitions/{key}", {
+        params: { path: { key } },
+      });
+
+      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.fieldDefinitions() }),
+    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
+  });
+}

web/src/api/queries/index.ts

@@ -0,0 +1,8 @@
+export * from "./auth";
+export * from "./objects";
+export * from "./field-defs";
+export * from "./vocab";
+export * from "./authorities";
+export * from "./search";
+export * from "../errors";
+export type { ObjectListParams } from "../query-keys";

web/src/api/queries/objects.ts

@@ -0,0 +1,157 @@
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, FieldRejection, VisibilityError } from "../errors";
+import { keys, type ObjectListParams } from "../query-keys";
+
+type ObjectCreateRequest = components["schemas"]["ObjectCreateRequest"];
+type ObjectUpdateRequest = components["schemas"]["ObjectUpdateRequest"];
+type Visibility = "draft" | "internal" | "public";
+
+export function useObjectsPage(params: ObjectListParams) {
+  return useQuery({
+    queryKey: keys.objectsPage(params),
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const { data, error } = await api.GET("/api/admin/objects", {
+        params: {
+          query: {
+            limit: params.limit,
+            offset: params.offset,
+            sort: params.sort,
+            order: params.order,
+            visibility: params.visibility,
+            q: params.q,
+          },
+        },
+      });
+
+      if (error || !data) throw new Error("failed to load objects");
+
+      return data;
+    },
+  });
+}
+
+export function useObject(id: string) {
+  return useQuery({
+    queryKey: keys.object(id),
+    queryFn: async () => {
+      const { data, response } = await api.GET("/api/admin/objects/{id}", {
+        params: { path: { id } },
+      });
+
+      if (response.status === 404) return null;
+
+      if (!data) throw new Error("failed to load object");
+
+      return data;
+    },
+    // A 404 resolves to null rather than erroring, so don't retry it.
+    retry: false,
+  });
+}
+
+export function useCreateObject() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: ObjectCreateRequest) => {
+      const { data, error, response } = await api.POST("/api/admin/objects", { body });
+
+      if (error || !data) throw new HttpError(response.status);
+
+      return data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.objects() }),
+    meta: { successMessage: "toast.created", suppressErrorToast: true },
+  });
+}
+
+export function useUpdateObject() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, body }: { id: string; body: ObjectUpdateRequest }) => {
+      const { response } = await api.PUT("/api/admin/objects/{id}", {
+        params: { path: { id } },
+        body,
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { id }) => {
+      void qc.invalidateQueries({ queryKey: keys.objects() });
+      void qc.invalidateQueries({ queryKey: keys.object(id) });
+      void qc.invalidateQueries({ queryKey: keys.search() });
+    },
+    meta: { successMessage: "toast.saved", suppressErrorToast: true },
+  });
+}
+
+export function useSetFields() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, fields }: { id: string; fields: Record<string, unknown> }) => {
+      const { response, error } = await api.PUT("/api/admin/objects/{id}/fields", {
+        params: { path: { id } },
+        body: fields as Record<string, never>,
+      });
+
+      if (response.status === 204) return;
+
+      if (response.status === 422 && error && typeof error === "object" && "field" in error) {
+        const detail = error as { field: string; code: string };
+        throw new FieldRejection(detail.field, detail.code);
+      }
+
+      throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { id }) => {
+      void qc.invalidateQueries({ queryKey: keys.object(id) });
+    },
+    meta: { suppressErrorToast: true },
+  });
+}
+
+export function useDeleteObject() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const { response } = await api.DELETE("/api/admin/objects/{id}", {
+        params: { path: { id } },
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: keys.objects() });
+      void qc.invalidateQueries({ queryKey: keys.search() });
+    },
+    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
+  });
+}
+
+export function useSetVisibility() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, visibility }: { id: string; visibility: Visibility }) => {
+      const { response } = await api.POST("/api/admin/objects/{id}/visibility", {
+        params: { path: { id } },
+        body: { visibility },
+      });
+
+      if (response.status !== 204) throw new VisibilityError(response.status);
+    },
+    onSuccess: (_result, { id }) => {
+      void qc.invalidateQueries({ queryKey: keys.object(id) });
+      void qc.invalidateQueries({ queryKey: keys.objects() });
+      void qc.invalidateQueries({ queryKey: keys.search() });
+    },
+    meta: { successMessage: "toast.published", suppressErrorToast: true },
+  });
+}

web/src/api/queries/search.ts

@@ -0,0 +1,39 @@
+import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+
+import { api } from "../client";
+import { HttpError } from "../errors";
+import { keys } from "../query-keys";
+
+const SEARCH_PAGE = 20;
+
+export function useSearch(q: string, visibility: string | null) {
+  const term = q.trim();
+
+  return useInfiniteQuery({
+    queryKey: keys.searchResults(term, visibility),
+    enabled: term.length > 0,
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }) => {
+      const { data, error, response } = await api.GET("/api/admin/search", {
+        params: {
+          query: {
+            q: term,
+            ...(visibility ? { visibility } : {}),
+            offset: pageParam,
+            limit: SEARCH_PAGE,
+          },
+        },
+      });
+
+      if (error || !data) throw new HttpError(response.status);
+
+      return data;
+    },
+    placeholderData: keepPreviousData,
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.reduce((n, page) => n + page.hits.length, 0);
+
+      return loaded < lastPage.estimated_total ? loaded : undefined;
+    },
+  });
+}

web/src/api/queries/vocab.ts

@@ -0,0 +1,160 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "../client";
+import type { components } from "../schema";
+import { HttpError, InUseError } from "../errors";
+import { keys } from "../query-keys";
+
+type NewVocabularyRequest = components["schemas"]["NewVocabularyRequest"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export function useVocabularies() {
+  return useQuery({
+    queryKey: keys.vocabularies(),
+    queryFn: async () => {
+      const { data, error } = await api.GET("/api/admin/vocabularies");
+
+      if (error || !data) throw new Error("failed to load vocabularies");
+
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useCreateVocabulary() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (body: NewVocabularyRequest) => {
+      const { data, error, response } = await api.POST("/api/admin/vocabularies", { body });
+
+      if (error || !data) throw new HttpError(response.status);
+
+      return data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.vocabularies() }),
+    meta: { successMessage: "toast.created", suppressErrorToast: true },
+  });
+}
+
+export function useRenameVocabulary() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, key }: { id: string; key: string }) => {
+      const { response } = await api.PATCH("/api/admin/vocabularies/{id}", {
+        params: { path: { id } },
+        body: { key },
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.vocabularies() }),
+    meta: { successMessage: "toast.renamed", suppressErrorToast: true },
+  });
+}
+
+export function useDeleteVocabulary() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const { error, response } = await api.DELETE("/api/admin/vocabularies/{id}", {
+        params: { path: { id } },
+      });
+
+      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.vocabularies() }),
+    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
+  });
+}
+
+export function useTerms(vocabularyId: string | null | undefined) {
+  return useQuery({
+    queryKey: keys.terms(vocabularyId),
+    enabled: !!vocabularyId,
+    queryFn: async () => {
+      const { data, error } = await api.GET("/api/admin/vocabularies/{id}/terms", {
+        params: { path: { id: vocabularyId! } },
+      });
+
+      if (error || !data) throw new Error("failed to load terms");
+
+      return data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useAddTerm() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      vocabularyId,
+      external_uri,
+      labels,
+    }: {
+      vocabularyId: string;
+      external_uri: string | null;
+      labels: LabelInput[];
+    }) => {
+      const { response } = await api.POST("/api/admin/vocabularies/{id}/terms", {
+        params: { path: { id: vocabularyId } },
+        body: { external_uri, labels },
+      });
+
+      if (response.status !== 201) throw new HttpError(response.status);
+    },
+    onSuccess: (_result, { vocabularyId }) =>
+      qc.invalidateQueries({ queryKey: keys.terms(vocabularyId) }),
+    meta: { successMessage: "toast.created", suppressErrorToast: true },
+  });
+}
+
+export function useUpdateTerm() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      vocabularyId,
+      termId,
+      external_uri,
+      labels,
+    }: {
+      vocabularyId: string;
+      termId: string;
+      external_uri: string | null;
+      labels: LabelInput[];
+    }) => {
+      const { response } = await api.PATCH("/api/admin/vocabularies/{id}/terms/{term_id}", {
+        params: { path: { id: vocabularyId, term_id: termId } },
+        body: { external_uri, labels },
+      });
+
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: keys.terms(vocabularyId) }),
+    meta: { successMessage: "toast.saved", suppressErrorToast: true },
+  });
+}
+
+export function useDeleteTerm() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ vocabularyId, termId }: { vocabularyId: string; termId: string }) => {
+      const { error, response } = await api.DELETE("/api/admin/vocabularies/{id}/terms/{term_id}", {
+        params: { path: { id: vocabularyId, term_id: termId } },
+      });
+
+      if (response.status === 409) throw new InUseError((error as { count?: number })?.count ?? 0);
+      if (response.status !== 204) throw new HttpError(response.status);
+    },
+    onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: keys.terms(vocabularyId) }),
+    meta: { successMessage: "toast.deleted", suppressErrorToast: true },
+  });
+}

web/src/api/query-client.ts

@@ -6,20 +6,15 @@ import {
 
 import i18n from "../i18n";
 import { toastManager } from "../toast/toast-manager";
-import { HttpError, InUseError } from "./queries";
+import { errorMessageKey } from "./error-message";
 
 function mutationErrorMessage(
   error: unknown,
   meta: MutationMeta | undefined,
 ): string {
   if (meta?.errorMessage) return i18n.t(meta.errorMessage);
-  if (error instanceof InUseError) {
+  const { key, opts } = errorMessageKey(error);
-    return i18n.t("actions.inUse", { count: error.count });
+  return i18n.t(key, opts);
-  }
-  if (error instanceof HttpError && error.status === 503) {
-    return i18n.t("search.unavailable");
-  }
-  return i18n.t("toast.error");
 }
 
 /** Builds the app's QueryClient, including the MutationCache that bridges every

web/src/api/query-keys.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+
+import { keys } from "./query-keys";
+
+test("the key factory produces the expected arrays", () => {
+  expect(keys.me()).toEqual(["me"]);
+  expect(keys.config()).toEqual(["config"]);
+  expect(keys.objects()).toEqual(["objects"]);
+  const p = { limit: 50, offset: 0 };
+  expect(keys.objectsPage(p)).toEqual(["objects", p]);
+  expect(keys.object("x")).toEqual(["object", "x"]);
+  expect(keys.fieldDefinitions()).toEqual(["field-definitions"]);
+  expect(keys.vocabularies()).toEqual(["vocabularies"]);
+  expect(keys.terms("v1")).toEqual(["terms", "v1"]);
+  expect(keys.authorities("person")).toEqual(["authorities", "person"]);
+  expect(keys.search()).toEqual(["search"]);
+  expect(keys.searchResults("q", null)).toEqual(["search", "q", null]);
+});
+
+test("objects() is a prefix of objectsPage() so invalidation matches", () => {
+  const prefix = keys.objects();
+  const full = keys.objectsPage({ limit: 50, offset: 0 });
+  expect(full.slice(0, prefix.length)).toEqual(prefix);
+});

web/src/api/query-keys.ts

@@ -0,0 +1,24 @@
+export type ObjectListParams = {
+  limit: number;
+  offset: number;
+  sort?: string;
+  order?: "asc" | "desc";
+  visibility?: string;
+  q?: string;
+};
+
+/** Central query-key factory — the single source of truth for cache keys, so
+ *  query/invalidate/setQueryData sites can't drift. */
+export const keys = {
+  me: () => ["me"] as const,
+  config: () => ["config"] as const,
+  objects: () => ["objects"] as const,
+  objectsPage: (params: ObjectListParams) => ["objects", params] as const,
+  object: (id: string) => ["object", id] as const,
+  fieldDefinitions: () => ["field-definitions"] as const,
+  vocabularies: () => ["vocabularies"] as const,
+  terms: (vocabularyId: string | null | undefined) => ["terms", vocabularyId] as const,
+  authorities: (kind: string | null | undefined) => ["authorities", kind] as const,
+  search: () => ["search"] as const,
+  searchResults: (term: string, visibility: string | null) => ["search", term, visibility] as const,
+};

web/src/api/schema.d.ts

@@ -603,6 +603,7 @@ export interface components {
             id: string;
             object_name: string;
             object_number: string;
+            recording_date?: string | null;
             snippet?: string | null;
             visibility: components["schemas"]["Visibility"];
         };

web/src/api/search-invalidation.test.tsx

@@ -0,0 +1,28 @@
+import { expect, test } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { http, HttpResponse } from "msw";
+import type { ReactNode } from "react";
+
+import { server } from "../test/server";
+import { useSetVisibility } from "./queries";
+import { keys } from "./query-keys";
+
+test("changing an object's visibility invalidates the active search query", async () => {
+  server.use(
+    http.post("/api/admin/objects/:id/visibility", () => new HttpResponse(null, { status: 204 })),
+  );
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  qc.setQueryData(keys.searchResults("amphora", null), { pages: [], pageParams: [] });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={qc}>{children}</QueryClientProvider>
+  );
+  const { result } = renderHook(() => useSetVisibility(), { wrapper });
+
+  await result.current.mutateAsync({ id: "o1", visibility: "public" });
+
+  await waitFor(() =>
+    expect(qc.getQueryState(keys.searchResults("amphora", null))?.isInvalidated).toBe(true),
+  );
+});

web/src/app.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, Navigate, Outlet, Route, RouterProvider } from "react-router-dom";
 
+import { NavigationBridge } from "./shell/navigation-bridge";
 import { RequireAuth } from "./auth/require-auth";
 import { LoginPage } from "./auth/login-page";
 import { AppShell } from "./shell/app-shell";
@@ -12,6 +13,7 @@ import { VocabulariesPage } from "./vocab/vocabularies-page";
 import { VocabularyTerms } from "./vocab/vocabulary-terms";
 import { SelectVocabularyPrompt } from "./vocab/select-vocabulary-prompt";
 import { AuthoritiesPage } from "./authorities/authorities-page";
+import { FormSkeleton, ListSkeleton } from "@/components/ui/skeletons";
 
 const ObjectNewPage = lazy(() =>
   import("./objects/object-new-page").then((m) => ({ default: m.ObjectNewPage })),
@@ -25,59 +27,66 @@ const FieldsPage = lazy(() =>
   import("./fields/fields-page").then((m) => ({ default: m.FieldsPage })),
 );
 
-function FormFallback() {
+function RootLayout() {
-  return <div role="status" className="p-4 text-sm text-muted-foreground">Loading…</div>;
-}
-
-export function App() {
   return (
-    <BrowserRouter>
+    <>
-      <Routes>
+      <NavigationBridge />
-        <Route path="/login" element={<LoginPage />} />
+      <Outlet />
-        <Route element={<RequireAuth />}>
+    </>
-          <Route element={<AppShell />}>
-            <Route
-              path="/objects/new"
-              element={
-                <Suspense fallback={<FormFallback />}>
-                  <ObjectNewPage />
-                </Suspense>
-              }
-            />
-            <Route path="/objects" element={<ObjectsPage />}>
-              <Route path=":id" element={<ObjectDetail />} />
-              <Route
-                path=":id/edit"
-                element={
-                  <Suspense fallback={<FormFallback />}>
-                    <ObjectEditForm />
-                  </Suspense>
-                }
-              />
-            </Route>
-            <Route path="/vocabularies" element={<VocabulariesPage />}>
-              <Route index element={<SelectVocabularyPrompt />} />
-              <Route path=":id" element={<VocabularyTerms />} />
-            </Route>
-            <Route path="/search" element={<SearchPage />}>
-              <Route index element={<SelectSearchPrompt />} />
-              <Route path=":id" element={<ObjectDetail />} />
-            </Route>
-            <Route path="/authorities" element={<Navigate to="/authorities/person" replace />} />
-            <Route path="/authorities/:kind" element={<AuthoritiesPage />} />
-            <Route
-              path="/fields"
-              element={
-                <Suspense fallback={<FormFallback />}>
-                  <FieldsPage />
-                </Suspense>
-              }
-            />
-            <Route path="/" element={<Navigate to="/objects" replace />} />
-          </Route>
-        </Route>
-        <Route path="*" element={<Navigate to="/objects" replace />} />
-      </Routes>
-    </BrowserRouter>
   );
 }
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route element={<RootLayout />}>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<RequireAuth />}>
+        <Route element={<AppShell />}>
+          <Route
+            path="/objects/new"
+            element={
+              <Suspense fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}>
+                <ObjectNewPage />
+              </Suspense>
+            }
+          />
+          <Route path="/objects" element={<ObjectsPage />}>
+            <Route path=":id" element={<ObjectDetail />} />
+            <Route
+              path=":id/edit"
+              element={
+                <Suspense fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}>
+                  <ObjectEditForm />
+                </Suspense>
+              }
+            />
+          </Route>
+          <Route path="/vocabularies" element={<VocabulariesPage />}>
+            <Route index element={<SelectVocabularyPrompt />} />
+            <Route path=":id" element={<VocabularyTerms />} />
+          </Route>
+          <Route path="/search" element={<SearchPage />}>
+            <Route index element={<SelectSearchPrompt />} />
+            <Route path=":id" element={<ObjectDetail />} />
+          </Route>
+          <Route path="/authorities" element={<Navigate to="/authorities/person" replace />} />
+          <Route path="/authorities/:kind" element={<AuthoritiesPage />} />
+          <Route
+            path="/fields/:key?"
+            element={
+              <Suspense fallback={<ListSkeleton />}>
+                <FieldsPage />
+              </Suspense>
+            }
+          />
+          <Route path="/" element={<Navigate to="/objects" replace />} />
+        </Route>
+      </Route>
+      <Route path="*" element={<Navigate to="/objects" replace />} />
+    </Route>,
+  ),
+);
+
+export function App() {
+  return <RouterProvider router={router} />;
+}

web/src/auth/login-page.test.tsx

@@ -12,6 +12,7 @@ function tree() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route path="/objects" element={<div>objects landing</div>} />
+      <Route path="/objects/:id" element={<div>object detail</div>} />
     </Routes>
   );
 }
@@ -34,3 +35,59 @@ test("invalid credentials show an inline error", async () => {
     expect(screen.getByText(/invalid email or password/i)).toBeInTheDocument(),
   );
 });
+
+test("shows the session-expired notice when reason=expired", async () => {
+  renderApp(tree(), { route: "/login?reason=expired" });
+  expect(await screen.findByText(/session expired/i)).toBeInTheDocument();
+});
+
+test("returns to the from path on success", async () => {
+  renderApp(tree(), { route: "/login?from=%2Fobjects%2F123" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+  expect(await screen.findByText("object detail")).toBeInTheDocument();
+});
+
+test("rejects an off-site from and falls back to /objects", async () => {
+  renderApp(tree(), { route: "/login?from=%2F%2Fevil.com" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+  expect(await screen.findByText("objects landing")).toBeInTheDocument();
+});
+
+test("shows Signing in… and disables the button while pending", async () => {
+  let release!: () => void;
+  const gate = new Promise<void>((r) => {
+    release = r;
+  });
+
+  server.use(
+    http.post("/api/admin/login", async () => {
+      await gate;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+
+  renderApp(tree(), { route: "/login" });
+  await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com");
+  await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123");
+  await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+
+  const pending = await screen.findByRole("button", { name: /signing in/i });
+  expect(pending).toBeDisabled();
+
+  release();
+  expect(await screen.findByText("objects landing")).toBeInTheDocument();
+});
+
+test("disables submit until both fields are filled", async () => {
+  renderApp(tree(), { route: "/login" });
+  const button = screen.getByRole("button", { name: /sign in/i });
+  expect(button).toBeDisabled();
+  await userEvent.type(screen.getByLabelText(/email/i), "a@b.se");
+  expect(button).toBeDisabled();
+  await userEvent.type(screen.getByLabelText(/password/i), "pw");
+  expect(button).toBeEnabled();
+});

web/src/auth/login-page.tsx

@@ -1,28 +1,40 @@
 import { useEffect, useState, type FormEvent } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useLogin } from "../api/queries";
+import { useConfig } from "../config/config-context";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { PageTitle } from "@/components/ui/page-title";
+
+/** Accept only a single-leading-slash local path; reject protocol-relative
+ *  ("//host") and absolute URLs to avoid an open redirect. */
+function safeFrom(raw: string | null): string {
+  if (!raw) return "/objects";
+  return /^\/(?!\/)/.test(raw) ? raw : "/objects";
+}
 
 export function LoginPage() {
   const { t } = useTranslation();
+  const { app_name } = useConfig();
   const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const sessionExpired = params.get("reason") === "expired";
   const login = useLogin();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   useEffect(() => {
-    document.title = t("app.name");
+    document.title = app_name;
-  }, [t]);
+  }, [app_name]);
 
   const onSubmit = (event: FormEvent) => {
     event.preventDefault();
     login.mutate(
       { email, password },
-      { onSuccess: () => navigate("/objects", { replace: true }) },
+      { onSuccess: () => navigate(safeFrom(params.get("from")), { replace: true }) },
     );
   };
 
@@ -35,7 +47,10 @@ export function LoginPage() {
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
       <form onSubmit={onSubmit} className="w-full max-w-sm space-y-4">
-        <h1 className="text-2xl font-semibold">{t("app.name")}</h1>
+        <PageTitle>{app_name}</PageTitle>
+        {sessionExpired && (
+          <p className="text-sm text-muted-foreground">{t("auth.sessionExpired")}</p>
+        )}
         <div className="space-y-2">
           <Label htmlFor="email">{t("auth.email")}</Label>
           <Input
@@ -61,8 +76,8 @@ export function LoginPage() {
             {t(errorKey)}
           </p>
         )}
-        <Button type="submit" className="w-full" disabled={login.isPending}>
+        <Button type="submit" className="w-full" disabled={login.isPending || !email.trim() || !password}>
-          {t("auth.signIn")}
+          {login.isPending ? t("auth.signingIn") : t("auth.signIn")}
         </Button>
       </form>
     </div>

web/src/auth/require-auth.test.tsx

@@ -1,16 +1,21 @@
 import { screen, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { expect, test } from "vitest";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 
 import { server } from "../test/server";
 import { renderApp } from "../test/render";
 import { RequireAuth } from "./require-auth";
 
+function LoginStub() {
+  const location = useLocation();
+  return <div>login page {location.search}</div>;
+}
+
 function tree() {
   return (
     <Routes>
-      <Route path="/login" element={<div>login page</div>} />
+      <Route path="/login" element={<LoginStub />} />
       <Route element={<RequireAuth />}>
         <Route path="/objects" element={<div>secret objects</div>} />
       </Route>
@@ -23,8 +28,8 @@ test("renders children when authenticated", async () => {
   expect(await screen.findByText("secret objects")).toBeInTheDocument();
 });
 
-test("redirects to /login when unauthenticated", async () => {
+test("redirects unauthenticated users to /login carrying the attempted path", async () => {
   server.use(http.get("/api/admin/me", () => new HttpResponse(null, { status: 401 })));
   renderApp(tree(), { route: "/objects" });
-  await waitFor(() => expect(screen.getByText("login page")).toBeInTheDocument());
+  await waitFor(() => expect(screen.getByText(/from=%2Fobjects/)).toBeInTheDocument());
 });

web/src/auth/require-auth.tsx

@@ -1,13 +1,18 @@
-import { Navigate, Outlet } from "react-router-dom";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
 
 import { useMe } from "../api/queries";
+import { AppShellSkeleton } from "@/components/ui/skeletons";
 
 export function RequireAuth() {
   const { data: user, isLoading } = useMe();
+  const location = useLocation();
 
-  if (isLoading) return <div role="status" aria-label="loading" />;
+  if (isLoading) return <AppShellSkeleton />;
 
-  if (!user) return <Navigate to="/login" replace />;
+  if (!user) {
+    const from = encodeURIComponent(location.pathname + location.search);
+    return <Navigate to={`/login?from=${from}`} replace />;
+  }
 
   return <Outlet />;
 }

web/src/authorities/authorities-page.tsx

@@ -1,23 +1,22 @@
-import { useState, type FormEvent } from "react";
 import { NavLink, Navigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import type { components } from "../api/schema";
 import { useAuthorities, useCreateAuthority } from "../api/queries";
-import { LabelEditor } from "../components/label-editor";
+import { FilteredRecordList } from "../components/filtered-record-list";
-import { Button } from "@/components/ui/button";
+import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
 import { PageTitle } from "@/components/ui/page-title";
 import { AuthorityRow } from "./authority-row";
+import { useLang } from "../lib/use-lang";
+import { segmentClass } from "../lib/class-recipes";
 import { useDocumentTitle } from "../lib/use-document-title";
-
+import { useBreadcrumb } from "../shell/use-breadcrumb";
-type LabelInput = components["schemas"]["LabelInput"];
 
 const KINDS = ["person", "organisation", "place"] as const;
 
 export function AuthoritiesPage() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { kind } = useParams();
-  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+  const lang = useLang();
 
   const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");
   const currentKind = isValidKind ? (kind as string) : "person";
@@ -25,85 +24,44 @@ export function AuthoritiesPage() {
   const { data: authorities, isLoading, isError } = useAuthorities(currentKind);
   const create = useCreateAuthority();
 
-  const [labels, setLabels] = useState<LabelInput[]>([]);
-  const [error, setError] = useState(false);
-
   useDocumentTitle(t("nav.authorities"));
+  useBreadcrumb([{ label: t("nav.authorities") }]);
 
   if (!isValidKind) return <Navigate to="/authorities/person" replace />;
 
-  const onCreate = (event: FormEvent) => {
-    event.preventDefault();
-
-    if (!labels.some((l) => l.label)) {
-      setError(true);
-      return;
-    }
-
-    setError(false);
-    create.mutate(
-      { kind: kind as string, external_uri: null, labels },
-      { onSuccess: () => setLabels([]) },
-    );
-  };
-
   return (
     <div className="overflow-auto p-4">
       <PageTitle className="mb-3">{t("nav.authorities")}</PageTitle>
-      <div role="tablist" className="mb-3 flex gap-2">
+      <nav aria-label={t("nav.authorities")} className="mb-3 flex gap-2">
         {KINDS.map((k) => (
           <NavLink
             key={k}
             to={`/authorities/${k}`}
-            role="tab"
+            className={({ isActive }) => segmentClass(isActive, "px-3 py-1 text-sm")}
-            aria-selected={k === currentKind}
-            className={({ isActive }) =>
-              `rounded-md px-3 py-1 text-sm ${isActive ? "bg-primary text-primary-foreground" : "border"}`
-            }
           >
             {t(`authorities.${k}`)}
           </NavLink>
         ))}
-      </div>
+      </nav>
 
-      <ul className="mb-4">
+      <FilteredRecordList
-        {isLoading && (
+        records={authorities}
-          <li className="text-sm text-muted-foreground">…</li>
+        lang={lang}
-        )}
+        isLoading={isLoading}
-        {isError && (
+        isError={isError}
-          <li className="text-sm text-destructive">{t("authorities.loadError")}</li>
+        loadErrorText={t("authorities.loadError")}
-        )}
+        emptyText={t("authorities.empty")}
-        {!isLoading && !isError && authorities?.length === 0 && (
+        renderRow={(a) => <AuthorityRow authority={a} kind={currentKind} lang={lang} />}
-          <li className="text-sm text-muted-foreground">{t("authorities.empty")}</li>
+      />
-        )}
-        {authorities?.map((a) => (
-          <AuthorityRow key={a.id} authority={a} kind={currentKind} lang={lang} />
-        ))}
-      </ul>
 
-      <form onSubmit={onCreate} className="space-y-2 border-t pt-3">
+      <LabelledRecordCreateForm
-        <div className="text-sm font-medium">
+        heading={`${t("authorities.new")} · ${t(`authorities.${currentKind}`)}`}
-          {t("authorities.new")} · {t(`authorities.${currentKind}`)}
+        submitLabel={t("authorities.create")}
-        </div>
+        pending={create.isPending}
-
+        error={create.error}
-        <LabelEditor value={labels} onChange={setLabels} />
+        onCreate={(labels, uri, reset) =>
-
+          create.mutate({ kind: currentKind, external_uri: uri, labels }, { onSuccess: reset })}
-        {error && (
+      />
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.required")}
-          </p>
-        )}
-
-        {create.isError && (
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.rejected")}
-          </p>
-        )}
-
-        <Button type="submit" size="sm" disabled={create.isPending}>
-          {t("authorities.create")}
-        </Button>
-      </form>
     </div>
   );
 }

web/src/authorities/authorities.test.tsx

@@ -33,13 +33,13 @@ test("lists authorities for the kind and creates one", async () => {
 
 test("kind tabs link to the other kinds", async () => {
   renderApp(tree(), { route: "/authorities/person" });
-  expect(await screen.findByRole("tab", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
+  expect(await screen.findByRole("link", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
 });
 
-test("aria-selected is on the tab element and reflects the active kind", async () => {
+test("aria-current marks the active kind link", async () => {
   renderApp(tree(), { route: "/authorities/person" });
-  expect(await screen.findByRole("tab", { name: /^person$/i })).toHaveAttribute("aria-selected", "true");
+  expect(await screen.findByRole("link", { name: /^person$/i })).toHaveAttribute("aria-current", "page");
-  expect(screen.getByRole("tab", { name: /^place$/i })).toHaveAttribute("aria-selected", "false");
+  expect(screen.getByRole("link", { name: /^place$/i })).not.toHaveAttribute("aria-current");
 });
 
 test("create without EN label shows required alert and does not POST", async () => {
@@ -69,3 +69,69 @@ test("unknown kind redirects to person list", async () => {
   renderApp(tree(), { route: "/authorities/banana" });
   expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
 });
+
+test("authorities render sorted by label", async () => {
+  server.use(
+    http.get("/api/admin/authorities", () =>
+      HttpResponse.json([
+        { id: "a-zoe", kind: "person", external_uri: null, labels: [{ lang: "en", label: "Zoe" }] },
+        { id: "a-adam", kind: "person", external_uri: null, labels: [{ lang: "en", label: "Adam" }] },
+      ]),
+    ),
+  );
+  renderApp(tree(), { route: "/authorities/person" });
+  expect(await screen.findByText("Adam")).toBeInTheDocument();
+  const items = screen.getAllByRole("listitem");
+  const texts = items.map((item) => item.textContent ?? "");
+  const adam = texts.findIndex((text) => text.includes("Adam"));
+  const zoe = texts.findIndex((text) => text.includes("Zoe"));
+  expect(adam).toBeLessThan(zoe);
+});
+
+test("filter narrows the authority list", async () => {
+  server.use(
+    http.get("/api/admin/authorities", () =>
+      HttpResponse.json([
+        { id: "a-ada", kind: "person", external_uri: null, labels: [{ lang: "en", label: "Ada Lovelace" }] },
+        { id: "a-grace", kind: "person", external_uri: null, labels: [{ lang: "en", label: "Grace Hopper" }] },
+      ]),
+    ),
+  );
+  renderApp(tree(), { route: "/authorities/person" });
+  expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
+  expect(screen.getByText("Grace Hopper")).toBeInTheDocument();
+  await userEvent.type(screen.getByRole("textbox", { name: /filter/i }), "grace");
+  expect(screen.getByText("Grace Hopper")).toBeInTheDocument();
+  expect(screen.queryByText("Ada Lovelace")).not.toBeInTheDocument();
+});
+
+test("create posts the entered external_uri", async () => {
+  let body: unknown;
+  server.use(
+    http.post("/api/admin/authorities", async ({ request }) => {
+      body = await request.json();
+      return HttpResponse.json({ id: "a-c" }, { status: 201 });
+    }),
+  );
+  renderApp(tree(), { route: "/authorities/person" });
+  expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText(/^label$/i), "Carl von Linné");
+  await userEvent.type(screen.getByLabelText(/external uri/i), "https://viaf.org/456");
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  await waitFor(() =>
+    expect((body as { external_uri: string })?.external_uri).toBe("https://viaf.org/456"),
+  );
+});
+
+test("read row shows its external_uri as a link", async () => {
+  server.use(
+    http.get("/api/admin/authorities", () =>
+      HttpResponse.json([
+        { id: "a-ada", kind: "person", external_uri: "https://viaf.org/123", labels: [{ lang: "en", label: "Ada Lovelace" }] },
+      ]),
+    ),
+  );
+  renderApp(tree(), { route: "/authorities/person" });
+  expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();
+  expect(screen.getByRole("link", { name: /viaf\.org/ })).toBeInTheDocument();
+});

web/src/authorities/authority-row.tsx

@@ -1,77 +1,24 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
 import type { components } from "../api/schema";
 import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
-import { LabelEditor } from "../components/label-editor";
+import { LabelledRecordRow } from "../components/labelled-record-row";
-import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { labelText } from "../lib/labels";
 
 type AuthorityView = components["schemas"]["AuthorityView"];
-type LabelInput = components["schemas"]["LabelInput"];
 
 export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
-  const { t } = useTranslation();
+  const update = useUpdateAuthority();
-
+  const del = useDeleteAuthority();
-  const updateAuthority = useUpdateAuthority();
-  const deleteAuthority = useDeleteAuthority();
-
-  const [editing, setEditing] = useState(false);
-  const [labels, setLabels] = useState<LabelInput[]>(authority.labels as LabelInput[]);
-  const [uri, setUri] = useState(authority.external_uri ?? "");
-
-  if (editing) {
-    return (
-      <li className="space-y-2 border-b py-2">
-        <LabelEditor value={labels} onChange={setLabels} />
-        <div className="space-y-1">
-          <Label htmlFor={`auth-uri-${authority.id}`}>{t("labels.externalUri")}</Label>
-          <Input id={`auth-uri-${authority.id}`} value={uri} onChange={(e) => setUri(e.target.value)} />
-        </div>
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            size="sm"
-            disabled={updateAuthority.isPending}
-            onClick={() =>
-              updateAuthority.mutate(
-                { id: authority.id, kind, external_uri: uri.trim() || null, labels },
-                { onSuccess: () => setEditing(false) },
-              )
-            }
-          >
-            {t("actions.save")}
-          </Button>
-          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
-            {t("form.cancel")}
-          </Button>
-        </div>
-      </li>
-    );
-  }
 
   return (
-    <li className="flex items-center gap-2 border-b py-1 text-sm">
+    <LabelledRecordRow
-      <span className="flex-1">{labelText(authority.labels, lang)}</span>
+      record={{ ...authority, external_uri: authority.external_uri ?? null }}
-      <Button
+      lang={lang}
-        type="button"
+      deleteConfirmKey="actions.confirmDeleteAuthority"
-        variant="ghost"
+      savePending={update.isPending}
-        size="sm"
+      saveError={update.error}
-        onClick={() => {
+      onEditOpen={() => update.reset()}
-          setLabels(authority.labels as LabelInput[]);
+      onSave={(labels, uri, done) =>
-          setUri(authority.external_uri ?? "");
+        update.mutate({ id: authority.id, kind, external_uri: uri, labels }, { onSuccess: done })}
-          setEditing(true);
+      onDelete={() => del.mutateAsync({ id: authority.id, kind })}
-        }}
+    />
-      >
-        {t("actions.edit")}
-      </Button>
-      <DeleteConfirmDialog
-        description={t("actions.confirmDeleteAuthority")}
-        onConfirm={() => deleteAuthority.mutateAsync({ id: authority.id, kind })}
-      />
-    </li>
   );
 }

web/src/components/delete-confirm-dialog.test.tsx

@@ -0,0 +1,60 @@
+import { expect, test, vi } from "vitest";
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { DeleteConfirmDialog } from "./delete-confirm-dialog";
+import { InUseError } from "../api/errors";
+
+test("delete-in-use shows the in-use count and keeps the dialog open", async () => {
+  const onConfirm = vi.fn(() => Promise.reject(new InUseError(3)));
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]);
+
+  expect(await dialog.findByText(/used by 3/i)).toBeInTheDocument();
+  expect(dialog.getByText("Delete this term?")).toBeInTheDocument();
+});
+
+test("confirm is disabled and labelled Deleting… while pending", async () => {
+  let resolve!: () => void;
+  const onConfirm = vi.fn(
+    () =>
+      new Promise<void>((r) => {
+        resolve = r;
+      }),
+  );
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]);
+
+  const pending = await dialog.findByRole("button", { name: /deleting/i });
+  expect(pending).toBeDisabled();
+  expect(dialog.getByRole("button", { name: /cancel/i })).toBeDisabled();
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+
+  resolve();
+  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
+});
+
+test("a clean confirm closes the dialog", async () => {
+  const onConfirm = vi.fn(() => Promise.resolve());
+  renderApp(<DeleteConfirmDialog description="Delete this term?" onConfirm={onConfirm} />);
+
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+
+  const dialog = within(document.body);
+  const buttons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(buttons[buttons.length - 1]);
+
+  await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull());
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+});

web/src/components/delete-confirm-dialog.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { InUseError } from "../api/queries";
+import { errorMessageKey } from "../api/error-message";
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -28,17 +28,22 @@ export function DeleteConfirmDialog({
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
   const confirm = async () => {
     setMessage(null);
+    setPending(true);
     try {
       await onConfirm();
     } catch (err) {
       // Keep the dialog open; show the blocking reason. Never let the rejected
       // mutation escape as an unhandled rejection.
-      setMessage(err instanceof InUseError ? t("actions.inUse", { count: err.count }) : t("form.rejected"));
+      const { key, opts } = errorMessageKey(err);
+      setMessage(t(key, opts));
       return;
+    } finally {
+      setPending(false);
     }
     setOpen(false);
   };
@@ -61,8 +66,10 @@ export function DeleteConfirmDialog({
           </p>
         )}
         <AlertDialogFooter>
-          <AlertDialogCancel>{t("form.cancel")}</AlertDialogCancel>
+          <AlertDialogCancel disabled={pending}>{t("form.cancel")}</AlertDialogCancel>
-          <AlertDialogAction onClick={confirm}>{t("actions.delete")}</AlertDialogAction>
+          <AlertDialogAction disabled={pending} onClick={confirm}>
+            {pending ? t("actions.deleting") : t("actions.delete")}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

web/src/components/detail-drawer.test.tsx

@@ -0,0 +1,20 @@
+import { expect, test, vi } from "vitest";
+import { within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { DetailDrawer } from "./detail-drawer";
+
+test("renders children in a named drawer and closes via the close button", async () => {
+  const onClose = vi.fn();
+  renderApp(
+    <DetailDrawer open onClose={onClose} ariaLabel="Object detail">
+      <p>detail body</p>
+    </DetailDrawer>,
+  );
+
+  const body = within(document.body);
+  expect(await body.findByText("detail body")).toBeInTheDocument();
+  await userEvent.click(body.getByRole("button", { name: /close detail/i }));
+  expect(onClose).toHaveBeenCalled();
+});

web/src/components/detail-drawer.tsx

@@ -1,20 +1,22 @@
-import { Outlet } from "react-router-dom";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 
 import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
 
-/**
+/** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports.
- * Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
+ *  Provides the close affordance + an accessible dialog name; the caller supplies the content. */
- * slides from the right. Lazy-loaded so Base UI's drawer code (swipe/snap machinery)
+export function DetailDrawer({
- * splits out of the main entry chunk — the wide pane path never pays for it.
- */
-export function ObjectDetailDrawer({
   open,
   onClose,
+  ariaLabel,
+  children,
 }: {
   open: boolean;
   onClose: () => void;
+  ariaLabel: string;
+  children: ReactNode;
 }) {
   const { t } = useTranslation();
 
@@ -26,18 +28,16 @@ export function ObjectDetailDrawer({
       }}
       swipeDirection="right"
     >
-      <DrawerContent>
+      <DrawerContent aria-label={ariaLabel}>
         <div className="flex justify-end border-b p-2">
           <DrawerClose
             aria-label={t("actions.closeDetail")}
-            className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+            render={<Button variant="ghost" size="icon-sm" />}
           >
             <X className="size-4" aria-hidden="true" />
           </DrawerClose>
         </div>
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto">{children}</div>
-          <Outlet />
-        </div>
       </DrawerContent>
     </Drawer>
   );

web/src/components/external-uri-link.tsx

@@ -0,0 +1,14 @@
+import { focusRing } from "../lib/focus-ring";
+
+export function ExternalUriLink({ uri }: { uri: string }) {
+  return (
+    <a
+      href={uri}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`block truncate rounded-sm text-xs text-muted-foreground hover:text-foreground ${focusRing}`}
+    >
+      {uri}
+    </a>
+  );
+}

web/src/components/filtered-record-list.test.tsx

@@ -0,0 +1,51 @@
+import { expect, test } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { FilteredRecordList } from "./filtered-record-list";
+import { labelText } from "../lib/labels";
+
+type Rec = { id: string; labels: { lang: string; label: string }[] };
+const recs: Rec[] = [
+  { id: "a", labels: [{ lang: "en", label: "Alpha" }] },
+  { id: "b", labels: [{ lang: "en", label: "Beta" }] },
+];
+const row = (r: Rec) => <li>{labelText(r.labels, "en")}</li>;
+
+test("filtering narrows the rendered rows", async () => {
+  renderApp(
+    <FilteredRecordList records={recs} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.getByText("Beta")).toBeInTheDocument();
+  await userEvent.type(screen.getByLabelText(/filter/i), "alph");
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.queryByText("Beta")).toBeNull();
+});
+
+test("empty records show the empty text", () => {
+  renderApp(
+    <FilteredRecordList records={[]} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("EmptyMsg")).toBeInTheDocument();
+});
+
+test("non-empty records with a non-matching filter show no-matches", async () => {
+  renderApp(
+    <FilteredRecordList records={recs} lang="en" isLoading={false} isError={false}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  await userEvent.type(screen.getByLabelText(/filter/i), "zzz");
+  expect(screen.getByText(/no matches/i)).toBeInTheDocument();
+});
+
+test("an error shows the load-error text", () => {
+  renderApp(
+    <FilteredRecordList records={undefined} lang="en" isLoading={false} isError={true}
+      loadErrorText="LoadErr" emptyText="EmptyMsg" renderRow={row} />,
+  );
+  expect(screen.getByText("LoadErr")).toBeInTheDocument();
+});

web/src/components/filtered-record-list.tsx

@@ -0,0 +1,68 @@
+import { Fragment, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { byLabel } from "../lib/sort";
+import { labelText } from "../lib/labels";
+import { Input } from "@/components/ui/input";
+import { ListSkeleton } from "@/components/ui/skeletons";
+
+type LabelView = components["schemas"]["LabelView"];
+
+/** Filterable, alphabetically-sorted list of labelled records with the standard
+ *  loading / error / empty / no-matches states. The filter input stays visible
+ *  during load (matching the prior page behaviour). */
+export function FilteredRecordList<T extends { id: string; labels: LabelView[] }>({
+  records,
+  lang,
+  isLoading,
+  isError,
+  loadErrorText,
+  emptyText,
+  renderRow,
+}: {
+  records: T[] | undefined;
+  lang: string;
+  isLoading: boolean;
+  isError: boolean;
+  loadErrorText: string;
+  emptyText: string;
+  renderRow: (record: T) => ReactNode;
+}) {
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState("");
+
+  const q = filter.trim().toLowerCase();
+  const rows = [...(records ?? [])]
+    .filter((r) => !q || labelText(r.labels, lang).toLowerCase().includes(q))
+    .sort(byLabel(lang));
+
+  return (
+    <>
+      <div className="mb-3">
+        <Input
+          aria-label={t("common.filter")}
+          placeholder={t("common.filter")}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
+      {isLoading ? (
+        <ListSkeleton className="mb-4" rows={5} />
+      ) : (
+        <ul className="mb-4">
+          {isError && <li className="text-sm text-destructive">{loadErrorText}</li>}
+          {!isError && records?.length === 0 && (
+            <li className="text-sm text-muted-foreground">{emptyText}</li>
+          )}
+          {!isError && records && records.length > 0 && rows.length === 0 && (
+            <li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
+          )}
+          {rows.map((r) => (
+            <Fragment key={r.id}>{renderRow(r)}</Fragment>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}

web/src/components/label-editor.test.tsx

@@ -85,3 +85,16 @@ test("no hint when only the default-language label exists", () => {
   renderApp(<Harness initial={[{ lang: "sv", label: "Brons" }]} />);
   expect(screen.queryByText(/other languages/i)).not.toBeInTheDocument();
 });
+
+test("each LabelEditor instance gets a unique input id", () => {
+  renderApp(
+    <>
+      <LabelEditor value={[]} onChange={() => {}} />
+      <LabelEditor value={[]} onChange={() => {}} />
+    </>,
+  );
+  const inputs = screen.getAllByLabelText(/label/i);
+  expect(inputs).toHaveLength(2);
+  expect(inputs[0].id).not.toBe("");
+  expect(inputs[0].id).not.toBe(inputs[1].id);
+});

web/src/components/label-editor.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
@@ -19,6 +20,7 @@ export function LabelEditor({
   onChange: (labels: LabelInput[]) => void;
 }) {
   const { t } = useTranslation();
+  const inputId = useId();
   const { default_language } = useConfig();
 
   const current = value.find((l) => l.lang === default_language)?.label ?? "";
@@ -32,8 +34,8 @@ export function LabelEditor({
 
   return (
     <div className="space-y-1">
-      <Label htmlFor="label">{t("labels.label")}</Label>
+      <Label htmlFor={inputId}>{t("labels.label")}</Label>
-      <Input id="label" value={current} onChange={(e) => set(e.target.value)} />
+      <Input id={inputId} value={current} onChange={(e) => set(e.target.value)} />
       {hasOtherLanguages && (
         <p className="text-xs text-muted-foreground">{t("labels.otherLanguages")}</p>
       )}

web/src/components/labelled-record-create-form.test.tsx

@@ -0,0 +1,28 @@
+import { expect, test, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { LabelledRecordCreateForm } from "./labelled-record-create-form";
+
+test("submitting with empty labels shows the required error and does not call onCreate", async () => {
+  const onCreate = vi.fn();
+  renderApp(
+    <LabelledRecordCreateForm heading="New" submitLabel="Create" pending={false} error={null} onCreate={onCreate} />,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  expect(screen.getByRole("alert")).toBeInTheDocument();
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("a valid submit calls onCreate and the reset clears the inputs", async () => {
+  const onCreate = vi.fn((_labels: unknown, _uri: unknown, reset: () => void) => reset());
+  renderApp(
+    <LabelledRecordCreateForm heading="New" submitLabel="Create" pending={false} error={null} onCreate={onCreate} />,
+  );
+  const labelInput = screen.getByLabelText(/^label$/i) as HTMLInputElement;
+  await userEvent.type(labelInput, "Bronze");
+  await userEvent.click(screen.getByRole("button", { name: /create/i }));
+  expect(onCreate).toHaveBeenCalled();
+  expect((screen.getByLabelText(/^label$/i) as HTMLInputElement).value).toBe("");
+});

web/src/components/labelled-record-create-form.tsx

@@ -0,0 +1,76 @@
+import { useId, useState, type FormEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { LabelEditor } from "./label-editor";
+import { MutationError } from "./mutation-error";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type LabelInput = components["schemas"]["LabelInput"];
+
+/** Create form for a labelled record (term/authority): single-language label +
+ *  optional external URI, with required-label validation and a status-aware error.
+ *  `onCreate` performs the mutation and is handed a `reset` to clear the inputs on success. */
+export function LabelledRecordCreateForm({
+  heading,
+  submitLabel,
+  pending,
+  error,
+  onCreate,
+}: {
+  heading: ReactNode;
+  submitLabel: string;
+  pending: boolean;
+  error: unknown;
+  onCreate: (labels: LabelInput[], uri: string | null, reset: () => void) => void;
+}) {
+  const { t } = useTranslation();
+  const uriId = useId();
+
+  const [labels, setLabels] = useState<LabelInput[]>([]);
+  const [uri, setUri] = useState("");
+  const [requiredError, setRequiredError] = useState(false);
+
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!labels.some((l) => l.label)) {
+      setRequiredError(true);
+      return;
+    }
+
+    setRequiredError(false);
+    onCreate(labels, uri.trim() || null, () => {
+      setLabels([]);
+      setUri("");
+    });
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-2 border-t pt-3">
+      <div className="text-sm font-medium">{heading}</div>
+      <LabelEditor value={labels} onChange={setLabels} />
+      <div className="space-y-1">
+        <Label htmlFor={uriId}>{t("labels.externalUri")}</Label>
+        <Input
+          id={uriId}
+          type="url"
+          placeholder={t("labels.uriPlaceholder")}
+          value={uri}
+          onChange={(e) => setUri(e.target.value)}
+        />
+      </div>
+      {requiredError && (
+        <p role="alert" className="text-xs text-destructive">
+          {t("form.required")}
+        </p>
+      )}
+      <MutationError error={error} />
+      <Button type="submit" size="sm" disabled={pending}>
+        {submitLabel}
+      </Button>
+    </form>
+  );
+}

web/src/components/labelled-record-row.test.tsx

@@ -0,0 +1,74 @@
+import { expect, test, vi } from "vitest";
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { renderApp } from "../test/render";
+import { LabelledRecordRow, type RecordLike } from "./labelled-record-row";
+import { HttpError } from "../api/queries";
+
+const record: RecordLike = { id: "r1", external_uri: null, labels: [{ lang: "en", label: "Bronze" }] };
+
+test("edit → save calls onSave and closes via done()", async () => {
+  const onSave = vi.fn((_labels: unknown, _uri: unknown, done: () => void) => done());
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={null}
+        onEditOpen={() => {}}
+        onSave={onSave}
+        onDelete={async () => {}}
+      />
+    </ul>,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  await userEvent.click(screen.getByRole("button", { name: /save/i }));
+  expect(onSave).toHaveBeenCalled();
+  expect(screen.queryByRole("button", { name: /save/i })).toBeNull();
+});
+
+test("a save error renders inline and the row stays editable", async () => {
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={new HttpError(403)}
+        onEditOpen={() => {}}
+        onSave={() => {}}
+        onDelete={async () => {}}
+      />
+    </ul>,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+  expect(screen.getByRole("alert")).toHaveTextContent(/permission/i);
+  expect(screen.getByRole("button", { name: /save/i })).toBeInTheDocument();
+});
+
+test("confirming delete invokes onDelete", async () => {
+  const onDelete = vi.fn(async () => {});
+  renderApp(
+    <ul>
+      <LabelledRecordRow
+        record={record}
+        lang="en"
+        deleteConfirmKey="actions.confirmDeleteTerm"
+        savePending={false}
+        saveError={null}
+        onEditOpen={() => {}}
+        onSave={() => {}}
+        onDelete={onDelete}
+      />
+    </ul>,
+  );
+  await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+  const dialog = within(document.body);
+  const confirmButtons = await dialog.findAllByRole("button", { name: /delete/i });
+  await userEvent.click(confirmButtons[confirmButtons.length - 1]);
+  expect(onDelete).toHaveBeenCalled();
+});

web/src/components/labelled-record-row.tsx

@@ -0,0 +1,102 @@
+import { useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { LabelEditor } from "./label-editor";
+import { DeleteConfirmDialog } from "./delete-confirm-dialog";
+import { MutationError } from "./mutation-error";
+import { ExternalUriLink } from "./external-uri-link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { labelText } from "../lib/labels";
+
+type LabelView = components["schemas"]["LabelView"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export type RecordLike = { id: string; labels: LabelView[]; external_uri: string | null };
+
+/** One labelled record (term/authority): a display row with edit + delete, or an
+ *  inline editor. All variance (mutation hooks, arg shapes, delete-confirm key) is
+ *  supplied by the caller via callbacks/state — see term-row.tsx / authority-row.tsx. */
+export function LabelledRecordRow({
+  record,
+  lang,
+  deleteConfirmKey,
+  savePending,
+  saveError,
+  onEditOpen,
+  onSave,
+  onDelete,
+}: {
+  record: RecordLike;
+  lang: string;
+  deleteConfirmKey: string;
+  savePending: boolean;
+  saveError: unknown;
+  onEditOpen: () => void;
+  onSave: (labels: LabelInput[], uri: string | null, done: () => void) => void;
+  onDelete: () => Promise<void>;
+}) {
+  const { t } = useTranslation();
+  const uriId = useId();
+
+  const [editing, setEditing] = useState(false);
+  const [labels, setLabels] = useState<LabelInput[]>(record.labels as LabelInput[]);
+  const [uri, setUri] = useState(record.external_uri ?? "");
+
+  if (editing) {
+    return (
+      <li className="space-y-2 border-b py-2">
+        <LabelEditor value={labels} onChange={setLabels} />
+        <div className="space-y-1">
+          <Label htmlFor={uriId}>{t("labels.externalUri")}</Label>
+          <Input
+            id={uriId}
+            type="url"
+            placeholder={t("labels.uriPlaceholder")}
+            value={uri}
+            onChange={(e) => setUri(e.target.value)}
+          />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            disabled={savePending}
+            onClick={() => onSave(labels, uri.trim() || null, () => setEditing(false))}
+          >
+            {t("actions.save")}
+          </Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
+            {t("form.cancel")}
+          </Button>
+        </div>
+        <MutationError error={saveError} />
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex items-center gap-2 border-b py-1 text-sm">
+      <div className="flex-1">
+        <div>{labelText(record.labels, lang)}</div>
+        {record.external_uri && <ExternalUriLink uri={record.external_uri} />}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          onEditOpen();
+          setLabels(record.labels as LabelInput[]);
+          setUri(record.external_uri ?? "");
+          setEditing(true);
+        }}
+      >
+        {t("actions.edit")}
+      </Button>
+      <DeleteConfirmDialog description={t(deleteConfirmKey)} onConfirm={onDelete} />
+    </li>
+  );
+}

web/src/components/mutation-error.test.tsx

@@ -0,0 +1,21 @@
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import "../i18n";
+import { MutationError } from "./mutation-error";
+import { HttpError, InUseError } from "../api/queries";
+
+test("renders the status-specific message for an HttpError", () => {
+  render(<MutationError error={new HttpError(403)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/permission/i);
+});
+
+test("renders the in-use count for an InUseError", () => {
+  render(<MutationError error={new InUseError(2)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/2/);
+});
+
+test("renders nothing when there is no error", () => {
+  const { container } = render(<MutationError error={null} />);
+  expect(container).toBeEmptyDOMElement();
+});

web/src/components/mutation-error.tsx

@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next";
+
+import { errorMessageKey } from "../api/error-message";
+
+/** Renders a caught mutation error as an inline alert, or nothing when error is falsy.
+ *  Replaces the duplicated `<p role="alert" className="text-xs text-destructive">` markup. */
+export function MutationError({ error }: { error: unknown }) {
+  const { t } = useTranslation();
+  if (!error) return null;
+  const { key, opts } = errorMessageKey(error);
+  return (
+    <p role="alert" className="text-xs text-destructive">
+      {t(key, opts)}
+    </p>
+  );
+}

web/src/components/ui/alert-dialog.tsx

@@ -50,7 +50,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 overscroll-y-contain rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

web/src/components/ui/card.tsx

@@ -1,103 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

web/src/components/ui/combobox.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect } from 'storybook/test'
+
+import {
+  ComboboxRoot,
+  ComboboxInputGroup,
+  ComboboxInput,
+  ComboboxClear,
+  ComboboxTrigger,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxEmpty,
+} from './combobox'
+
+const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry']
+
+function ComboboxDemo() {
+  const [value, setValue] = useState<string | null>(null)
+
+  return (
+    <ComboboxRoot<string | null>
+      items={fruits}
+      value={value}
+      onValueChange={setValue}
+      itemToStringLabel={(item) => item ?? ''}
+      isItemEqualToValue={(a, b) => a === b}
+    >
+      <ComboboxInputGroup>
+        <ComboboxInput placeholder='Pick a fruit' />
+        <ComboboxClear aria-label='Clear' />
+        <ComboboxTrigger aria-label='Open' />
+      </ComboboxInputGroup>
+      <ComboboxPopup>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+        <ComboboxList>
+          {(item: string) => (
+            <ComboboxItem key={item} value={item}>
+              <ComboboxItemIndicator className='text-primary'>✓</ComboboxItemIndicator>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </ComboboxRoot>
+  )
+}
+
+const meta = {
+  component: ComboboxDemo,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof ComboboxDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText('Pick a fruit')).toBeInTheDocument()
+  },
+}

web/src/components/ui/combobox.tsx

@@ -20,7 +20,10 @@ function ComboboxInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-input"
-      className={cn("w-full rounded border px-2 py-1 pr-12 text-sm", className)}
+      className={cn(
+        "w-full rounded border px-2 py-1 pr-12 text-sm transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
@@ -31,7 +34,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
       className={cn(
-        "absolute right-6 text-neutral-400 hover:text-neutral-700",
+        "absolute right-6 rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
         className,
       )}
       {...props}
@@ -43,7 +46,10 @@ function ComboboxTrigger({ className, ...props }: ComboboxPrimitive.Trigger.Prop
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("absolute right-1 text-neutral-500", className)}
+      className={cn(
+        "absolute right-1 rounded-sm text-muted-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+        className,
+      )}
       {...props}
     />
   );
@@ -56,7 +62,7 @@ function ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {
         <ComboboxPrimitive.Popup
           data-slot="combobox-popup"
           className={cn(
-            "max-h-64 min-w-48 overflow-auto rounded border bg-white p-1 text-sm shadow-md",
+            "max-h-64 min-w-48 overflow-auto overscroll-y-contain rounded border bg-popover p-1 text-sm text-popover-foreground shadow-md",
             className,
           )}
           {...props}
@@ -81,7 +87,7 @@ function ComboboxItem({ className, ...props }: ComboboxPrimitive.Item.Props) {
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "flex cursor-default items-center gap-2 rounded px-2 py-1 data-[highlighted]:bg-indigo-50",
+        "flex cursor-default items-center gap-2 rounded px-2 py-1 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
         className,
       )}
       {...props}
@@ -103,7 +109,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
   return (
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
-      className={cn("px-2 py-1 text-neutral-500", className)}
+      className={cn("px-2 py-1 text-muted-foreground", className)}
       {...props}
     />
   );

web/src/components/ui/drawer.tsx

@@ -35,7 +35,7 @@ function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.
         <DrawerPrimitive.Popup
           data-slot="drawer-content"
           className={cn(
-            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
+            "fixed inset-y-0 right-0 flex w-full max-w-md flex-col overflow-y-auto overscroll-y-contain bg-background shadow-xl outline-none duration-200 data-open:animate-in data-open:slide-in-from-right data-closed:animate-out data-closed:slide-out-to-right",
             className,
           )}
           {...props}

web/src/components/ui/menu.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within } from 'storybook/test'
+
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from './menu'
+import { Button } from './button'
+
+const meta = {
+  component: Menu,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof Menu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger render={<Button variant="ghost">Open</Button>} />
+      <MenuContent>
+        <MenuItem>First</MenuItem>
+        <MenuSeparator />
+        <MenuItem>Second</MenuItem>
+      </MenuContent>
+    </Menu>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Open' }))
+    await expect(
+      await within(document.body).findByText('First'),
+    ).toBeInTheDocument()
+  },
+}

web/src/components/ui/menu.tsx

@@ -0,0 +1,67 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+
+function Menu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="menu" {...props} />
+}
+
+function MenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />
+}
+
+function MenuContent({
+  className,
+  sideOffset = 6,
+  align = "end",
+  ...props
+}: MenuPrimitive.Popup.Props & {
+  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"]
+  align?: MenuPrimitive.Positioner.Props["align"]
+}) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        sideOffset={sideOffset}
+        align={align}
+        className="z-50"
+      >
+        <MenuPrimitive.Popup
+          data-slot="menu-content"
+          className={cn(
+            "min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function MenuItem({ className, ...props }: MenuPrimitive.Item.Props) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="menu-item"
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator }

web/src/components/ui/page-title.tsx

@@ -6,7 +6,7 @@ export function PageTitle({ className, ...props }: ComponentProps<"h1">) {
   return (
     <h1
       data-slot="page-title"
-      className={cn("text-2xl font-semibold tracking-tight", className)}
+      className={cn("text-2xl font-semibold tracking-tight text-balance", className)}
       {...props}
     />
   )

web/src/components/ui/select.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { expect, within } from 'storybook/test'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
+
+function Controlled() {
+  const [value, setValue] = useState('')
+  return (
+    <Select value={value} onValueChange={(next) => setValue(next ?? '')}>
+      <SelectTrigger aria-label="Fruit">
+        <SelectValue placeholder="Pick one" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="pear">Pear</SelectItem>
+        <SelectItem value="plum">Plum</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+
+const meta = {
+  component: Select,
+  tags: ['ai-generated'],
+  render: () => <Controlled />,
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole('combobox', { name: 'Fruit' }))
+    await userEvent.click(await within(document.body).findByRole('option', { name: 'Pear' }))
+    await expect(canvas.getByRole('combobox', { name: 'Fruit' })).toHaveTextContent('Pear')
+  },
+}

web/src/components/ui/select.tsx

@@ -0,0 +1,132 @@
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { Check, ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+// Base UI's <Select.Value> resolves the selected item's *label* from the
+// Root `items` prop only; without it the trigger shows the raw value. We
+// derive that map from the rendered <SelectItem> children so consumers keep
+// the simple `<SelectItem value="…">Label</SelectItem>` API and still get
+// labels (not raw values) in the trigger.
+function collectItems(
+  node: React.ReactNode,
+  out: Array<{ value: unknown; label: React.ReactNode }>
+) {
+  React.Children.forEach(node, (child) => {
+    if (!React.isValidElement(child)) {
+      return
+    }
+
+    if (child.type === SelectItem) {
+      const props = child.props as SelectPrimitive.Item.Props
+
+      out.push({ value: props.value, label: props.children })
+
+      return
+    }
+
+    const props = child.props as { children?: React.ReactNode }
+
+    if (props.children != null) {
+      collectItems(props.children, out)
+    }
+  })
+}
+
+function Select<Value>({ children, ...props }: SelectPrimitive.Root.Props<Value>) {
+  const items = React.useMemo(() => {
+    const collected: Array<{ value: unknown; label: React.ReactNode }> = []
+
+    collectItems(children, collected)
+
+    return collected
+  }, [children])
+
+  return (
+    <SelectPrimitive.Root data-slot="select" items={items} {...props}>
+      {children}
+    </SelectPrimitive.Root>
+  )
+}
+
+function SelectTrigger({ className, children, ...props }: SelectPrimitive.Trigger.Props) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "flex h-8 w-full min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm transition-colors outline-none",
+        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+        "dark:bg-input/30 data-[popup-open]:border-ring",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon className="text-muted-foreground">
+        <ChevronDown className="h-4 w-4" aria-hidden />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("truncate", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectContent({
+  className,
+  sideOffset = 6,
+  ...props
+}: SelectPrimitive.Popup.Props & {
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"]
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        sideOffset={sideOffset}
+        className="z-50"
+        alignItemWithTrigger={false}
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          className={cn(
+            "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto overscroll-y-contain rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+            "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+            className
+          )}
+          {...props}
+        />
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" aria-hidden />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem }

web/src/components/ui/skeletons.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { AppShellSkeleton, FormSkeleton, ListSkeleton } from './skeletons'
+
+const meta = {
+  component: ListSkeleton,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof ListSkeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const List: Story = {
+  render: () => <ListSkeleton rows={4} />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('status')).toBeInTheDocument()
+  },
+}
+
+export const Form: Story = { render: () => <FormSkeleton /> }
+
+export const AppShellLoading: Story = { render: () => <AppShellSkeleton /> }

web/src/components/ui/skeletons.tsx

@@ -0,0 +1,63 @@
+import { useTranslation } from "react-i18next"
+
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+function ListSkeleton({
+  rows = 6,
+  rowClassName = "h-9 w-full",
+  className,
+}: {
+  rows?: number
+  rowClassName?: string
+  className?: string
+}) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-2 p-3", className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className={rowClassName} />
+      ))}
+    </div>
+  )
+}
+
+function FormSkeleton({ fields = 5, className }: { fields?: number; className?: string }) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-4 p-4", className)}>
+      {Array.from({ length: fields }).map((_, i) => (
+        <div key={i} className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      ))}
+      <Skeleton className="h-8 w-28" />
+    </div>
+  )
+}
+
+function AppShellSkeleton() {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className="flex min-h-screen">
+      <aside className="w-44 space-y-2 border-r p-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-8 w-full" />
+        ))}
+      </aside>
+      <div className="flex flex-1 flex-col">
+        <div className="flex items-center border-b px-4 py-2">
+          <Skeleton className="h-6 w-40" />
+        </div>
+        <div className="flex-1 space-y-2 p-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-9 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { ListSkeleton, FormSkeleton, AppShellSkeleton }

web/src/components/ui/toast.tsx

@@ -1,6 +1,7 @@
 import type * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { toastManager } from "@/toast/toast-manager";
@@ -14,9 +15,9 @@ function ToastList() {
       toast={toast}
       data-slot="toast"
       className={cn(
-        "flex items-start gap-2 rounded-md border bg-white p-3 text-sm shadow-md",
+        "flex items-start gap-2 rounded-md border bg-popover p-3 text-sm text-popover-foreground shadow-md",
-        toast.type === "error" && "border-red-300",
+        toast.type === "error" && "border-destructive",
-        toast.type === "success" && "border-green-300",
+        toast.type === "success" && "border-success",
       )}
     >
       <div className="flex-1">
@@ -28,15 +29,15 @@ function ToastList() {
         )}
         <ToastPrimitive.Description
           data-slot="toast-description"
-          className="text-neutral-700"
+          className="text-muted-foreground"
         />
       </div>
       <ToastPrimitive.Close
         data-slot="toast-close"
         aria-label={t("common.close")}
-        className="text-neutral-400 hover:text-neutral-700"
+        className="text-muted-foreground hover:text-foreground"
       >
-        ×
+        <X className="size-4" aria-hidden="true" />
       </ToastPrimitive.Close>
     </ToastPrimitive.Root>
   ));

web/src/components/ui/tooltip.tsx

@@ -22,7 +22,7 @@ function TooltipPopup({ className, ...props }: TooltipPrimitive.Popup.Props) {
     <TooltipPrimitive.Popup
       data-slot="tooltip-popup"
       className={cn(
-        "rounded border bg-white px-2 py-1 text-sm shadow-md",
+        "rounded border bg-popover px-2 py-1 text-sm text-popover-foreground shadow-md",
         className,
       )}
       {...props}