diff --git a/project-docs/specs/project_management_app.md b/project-docs/specs/project_management_app.md
index 2a37f734d..b485e3b42 100644
--- a/project-docs/specs/project_management_app.md
+++ b/project-docs/specs/project_management_app.md
@@ -44,6 +44,15 @@
 > existing `isFiltered` predicate, through a promoted `src/components/EmptyState.tsx`.
 > Frontend only — no migration, no API change. ⚠️ **The four-theme sweep is owed** for the
 > same reason: no browser runs in this environment. ·
+> 🟢 **S5 BUILT 2026-08-10, on branch `ws-s5-projects-task-panel`, NOT merged and NOT
+> deployed** (§11.22) — the second reversed-direction finding: `/projects`' `TaskPanel`
+> adopts `/tasks`' `ItemDetail` **composition** (header chip row → grouped details cells →
+> discrete labelled sections → pinned composer, one scroll region) and loses its two raw
+> controls. **`Select` is added to `src/components/ui/Input.tsx`** — the themed
+> single-choice field the tree never had, which 38 files had each hand-rolled — and the file
+> input is hidden behind a `<Button>` that lists what is uploading. **Conformance grows a
+> seventh rule** for both. Frontend only — no migration, no API change. ⚠️ Same owed check:
+> no browser runs here, so the phone viewport and the four-theme sweep are for review. ·
 > **Owner:** vjvarada · **Board row: WS-27**
 >
 > **Tenancy (audited 2026-08-10 — this spec previously cited no tenancy decision at all).**
@@ -1675,13 +1684,22 @@ Windows box against the live DB. **Name the files.**
 
 ```bash
 uv run pytest tests/unit/test_projects_routes.py tests/unit/test_projects_grants.py \
-              tests/unit/test_projects_migration.py tests/unit/test_projects_sync.py \
+              tests/unit/test_projects_migration.py \
               tests/unit/test_projects_import_mapping.py \
-              tests/unit/test_projects_personal_mirror.py \
+              tests/unit/test_projects_personal.py \
+              tests/unit/test_gtd_retirement_plan.py \
               tests/unit/test_org_access_control.py tests/unit/test_org_access_enforcement.py
 cd workbench/control_plane && npx tsc --noEmit && npm test
 ```
 
+*(Corrected 2026-08-10, found by S5 while running this block: it named
+`test_projects_sync.py` and `test_projects_personal_mirror.py`, **neither of
+which exists** — the second is `test_projects_personal.py`, and the first never
+landed under that name. A verification command that names a missing file makes
+pytest exit non-zero before running anything, so anyone who pasted this block
+saw a red run that had nothing to do with their change — and anyone who "fixed"
+it by deleting the offending path silently dropped real coverage.)*
+
 House style applies: hermetic route tests (fake session, monkeypatch the DB seam on the
 SUT submodule), the migration asserted idempotent **statically** over its text, cascade
 claims checked against `tests/unit/_schema_cascade.py`'s derived FK graph (the N8 lesson:
@@ -2873,6 +2891,93 @@ component), and `projects/lib/mywork.isOverdue`, which this change left caller-l
 second answer to a question `lib/taskCard.isOverdue` already answers better (it also checks
 `completed_at`).
 
+### 11.22 S5 — the task panel adopts the Tasks detail's composition (built 2026-08-10)
+
+**Owner-reported from screenshots of the deployed app**, comparing `/projects`' `TaskPanel`
+with `/tasks`' `ItemDetail` side by side: *"Task cards seem to be very different."* Like
+§11.21 this is a **reversed-direction** finding — the standing ruling is "Projects is
+canonical, Tasks conforms", and on this one surface Tasks was the designed one. Frontend
+only: no migration, no API change, no new dependency. Branch
+`ws-s5-projects-task-panel` — **not merged, not deployed.**
+
+**The controls, before → after.** Measured on `main` `54e4b880`:
+
+| Control | Before | After |
+|---|---|---|
+| Status | bare `<select>` with a copied class string | `<Select>` (new primitive) inside the Status cell |
+| Attachments | `<input type="file">`, i.e. *"Choose Files / No file chosen"* | hidden input raised by `<Button icon="Upload">`, with the in-flight filenames listed |
+| Close | raw `<button>` + `<Icon name="X">` | `<Button variant="ghost" size="icon-sm" icon="X">` |
+| Comment | raw `<textarea>` + raw `<button className="bg-primary …">` | `<Textarea>` + `<Button>` (this is the −1 on `SOLID_BUTTON_DEBT`) |
+| Assignee / subtask entry | two raw `<input>`s | `<Input>`, the subtask one with a leading `Plus` |
+| Assignee chips, "auto" marker | hand-rolled `<span>`s | `<Badge>` (`warning` tone for an address that is neither an email nor `agent:<name>`) |
+| Mention chips | raw rounded `<button>`s | `<Button variant="secondary" size="sm">` |
+
+Imports from `@/components/ui/` went from **one** to **four**, plus `StatusChip`.
+
+**`Select` is a seam, not a one-off.** `src/components/ui/Input.tsx` had `Input` and
+`Textarea` and no single-choice field at all, so **38 files** hand-rolled one — each with
+its own `const SELECT = "cc-control rounded-lg border border-border …"` — of which **37
+remain** after this change (nine in `app/projects/`, five in `app/tasks/`), all baselined.
+The primitive uses `appearance-none` plus
+`<Icon name="ChevronDown">` so the disclosure glyph follows the active **pack**; the native
+triangle is drawn by the OS and follows neither the theme nor the pack. One honest limit,
+shared with every `<select>` on the web: the popup list is the browser's, so the option rows
+do not take our tokens. `Textarea` also gains a declared `ref` (React 19 passes it as an
+ordinary prop; the comment box needs it to restore the caret after an @mention).
+
+**The composition**, re-derived by reading `ItemDetail.tsx` rather than described from
+memory: header (`bg-card`) carrying ref + copy-link + watch + close, the title, then the
+status **chip row** → one scroll region holding `DETAILS` (bordered `FieldCell`s: Status,
+Assignees) · `DESCRIPTION` · `PROPERTIES` (tags, repeats) · the custom-fields block ·
+`LINKS & SUBTASKS` · `FILES` · `ACTIVITY` → a pinned comment composer. The panel root moved
+to `bg-background` so the `bg-card` cells read as cards, which is why `ItemDetail` is built
+that way. It used to be **two** scroll regions — a fixed field block that could eat the
+whole panel on a short window, with the timeline scrolling under it.
+
+**What did NOT come across, deliberately:** `MetaEdit`'s click-to-edit flip (Projects'
+controls are live; hiding them behind a click is an interaction change, not a composition
+one) and every Tasks-only concept — context, energy, the founder priority matrix — which
+live on `pm_task_personal` and are not this surface's data. Everything Projects has and
+Tasks does not stays: task ref and deep link, tags, relations/links, watchers, recurrence,
+custom fields, attachments, the activity timeline and comments.
+
+**Width.** The details grid is `grid-cols-1` with **no** responsive variant. The cap is
+lifted by the PAGE (`[&>aside]:max-w-none` on the phone branch), so a `sm:` variant would
+key off the viewport and split the 448px docked column on a 4K monitor — the exact collision
+`/tasks`' detail hit when it was docked at 380px. The title wraps rather than truncating.
+
+**Fence (R7): `conformance.test.ts` rule 7**, two halves.
+*Selects* — `<select>` per file, ratcheted like rules 1/3/5/6, with 37 files baselined
+(TaskPanel deliberately absent as the worked example) and `components/ui/Input.tsx`
+allowlisted with a staleness check. *File pickers* — **absolute, no budget**: every other
+picker in the tree (chat upload, résumé parser, signature image, meeting audio, email
+composer) was already hidden behind a real control, so this one is a rule with no
+exceptions. `SOLID_BUTTON_DEBT` 30 → 29 in the same change, per the file's own protocol.
+
+Both halves were **mutation-checked** (raw `<select>` restored → red; `className="hidden"`
+deleted → red; file restored byte-identically each time), and the second mutation is why the
+fence is right: the first draft tested `/\bhidden\b/` over the whole tag, which
+**`aria-hidden` satisfied**, so deleting the hiding class left the gate green. Two scanner
+traps are written into the test: the shared `strip()` treats `accept="image/*"` as an opening
+`/*` and swallowed the rest of `SignatureEditor.tsx` (so this rule strips comments only at a
+token boundary), and reading raw source made the rule fail on the *comments explaining it*.
+
+**Owed, and not claimed:** ⚠️ **no browser check was possible** — Playwright cannot install
+here — so the phone viewport and the Fluent → Material → Graphite sweep on `/projects` *and*
+on `/tasks` beside it are owed at review. What was done instead: `tsc --noEmit` clean, 1634
+vitest cases green, `npx vitest run src/lib/theme/` green (361), a production `next build`
+that prerendered `/projects`, and every icon name checked against
+`lib/theme/icon-data/registry.json` for all packs. Also owed, and deliberately not done
+here: promoting `SectionLabel` (and `ItemDetail`'s copy) into `src/components/` with a
+`sharedTaskUi` SEAM row — that edit touches `app/tasks/**`, which another slice holds open —
+and the same for `TagPicker`/`RepeatEditor`/`CustomFieldValues`' own small labels, which
+still use the old lowercase style as sub-labels inside `PROPERTIES`.
+
+⚠️ **This section's own verification block (§10) is stale**: it names
+`tests/unit/test_projects_sync.py` and `tests/unit/test_projects_personal_mirror.py`, and
+neither exists — the second is `test_projects_personal.py`. Run with those two corrected,
+379 pass.
+
 ## Board record (2026-08-09) — moved from work_plan.md §2
 
 > Moved here in the 2026-08-09 consolidation (work_plan.md D18): board rows now
diff --git a/workbench/control_plane/AGENTS.md b/workbench/control_plane/AGENTS.md
index cb2af19df..538d81514 100644
--- a/workbench/control_plane/AGENTS.md
+++ b/workbench/control_plane/AGENTS.md
@@ -16,14 +16,21 @@ The short version, because these are the three mistakes that actually happen:
    friendly name. See rule 7 for what to use instead.
 2. **Never `import … from "lucide-react"`.** Use `<Icon name="Plus" />` — the
    active theme decides which pack draws it.
-3. **Never hand-roll a control.** `Button` / `Input` / `Badge` from
-   `src/components/ui/`. Material makes every button a pill, Graphite uppercases
-   every label; no class string can express that.
+3. **Never hand-roll a control.** `Button` / `Input` / `Select` / `Textarea` /
+   `Badge` from `src/components/ui/`. Material makes every button a pill,
+   Graphite uppercases every label; no class string can express that.
+   **`Select` exists since S5** — a bare `<select>` wears the OS's own
+   disclosure triangle, and 38 files had each copied their own class string
+   instead. A **file input must be hidden** (`className="hidden"`) behind a
+   `<Button>` that raises it, with the chosen filenames listed by the app:
+   "Choose Files / No file chosen" is the browser's string in the browser's
+   font and no theme can reach it.
 
-All three are enforced by `src/lib/theme/conformance.test.ts` (**six** rules:
+All three are enforced by `src/lib/theme/conformance.test.ts` (**seven** rules:
 literals, `lucide-react`, bracket classes, solid-button chrome, raw palette
-classes, and — since S4 — the `bg-accent text-accent-foreground` active pair
-rule 6 below forbids), which carries a frozen baseline for existing debt: a file with no
+classes, the `bg-accent text-accent-foreground` active pair rule 6 below forbids
+— since S4 — and, since S5, raw `<select>`s and visible file inputs), which
+carries a frozen baseline for existing debt: a file with no
 budget must be clean, a baselined file may not get worse, and a baselined file
 that got *better* fails until you lower its number — so the debt figures never
 quietly become fiction. **If your change improves a baselined file, lowering
diff --git a/workbench/control_plane/src/app/projects/components/TaskPanel.tsx b/workbench/control_plane/src/app/projects/components/TaskPanel.tsx
index 74ef1091e..9769e15a7 100644
--- a/workbench/control_plane/src/app/projects/components/TaskPanel.tsx
+++ b/workbench/control_plane/src/app/projects/components/TaskPanel.tsx
@@ -6,11 +6,47 @@
  * Comments and system events come from ONE endpoint because they are one table
  * (§3.8) — the timeline shows a status change, an assignment, an agent run and
  * a comment in the same stream, which is the point of the shared spine.
+ *
+ * ## Composition (S5) — this panel follows `/tasks`' `ItemDetail`
+ *
+ * The standing ruling on the two task surfaces is "Projects is canonical, Tasks
+ * conforms". **This surface is the exception, and the direction is reversed**
+ * (owner-reported from screenshots of the deployed app, comparing the two
+ * detail panels: *"Task cards seem to be very different"*). `ItemDetail` is a
+ * designed surface — a header carrying the chip row and the title, a grouped
+ * details block of bordered field cells, then discrete labelled sections. This
+ * was a plain vertical form: a bare `<select>` for status, a raw file input
+ * rendering the browser's own *"Choose Files / No file chosen"*, and flat
+ * labels stacked with no grouping. Neither of those controls expresses
+ * Material's pill buttons or Graphite's uppercase labels, which is AGENTS.md
+ * rule 3 and is now fenced by conformance rule 7.
+ *
+ * So the grammar here is `ItemDetail`'s: `SectionLabel` for a section,
+ * `FieldCell` for a labelled cell (the chrome its `MetaEdit` draws closed).
+ * What is NOT copied is the interaction — Projects' controls are always
+ * visible rather than click-to-edit, because changing that is an interaction
+ * change wearing a composition change's clothes.
+ *
+ * **Everything Projects has and Tasks does not stays**: the task ref, tags,
+ * relations and links, watchers, recurrence, custom fields, attachments, the
+ * activity timeline and comments. Nothing Tasks-only is imported either —
+ * context, energy and the founder priority matrix live on `pm_task_personal`
+ * and are not this surface's data.
+ *
+ * ⚠️ **One column, always.** The panel is `max-w-md` docked on desktop and
+ * full-screen on a phone (`projects/page.tsx` lifts the cap). A `sm:grid-cols-2`
+ * would key off the VIEWPORT, so it would split the 448px docked column on a 4K
+ * monitor — which is exactly the collision `/tasks`' detail hit when it was
+ * docked at 380px. The surface, not the viewport, decides the column count.
  */
 import Icon from "@/components/Icon";
+import Badge from "@/components/ui/Badge";
 import Button from "@/components/ui/Button";
+import { Input, Select, Textarea } from "@/components/ui/Input";
+import { StatusChip } from "@/components/StatusChip";
 import { useEffect, useRef, useState } from "react";
 
+import { accentForStatus } from "../lib/accent";
 import {
   type ActivityRow,
   type AttachmentRow,
@@ -100,6 +136,68 @@ function describe(activity: ActivityRow, defs: FieldRow[] = []): string {
   }
 }
 
+/**
+ * A section heading — `ItemDetail`'s grammar, re-derived from that file
+ * (`text-[11px] font-semibold uppercase tracking-wide text-muted-foreground`,
+ * optional leading glyph).
+ *
+ * ⚠️ It is a deliberate second copy, and it should not stay one. The shared
+ * home for it is `src/components/`, promoted together with `ItemDetail`'s — and
+ * that edit touches `app/tasks/**`, which another slice holds open. Whoever
+ * takes it adds the row to `src/lib/sharedTaskUi.test.ts`'s SEAM so a third
+ * copy fails.
+ *
+ * Takes an icon NAME, not a component: `<Icon name="…">` is the house idiom and
+ * the active theme picks the pack.
+ */
+function SectionLabel({
+  icon,
+  children,
+}: {
+  icon?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <h3 className="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+      {icon ? <Icon name={icon} className="h-3 w-3" /> : null}
+      {children}
+    </h3>
+  );
+}
+
+/**
+ * One labelled cell in the details block — the chrome `ItemDetail`'s `MetaEdit`
+ * draws in its closed state, without the click-to-edit flip: this panel's
+ * controls are live, and hiding them behind a click would be an interaction
+ * change, not a composition one.
+ *
+ * `trailing` is the right-hand slot of the label row (an accent dot, a count).
+ */
+function FieldCell({
+  label,
+  icon,
+  trailing,
+  children,
+}: {
+  label: string;
+  icon: string;
+  trailing?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-w-0 rounded-md border border-border bg-card px-3 py-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+          <Icon name={icon} className="h-3 w-3" />
+          {label}
+        </span>
+        {trailing}
+      </div>
+      <div className="mt-1.5 text-sm text-foreground">{children}</div>
+    </div>
+  );
+}
+
 export function TaskPanel({
   task,
   statuses,
@@ -124,6 +222,12 @@ export function TaskPanel({
   // WS-27w item 6 — the copy-deep-link affordance's "it worked" flash.
   const [copied, setCopied] = useState(false);
   const [files, setFiles] = useState<AttachmentRow[]>([]);
+  // S5 — the names of the files currently going up. The picker is a <Button>
+  // now, so the browser's "3 files selected" text went with the raw control;
+  // this replaces it, and says something truer — what is IN FLIGHT, rather than
+  // what was last highlighted in a dialog.
+  const [uploading, setUploading] = useState<string[]>([]);
+  const filePicker = useRef<HTMLInputElement | null>(null);
   // WS-27v — null until the read lands, so the toggle never renders a state
   // it is only guessing at.
   const [watching, setWatching] = useState<boolean | null>(null);
@@ -131,6 +235,17 @@ export function TaskPanel({
   // Agents are excluded: an agent cannot receive a notification (migration
   // 152's CHECK), so offering to mention one would promise nothing.
   const mentionable = assignees.filter((who) => !who.startsWith("agent:"));
+  // The status this task is on, and its accent. `statusAccent`'s positional
+  // fallback wants the lane's index, so both come from one lookup; a status_id
+  // with no matching row (the panel opened before its project's statuses
+  // resolved) draws no chip rather than a wrong one.
+  const statusIndex = statuses.findIndex((s) => s.id === task.status_id);
+  const currentStatus = statusIndex >= 0 ? statuses[statusIndex] : undefined;
+  const statusTone = accentForStatus(
+    currentStatus,
+    Math.max(statusIndex, 0),
+    statuses.length,
+  );
 
   useEffect(() => {
     let live = true;
@@ -177,6 +292,7 @@ export function TaskPanel({
     if (!picked || picked.length === 0) return;
     setBusy(true);
     setError(null);
+    setUploading(Array.from(picked).map((f) => f.name));
     try {
       // Sequential, not Promise.all: each upload writes a timeline row, and a
       // burst of parallel writes would interleave them into an order that does
@@ -193,6 +309,7 @@ export function TaskPanel({
     } catch (err) {
       setError(String((err as Error).message));
     } finally {
+      setUploading([]);
       setBusy(false);
     }
   }
@@ -341,11 +458,18 @@ export function TaskPanel({
   }
 
   return (
-    <aside className="flex h-full w-full max-w-md flex-col border-l border-border bg-card">
-      <header className="flex items-start justify-between gap-2 border-b border-border p-3">
-        <div className="min-w-0">
-          <div className="flex items-center gap-0.5">
-            <p className="text-xs text-muted-foreground">{taskRef(task) ?? "Task"}</p>
+    // `bg-background` under a `bg-card` header, which is ItemDetail's
+    // arrangement and the reason the field cells below read as cards at all — a
+    // `bg-card` cell on a `bg-card` panel is an invisible box with a border.
+    // ⚠️ The root must stay an `<aside>`: `projects/page.tsx`'s phone branch
+    // lifts the width cap with `[&>aside]:max-w-none`.
+    <aside className="flex h-full w-full max-w-md flex-col border-l border-border bg-background">
+      <header className="shrink-0 border-b border-border bg-card px-3 py-3">
+        <div className="mb-1.5 flex items-start justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-0.5">
+            <p className="truncate text-xs text-muted-foreground">
+              {taskRef(task) ?? "Task"}
+            </p>
             <Button
               variant="ghost"
               size="icon-xs"
@@ -355,285 +479,409 @@ export function TaskPanel({
               onClick={() => void copyDeepLink()}
             />
           </div>
-          <h2 className="truncate text-sm font-medium text-foreground">{task.title}</h2>
-        </div>
-        <div className="flex shrink-0 items-center gap-0.5">
-          {/* WS-27v — watch/unwatch. Watching means the bell hears about this
-              task; assignees hear regardless, so unwatching never silences
-              work you hold. Hidden (not disabled) until the state is known. */}
-          {watching !== null ? (
+          <div className="flex shrink-0 items-center gap-0.5">
+            {/* WS-27v — watch/unwatch. Watching means the bell hears about this
+                task; assignees hear regardless, so unwatching never silences
+                work you hold. Hidden (not disabled) until the state is known. */}
+            {watching !== null ? (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                icon={watching ? "BellOff" : "Bell"}
+                aria-label={watching ? "Stop watching this task" : "Watch this task"}
+                title={
+                  watching
+                    ? "Watching — click to stop being notified about this task"
+                    : "Watch — get notified about this task"
+                }
+                onClick={() => void toggleWatch()}
+              />
+            ) : null}
             <Button
               variant="ghost"
               size="icon-sm"
-              icon={watching ? "BellOff" : "Bell"}
-              aria-label={watching ? "Stop watching this task" : "Watch this task"}
-              title={
-                watching
-                  ? "Watching — click to stop being notified about this task"
-                  : "Watch — get notified about this task"
-              }
-              onClick={() => void toggleWatch()}
+              icon="X"
+              aria-label="Close task"
+              title="Close this task"
+              onClick={onClose}
             />
+          </div>
+        </div>
+        {/* Wraps rather than truncates: the panel is 448px docked, and the title
+            is the one thing on it nobody can afford to have cut off. */}
+        <h2 className="text-base font-semibold leading-snug text-foreground">
+          {task.title}
+        </h2>
+        {/* The chip row — ItemDetail's status/source strip. The status is drawn
+            here through the shared `StatusChip`, in the accent
+            `accentForStatus` resolves from the owner's stored colour and then
+            from the machine-readable category (`lib/statusAccent.ts`): two
+            facts /tasks does not have, so this reads richer than the pill next
+            door rather than poorer. The Details block below carries the CONTROL
+            that changes it. */}
+        <div className="mt-2 flex flex-wrap items-center gap-1.5">
+          {currentStatus ? (
+            <StatusChip accent={statusTone} label={currentStatus.name} />
+          ) : null}
+          {task.completed_at ? (
+            <Badge tone="success" icon="Check">
+              Completed
+            </Badge>
           ) : null}
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close task"
-            className="rounded p-1 text-muted-foreground hover:bg-muted"
-          >
-            <Icon name="X" className="h-4 w-4" />
-          </button>
         </div>
       </header>
 
-      <div className="space-y-3 border-b border-border p-3 text-sm">
-        <label className="block">
-          <span className="text-xs text-muted-foreground">Status</span>
-          <select
-            value={task.status_id}
-            disabled={busy}
-            onChange={(e) => changeStatus(e.target.value)}
-            className="mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
-          >
-            {statuses.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.name}
-              </option>
-            ))}
-          </select>
-        </label>
-        <div>
-          <span className="text-xs text-muted-foreground">Assignees</span>
-          <div className="mt-1 flex flex-wrap gap-1">
-            {assignees.map((who) => {
-              const kind = classify(who);
-              return (
-                <span
-                  key={who}
-                  title={kind === "unknown" ? "Not an email or agent:<name>" : who}
-                  className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs ${
-                    kind === "unknown"
-                      ? "border border-border text-muted-foreground"
-                      : "bg-muted text-foreground"
-                  }`}
+      {error ? (
+        <p className="shrink-0 border-b border-border bg-muted px-3 py-2 text-xs text-foreground">
+          {error}
+        </p>
+      ) : null}
+
+      {/* ONE scroll region. It used to be two: a fixed field block that could
+          eat the whole panel on a short window, with the timeline scrolling
+          under it. ItemDetail scrolls the whole detail, and so does this now —
+          only the header and the comment composer are pinned. */}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-4 px-3 py-3">
+          <section>
+            <SectionLabel icon="SlidersHorizontal">Details</SectionLabel>
+            {/* `grid-cols-1`, with no responsive variant on purpose — see the
+                width note in this file's header. */}
+            <div className="grid grid-cols-1 gap-2">
+              <FieldCell
+                label="Status"
+                icon="CircleDot"
+                trailing={
+                  <span
+                    className={`h-2 w-2 shrink-0 rounded-full ${statusTone.dot}`}
+                    aria-hidden
+                  />
+                }
+              >
+                <Select
+                  value={task.status_id}
+                  disabled={busy}
+                  aria-label="Status"
+                  onChange={(e) => void changeStatus(e.target.value)}
+                >
+                  {statuses.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.name}
+                    </option>
+                  ))}
+                </Select>
+              </FieldCell>
+
+              <FieldCell
+                label="Assignees"
+                icon="Users"
+                trailing={
+                  assignees.length ? (
+                    <span className="text-[10px] text-muted-foreground">
+                      {assignees.length}
+                    </span>
+                  ) : null
+                }
+              >
+                <div className="flex flex-wrap gap-1">
+                  {assignees.map((who) => {
+                    const kind = classify(who);
+                    return (
+                      <Badge
+                        key={who}
+                        // An address that is neither an email nor `agent:<name>`
+                        // is a typo somebody has to see, so it takes the warning
+                        // tone rather than a quieter outline.
+                        tone={kind === "unknown" ? "warning" : "neutral"}
+                        // Agents and people are one vocabulary (D-PM-4), so the
+                        // difference is an icon, never a separate field.
+                        icon={kind === "agent" ? "Bot" : undefined}
+                        title={
+                          kind === "unknown" ? "Not an email or agent:<name>" : who
+                        }
+                      >
+                        {assigneeLabel(who)}
+                        <button
+                          type="button"
+                          disabled={busy}
+                          aria-label={`Unassign ${who}`}
+                          onClick={() =>
+                            void saveAssignees(withoutAssignee(assignees, who))
+                          }
+                          className="opacity-70 hover:opacity-100"
+                        >
+                          <Icon name="X" className="h-3 w-3" />
+                        </button>
+                      </Badge>
+                    );
+                  })}
+                  {assignees.length === 0 ? (
+                    <span className="text-xs text-muted-foreground">Nobody yet</span>
+                  ) : null}
+                </div>
+                <Input
+                  className="mt-1.5"
+                  value={assignee}
+                  disabled={busy}
+                  onChange={(e) => setAssignee(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      void addAssignees();
+                    }
+                  }}
+                  onBlur={() => void addAssignees()}
+                  placeholder="email or agent:name"
+                  aria-label="Add an assignee"
+                />
+              </FieldCell>
+            </div>
+          </section>
+
+          {task.description ? (
+            <section>
+              <SectionLabel icon="AlignLeft">Description</SectionLabel>
+              <p className="whitespace-pre-wrap text-sm text-foreground">
+                {task.description}
+              </p>
+            </section>
+          ) : null}
+
+          {/* Tags and recurrence draw their own small labels, so they are
+              sub-fields of one section rather than two sections whose headings
+              would compete with the ones those components already render.
+              Promoting those labels onto `SectionLabel` means editing
+              `TagPicker`/`RepeatEditor`, which S5 does not own. */}
+          <section>
+            <SectionLabel icon="Tag">Properties</SectionLabel>
+            <div className="space-y-3">
+              {/* Saved on every change rather than behind a button: a chip is a
+                  single decision, and a Save beside it would be a second click
+                  for something that is already unambiguous. */}
+              <TagPicker
+                value={task.tags ?? []}
+                registry={tags}
+                disabled={busy}
+                onChange={(next) => {
+                  void (async () => {
+                    try {
+                      onChanged(await projectsApi.patchTask(task.id, { tags: next }));
+                    } catch (err) {
+                      setError(String((err as Error).message));
+                    }
+                  })();
+                }}
+              />
+              <RepeatEditor taskId={task.id} />
+            </div>
+          </section>
+        </div>
+
+        {/* Custom fields bring their own section chrome — a top rule, their own
+            gutter and an `h4` — so they sit OUTSIDE the padded column rather
+            than nesting one gutter inside another. Renders nothing at all when
+            the project defined no fields, so a project that never wanted them
+            never grows an empty heading. */}
+        <CustomFieldValues task={task} fields={fields} onChanged={onChanged} />
+
+        <div className="flex flex-col gap-4 px-3 py-3">
+          {/* Both halves existed in the schema since WS-27a with no surface:
+              links could be created and deleted but never listed, and subtasks
+              could be created but never shown. */}
+          <section>
+            <SectionLabel icon="GitBranch">Links &amp; subtasks</SectionLabel>
+            <div className="space-y-2">
+              {onOpenTask ? (
+                <RelationsBlock
+                  taskId={task.id}
+                  task={task}
+                  refreshKey={relationsKey}
+                  onOpenTask={onOpenTask}
+                />
+              ) : null}
+              <Input
+                icon="Plus"
+                value={subtask}
+                disabled={busy}
+                onChange={(e) => setSubtask(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    void addSubtask();
+                  }
+                }}
+                placeholder="Break this down…"
+                aria-label="Add a subtask"
+              />
+            </div>
+          </section>
+
+          <section>
+            <SectionLabel icon="Paperclip">
+              Files{files.length ? ` · ${files.length}` : ""}
+            </SectionLabel>
+            <div className="space-y-1">
+              {files.map((f) => (
+                <div
+                  key={f.attachment_id}
+                  className="flex items-center gap-2 rounded-md border border-border bg-card px-2 py-1.5 text-xs"
                 >
-                  {/* Agents and people are one vocabulary (D-PM-4), so the
-                      difference is an icon, never a separate field. */}
-                  {kind === "agent" ? <Icon name="Bot" className="h-3 w-3" /> : null}
-                  {assigneeLabel(who)}
+                  {f.kind === "image" ? (
+                    <Icon
+                      name="Image"
+                      className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                    />
+                  ) : (
+                    <Icon
+                      name="Paperclip"
+                      className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                    />
+                  )}
+                  <a
+                    href={f.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="min-w-0 flex-1 truncate text-foreground hover:underline"
+                  >
+                    {f.name}
+                  </a>
+                  <span className="shrink-0 text-muted-foreground">
+                    {Math.max(1, Math.round(f.size / 1024))} KB
+                  </span>
                   <button
                     type="button"
                     disabled={busy}
-                    aria-label={`Unassign ${who}`}
-                    onClick={() => void saveAssignees(withoutAssignee(assignees, who))}
-                    className="text-muted-foreground hover:text-foreground"
+                    aria-label={`Remove ${f.name}`}
+                    title="Removes it from this task; the file itself is kept"
+                    onClick={() => void detach(f.attachment_id)}
+                    className="shrink-0 text-muted-foreground hover:text-foreground"
                   >
                     <Icon name="X" className="h-3 w-3" />
                   </button>
-                </span>
-              );
-            })}
-            {assignees.length === 0 ? (
-              <span className="text-xs text-muted-foreground">Nobody yet</span>
-            ) : null}
-          </div>
-          <input
-            value={assignee}
-            disabled={busy}
-            onChange={(e) => setAssignee(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                void addAssignees();
-              }
-            }}
-            onBlur={() => void addAssignees()}
-            placeholder="email or agent:name"
-            aria-label="Add an assignee"
-            className="mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
-          />
-        </div>
-        {task.description ? (
-          <p className="whitespace-pre-wrap text-sm text-foreground">
-            {task.description}
-          </p>
-        ) : null}
-        {/* Renders nothing at all when the project has no custom fields, so a
-            project that never wanted them never grows an empty heading. */}
-        {/* Saved on every change rather than behind a button: a chip is a
-            single decision, and a Save beside it would be a second click for
-            something that is already unambiguous. */}
-        <TagPicker
-          value={task.tags ?? []}
-          registry={tags}
-          disabled={busy}
-          onChange={(next) => {
-            void (async () => {
-              try {
-                onChanged(await projectsApi.patchTask(task.id, { tags: next }));
-              } catch (err) {
-                setError(String((err as Error).message));
-              }
-            })();
-          }}
-        />
-        {/* Both halves existed in the schema since WS-27a with no surface:
-            links could be created and deleted but never listed, and subtasks
-            could be created but never shown. */}
-        {onOpenTask ? (
-          <RelationsBlock
-            taskId={task.id}
-            task={task}
-            refreshKey={relationsKey}
-            onOpenTask={onOpenTask}
-          />
-        ) : null}
-        <RepeatEditor taskId={task.id} />
-        <CustomFieldValues task={task} fields={fields} onChanged={onChanged} />
-        <div>
-          <span className="text-xs text-muted-foreground">Files</span>
-          <div className="mt-1 space-y-1">
-            {files.map((f) => (
-              <div key={f.attachment_id} className="flex items-center gap-2 text-xs">
-                {f.kind === "image" ? (
-                  <Icon name="Image" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                ) : (
-                  <Icon name="Paperclip" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                )}
-                <a
-                  href={f.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="min-w-0 flex-1 truncate text-foreground hover:underline"
-                >
-                  {f.name}
-                </a>
-                <span className="shrink-0 text-muted-foreground">
-                  {Math.max(1, Math.round(f.size / 1024))} KB
-                </span>
-                <button
-                  type="button"
-                  disabled={busy}
-                  aria-label={`Remove ${f.name}`}
-                  title="Removes it from this task; the file itself is kept"
-                  onClick={() => void detach(f.attachment_id)}
-                  className="shrink-0 text-muted-foreground hover:text-foreground"
+                </div>
+              ))}
+              {/* What is going up right now, by name. */}
+              {uploading.map((name) => (
+                <div
+                  key={`uploading:${name}`}
+                  className="flex items-center gap-2 rounded-md border border-dashed border-border px-2 py-1.5 text-xs text-muted-foreground"
                 >
-                  <Icon name="X" className="h-3 w-3" />
-                </button>
-              </div>
-            ))}
-            {files.length === 0 ? (
-              <p className="text-xs text-muted-foreground">Nothing attached.</p>
-            ) : null}
-          </div>
-          <input
-            type="file"
-            multiple
-            disabled={busy}
-            aria-label="Attach files"
-            onChange={(e) => {
-              void uploadFiles(e.target.files);
-              // Reset so picking the SAME file twice still fires a change.
-              e.target.value = "";
-            }}
-            className="mt-1 w-full text-xs text-muted-foreground file:mr-2 file:rounded-md file:border file:border-border file:bg-background file:px-2 file:py-1 file:text-xs file:text-foreground"
-          />
-        </div>
-        <div>
-          <span className="text-xs text-muted-foreground">Subtask</span>
-          <input
-            value={subtask}
-            disabled={busy}
-            onChange={(e) => setSubtask(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                void addSubtask();
-              }
-            }}
-            placeholder="Break this down…"
-            aria-label="Add a subtask"
-            className="mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
-          />
-        </div>
-      </div>
-
-      {error ? (
-        <p className="border-b border-border bg-muted px-3 py-2 text-xs text-foreground">
-          {error}
-        </p>
-      ) : null}
+                  <Icon name="Loader2" className="h-3.5 w-3.5 shrink-0 animate-spin" />
+                  <span className="min-w-0 flex-1 truncate">{name}</span>
+                </div>
+              ))}
+              {files.length === 0 && uploading.length === 0 ? (
+                <p className="text-xs text-muted-foreground">Nothing attached.</p>
+              ) : null}
+            </div>
+            {/* S5 — the picker is a Button, not a bare file input. The
+                browser's own "Choose Files / No file chosen" is not a design:
+                it follows neither the theme's control personality nor the icon
+                pack, and it was the most visibly unstyled control on this
+                panel. The input stays in the tree, hidden, because it is the
+                only way to raise the OS file dialog. Fenced by conformance
+                rule 7. */}
+            <input
+              ref={filePicker}
+              type="file"
+              multiple
+              className="hidden"
+              tabIndex={-1}
+              aria-hidden
+              onChange={(e) => {
+                void uploadFiles(e.target.files);
+                // Reset so picking the SAME file twice still fires a change.
+                e.target.value = "";
+              }}
+            />
+            <Button
+              className="mt-2"
+              variant="secondary"
+              size="sm"
+              icon="Upload"
+              loading={uploading.length > 0}
+              disabled={busy}
+              onClick={() => filePicker.current?.click()}
+            >
+              {uploading.length > 0 ? "Uploading…" : "Attach files"}
+            </Button>
+          </section>
 
-      <ol className="flex-1 space-y-3 overflow-y-auto p-3">
-        {timeline.map((activity) => (
-          <li key={activity.id} className="text-sm">
-            <p className="flex items-center gap-1 text-xs text-muted-foreground">
-              {/* WS-27z — an automated entry says so. The flag is the row's
-                  meta.automation, written only by the workflow engine; a
-                  sweep archiving a task must not read as a person did it. */}
-              {isAutomated(activity) ? (
-                <span
-                  className="inline-flex items-center gap-0.5"
-                  title="Automated by a workflow"
-                >
-                  <Icon name="Bot" className="h-3 w-3" />
-                  <span className="text-[10px]">auto</span>
-                </span>
+          <section>
+            <SectionLabel icon="History">Activity</SectionLabel>
+            <ol className="space-y-3">
+              {timeline.map((activity) => (
+                <li key={activity.id} className="text-sm">
+                  <p className="flex items-center gap-1 text-xs text-muted-foreground">
+                    {/* WS-27z — an automated entry says so. The flag is the row's
+                        meta.automation, written only by the workflow engine; a
+                        sweep archiving a task must not read as a person did it. */}
+                    {isAutomated(activity) ? (
+                      <Badge size="xs" icon="Bot" title="Automated by a workflow">
+                        auto
+                      </Badge>
+                    ) : null}
+                    <span className="min-w-0 truncate">
+                      {activity.created_by ?? "system"}
+                      {activity.created_at
+                        ? ` · ${new Date(activity.created_at).toLocaleString()}`
+                        : ""}
+                    </span>
+                  </p>
+                  <p className="whitespace-pre-wrap text-foreground">
+                    {describe(activity, fields)}
+                  </p>
+                </li>
+              ))}
+              {timeline.length === 0 ? (
+                <li className="text-sm text-muted-foreground">
+                  Nothing on the timeline yet.
+                </li>
               ) : null}
-              <span className="min-w-0 truncate">
-                {activity.created_by ?? "system"}
-                {activity.created_at
-                  ? ` · ${new Date(activity.created_at).toLocaleString()}`
-                  : ""}
-              </span>
-            </p>
-            <p className="whitespace-pre-wrap text-foreground">{describe(activity, fields)}</p>
-          </li>
-        ))}
-        {timeline.length === 0 ? (
-          <li className="text-sm text-muted-foreground">Nothing on the timeline yet.</li>
-        ) : null}
-      </ol>
+            </ol>
+          </section>
+        </div>
+      </div>
 
-      <div className="border-t border-border p-3">
-        <textarea
+      <div className="shrink-0 border-t border-border bg-card p-3">
+        <Textarea
           ref={commentBox}
+          inputSize="lg"
           value={comment}
           onChange={(e) => setComment(e.target.value)}
           placeholder="Add a comment…"
+          aria-label="Add a comment"
           rows={2}
-          className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm text-foreground"
         />
         {/* Mentionable people are this task's assignees. A full directory
             picker is WS-28e's job; these are who a comment names in practice,
             and typing the address by hand still works for anyone else. */}
         {mentionable.length ? (
-          <div className="mt-1 flex flex-wrap items-center gap-1">
+          <div className="mt-1.5 flex flex-wrap items-center gap-1">
             <span className="text-[10px] text-muted-foreground">Mention</span>
             {mentionable.map((who) => (
-              <button
+              <Button
                 key={who}
-                type="button"
+                variant="secondary"
+                size="sm"
                 onClick={() => mention(who)}
-                className="rounded-full border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground"
               >
                 @{who.split("@")[0]}
-              </button>
+              </Button>
             ))}
           </div>
         ) : null}
         {notDelivered ? (
           <p className="mt-1 text-[11px] text-muted-foreground">{notDelivered}</p>
         ) : null}
-        <button
-          type="button"
+        <Button
+          className="mt-2 w-full"
+          icon="MessageSquare"
           onClick={addComment}
           disabled={busy || !comment.trim()}
-          className="mt-2 w-full rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground disabled:opacity-50"
         >
           Comment
-        </button>
+        </Button>
       </div>
     </aside>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
index 55bf3be28..e47aaad93 100644
--- a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
@@ -354,10 +354,17 @@ export function TaskDetail({
           />
         </section>
 
-        {/* Metadata grid — every cell is click-to-edit */}
+        {/* Metadata grid — every cell is click-to-edit.
+            ⚠️ Column count follows the SURFACE, not the viewport. This detail
+            was built for the `max-w-3xl` modal, where two columns are
+            comfortable; docking it into DESIGN_SYSTEM §6's 380px pane left each
+            cell ~170px and its label and value collided (owner-reported after
+            the S2 deploy, with a screenshot). A media query cannot fix it —
+            the pane is 380px on a 4K monitor too — so the switch is `focused`,
+            the prop that already distinguishes the two lives. */}
         <section>
           <SectionLabel icon={themedIcon("Tag")}>Details</SectionLabel>
-          <div className="grid grid-cols-2 gap-2">
+          <div className={`grid gap-2 ${focused ? "grid-cols-2" : "grid-cols-1"}`}>
             {/* Context */}
             <MetaEdit label="Context" icon={themedIcon("Tag")}
               display={item.context
diff --git a/workbench/control_plane/src/components/ui/Input.tsx b/workbench/control_plane/src/components/ui/Input.tsx
index 915f03806..d5d4552de 100644
--- a/workbench/control_plane/src/components/ui/Input.tsx
+++ b/workbench/control_plane/src/components/ui/Input.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * Input and Textarea — the shared text-entry primitives.
+ * Input, Textarea and Select — the shared field primitives.
  *
  * Same reason as Button: the focus treatment is a theme decision (Fluent's
  * tight 2px ring vs Material's 3px) and cannot come from a copied class list.
@@ -9,6 +9,7 @@
  *     <Input value={q} onChange={…} placeholder="Search" />
  *     <Input icon="Search" value={q} onChange={…} />
  *     <Textarea rows={4} value={body} onChange={…} />
+ *     <Select value={statusId} onChange={…}>{…<option>}</Select>
  *
  * Mobile font size stays pinned at 16px on the `lg` size because anything
  * smaller makes iOS zoom the viewport on focus — the reason the app avoids
@@ -73,10 +74,75 @@ export type TextareaProps = Omit<
 > & {
   inputSize?: InputSize;
   className?: string;
+  /**
+   * Forwarded to the underlying `<textarea>` — declared for the same reason
+   * `InputProps.ref` is: the HTML-attribute types do not carry `ref`, and on
+   * React 19 a function component receives it as an ordinary prop, so the
+   * spread below is the whole plumbing. Projects' comment box needs it to
+   * restore the caret after inserting an @mention.
+   */
+  ref?: React.Ref<HTMLTextAreaElement>;
 };
 
 export function Textarea({ inputSize = "md", className = "", ...rest }: TextareaProps) {
   return <textarea {...rest} className={`${BASE} ${SIZES[inputSize]} resize-y ${className}`} />;
 }
 
+export type SelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  "size" | "className"
+> & {
+  inputSize?: InputSize;
+  className?: string;
+  ref?: React.Ref<HTMLSelectElement>;
+};
+
+/**
+ * Select — the single-choice field primitive (S5).
+ *
+ * Added because the tree had **no** themed select and every app hand-rolled
+ * one: `app/projects/components/{FilterBar,CustomFieldValues,TableView,…}` and
+ * `app/tasks/components/{TaskToolbar,TaskSettingsModal,…}` each carry a private
+ * `const SELECT = "cc-control rounded-lg border border-border …"` string, and
+ * `TaskPanel`'s status control had not even got that far — it was a bare
+ * `<select>` with the browser's own chrome, which is what an owner comparing
+ * `/projects` and `/tasks` side by side actually saw.
+ *
+ * Two things a class string cannot do, which is why this is a component:
+ *
+ * * `appearance-none` + our own `<Icon name="ChevronDown">` puts the disclosure
+ *   glyph on the active **pack** — the native triangle is drawn by the OS and
+ *   follows neither the theme nor the icon pack;
+ * * `cc-control` carries the theme's label transform, tracking and focus ring
+ *   (Graphite uppercases, Material's ring is wider), and a copied string goes
+ *   stale the moment those tokens change.
+ *
+ * One honest limit, shared with every `<select>` on the web: the **popup list**
+ * is rendered by the browser, so the option rows do not take our tokens. The
+ * closed control — which is the part that sits on the surface all the time —
+ * does.
+ */
+export function Select({
+  inputSize = "md",
+  className = "",
+  children,
+  ...rest
+}: SelectProps) {
+  return (
+    <div className="relative w-full">
+      <select
+        {...rest}
+        className={`${BASE} ${SIZES[inputSize]} cursor-pointer appearance-none pr-7 disabled:cursor-not-allowed ${className}`}
+      >
+        {children}
+      </select>
+      <Icon
+        name="ChevronDown"
+        size={14}
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+      />
+    </div>
+  );
+}
+
 export default Input;
diff --git a/workbench/control_plane/src/lib/theme/conformance.test.ts b/workbench/control_plane/src/lib/theme/conformance.test.ts
index e47f612b4..b4287a101 100644
--- a/workbench/control_plane/src/lib/theme/conformance.test.ts
+++ b/workbench/control_plane/src/lib/theme/conformance.test.ts
@@ -29,6 +29,16 @@
  *    `sky-500` keeps its hue while every surface around it moves. Categorical
  *    hues have their own themed home now (`--cat-1` … `--cat-8`); state has
  *    `--success` / `--warning` / `--destructive`.
+ * 6. **Active/selected wears the house token.** `bg-accent text-accent-foreground`
+ *    is a legal pair of tokens meaning the wrong thing — see that rule's own note.
+ * 7. **Single-choice and file pickers use the primitives.** A bare `<select>`
+ *    wears the OS's own disclosure triangle and a raw `<input type="file">`
+ *    wears the browser's *"Choose Files / No file chosen"*. Neither follows the
+ *    theme, the icon pack or the label transform, and both were sitting on
+ *    `/projects`' task panel when the owner compared it with `/tasks`' detail
+ *    side by side. Use `<Select>` from `components/ui/Input.tsx`, and keep the
+ *    file input hidden behind a `<Button>` — which is what every correct call
+ *    site in this tree already does.
  *
  * ## Ratchet, not a wall
  *
@@ -294,7 +304,7 @@ describe("solid controls go through the Button primitive", () => {
    * stating is "this number goes down". New files are covered separately and
    * absolutely below — which is the half that governs work we have not done yet.
    */
-  const SOLID_BUTTON_DEBT = 30;
+  const SOLID_BUTTON_DEBT = 29;
 
   function solidButtons(): Record<string, number> {
     const out: Record<string, number> = {};
@@ -554,6 +564,223 @@ describe("active and selected use the house token", () => {
   });
 });
 
+// ── Rule 7: single-choice and file pickers use the primitives ───────────────
+
+describe("selects and file pickers go through the primitives", () => {
+  /**
+   * Why this rule exists, and why it is two halves of one thing (S5).
+   *
+   * `/projects`' task panel changed status through a bare `<select>` and
+   * attached files through a raw `<input type="file">`. Both are *themed for
+   * colour* — they carried `border-border` and `bg-background` — and both are
+   * unreachable by everything else the engine does: the disclosure triangle is
+   * drawn by the OS, "Choose Files / No file chosen" is the browser's own
+   * string in the browser's own font, and neither picks up Graphite's uppercase
+   * labels, Material's state layer or the theme's focus ring. That is the same
+   * argument rule 4 makes about `<button className="bg-primary">`, and the same
+   * blind spot: rules 1/3/5 look only at colour, so CI was silent while an owner
+   * spotted it from a screenshot of the deployed app.
+   *
+   * The file half is deliberately narrower than "no `<input type='file'>`": the
+   * hidden input is the ONLY way to raise the OS dialog, so every correct
+   * implementation has one. What must not happen is the input being the visible
+   * control. So the fence is *a file input that is not hidden*.
+   */
+  const SELECT_TAG = /<select\b/g;
+
+  /**
+   * Comments removed — this rule's own version, because the shared `strip()`
+   * cannot be used here and neither can raw source.
+   *
+   * * Raw source counts the *documentation*: the first run of this rule failed
+   *   `TaskPanel.tsx` twice over, on the two comments explaining why its raw
+   *   controls were replaced. A gate a code comment can trip teaches people not
+   *   to comment (`sharedTaskUi.test.ts` learned the same thing).
+   * * The shared `strip()` deletes `/* … *\/` wherever it appears, and
+   *   `accept="image/*"` opens one — so it swallowed the remainder of
+   *   `SignatureEditor.tsx` into one `<input>` tag and reported an
+   *   already-hidden picker as visible.
+   *
+   * So a block comment is only removed when its `/*` sits on a token boundary,
+   * which `{/* … *\/}` and `/** … *\/` do and an attribute value does not.
+   */
+  const stripTags = (text: string) =>
+    text
+      .replace(/(?<=^|[\s{(])\/\*[\s\S]*?\*\//g, "")
+      .replace(/(?<![:"'/])\/\/[^\n]*/g, "");
+
+  /** The primitive's own implementation. Same shape as ICON_SOURCES. */
+  const SELECT_SOURCES = ["components/ui/Input.tsx"];
+
+  /**
+   * Every hand-rolled `<select>` left in the tree, per file.
+   *
+   * Large because `<Select>` did not exist until S5 — each of these predates the
+   * primitive and carries its own copy of the class string. Same ratchet as
+   * rules 1/3/5/6: an unbudgeted file must be clean, a budgeted one may not get
+   * worse, and one that improved fails until its number comes down.
+   *
+   * `app/projects/components/TaskPanel.tsx` is deliberately absent: it was the
+   * first file converted and is the worked example.
+   */
+  const SELECT_DEBT: Record<string, number> = {
+    "app/artifacts/page.tsx": 3,
+    "app/crm/components/PipelineSettings.tsx": 2,
+    "app/email/components/SignatureEditor.tsx": 1,
+    "app/email/components/TaskCaptureModal.tsx": 2,
+    "app/email/components/automation/DigestSettingsDialog.tsx": 2,
+    "app/email/components/automation/ai-settings/HistoryTab.tsx": 1,
+    "app/email/components/automation/ai-settings/RulesTab.tsx": 3,
+    "app/email/components/automation/ai-settings/SettingsTab.tsx": 3,
+    "app/email/components/automation/ai-settings/VoiceProfileDialog.tsx": 1,
+    "app/notes/components/FollowupEmailModal.tsx": 1,
+    "app/notes/components/MeetingPrep.tsx": 1,
+    "app/notes/components/NotesSettingsModal.tsx": 1,
+    "app/notes/meeting/[id]/page.tsx": 1,
+    "app/people/components/PersonEditor.tsx": 2,
+    "app/projects/components/BulkBar.tsx": 2,
+    "app/projects/components/CustomFieldValues.tsx": 1,
+    "app/projects/components/FieldManager.tsx": 1,
+    "app/projects/components/FilterBar.tsx": 3,
+    "app/projects/components/ImportClickUp.tsx": 2,
+    "app/projects/components/RelationsBlock.tsx": 1,
+    "app/projects/components/RepeatEditor.tsx": 3,
+    "app/projects/components/TableView.tsx": 3,
+    "app/projects/components/TagManager.tsx": 1,
+    "app/settings/groups/page.tsx": 2,
+    "app/settings/members/page.tsx": 2,
+    "app/tasks/components/EngageView.tsx": 2,
+    "app/tasks/components/TaskSettingsModal.tsx": 2,
+    "app/tasks/components/TaskToolbar.tsx": 3,
+    "app/tasks/components/calendar/CalendarSettings.tsx": 3,
+    "app/tasks/components/calendar/PlanDayPanel.tsx": 1,
+    "app/whatsapp/calls/page.tsx": 1,
+    "app/whatsapp/settings/categories/page.tsx": 1,
+    "app/workflows/components/NodeInspector.tsx": 6,
+    "app/workflows/components/TriggerPanel.tsx": 1,
+    "components/TierCard.tsx": 1,
+    "components/genUITemplates.tsx": 1,
+    "components/room/ShareSheet.tsx": 1,
+  };
+
+  const selects = (rel: string) =>
+    SELECT_SOURCES.includes(rel)
+      ? 0
+      : (stripTags(read(rel)).match(SELECT_TAG) ?? []).length;
+
+  it("a file with no budget uses <Select>", () => {
+    const offenders = sourceFiles()
+      .filter((f) => f.endsWith(".tsx") && !(f in SELECT_DEBT))
+      .map((f) => [f, selects(f)] as const)
+      .filter(([, n]) => n > 0);
+    expect(
+      offenders,
+      "Use `<Select>` from components/ui/Input.tsx. A bare <select> is themed " +
+        "for colour and frozen for everything else — the disclosure glyph comes " +
+        "from the OS rather than the active icon pack, and the label transform " +
+        "and focus ring never reach it.",
+    ).toEqual([]);
+  });
+
+  it("no baselined file gets worse, and none is stale", () => {
+    const drift = Object.entries(SELECT_DEBT)
+      .map(([f, budget]) => ({ file: f, budget, actual: selects(f) }))
+      .filter((r) => r.actual !== r.budget);
+    expect(drift, "Update SELECT_DEBT to match reality — down only.").toEqual([]);
+  });
+
+  it("the primitive's allowlist has no stale entry", () => {
+    for (const f of SELECT_SOURCES) {
+      expect(
+        count(read(f), SELECT_TAG),
+        `${f} no longer renders a <select> — drop it from SELECT_SOURCES`,
+      ).toBeGreaterThan(0);
+    }
+  });
+
+  /**
+   * Every `<input …>` opening tag, brace-aware.
+   *
+   * Not `/<input\b[^>]*>/`: a JSX attribute routinely contains `>` inside an
+   * arrow function, so the lazy version ends the tag at `onChange={(e) =>` and
+   * whether `className="hidden"` was seen would depend on the order somebody
+   * happened to write the attributes in. That is a fence that passes for the
+   * wrong reason — the same trap `sharedTaskUi.test.ts` documents for
+   * `<TaskCardShell>`.
+   *
+   * Fed by `stripTags`, not the shared `strip()` — see that helper's note.
+   */
+  const inputTags = (text: string): string[] => {
+    const out: string[] = [];
+    for (const m of text.matchAll(/<input\b/g)) {
+      let depth = 0;
+      let i = m.index + m[0].length;
+      for (; i < text.length; i++) {
+        const c = text[i];
+        if (c === "{") depth++;
+        else if (c === "}") depth--;
+        else if (c === ">" && depth === 0) break;
+      }
+      out.push(text.slice(m.index, i));
+    }
+    return out;
+  };
+
+  const fileInputs = (rel: string) =>
+    inputTags(stripTags(read(rel))).filter((tag) =>
+      /type=["']file["']/.test(tag),
+    );
+
+  /**
+   * Hidden by a CLASS, not merely by a tag that says "hidden" somewhere.
+   *
+   * ⚠️ `/\bhidden\b/` over the whole tag is what this checked first, and
+   * `aria-hidden` satisfied it — so deleting `className="hidden"` from the one
+   * file input this ticket converted left the fence green. Measured, not
+   * reasoned: the mutation was run and the suite passed. `sr-only` counts too;
+   * it is the other legitimate way to park an input off-screen behind a real
+   * control.
+   */
+  const HIDDEN_CLASS =
+    /className=(?:["'`][^"'`]*\b(?:hidden|sr-only)\b|\{[^}]*\b(?:hidden|sr-only)\b)/;
+
+  /** File inputs that are the visible control rather than a hidden trigger. */
+  const visibleFileInputs = (rel: string) =>
+    fileInputs(rel).filter((tag) => !HIDDEN_CLASS.test(tag)).length;
+
+  /**
+   * No budget, on purpose. Measured across the whole tree at S5: every other
+   * file picker here — chat uploads, the résumé parser, the signature image,
+   * the meeting-audio drop, the email composer — was already a hidden input
+   * behind a real control, and `TaskPanel` was the only surface showing the
+   * browser's own. A rule with no exceptions is worth more than a budget nobody
+   * reads (rule 2 learned the same thing about `lucide-react`).
+   */
+  it("a file picker is a Button, not the browser's own control", () => {
+    const offenders = sourceFiles()
+      .filter((f) => f.endsWith(".tsx"))
+      .map((f) => [f, visibleFileInputs(f)] as const)
+      .filter(([, n]) => n > 0);
+    expect(
+      offenders,
+      'Hide the input (`className="hidden"`) and raise it from a <Button> — ' +
+        '"Choose Files / No file chosen" is the browser\'s string in the ' +
+        "browser's font, and no theme can reach it. The chosen filenames belong " +
+        "on the surface, listed by the app.",
+    ).toEqual([]);
+  });
+
+  it("the file-picker scan sees the real ones", () => {
+    // Guards the shape of the assertion above: a scanner that matches nothing
+    // passes it forever. There are hidden file inputs in this tree, and this is
+    // the count that says the regex still finds them.
+    const seen = sourceFiles()
+      .filter((f) => f.endsWith(".tsx"))
+      .reduce((n, f) => n + fileInputs(f).length, 0);
+    expect(seen, "No file inputs found at all — the scan broke.").toBeGreaterThan(5);
+  });
+});
+
 // ── The published contract stays published ──────────────────────────────────
 
 describe("the --cc-* contract matches its documentation", () => {