@marver-design/marver 0.20.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.20.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,17 +1,22 @@
-import { useEffect, useRef, useState, 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 { useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
+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'
 import { ArrowLineUpIcon, CardsIcon, CardsThreeIcon, FolderIcon, FolderMinusIcon, FolderOpenIcon, FolderPlusIcon, PencilSimpleIcon, SignpostIcon } from './icons.tsx'
 import {
-  applyDrop, boardsIn, createFolder, deleteFolder, folderIn, folderOf, foldersIn, humanize, isOwnSlot, labelOf, moveBoard, newFolderSlot, readTitle, resolveDrop, retitleFolder, rootIndex, slugFor,
+  applyDrop, boardsIn, createFolder, deleteFolder, depthOf, folderEntries, folderIn, folderOf, foldersIn, holdsFolders, humanize, INDENT, isOwnSlot, labelOf, listIn, moveBoard, moveFolderToRoot, newFolderSlot, parentOf, readTitle,
+  resolveDrop, retitleFolder, rootIndex, slugFor,
   type Drag, type Drop, type Folder, type Row, type TreeItem,
 } from '../../shared/board-tree.ts'
 
 /**
- * Boards live at the top of the sidebar - always visible, one click to switch - in ONE level
- * of folders. The tree (shared/board-tree.ts) comes from the board files' `order`/`folder`
+ * Boards live at the top of the sidebar - always visible, one click to switch - in up to TWO
+ * levels of folders (a folder holds boards and folders; a sub-folder holds boards). The tree (shared/board-tree.ts) comes from the board files' `order`/`folder`
  * fields plus the `_folders.json` registry; every mutation here (drag, new/rename/delete
  * folder, move) is one optimistic tree write through `arrangeBoards`, replayed once on a
  * 409 (someone else wrote first). The list refreshes on mount, window focus, a slow poll and
@@ -23,14 +28,24 @@ const CLOSED_KEY = 'mv-folders-closed'   // collapsed folders are a viewer prefe
 const readClosed = (): Record<string, true> => { try { return JSON.parse(localStorage.getItem(CLOSED_KEY) ?? '{}') } catch { return {} } }
 
 /** The inline input: renaming a board or a folder, or naming a NEW folder that does not exist
- *  yet - drawn at root `index`, optionally with `board` already inside it. */
-type Naming = { kind: 'board' | 'folder'; name: string } | { kind: 'new'; index: number; board?: string }
+ *  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
 
 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)
@@ -72,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
@@ -185,7 +201,7 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         refresh()
         return
       }
-      const folderLabels = tree.filter((it): it is Folder => it.kind === 'folder' && (n.kind !== 'folder' || it.name !== n.name)).map((it) => labelOf(it.name, it.title))
+      const folderLabels = folderEntries(tree).map((e) => e.folder).filter((f) => n.kind !== 'folder' || f.name !== n.name).map((f) => labelOf(f.name, f.title))
       if (n.kind === 'folder') {
         const current = folderIn(tree, n.name)
         if (!current || title === labelOf(n.name, current.title)) { setNaming(null); return }
@@ -196,11 +212,11 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       }
       if (n.kind !== 'new') return
       if (folderLabels.includes(title)) { taken('folder'); return }
-      const { index, board: withBoard } = n
+      const { index, board: withBoard, parent } = n
       const slug = slugFor(title, foldersIn(tree))                                // "Old stuff" → old-stuff (-2 past a namesake); "🚀" alone → folder
       setNaming(null)
       setOpen(slug, true)                                                       // a new folder opens, whatever an old namesake left behind
-      if (!mutate((t) => createFolder(t, slug, index, withBoard, stored(slug) || undefined))) useStore.getState().toast('that board is gone - nothing changed')
+      if (!mutate((t) => createFolder(t, slug, index, withBoard, stored(slug) || undefined, parent))) useStore.getState().toast(withBoard ? 'that board is gone - nothing changed' : 'that folder is gone - nothing changed')
     } finally { commitBusy.current = false }
   }
 
@@ -210,7 +226,10 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   const measure = (): Row[] => Array.from(rootRef.current?.querySelectorAll<HTMLElement>('[data-board-row],[data-folder-row]') ?? []).map((el) => {
     const r = el.getBoundingClientRect()
     const folder = el.hasAttribute('data-folder-row')
-    return { kind: folder ? 'folder' : 'board', name: el.dataset.folderRow ?? el.dataset.board ?? '', parent: folder ? null : (el.dataset.folder ?? null), open: el.dataset.open === '1', top: r.top, bottom: r.bottom, left: r.left }
+    return {
+      kind: folder ? 'folder' : 'board', name: el.dataset.folderRow ?? el.dataset.board ?? '', parent: (folder ? el.dataset.parent : el.dataset.folder) ?? null,
+      depth: Number(el.dataset.depth ?? 0), open: el.dataset.open === '1', top: r.top, bottom: r.bottom, left: r.left,
+    }
   })
   /** The drop target for the pointer at (x, y), or null: outside the panel (a release there
    *  cancels), or a slot that would change nothing. Inside the panel there is always one - the
@@ -289,22 +308,50 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
   }, [])
 
   // ---- menus (flat lists, no submenus) ----
-  const newFolderAt = (index: number, withBoard?: string) => setNaming({ kind: 'new', index, board: withBoard })
+  const newFolderAt = (index: number, withBoard?: string, parent: string | null = null) => {
+    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 (or the slot after its current folder)
-    items.push({ label: 'Move to new folder', icon: <FolderPlusIcon size={15} />, onClick: () => newFolderAt(newFolderSlot(treeRef.current, n), 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)
+    items.push({ label: 'Move to new folder', icon: <FolderPlusIcon size={15} />, onClick: () => { const at = newFolderSlot(treeRef.current, n); newFolderAt(at.index, n, at.parent) } })
     // moving into an EXISTING folder is a drag, not a menu - the list stays short
-    if (parent) items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => { const p = folderOf(t, n); return moveBoard(t, n, null, p ? rootIndex(t, 'folder', p) + 1 : undefined) }) })
+    if (parent) items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => {
+      const p = folderOf(t, n)
+      const top = p ? parentOf(t, p) ?? p : null                     // lands right after the top-level folder it was in
+      return moveBoard(t, n, null, top ? rootIndex(t, 'folder', top) + 1 : undefined)
+    }) })
     return items
   }
-  const folderMenu = (f: string, boards: string[]): MenuItem[] => {
-    const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`folder: ${f}  (boards: ${boards.join(', ') || 'none'})`, 'path copied') }]
+  const folderMenu = (f: string, boards: string[], parent: string | null): MenuItem[] => {
+    const items: MenuItem[] = [{ label: 'Copy path', icon: <SignpostIcon size={15} />, onClick: () => copyToClipboard(`folder: ${f}${parent ? ` (in ${parent})` : ''}  (boards: ${boards.join(', ') || 'none'})`, 'path copied') }]
     if (PUBLISHED) return items
     items.push({ label: 'Rename', icon: <PencilSimpleIcon size={15} />, onClick: () => setNaming({ kind: 'folder', name: f }) })
-    // folders organise, never own: deleting one puts its boards back at the top level, in order
+    // two levels: a top-level folder can hold folders; a sub-folder can leave its parent
+    if (!parent) items.push({ label: 'New folder inside', icon: <FolderPlusIcon size={15} />, onClick: () => newFolderAt(listIn(treeRef.current, f)?.length ?? 0, undefined, f) })
+    else items.push({ label: 'Move to top level', icon: <ArrowLineUpIcon size={15} />, onClick: () => mutate((t) => {
+      const p = parentOf(t, f)
+      return moveFolderToRoot(t, f, p ? rootIndex(t, 'folder', p) + 1 : undefined)
+    }) })
+    // folders organise, never own: deleting one moves what it holds up one level, into its place, in order
     items.push({ label: 'Delete folder', icon: <FolderMinusIcon size={15} />, onClick: () => { setOpen(f, true); mutate((t) => deleteFolder(t, f)) } })
     return items
   }
@@ -327,6 +374,15 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // a draft new folder whose parent vanished or got nested mid-naming is cancelled, said once
+  const orphanDraft = naming?.kind === 'new' && !holdsFolders(tree, naming.parent)
+  useEffect(() => {
+    if (!orphanDraft) return
+    setNaming(null)
+    useStore.getState().toast('that folder changed - the new folder was not made')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orphanDraft])
+
   // ---- rows ----
   const input = (defaultValue: string, placeholder?: string) => (
     <input autoFocus defaultValue={defaultValue} placeholder={placeholder} spellCheck={false}
@@ -337,26 +393,52 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
       }}
       onBlur={(e) => { if (namingRef.current) void commit(e.currentTarget.value) }} />
   )
-  // ONE seam per gap, from the insertion index: drop-before the row AT that index, or drop-after
-  // the last row of a folder's list. Overlay (::after), so no layout shift. Never on the row
-  // being dragged. The root end slot draws before the pinned all-scenes row, never after a
-  // folder header (that seam would read as "inside").
-  const seam = (list: string | null, index: number, last: boolean): string => {
-    if (!drag || !drop || 'into' in drop || drop.list !== list) return ''
-    return drop.index === index ? ' drop-before' : last && drop.index === index + 1 ? ' drop-after' : ''
+  // a new folder being named is drawn at its future slot, its board (if any) already inside;
+  // that board leaves its usual row for the duration. A draft whose parent vanished or can no
+  // longer hold folders (an agent deleted or nested it mid-naming) draws nothing and hides
+  // nothing - the effect below cancels it, so the board it held shows where it now is
+  const draftLive = naming?.kind === 'new' && holdsFolders(tree, naming.parent)
+  const draft = naming?.kind === 'new' && draftLive ? (naming.board && !boardsIn(tree).includes(naming.board) ? { ...naming, board: undefined } : naming) : null   // a board deleted mid-naming leaves the draft
+  const visible = (items: TreeItem[]) => (draft?.board ? items.filter((k) => !(k.kind === 'board' && k.name === draft.board)) : items)
+  const key = (it: TreeItem) => `${it.kind === 'board' ? 'b' : 'f'}:${it.name}`
+  /** The last row an item draws: a board's own, a closed or empty folder's header, else its last child's last row. */
+  const lastRow = (it: TreeItem): string => {
+    if (it.kind === 'board') return key(it)
+    const kids = visible(it.items)
+    return !closed[it.name] && kids.length ? lastRow(kids[kids.length - 1]!) : key(it)
   }
-  const boardRow = (n: string, parent: string | null, index: number, last: boolean) => {
+  // ONE seam per gap, overlaid (::after, no layout shift) on the row the gap touches: before the
+  // first row of the item AT the index, or after the last row of a list's last item at its end.
+  // Its left edge follows the indent of the list it lands in, so "inside" and "outside" never
+  // draw alike. The root end draws before the pinned all-scenes row. An open EMPTY folder has no
+  // row to draw on: its header draws the indented seam under itself (drop-in).
+  const seam = ((): { row: string; where: 'before' | 'after'; depth: number } | null => {
+    if (!drag || !drop || 'into' in drop) return null
+    const items = listIn(tree, drop.list)
+    if (!items) return null
+    const depth = depthOf(tree, drop.list)
+    if (drop.index < items.length) return { row: key(items[drop.index]!), where: 'before', depth }
+    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
+  })()
+  // 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' : '')
+
+  const boardRow = (n: string, parent: string | null, depth: number) => {
     const dragging = drag?.kind === 'board' && drag.name === n
-    const dropCls = dragging ? '' : n === 'all-scenes' ? (drop && !('into' in drop) && drop.list === null && drop.index === tree.length ? ' drop-before' : '') : seam(parent, index, last)
+    const s = dragging ? { cls: '' } : seamOf(`b:${n}`)
     // the row being renamed is still a row: measured by a drag (its slot exists) and it draws its seam
     if (naming?.kind === 'board' && naming.name === n) return (
-      <div key={n} data-board-row data-board={n} data-folder={parent ?? undefined} className={`it board editing${parent ? ' in-folder' : ''}${dropCls}`}><CardsIcon size={14} />{input(label(n))}</div>
+      <div key={`b:${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-depth={depth} className={`it board editing${indent(depth)}${s.cls}`} style={s.style}><CardsIcon size={14} />{input(label(n))}</div>
     )
     const canDrag = !PUBLISHED && n !== 'all-scenes'
     const item: Drag = { kind: 'board', name: n }
     return (
-      <button key={`${parent ?? ''}/${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-reorderable={canDrag || undefined}
-        className={`it board${parent ? ' in-folder' : ''}${n === board ? ' cur' : ''}${dragging ? ' dragging' : ''}${dropCls}`}
+      <button key={`b:${n}`} data-board-row data-board={n} data-folder={parent ?? undefined} data-depth={depth} data-reorderable={canDrag || undefined}
+        className={`it board${indent(depth)}${n === board ? ' cur' : ''}${dragging ? ' dragging' : ''}${s.cls}`} style={s.style}
         // draggable rows switch on the pointer tap (onPointerUp), so their trailing mouse
         // click (detail >= 1) must be ignored to avoid a double switch; keyboard clicks
         // (detail === 0) and non-draggable rows (all-scenes, published) switch here as normal
@@ -367,28 +449,48 @@ 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>
     )
   }
-  const folderRow = (it: Folder, boards: string[], index: number): ReactNode[] => {
+  const draftRows = (depth: number): ReactNode[] => !draft ? [] : [
+    <div key="f:new" className={`it folder editing${indent(depth)}`}><FolderOpenIcon size={14} />{input('', 'Folder name')}</div>,
+    ...(draft.board ? [<div key="new/board" className={`it board draft${indent(depth + 1)}${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{label(draft.board)}</span></div>] : []),
+  ]
+  /** A list's rows - the root's, a folder's, a sub-folder's - with a draft new folder at its slot. */
+  const listRows = (items: TreeItem[], parent: string | null, depth: number): ReactNode[] => {
+    const out: ReactNode[] = []
+    const here = draft && draft.parent === parent ? draft : null
+    items.forEach((it, i) => {
+      if (here && here.index === i) out.push(...draftRows(depth))
+      if (it.kind === 'board') { if (draft?.board !== it.name) out.push(boardRow(it.name, parent, depth)) }
+      else out.push(...folderRows(it, parent, depth))
+    })
+    if (here && here.index >= items.length) out.push(...draftRows(depth))
+    return out
+  }
+  const folderRows = (it: Folder, parent: string | null, depth: number): ReactNode[] => {
     const f = it.name
     const open = !closed[f]
+    const kids = visible(it.items)
+    const boards = boardsIn(kids)
+    const s = seamOf(`f:${f}`)
     const rows: ReactNode[] = []
     if (naming?.kind === 'folder' && naming.name === f) {
-      rows.push(<div key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} className={`it folder editing${seam(null, index, false)}`}>{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(labelOf(f, it.title))}</div>)
+      rows.push(<div key={`f:${f}`} data-folder-row={f} data-parent={parent ?? undefined} data-depth={depth} data-open={open ? '1' : '0'} className={`it folder editing${indent(depth)}${s.cls}`} style={s.style}>{open ? <FolderOpenIcon size={14} /> : <FolderIcon size={14} />}{input(labelOf(f, it.title))}</div>)
     } else {
       const item: Drag = { kind: 'folder', name: f }
       const dragging = drag?.kind === 'folder' && drag.name === f
       const into = !!drag && !!drop && 'into' in drop && drop.into === f
-      // a slot inside an open EMPTY folder has no board row to draw on: the indented seam sits under the header
-      const inSeam = !!drag && !!drop && !('into' in drop) && drop.list === f && open && boards.length === 0
+      const inSeam = !!drag && !!drop && !('into' in drop) && drop.list === f && open && kids.length === 0
+      const sc = dragging ? { cls: '' } : inSeam ? { cls: ' drop-in', style: seamLeft(depth + 1) } : s
       rows.push(
-        <button key={`f:${f}`} data-folder-row={f} data-open={open ? '1' : '0'} data-reorderable={!PUBLISHED || undefined}
-          className={`it folder${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${inSeam ? ' drop-in' : ''}${dragging ? '' : seam(null, index, false)}`}
+        <button key={`f:${f}`} data-folder-row={f} data-parent={parent ?? undefined} data-depth={depth} data-open={open ? '1' : '0'} data-reorderable={!PUBLISHED || undefined}
+          className={`it folder${indent(depth)}${boards.includes(board) ? ' held' : ''}${dragging ? ' dragging' : ''}${into ? ' drop-into' : ''}${sc.cls}`} style={sc.style}
           onClick={(e) => { if (PUBLISHED || e.detail === 0) setOpen(f, !open) }}
-          onContextMenu={(e) => onMenu(e, folderMenu(f, boards))}
+          onContextMenu={(e) => onMenu(e, folderMenu(f, boards, parent))}
           onPointerDown={!PUBLISHED ? (e) => onPointerDown(e, item) : undefined}
           onPointerMove={!PUBLISHED ? onPointerMove : undefined}
           onPointerUp={!PUBLISHED ? onPointerUp : undefined}
@@ -400,25 +502,12 @@ export function BoardList({ onMenu }: { onMenu: MenuOpener }) {
         </button>,
       )
     }
-    if (open) boards.forEach((b, i) => rows.push(boardRow(b, f, i, i === boards.length - 1)))
+    if (open) rows.push(...listRows(it.items, f, depth + 1))
     return rows
   }
 
-  // a new folder being named is drawn at its future slot, its board (if any) already inside;
-  // that board leaves its usual row for the duration
-  const draft = naming?.kind === 'new' ? (naming.board && !boardsIn(tree).includes(naming.board) ? { ...naming, board: undefined } : naming) : null   // a board deleted mid-naming leaves the draft
-  const rows: ReactNode[] = []
-  const draftRows = draft ? [
-    <div key="f:new" className="it folder editing"><FolderOpenIcon size={14} />{input('', 'Folder name')}</div>,
-    ...(draft.board ? [<div key="new/board" className={`it board in-folder draft${draft.board === board ? ' cur' : ''}`}><CardsIcon size={14} /><span>{label(draft.board)}</span></div>] : []),
-  ] : []
-  tree.forEach((it, i) => {
-    if (draft && draft.index === i) rows.push(...draftRows)
-    if (it.kind === 'board') { if (draft?.board !== it.name) rows.push(boardRow(it.name, null, i, false)) }
-    else rows.push(...folderRow(it, draft?.board ? it.boards.filter((b) => b !== draft.board) : it.boards, i))
-  })
-  if (draft && draft.index >= tree.length) rows.push(...draftRows)
-  if (HAS_ALL_SCENES) rows.push(boardRow('all-scenes', null, -1, false))   // a published bundle without it shows none
+  const rows: ReactNode[] = listRows(tree, null, 0)
+  if (HAS_ALL_SCENES) rows.push(boardRow('all-scenes', null, 0))   // a published bundle without it shows none
   return (
     <div className="sh-boards" ref={rootRef} onContextMenu={(e: ReactMouseEvent) => blankMenu(e)}>
       <div className="hd">

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>
+  )
+}