@marver-design/marver 0.20.0 → 0.22.0

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

package/src/client/shell/store.ts

@@ -17,6 +17,10 @@ const DATA: {
   tree?: TreeItem[]
   /** slug → title of the published boards (0.16.1 bundles); folder titles ride on `tree` */
   titles?: Record<string, string>
+  /** slug → resolved type, and the status a publish row opted into (0.22 bundles; spec 20) */
+  meta?: Record<string, BoardMeta>
+  /** when the build read the statuses it ships - a published status is a snapshot */
+  statusAsOf?: string
   /** publish.json v2: per-board artifact type + open/lock, and the reveal flags. */
   policy?: { boards: Record<string, { type?: string; open?: string; lock?: boolean }>; reveal?: { structure?: boolean; source?: boolean }; lockedShell?: boolean }
   /** the generation of the glass textures this build shipped (publish-bakes.ts); absent = none */
@@ -25,6 +29,8 @@ const DATA: {
 
 /** The published textures' generation, or 0: the static index this build shipped is at /__mv/bakes/<gen>/index.json. */
 export const BAKES = DATA?.bakes ?? 0
+/** When a published bundle's statuses were read (spec 20) - absent in dev, where they are live. */
+export const STATUS_AS_OF = DATA?.statusAsOf ?? null
 
 /** Every published board is locked to a stage mode - the canvas shell is never
  *  offered on this bundle (01-sharing §5.1's all-boards rule). */
@@ -138,23 +144,35 @@ export const modeAllowed = (board: string, mode: 'present' | 'focus' | 'slides')
 export { cap, humanize } from './labels.ts'
 import { cap, humanize } from './labels.ts'
 import { canAutoReload } from './canvas/ready-watch.ts'
-import { buildTree, flatten, labelOf, toWire, type TreeItem } from '../../shared/board-tree.ts'
+import { buildTree, flatten, labelOf, toWire, TREE_PROTOCOL, type TreeItem } from '../../shared/board-tree.ts'
+import type { BoardType, StatusWord } from '../../shared/board-types.ts'
+import type { Phase, Status } from '../../shared/status.ts'
 
 /** The CAS tokens a tree write echoes: the sha256 of every board file as last seen, and of
  *  the folder registry (null = there was no file). */
 export interface TreeBase { boards: Record<string, string>; folders: string | null }
-export interface TreeSnapshot { tree: TreeItem[]; base: TreeBase; titles: Record<string, string> }
+export interface TreeSnapshot { tree: TreeItem[]; base: TreeBase; titles: Record<string, string>; meta: Record<string, BoardMeta> }
+/** What spec 20 adds to a board's row: its resolved type, and - for feature and project boards -
+ *  its status read from context/. Dev carries the evidence for the tooltip; a published bundle
+ *  carries only what its publish row opted into. */
+export interface BoardMeta {
+  type?: BoardType
+  /** `row` is the table row that decided it (1-3: a decision on the board) */
+  status?: { status: Status; row?: number; fill?: Phase; reason?: string; evidence?: string[] }
+  /** what a person may set it to from the sidebar (dev only) - shared/board-types settableStatuses */
+  settable?: StatusWord[]
+}
 
-/** The sidebar tree: root boards and folders in rank order, each folder's boards inside
- *  (shared/board-tree.ts), plus the hashes it was built from. `all-scenes` is not in it - it
+/** The sidebar tree: root boards and folders in rank order, each folder's boards and
+ *  sub-folders inside (shared/board-tree.ts), plus the hashes it was built from. `all-scenes` is not in it - it
  *  is pinned last by the callers. Throws on transport failure and on a malformed registry
  *  (the server's 422 message) - callers keep their last known tree. */
 export async function fetchBoardTree(): Promise<TreeSnapshot> {
-  if (DATA) return { tree: DATA.tree ?? DATA.names.filter((n) => n !== 'all-scenes').map((n) => ({ kind: 'board', name: n })), base: { boards: {}, folders: null }, titles: DATA.titles ?? {} }
+  if (DATA) return { tree: DATA.tree ?? DATA.names.filter((n) => n !== 'all-scenes').map((n) => ({ kind: 'board', name: n })), base: { boards: {}, folders: null }, titles: DATA.titles ?? {}, meta: DATA.meta ?? {} }
   const [boards, reg] = await Promise.all([
-    fetch(`${ROUTE}/api/boards`).then((r) => r.json()) as Promise<{ name: string; sha256: string; order?: number; folder?: string; title?: string }[]>,
+    fetch(`${ROUTE}/api/boards`).then((r) => r.json()) as Promise<{ name: string; sha256: string; order?: number; folder?: string; title?: string; type?: BoardType; status?: BoardMeta['status'] | null; settable?: StatusWord[] }[]>,
     fetch(`${ROUTE}/api/folders`).then(async (r) => {
-      const j = await r.json() as { folders?: { name: string; order?: number; title?: string }[]; sha256?: string | null; error?: string }
+      const j = await r.json() as { folders?: { name: string; order?: number; parent?: string; title?: string }[]; sha256?: string | null; error?: string }
       if (!r.ok) throw new Error(j?.error ?? `folders ${r.status}`)
       return j
     }),
@@ -163,8 +181,13 @@ export async function fetchBoardTree(): Promise<TreeSnapshot> {
     tree: buildTree(boards, reg.folders ?? []),
     base: { boards: Object.fromEntries(boards.map((b) => [b.name, b.sha256])), folders: reg.sha256 ?? null },
     titles: Object.fromEntries(boards.flatMap((b) => (b.title ? [[b.name, b.title]] : []))),
+    meta: Object.fromEntries(boards.map((b) => [b.name, { ...(b.type && b.type !== 'plain' ? { type: b.type } : {}), ...(b.status ? { status: b.status } : {}), ...(b.settable?.length ? { settable: b.settable } : {}) }])),
   }
 }
+/** A tree read's types and statuses, kept under the same latest-wins rule as its titles. */
+export function rememberMeta(meta: Record<string, BoardMeta>) {
+  if (JSON.stringify(useStore.getState().boardMeta) !== JSON.stringify(meta)) useStore.setState({ boardMeta: meta })
+}
 /** A tree read's board titles become the labels' - called by the reader once it knows the
  *  read is its latest (an older response must not overwrite a newer one's labels). Folder
  *  titles ride on the tree's folder items: a board and a folder may share a slug, never one map. */
@@ -179,6 +202,7 @@ export async function fetchBoardNames(): Promise<string[]> {
   if (DATA) return DATA.names
   const snap = await fetchBoardTree()
   rememberTitles(snap.titles)
+  rememberMeta(snap.meta)
   return [...flatten(snap.tree), 'all-scenes']
 }
 /** Does the switcher carry the auto `all-scenes` board? Always in dev; published only when it shipped. */
@@ -322,7 +346,9 @@ interface State {
   imagePulse: number                                       // bumps on each successful image copy - same flash, the images-square icon
   imageBusy: boolean                                       // a copy-as-image render is in flight (one at a time)
 
-  boot(): Promise<boolean>
+  /** (re)load the open board from disk. `mayCommit`, when given, is asked again at the moment the
+   *  reload would land - a caller's own conditions (a status write's: nothing moved since its flush) */
+  boot(mayCommit?: () => boolean): Promise<boolean>
   applyManifest(m: Manifest): void
   frameFor(node: Node): FrameEntry | undefined
   moveNode(key: string, x: number, y: number): void
@@ -353,10 +379,16 @@ interface State {
   switchBoard(name: string): Promise<void>
   /** what the sidebar labels boards by: slug → title, off the last tree read */
   boardTitles: Record<string, string>
+  /** what the sidebar draws beside a board: its type and status (spec 20), off the last tree read */
+  boardMeta: Record<string, BoardMeta>
   /** retitle a board - what humans see ('' = back to the Title-Cased slug). The file never
    *  moves: its name is the board's identity (agents, publish.json, URLs, comment threads).
    *  `baseHash` = the file as last seen; a 409 (`stale`) means someone wrote it since. */
   renameBoard(name: string, title: string, baseHash?: string): Promise<{ ok: true } | { ok: false; stale?: boolean; error?: string }>
+  /** a board's status, decided by a person (the sidebar's picker): one of its `settable` statuses,
+   *  or null to clear the decision (back to the evidence); blocked carries its reason. Only
+   *  `status` and `reason` change in the file; a 409 (`stale`) means someone wrote it since. */
+  setBoardStatus(name: string, status: StatusWord | null, reason?: string, baseHash?: string): Promise<{ ok: true } | { ok: false; stale?: boolean; error?: string }>
   /** a scene's title, into its brief's front matter (the directory never moves) */
   renameScene(scene: string, title: string): Promise<{ ok: boolean; error?: string }>
   /** `sh:scenes`: the scenes changed (a brief's title or description) with the frames intact */
@@ -669,10 +701,10 @@ export const useStore = create<State>((set, get) => {
   return {
     manifest: null, nodes: [], selection: [], interact: null, viewTheme: initialViewTheme(), play: null, gesture: false, laser: false,
     board: DATA?.default ?? 'all-scenes', boardAuto: (DATA?.default ?? 'all-scenes') === 'all-scenes', deviceView: null, sceneRows: null, layout: null, layoutRaw: undefined, baseLayout: null,
-    panelOpen: true, scale: 1, toasts: [], working: [], workingSince: {}, boardHash: null, dirty: false, boardTitles: DATA?.titles ?? {},
+    panelOpen: true, scale: 1, toasts: [], working: [], workingSince: {}, boardHash: null, dirty: false, boardTitles: DATA?.titles ?? {}, boardMeta: DATA?.meta ?? {},
     pendingFrameRevisions: {}, externalLeases: {}, playUpdateRevision: null, playNav: 0, pathPulse: 0, imagePulse: 0, imageBusy: false,
 
-    async boot() {
+    async boot(mayCommit) {
       const seq = ++loadSeq
       const boardName = get().board
       const revAtStart = editRev, scenesAtStart = scenesRev
@@ -680,7 +712,7 @@ export const useStore = create<State>((set, get) => {
       if (seq !== loadSeq) return false        // a newer load superseded this one
       if (!next) { get().toast(`board "${boardName}" failed to load`); return false }
       // the user kept editing while we fetched - their newer state wins over the reload
-      if (get().board !== boardName || editRev !== revAtStart) return false
+      if (get().board !== boardName || editRev !== revAtStart || (mayCommit && !mayCommit())) return false
       const live = get().manifest             // a WS manifest update may have landed mid-fetch
       set(next)
       if (next.dirty) scheduleSave()          // load-time prune must reach the disk
@@ -738,12 +770,18 @@ export const useStore = create<State>((set, get) => {
           // hash the rewrite is about to move
           holdSaves()
         }
+        const rev = editRev                                          // setBoardStatus's guard on the reload
+        const mayReload = () => active && get().board === from && editRev === rev && !get().gesture
         try {
           // the active board's hash is freshest in the store (an autosave may have landed since
           // the sidebar looked); every other board's is the sidebar's
-          const base = active && get().boardHash ? get().boardHash : baseHash
+          const send = (base: string | null | undefined) => postOwner('boards/rename', { from, title, ...(base ? { baseHash: base } : {}) })
           let res: Response
-          try { res = await postOwner('boards/rename', { from, title, ...(base ? { baseHash: base } : {}) }) }
+          try {
+            res = await send(active && get().boardHash ? get().boardHash : baseHash)
+            // the open board changed on disk: reload it, then once more (setBoardStatus's reasoning)
+            if (res.status === 409 && mayReload() && await get().boot(mayReload)) res = await send(get().boardHash)
+          }
           catch { return { ok: false, error: 'could not reach the dev server' } }
           const body = await res.json().catch(() => ({} as { error?: string; sha256?: string }))
           if (!res.ok) return { ok: false, stale: res.status === 409, error: body?.error ?? `rename failed (${res.status})` }
@@ -758,6 +796,47 @@ export const useStore = create<State>((set, get) => {
       })
     },
 
+    setBoardStatus(name, status, reason, baseHash) {
+      return structural(async () => {
+        const active = name === get().board
+        // the active board's file is rewritten under the autosave: flush first, hold across (renameBoard's pattern)
+        if (active) {
+          let ok = true
+          for (let i = 0; i < 5 && get().dirty && ok; i++) { clearTimeout(saveTimer); ok = await get().save() }
+          if (get().dirty) return { ok: false, error: 'unsaved changes - try again' }
+          holdSaves()
+        }
+        // what a reload may replace: this board as flushed - holdSaves pauses saving, not editing, so an
+        // edit, a drag or a board switch while the request is out means the reload is not ours to do
+        const rev = editRev
+        const mayReload = () => active && get().board === name && editRev === rev && !get().gesture
+        try {
+          const send = (base: string | null | undefined) => postOwner('boards/status', { name, status, ...(reason ? { reason } : {}), ...(base ? { baseHash: base } : {}) })
+          let res: Response
+          try {
+            res = await send(active && get().boardHash ? get().boardHash : baseHash)
+            // the open board changed on disk (an agent wrote it): its hash in the store is behind, and a
+            // retry with it would 409 again - reload the board (layout and hash together) when nothing
+            // has changed here since the flush, then try once more against what is on disk now
+            if (res.status === 409 && mayReload() && await get().boot(mayReload)) res = await send(get().boardHash)
+          }
+          catch { return { ok: false, error: 'could not reach the dev server' } }
+          const body = await res.json().catch(() => ({} as { error?: string; sha256?: string }))
+          if (!res.ok) return { ok: false, stale: res.status === 409, error: body?.error ?? `status failed (${res.status})` }
+          if (active && get().board === name && body?.sha256) set({ boardHash: body.sha256 })
+          // a decision shows at once; what the evidence says after a clear comes with the next tree read
+          if (status) {
+            const meta = { ...get().boardMeta }
+            const cur = meta[name] ?? {}
+            const row = ({ archived: 1, paused: 2, blocked: 3, 'in-progress': 5, done: 6, todo: 8, backlog: 9 } as const)[status]
+            meta[name] = { ...cur, status: { status, row, ...(status === 'blocked' && reason ? { reason } : {}), evidence: [`design/boards/${name}.json: "status": "${status}"`] } }
+            set({ boardMeta: meta })
+          }
+          return { ok: true }
+        } finally { if (active) releaseSaves() }
+      })
+    },
+
     async renameScene(scene, title) {
       let res: Response
       try { res = await postOwner('scenes/rename', { scene, title }) }
@@ -795,7 +874,7 @@ export const useStore = create<State>((set, get) => {
           const active = get().board
           const boards = { ...base.boards, ...(get().boardHash && base.boards[active] !== undefined ? { [active]: get().boardHash } : {}) }
           let res: Response
-          try { res = await postOwner('boards/reorder', { tree: toWire(tree), base: { boards, folders: base.folders } }) }
+          try { res = await postOwner('boards/reorder', { tree: toWire(tree), base: { boards, folders: base.folders }, protocol: TREE_PROTOCOL }) }
           catch { return { ok: false as const, stale: false, error: 'could not reach the dev server' } }
           const body = await res.json().catch(() => ({} as { error?: string; sha256?: { boards?: Record<string, string> } }))
           if (!res.ok) return { ok: false as const, stale: res.status === 409, error: body?.error }

package/src/client/shell/styles.css

@@ -469,6 +469,15 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
 .sh-panel .it.board svg { color: var(--glass-ink-3); flex: none; margin: 0 1px; transition: color .2s ease }
 .sh-panel .it.board.cur { background: var(--accent-wash); color: var(--glass-accent); font-weight: 600 }
 .sh-panel .it.board.cur svg { color: var(--glass-accent) }
+/* spec 20: a feature or project board's status ring sits at the row's end, in its own colours -
+   never the accent of the current row - with its evidence in the tooltip */
+.sh-panel .it.board .st { flex: none; display: inline-flex; margin-left: auto; font-style: normal }
+/* the settled statuses' fills, one value per theme: done is the content palette's green (Apple's
+   systemGreen); archived is Apple's brown - its increased-contrast value on light, its default on
+   dark, where the increased-contrast one turns peach - so it reads as the same brown box in both */
+.sh-app { --status-done: #34c759; --status-archived: #956d51 }
+.sh-app.dark { --status-done: #30d158; --status-archived: #b78a66 }
+.sh-panel .it.board .st svg, .sh-panel .it.board.cur .st svg { color: inherit; margin: 0 }
 /* drag-to-reorder: a grab cursor, the lifted row dims, and a 2px accent rule marks the
    drop seam above or below the hovered row */
 /* a board row is click-to-switch first (pointer on hover); the grabbing hand appears the
@@ -484,7 +493,7 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
    #0088ff - never the interact-mode purple that --glass-accent shifts to. */
 .sh-panel .it.board.drop-before, .sh-panel .it.board.drop-after { position: relative }
 .sh-panel .it.board.drop-before::after, .sh-panel .it.board.drop-after::after {
-  content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: var(--seam-left, 6px); right: 6px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 .sh-panel .it.board.drop-before::after { top: -1px }
 .sh-panel .it.board.drop-after::after { bottom: -1px }
@@ -493,28 +502,31 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
 .sh-panel .it.editing input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none;
   color: var(--glass-ink); font: inherit }
 .sh-panel .it.editing input::placeholder { color: var(--glass-ink-3) }
-/* folders: one level, same row grammar as boards (idle icon tertiary, count tertiary). A folder
+/* folders: two levels, same row grammar as boards (idle icon tertiary, count tertiary). A folder
    holding the current board wears the ancestor wash so the active board's home survives a
-   collapse; its boards indent one step. Folder rows share the board seam rules; dropping INTO a
+   collapse; what it holds indents one step - a sub-folder's header one step, its boards two. Folder rows share the board seam rules; dropping INTO a
    folder lights the whole row (wash + brand-blue ring) instead of a seam. */
 .sh-panel .it.folder svg { color: var(--glass-ink-3); flex: none; margin: 0 1px; transition: color .2s ease }
 .sh-panel .it.folder[data-reorderable]:active { cursor: grabbing }
 .sh-panel .it.folder.dragging { opacity: .4 }
 .sh-panel .it.folder.drop-before, .sh-panel .it.folder.drop-after { position: relative }
 .sh-panel .it.folder.drop-before::after, .sh-panel .it.folder.drop-after::after {
-  content: ''; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: var(--seam-left, 6px); right: 6px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 .sh-panel .it.folder.drop-before::after { top: -1px }
 .sh-panel .it.folder.drop-after::after { bottom: -1px }
 .sh-panel .it.folder.drop-into { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px #0088ff }
 .sh-panel .it.folder.drop-into svg { color: #0088ff }
-.sh-panel .it.board.in-folder { padding-left: 28px }
+/* 8px row padding + INDENT (22px, board-tree.ts) per level: a nested row's icon starts exactly
+   where its folder's name starts, at every level */
+.sh-panel .it.board.in-folder, .sh-panel .it.folder.in-folder { padding-left: 30px }
+.sh-panel .it.board.in-sub { padding-left: 52px }
 .sh-panel .it.board.draft { cursor: default; opacity: .6 }
-/* seams inside a folder are indented with its rows, so "inside" and "at the root" never draw alike;
-   an open EMPTY folder draws that indented seam under its own header (drop-in) */
-.sh-panel .it.board.in-folder.drop-before::after, .sh-panel .it.board.in-folder.drop-after::after { left: 28px }
+/* seams are indented with the list they land in (--seam-left, set on the row that draws them),
+   so "inside", "inside the sub-folder" and "at the root" never draw alike; an open EMPTY folder
+   draws that indented seam under its own header (drop-in) */
 .sh-panel .it.folder.drop-in { position: relative }
-.sh-panel .it.folder.drop-in::after { content: ''; position: absolute; left: 28px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px;
+.sh-panel .it.folder.drop-in::after { content: ''; position: absolute; left: var(--seam-left, 30px); right: 6px; bottom: -1px; height: 3px; border-radius: 3px;
   background: #0088ff; pointer-events: none }
 /* the Boards header carries a quiet folder-plus: tertiary, shows on hover of the header row */
 .sh-panel .sh-boards .hd { display: flex; align-items: center; margin-right: 6px }
@@ -587,6 +599,26 @@ body.sh-space .sh-node { pointer-events: none }                   /* space-drag
 .sh-menu .chk { color: var(--glass-accent) }
 .sh-menu kbd { font: 500 10.5px -apple-system, system-ui, sans-serif; color: var(--glass-ink-3); background: none; border: 0 }
 .sh-menu .div { height: 1px; background: var(--glass-brd); margin: 4px 6px }
+/* the board status picker (StatusPicker.tsx): opens in place of the right-click menu - a filter,
+   what the evidence says now, the statuses a person may set, numbered, and a line on the rest */
+.sh-ctxpanel { width: 248px; max-width: 248px }
+.sh-status-picker { display: flex; flex-direction: column }
+.sh-status-picker .sp-input { height: 32px; margin: 0 0 4px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--glass-brd);
+  border-radius: 0; background: none; color: var(--glass-ink); font: 500 12.5px -apple-system, system-ui, sans-serif; outline: 0 }
+.sh-status-picker .sp-input::placeholder { color: var(--glass-ink-3) }
+.sh-status-picker .sp-now { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin-bottom: 2px;
+  font: 500 12px -apple-system, system-ui, sans-serif; color: var(--glass-ink) }
+.sh-status-picker .sp-now small { margin-left: auto; color: var(--glass-ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px }
+.sh-status-picker .sp-list { display: flex; flex-direction: column }
+.sh-status-picker .sp-list button { width: 100% }
+.sh-status-picker .sp-list button.hi { background: var(--glass-hover) }
+.sh-status-picker .sp-list button span { text-transform: none }
+.sh-status-picker .sp-chk { color: var(--glass-ink); flex: none }
+.sh-status-picker .sp-head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; font: 600 12px -apple-system, system-ui, sans-serif; color: var(--glass-ink) }
+.sh-status-picker .sp-empty { padding: 8px 10px; color: var(--glass-ink-3); font: 500 12px -apple-system, system-ui, sans-serif }
+.sh-status-picker .sp-foot { border-top: 1px solid var(--glass-brd); margin-top: 4px; padding: 7px 10px 3px; color: var(--glass-ink-3);
+  font: 500 11px/1.35 -apple-system, system-ui, sans-serif }
+.sh-status-picker[data-status-picker="reason"] .sp-input { border: 1px solid var(--glass-brd); border-radius: 9px; margin: 2px 6px 0; height: 30px }
 
 /* shadcn-style tooltip: contrast-flipped solid, zoom-fade in */
 .sh-tip { position: absolute; z-index: 400; pointer-events: none; padding: 5px 10px; border-radius: 8px;   /* topmost ephemeral chrome - above modals (300) or in-dialog tips vanish */