@marver-design/marver 0.21.0 → 0.22.0

package/docs/context.md

@@ -0,0 +1,117 @@
+# Context
+
+Code says what is implemented. **`context/`** says the rest - what is available and to whom, how each
+capability works, why it was decided, what is next - with evidence, in files any agent reads. The
+canvas reads the same files: every feature board wears the status they record.
+
+```
+context/
+  INDEX.md                 routing only, under 800 words - read first
+  shipped.md               the only place availability is written, every cell with its evidence
+  product/<capability>.md  one current contract per capability
+  map.json                 which code each capability lives in
+  playbooks/<name>/        how we do things: steps with checks, traps, a run log
+  feedback/                the inbox: one row per piece of feedback, with its state
+  plans/                   proposals in flight - folded into their contract when they land
+```
+
+A fresh agent with no memory reads the index and at most two more files per question. On the first
+project this was run on, a blind eval answered the same 16 questions correctly before and after - with
+40% fewer tokens after, and answers that said which deploys were confirmed and which only reported.
+
+## Start
+
+```bash
+npx marver context init
+```
+
+Creates `INDEX.md`, `shipped.md`, `map.json` and the two playbooks Marver maintains -
+`reorganize-context` and `publish-canvas` - and adds one line to your root `AGENTS.md` routing every
+agent to the index. It never overwrites; re-running it updates the playbooks you have not edited and
+stages a new version beside any you have. `--kind knowledge` keeps a delivered record instead -
+Project and Delivered columns - and a repository without a canvas gets the conventions themselves as
+`context/README.md`.
+
+Then ask your agent: *"Read design/instructions/context.md and set up our context."* It interviews
+you first - who is involved, where each relationship happens, what is private - then drafts from
+evidence: the shipped record from deploy runs and the changelog, the map from the code, contracts
+for the capabilities that matter now. Where nothing proves a claim, it writes `unknown`.
+
+**Context that exists but is scattered** - specs out of date, nobody sure what is live - is a job for
+the `reorganize-context` playbook: on a branch, never deleting, truth first (the shipped record),
+then authority (current contracts), then files, proven by a blind before-and-after eval.
+
+## Evidence
+
+Every availability claim in `shipped.md` carries a level and a citation:
+
+- `confirmed` - observed in a system of record: the deploy job that ran for that service and
+  succeeded, a ci run that executed the suite.
+- `reported` - a written claim, cited: a changelog line, an ops note.
+- `unknown` - neither, with the reason.
+
+An environment marked "deployed" is not proof on its own, and commit ancestry says a change is
+inside a revision, not that the revision is running.
+
+## The check
+
+```bash
+npx marver context check            # exit 0 pass, 1 fail, 2 cannot determine
+npx marver context check --base origin/main --body-file pr.md
+npx marver context index            # regenerate the index's capability table from the map
+```
+
+It fails on:
+
+- availability or a status line in a contract ("live since", "on production") - that is the
+  shipped record's alone;
+- "section 20 wins where it differs" - one answer per rule;
+- an evidence cell without a level, or `confirmed` and `reported` without a citation;
+- a link or a `path:line` citation that does not resolve;
+- the index over 800 words, or its capability table out of step with `map.json`;
+- a `restricted` file tracked by git, or a `team` file reachable from a published board;
+- a feedback item `shipped` without a `confirmed` availability, or a state off its list;
+- `"status": "done"` on a board - Done comes only from the record;
+- on a pull request, a change to a contracted capability's code without its contract, unless the
+  body says `no-contract-change: <capability> - <why>`.
+
+It reports, without failing: playbooks gone stale since their last success, and source files the
+map neither maps nor excludes (`"source"` in `map.json` names what counts).
+
+In ci, with full history:
+
+```yaml
+- uses: actions/checkout@v4
+  with: { fetch-depth: 0 }
+- run: npx marver context check
+```
+
+On a pull request it reads the base, head and body from GitHub's event.
+
+## On the canvas
+
+Feature and project boards wear a status, read from these files - the first that matches wins:
+
+| | When | Status |
+|---|---|---|
+| 1-3 | the board says `"status": "archived"`, `"paused"`, or `"blocked"` with a `"reason"` - by hand, or from the sidebar's **Change status…** | Archived · Paused · Blocked |
+| 4 | the evidence cannot be read | Unknown |
+| 5 | an open plan in `context/plans/` names the capability | In progress, filling by phase |
+| 6 | `shipped.md` shows it available, `confirmed` - in a clause (one per `;`) with no negation or pending word ("nowhere", "not yet", "rolled back", "planned") and, for a product, no pre-production place (staging, preview, dev, local, testing) unless it also names production | Done |
+| 7 | ... `reported` only | Done, reported |
+| 8 | its contract is `state: current` | To do |
+| 9 | anything else | Backlog |
+
+A board finds its capability by its own name, or `"capability": "<slug>"`. The fill reads the
+board's phase scenes - `<capability>-specs`, `-lofi`, then the capability itself - once each holds a
+frame. The tooltip says what decided it. Change a file and the sidebar follows; no reload.
+[Boards and folders](boards-and-folders.md) has the board types the status rides on.
+
+## Audiences
+
+`team` - everyone with the repository, the default; `publishable` - may appear on a published canvas;
+`restricted` - never tracked by git (a gitignored `context/private/`). A frame that renders a `team`
+file onto a published board fails the check, and a published build never carries a board's status,
+reason or capability unless its publish row opts in with `"showStatus": true` - and then only rows
+5 to 9, and only a status whose every source is publishable: a file under `context/` that says
+`audience: publishable`, or a scene brief that does not say otherwise (it ships with its board).

package/docs/sharing.md

@@ -119,7 +119,8 @@ the read-privacy work also called "v2" further down.)
       "max": "read",                         //   required - the ceiling ("read" | "comment")
       "type": "design",                      //   optional - the artifact type (default "mix")
       "open": "focus",                       //   optional - the landing view
-      "lock": true                           //   optional - freeze the landing view (needs "open")
+      "lock": true,                          //   optional - freeze the landing view (needs "open")
+      "showStatus": true                     //   optional - show a feature board's status (0.22)
     }
   },
   "reveal": { "structure": true, "source": false }
@@ -130,7 +131,16 @@ the read-privacy work also called "v2" further down.)
   affects *access*; everything else is presentation.
 - **`type`** is one of `doc`, `slides`, `design`, `sketch`, `refs`, `mix`
   (default `mix`). It picks the board's default landing view and its card icon;
-  nothing infers a type from content.
+  nothing infers a type from content. Since 0.22 a board's own type suggests one
+  - a `deck` board `slides`, a `context` board `refs`, a `project` `doc` - as a
+  note in `marver build`; the row decides.
+- **`showStatus`** (0.22) shows a feature or project board's status on the
+  published canvas - only Backlog, To do, In progress, Done and Done reported,
+  only when every file it was read from is publishable - `audience: publishable`
+  under `context/`; a scene brief counts unless it says otherwise - never a
+  blocked reason or the evidence itself, and with the date the build read it.
+  Without it no status ships, and a published board never carries its
+  `status`, `reason` or `capability`.
 - **`open`** names the landing view: `canvas`, `board`, `present`, `focus`,
   or `slides`. `canvas` and `board` both land on the canvas; `present`,
   `focus`, and `slides` are their own modes. Absent means the type decides

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components - comment @marver and your own coding agent does the work. The tool ships no AI.",
   "type": "module",
   "private": false,

package/src/client/shell/BoardList.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
-import { useStore, HAS_ALL_SCENES, PUBLISHED, fetchBoardTree, rememberTitles, type TreeBase } from './store.ts'
+import { useStore, HAS_ALL_SCENES, PUBLISHED, STATUS_AS_OF, fetchBoardTree, rememberMeta, rememberTitles, type BoardMeta, type TreeBase } from './store.ts'
+import { StatusIcon, TypeIcon } from './board-icons.tsx'
+import { StatusPicker } from './StatusPicker.tsx'
+import type { StatusWord } from '../../shared/board-types.ts'
+import { PHASE_LABEL, STATUS_LABEL } from '../../shared/status.ts'
 import { canvasCtl } from './canvas/Canvas.tsx'
 import { Tip } from './Tip.tsx'
 import { copyToClipboard, type MenuItem, type MenuOpener } from './ContextMenu.tsx'
@@ -26,6 +30,14 @@ const readClosed = (): Record<string, true> => { try { return JSON.parse(localSt
 /** The inline input: renaming a board or a folder, or naming a NEW folder that does not exist
  *  yet - drawn at `index` in `parent`'s items (null = the root), optionally with `board`
  *  already inside it. */
+/** A status's tooltip: what it is, how far along, why, and the evidence that decided it. */
+function statusTip(m: BoardMeta): string {
+  const st = m.status!
+  const head = STATUS_LABEL[st.status] + (st.fill ? ` - ${PHASE_LABEL[st.fill]}` : '')
+  const asOf = STATUS_AS_OF ? `as of ${new Date(STATUS_AS_OF).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })}` : null
+  return [head, st.reason, ...(st.evidence ?? []), asOf].filter(Boolean).join('\n')
+}
+
 type Naming = { kind: 'board' | 'folder'; name: string } | { kind: 'new'; index: number; board?: string; parent: string | null }
 /** A mutation as intent: applied to whichever tree is current, so a 409 can replay it. */
 type Intent = (tree: TreeItem[]) => TreeItem[] | null
@@ -33,6 +45,7 @@ type Intent = (tree: TreeItem[]) => TreeItem[] | null
 export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   const board = useStore((s) => s.board)
   const titles = useStore((s) => s.boardTitles)                       // board slug → title, off the last tree read
+  const meta = useStore((s) => s.boardMeta)                           // board slug → type and status (spec 20)
   const label = (n: string) => labelOf(n, titles[n])                  // a board's label; a folder's is labelOf(name, item.title)
   const [tree, setTree] = useState<TreeItem[]>([])
   const [naming, setNaming] = useState<Naming | null>(null)
@@ -74,6 +87,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       confirmedRef.current = snap.tree
       baseRef.current = snap.base
       rememberTitles(snap.titles)                                    // the labels follow the same latest-wins rule
+      rememberMeta(snap.meta)                                        // ...and so do types and statuses (spec 20)
       lastErr.current = ''
       show()
       return true
@@ -298,9 +312,23 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     if (parent) setOpen(parent, true)                                // the new folder is drawn inside its parent: show it
     setNaming({ kind: 'new', index, board: withBoard, parent })
   }
+  /** A person's status decision (the picker): written into the board file, its hash checked - a
+   *  write that lost a race re-reads and tries once more, like a rename. */
+  const setStatus = async (n: string, status: StatusWord | null, reason?: string) => {
+    let r = await useStore.getState().setBoardStatus(n, status, reason, baseRef.current.boards[n])
+    if (!r.ok && r.stale && await load()) r = await useStore.getState().setBoardStatus(n, status, reason, baseRef.current.boards[n])
+    if (!r.ok) { useStore.getState().toast(r.error ?? 'status not saved'); return }
+    refresh()                                                        // a clear: what the evidence says now
+  }
   const boardMenu = (n: string, parent: string | null): MenuItem[] => {
     const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`board: ${n}`, 'path copied') }]
     if (PUBLISHED || n === 'all-scenes') return items
+    // a feature or project board: its status first, as Linear puts it - the picker opens in place
+    const m = useStore.getState().boardMeta[n]
+    if (m?.status && m.settable?.length) items.unshift({
+      label: 'Change status…', icon: <StatusIcon status={m.status.status} fill={m.status.fill} />,
+      panel: (close) => <StatusPicker meta={m} onPick={(s, reason) => { close(); void setStatus(n, s, reason) }} />,
+    })
     items.push({ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setNaming({ kind: 'board', name: n }) })
     // the new folder takes the board's own slot at its own level (a sub-folder inside a top-level
     // folder; right after its sub-folder when it sits in one - that level holds no folders)
@@ -393,7 +421,8 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     if (drop.list === null && HAS_ALL_SCENES) return { row: 'b:all-scenes', where: 'before', depth: 0 }
     return items.length ? { row: lastRow(items[items.length - 1]!), where: 'after', depth } : null
   })()
-  const seamLeft = (depth: number): CSSProperties => ({ ['--seam-left' as string]: `${depth ? depth * INDENT : 6}px` })
+  // a nested seam starts where that list's rows start: the row's own 8px padding plus its indent
+  const seamLeft = (depth: number): CSSProperties => ({ ['--seam-left' as string]: `${depth ? 8 + depth * INDENT : 6}px` })
   const seamOf = (row: string): { cls: string; style?: CSSProperties } =>
     seam && seam.row === row ? { cls: ` drop-${seam.where}`, style: seamLeft(seam.depth) } : { cls: '' }
   const indent = (depth: number) => (depth >= 2 ? ' in-folder in-sub' : depth === 1 ? ' in-folder' : '')
@@ -420,8 +449,9 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         onPointerUp={canDrag ? onPointerUp : undefined}
         onPointerCancel={canDrag ? () => resetPointer() : undefined}
         onLostPointerCapture={canDrag ? (e) => { if (gestureRef.current?.pointerId === e.pointerId) resetPointer() } : undefined}>
-        {n === 'all-scenes' ? <CardsThreeIcon size={14} /> : <CardsIcon size={14} />}
+        {n === 'all-scenes' ? <CardsThreeIcon size={14} /> : meta[n]?.type ? <TypeIcon type={meta[n].type!} /> : <CardsIcon size={14} />}
         <span>{label(n)}</span>
+        {meta[n]?.status && <i className="st" data-status={meta[n].status!.status} title={statusTip(meta[n])}><StatusIcon status={meta[n].status!.status} fill={meta[n].status!.fill} /></i>}
       </button>
     )
   }

package/src/client/shell/ContextMenu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { useStore, SOURCE_REVEALED } from './store.ts'
 
@@ -16,7 +16,9 @@ export function copyToClipboard(text: string, okMsg: string) {
 export const framePath = (board: string, f: { id: string; file: string }) =>
   SOURCE_REVEALED ? `board: ${board} · frame: ${f.id}  (${f.file})` : `board: ${board} · frame: ${f.id}`
 
-export type MenuItem = { label: string; icon: ReactNode; onClick: () => void }
+/** A menu row. `panel` makes it open a panel IN PLACE of the menu (a picker - the board's status),
+ *  drawn by the caller and handed `close`; `onClick` then is not called. */
+export type MenuItem = { label: string; icon: ReactNode; onClick?: () => void; panel?: (close: () => void) => ReactNode }
 export type MenuState = { x: number; y: number; items: MenuItem[] }
 export type MenuOpener = (e: { preventDefault(): void; clientX: number; clientY: number }, items: MenuItem[]) => void
 
@@ -38,6 +40,15 @@ export function useContextMenu() {
 
 export function ContextMenu({ menu, close }: { menu: MenuState | null; close: () => void }) {
   const ref = useRef<HTMLDivElement>(null)
+  const [panel, setPanel] = useState<MenuItem['panel'] | null>(null)
+  const [top, setTop] = useState<number | null>(null)
+  useEffect(() => { setPanel(null); setTop(null) }, [menu])            // a new menu starts as a menu
+  // a panel is taller than the menu it replaces: keep it inside the window
+  useLayoutEffect(() => {
+    if (!menu || !ref.current) return
+    const h = ref.current.getBoundingClientRect().height
+    setTop(Math.max(8, Math.min(menu.y, window.innerHeight - h - 8)))
+  }, [menu, panel])
   useEffect(() => {
     if (!menu) return
     const onDown = (e: PointerEvent) => { if (!ref.current?.contains(e.target as globalThis.Node)) close() }
@@ -49,9 +60,9 @@ export function ContextMenu({ menu, close }: { menu: MenuState | null; close: ()
   const app = document.querySelector('.sh-app')
   if (!menu || !app) return null
   return createPortal(
-    <div className="sh-menu sh-ctxmenu" ref={ref} style={{ left: menu.x, top: menu.y }}>
-      {menu.items.map((it) => (
-        <button key={it.label} onClick={() => { it.onClick(); close() }}>{it.icon}<span>{it.label}</span></button>
+    <div className={`sh-menu sh-ctxmenu${panel ? ' sh-ctxpanel' : ''}`} ref={ref} style={{ left: menu.x, top: top ?? menu.y }}>
+      {panel ? panel(close) : menu.items.map((it) => (
+        <button key={it.label} onClick={() => { if (it.panel) { setPanel(() => it.panel!); return } it.onClick?.(); close() }}>{it.icon}<span>{it.label}</span></button>
       ))}
     </div>,
     app,

package/src/client/shell/StatusPicker.tsx

@@ -0,0 +1,91 @@
+import { useState, type KeyboardEvent } from 'react'
+import { StatusIcon } from './board-icons.tsx'
+import { STATUS_LABEL, type Status } from '../../shared/status.ts'
+import type { StatusWord } from '../../shared/board-types.ts'
+import type { BoardMeta } from './store.ts'
+
+/**
+ * A board's status, from its right-click menu - Linear's picker, on Marver's rule (spec 20): a
+ * person decides only what the evidence cannot. With `context/` that is Blocked (with a reason),
+ * Paused and Archived, and "Back to the evidence" undoes the decision; without it, Backlog, To do
+ * and In progress as well. Done is never offered - it comes from the shipped record. The status
+ * the evidence gives shows read-only at the top, with where it came from.
+ *
+ * Type to filter, arrows and Enter, or a number. Blocked asks why before it writes.
+ */
+type Opt = { key: string; status: StatusWord | null; label: string; icon: Status | 'clear' }
+
+export function StatusPicker({ meta, onPick }: { meta: BoardMeta; onPick: (status: StatusWord | null, reason?: string) => void }) {
+  const settable = meta.settable ?? []
+  const current = meta.status
+  const hasContext = !settable.includes('todo')
+  const decided = !!current && (current.row ?? 9) <= 3                 // rows 1-3: a decision on the board
+  const opts: Opt[] = [
+    ...settable.map((s) => ({ key: s, status: s, label: s === 'blocked' ? 'Blocked…' : STATUS_LABEL[s], icon: s })),
+    ...(hasContext && decided ? [{ key: 'clear', status: null, label: 'Back to the evidence', icon: 'clear' as const }] : []),
+  ]
+  const [q, setQ] = useState('')
+  const shown = opts.map((o, i) => ({ ...o, n: i + 1 })).filter((o) => o.label.toLowerCase().includes(q.trim().toLowerCase()))
+  const [hi, setHi] = useState(0)
+  const [asking, setAsking] = useState(false)
+  const [reason, setReason] = useState(current?.status === 'blocked' ? current.reason ?? '' : '')
+
+  const choose = (o: Opt | undefined) => {
+    if (!o) return
+    if (o.status === 'blocked') { setAsking(true); return }
+    onPick(o.status)
+  }
+  const keys = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHi((h) => Math.min(h + 1, shown.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHi((h) => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter') { e.preventDefault(); choose(shown[hi]) }
+    else if (/^[1-9]$/.test(e.key) && !q) { e.preventDefault(); choose(opts[Number(e.key) - 1]) }
+  }
+
+  if (asking) {
+    const ok = !!reason.trim()
+    return (
+      <div className="sh-status-picker" data-status-picker="reason">
+        <div className="sp-head"><StatusIcon status="blocked" /><b>Blocked - why?</b></div>
+        <input autoFocus className="sp-input" value={reason} maxLength={300} placeholder="Waiting on…"
+          onChange={(e) => setReason(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter' && ok) { e.preventDefault(); onPick('blocked', reason.trim()) } }} />
+        <div className="sp-foot">{ok ? 'Enter to save' : 'A blocked board says why'} · Esc to close</div>
+      </div>
+    )
+  }
+
+  // what the evidence says, when no decision hides it: the status and the line that decided it
+  const evidence = !decided && current && hasContext ? current.evidence?.[0] : undefined
+  return (
+    <div className="sh-status-picker" data-status-picker="list">
+      <input autoFocus className="sp-input" value={q} placeholder="Change status…"
+        onChange={(e) => { setQ(e.target.value); setHi(0) }} onKeyDown={keys} />
+      {current && evidence && (
+        <div className="sp-now" title={current.evidence?.join('\n')}>
+          <StatusIcon status={current.status} fill={current.fill} />
+          <span>{STATUS_LABEL[current.status]}</span>
+          <small>{evidence.replace(/:\s.*$/, '').replace(/^context\//, '')}</small>
+        </div>
+      )}
+      <div className="sp-list">
+        {shown.map((o, i) => {
+          const isCurrent = o.status !== null && o.status === current?.status && (decided || !hasContext)
+          return (
+            <button key={o.key} data-status-option={o.key} className={i === hi ? 'hi' : undefined}
+              onMouseEnter={() => setHi(i)} onClick={() => choose(o)}>
+              {o.icon === 'clear'
+                ? <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden><path d="M3.2 6.2 A4.2 4.2 0 1 1 4.4 10.4 M3.2 3.4 V6.2 H6" /></svg>
+                : <StatusIcon status={o.icon} />}
+              <span>{o.label}</span>
+              {isCurrent && <svg className="sp-chk" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden><path d="M2.5 6.3 L5 8.6 L9.6 3.6" /></svg>}
+              <kbd>{o.n}</kbd>
+            </button>
+          )
+        })}
+        {!shown.length && <div className="sp-empty">No status matches</div>}
+      </div>
+      <div className="sp-foot">{hasContext ? 'Backlog, To do, In progress and Done are read from context/' : 'Done needs a record - context/shipped.md'}</div>
+    </div>
+  )
+}

package/src/client/shell/board-icons.tsx

@@ -0,0 +1,75 @@
+import { useId, type ReactNode } from 'react'
+import type { BoardType } from '../../shared/board-types.ts'
+import type { Phase, Status } from '../../shared/status.ts'
+
+/**
+ * Spec 20's glyphs, custom in a 14-unit space so they sit on the sidebar's 14px rows: one per
+ * board type (stroked in currentColor, so a row's colour - accent when current - carries over),
+ * and Linear-style status rings (their own colours: a status reads the same in every theme).
+ */
+
+const TYPE_PATHS: Record<Exclude<BoardType, 'plain'>, ReactNode> = {
+  start: <path d="M2.5 6.6 L7 2.8 L11.5 6.6 V11.5 H8.4 V8.6 H5.6 V11.5 H2.5 Z" />,
+  feature: <path d="M7 1.9 L11.8 4.6 V9.4 L7 12.1 L2.2 9.4 V4.6 Z M2.2 4.6 L7 7.3 L11.8 4.6 M7 7.3 V12.1" />,
+  surface: <><rect x="2" y="2.8" width="10" height="8.4" rx="1.4" /><path d="M2 5.4 H12" /></>,
+  project: <><rect x="2" y="4.4" width="10" height="7" rx="1.2" /><path d="M5 4.4 V3 H9 V4.4 M2 7.4 H12" /></>,
+  feedback: <path d="M2.4 3.2 H11.6 V9.2 H6.2 L3.8 11.2 V9.2 H2.4 Z" />,
+  context: <path d="M2 8 L3.6 3 H10.4 L12 8 V11.2 H2 Z M2 8 H5 L5.8 9.3 H8.2 L9 8 H12" />,
+  deck: <><rect x="2" y="2.4" width="10" height="6.6" rx="1" /><path d="M7 9 V11.6 M5 11.6 H9" /></>,
+  archive: <><rect x="1.8" y="3" width="10.4" height="3" rx=".8" /><path d="M2.8 6 V11.2 H11.2 V6 M5.8 8.2 H8.2" /></>,
+}
+
+/** A board type's glyph; `plain` is null - the caller keeps its own board icon. */
+export function TypeIcon({ type, size = 14 }: { type: BoardType; size?: number }) {
+  if (type === 'plain') return null
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" strokeLinecap="round" aria-hidden data-type-icon={type}>
+      {TYPE_PATHS[type]}
+    </svg>
+  )
+}
+
+const GRAY = 'var(--glass-ink-3)'
+const YELLOW = '#e2b203'
+const RED = '#e5484d'
+// done is the content palette's green (Apple's systemGreen, per theme - styles.css), the green Marver
+// keeps for done alone; archived is Apple's brown - a cardboard box - per theme as well
+const GREEN = 'var(--status-done, #34c759)'
+const ARCHIVED = 'var(--status-archived, #956d51)'
+
+/** A pie wedge of the ring's interior, `f` of the way round from twelve o'clock. */
+const pie = (f: number, r = 3.4) => {
+  const a = f * 2 * Math.PI
+  const x = 7 + r * Math.sin(a), y = 7 - r * Math.cos(a)
+  return `M7 7 L7 ${7 - r} A${r} ${r} 0 ${f > 0.5 ? 1 : 0} 1 ${x.toFixed(2)} ${y.toFixed(2)} Z`
+}
+
+/** A status glyph, on one rule: a status still open is an outline in its colour (a ring - In progress
+ *  fills it by phase: a quarter at spec, half at lo-fi, three quarters at hi-fi); a settled one is
+ *  filled - Done a green disc, Archived a solid archive box (no ring: it is out of the flow, not a
+ *  step in it). Done, reported stays an outline: a written claim is not settled until confirmed. */
+export function StatusIcon({ status, fill, size = 14 }: { status: Status; fill?: Phase; size?: number }) {
+  const ring = (c: string, dash?: string) => <circle cx="7" cy="7" r="5.8" fill="none" stroke={c} strokeWidth="1.5" strokeDasharray={dash} />
+  // Done's check is cut OUT of its disc, not painted on it: the row behind shows through - the
+  // panel, a hover, the current row's wash - in either theme (a painted white check glared in dark)
+  const cut = `mv-st-${useId().replace(/[^\w-]/g, '')}`
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden data-status-icon={status}>
+      {status === 'backlog' && ring(GRAY, '1.3 1.75')}
+      {status === 'todo' && ring(GRAY)}
+      {status === 'in-progress' && (<>{ring(YELLOW)}{fill && <path d={pie(fill / 4)} fill={YELLOW} />}</>)}
+      {status === 'blocked' && (<>{ring(RED)}<circle cx="7" cy="7" r="3.2" fill={RED} /></>)}
+      {status === 'done' && (<>
+        <mask id={cut}><rect width="14" height="14" fill="#fff" /><path d="M4.3 7.2 L6.2 9.1 L9.8 5.2" fill="none" stroke="#000" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></mask>
+        <circle cx="7" cy="7" r="6.5" fill={GREEN} mask={`url(#${cut})`} />
+      </>)}
+      {status === 'done-reported' && (<>{ring(GREEN)}<path d="M4.4 7.2 L6.2 9 L9.7 5.3" fill="none" stroke={GREEN} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></>)}
+      {status === 'unknown' && (<>{ring(GRAY)}<path d="M5.4 5.6 A1.7 1.7 0 1 1 7.6 7.2 C7.1 7.4 7 7.7 7 8.2" fill="none" stroke={GRAY} strokeWidth="1.3" strokeLinecap="round" /><circle cx="7" cy="10" r=".8" fill={GRAY} /></>)}
+      {status === 'paused' && (<>{ring(GRAY)}<rect x="4.9" y="4.4" width="1.4" height="5.2" rx=".5" fill={GRAY} /><rect x="7.7" y="4.4" width="1.4" height="5.2" rx=".5" fill={GRAY} /></>)}
+      {status === 'archived' && (<>
+        <rect x="1.6" y="2.6" width="10.8" height="3.2" rx=".9" fill={ARCHIVED} />
+        <path fillRule="evenodd" fill={ARCHIVED} d="M2.6 6.6 H11.4 V10.5 Q11.4 11.6 10.3 11.6 H3.7 Q2.6 11.6 2.6 10.5 Z M5.95 8.1 H8.05 A.65 .65 0 0 1 8.05 9.4 H5.95 A.65 .65 0 0 1 5.95 8.1 Z" />
+      </>)}
+    </svg>
+  )
+}