@north-light/crouter 0.3.274 → 0.3.276

package/dist/core/canvas/browse/render.js

@@ -17,7 +17,7 @@ import { matchIndices } from '../../tui/fuzzy.js';
 // Span/color primitives live in core/tui/draw.ts (one copy, shared with the
 // `crtr view` host). Re-export the color caps so browse's importers + tests keep
 // resolving them from this module.
-import { clip, assemble, detectColorCaps } from '../../tui/draw.js';
+import { clip, assemble, detectColorCaps, META_FG, RECESSIVE_FG } from '../../tui/draw.js';
 import { renderMarkdownSpans } from '../../tui/markdown.js';
 export { detectColorCaps };
 // Fixed chrome heights, shared with app.ts so its viewport math never drifts
@@ -85,20 +85,29 @@ const RESET = `${ESC}0m`;
 const REVERSE = `${ESC}7m`;
 const DIM = `${ESC}2m`;
 const BOLD = `${ESC}1m`;
-const CURSOR_BG = `${ESC}48;5;236m`; // subtle dark-gray cursor-row bg (256-color)
+// Cursor-row band. Absolute (256-color) rather than theme-derived: the browser
+// runs in its own process that deliberately never loads pi, so it cannot read the
+// theme. It must therefore lift off BOTH planes it can land on — a bare terminal
+// background when launched from a shell or a tmux keybinding, and the theme's
+// card plane when the attach viewer opens it as a painted popup (see
+// runtime/surface-bg.ts). 236 was chosen against a bare dark terminal alone and
+// vanishes on a card (1.01:1 on gruvbox-material); 239 reads on both (1.6–1.8:1)
+// while leaving body text above 4.5:1 on the band itself.
+const CURSOR_BG = `${ESC}48;5;239m`;
 // Basic-16 ANSI fg codes used by the palette.
 const FG_YELLOW = '33';
 const FG_RED = '31';
 const FG_CYAN = '36';
-const FG_GRAY = '90'; // bright-black
+// META_FG / RECESSIVE_FG (imported) carry every grey in this view. Bright-black
+// and SGR DIM are deliberately NOT used for text — see their definition in draw.ts.
+// DIM survives for exactly one job: the whole-row base on a non-matching ancestor
+// during a search, where it is a RELATIVE step down from whatever the row already
+// is, not an absolute colour choice.
+const META = `${ESC}${META_FG}m`;
+const RECESSIVE = `${ESC}${RECESSIVE_FG}m`;
 const FG_BRIGHT_YELLOW = '93';
 const FG_BRIGHT_CYAN = '96'; // query-match highlight (ties to the cyan search accent)
 const FG_MAGENTA = '35'; // pin star (distinct from the yellow ⚑ asks flag)
-// STATUS_GLYPH + STATUS_COLOR are imported from ../status-glyph.js (the shared
-// canvas-graph map). STATUS_COLOR there is NUMERIC SGR (e.g. 32) — wrap with
-// `sgr()` where a string ANSI code is needed (Span fg / template literals accept
-// the number directly).
-const FG = (code) => String(code);
 function fmtCtx(tokens) {
     if (tokens <= 0)
         return '0k';
@@ -173,17 +182,17 @@ function tabBar(active, color) {
             // Keep the [ ] brackets in BOTH paths so the active tab reads without color.
             return color ? `${BOLD}${ESC}${FG_CYAN}m[ ${t} ]${RESET}` : `${REVERSE}[ ${t} ]${RESET}`;
         }
-        return color ? `${DIM}  ${t}  ${RESET}` : `  ${t}  `;
+        return color ? `${META}  ${t}  ${RESET}` : `  ${t}  `;
     }).join('');
 }
 const EMPTY_HI = new Set();
 /** Name → spans, splitting out the query-matched chars (bold + bright-cyan) so
- *  matches are scannable. Non-matched chars carry the row's name style (dim for
- *  terminal status, bold on the cursor row). */
+ *  matches are scannable. Non-matched chars carry the row's name style (the
+ *  recessive grey for terminal status, bold on the cursor row). */
 function nameSpans(name, query, style) {
     const hi = query === '' ? EMPTY_HI : matchIndices(query, name);
     if (hi.size === 0)
-        return [{ text: name, style: { dim: style.dim, bold: style.bold } }];
+        return [{ text: name, style: { fg: style.fg, bold: style.bold } }];
     const out = [];
     let buf = '';
     let bufHi = false;
@@ -193,7 +202,7 @@ function nameSpans(name, query, style) {
         if (bufHi)
             out.push({ text: buf, style: { fg: FG_BRIGHT_CYAN, bold: true } });
         else
-            out.push({ text: buf, style: { dim: style.dim, bold: style.bold } });
+            out.push({ text: buf, style: { fg: style.fg, bold: style.bold } });
         buf = '';
     };
     for (let i = 0; i < name.length; i++) {
@@ -229,7 +238,7 @@ function statusRail(r) {
     // STATUS_W — acceptable: the rare, attention-demanding row gets a slightly
     // wider rail (Math.max(1,…) keeps a gap), which draws the eye.
     const word = v.word ?? ({ active: 'active', idle: 'idle', done: 'done', dead: 'dead', canceled: 'cancel' }[r.status] ?? r.status);
-    const fg = FG(v.color);
+    const fg = v.color;
     const text = `${v.glyph} ${word}`;
     const pad = Math.max(1, STATUS_W - [...text].length);
     return [
@@ -243,14 +252,14 @@ function statusRail(r) {
 function metaCluster(r, now, showCwd) {
     const ctxFg = ctxColorCode(r.ctx_tokens);
     const out = [
-        { text: clipPad(`${r.kind}/${r.mode}`, KM_W), style: { fg: FG_GRAY } },
+        { text: clipPad(`${r.kind}/${r.mode}`, KM_W), style: { fg: META_FG } },
         { text: COL_GAP },
-        { text: fmtCtx(r.ctx_tokens).padStart(CTX_W), style: { fg: ctxFg, dim: ctxFg === undefined } },
+        { text: fmtCtx(r.ctx_tokens).padStart(CTX_W), style: { fg: ctxFg ?? META_FG } },
         { text: COL_GAP },
-        { text: relAge(r.created, now).padStart(AGE_W), style: { dim: true } },
+        { text: relAge(r.created, now).padStart(AGE_W), style: { fg: META_FG } },
     ];
     if (showCwd) {
-        out.push({ text: COL_GAP }, { text: clipPad(`~${baseDir(r.cwd)}`, PROJ_W), style: { fg: FG_GRAY } });
+        out.push({ text: COL_GAP }, { text: clipPad(`~${baseDir(r.cwd)}`, PROJ_W), style: { fg: META_FG } });
     }
     return out;
 }
@@ -300,7 +309,7 @@ padToWidth = false) {
     // Hanging: the fault summary travels with the name (the ⚠ + kind
     // label live in the rail). Dim yellow so it reads as secondary detail.
     if (r.hanging != null)
-        flags.push({ text: ` · ${faultSummary(r.hanging, now)}`, style: { fg: FG_YELLOW, dim: true } });
+        flags.push({ text: ` · ${faultSummary(r.hanging, now)}`, style: { fg: FG_YELLOW } });
     // Pin marker travels just before the name so a starred node is scannable in any
     // tab/sort. Magenta keeps it distinct from the yellow ⚑ asks flag.
     const pinMark = isPinned ? [{ text: '★ ', style: { fg: FG_MAGENTA, bold: true } }] : [];
@@ -312,11 +321,14 @@ padToWidth = false) {
     const fixed = spansWidth([gutter]) + spansWidth(status) + [...treeLead].length + spansWidth(pinMark) + spansWidth(flags);
     const rightW = spansWidth(right);
     const nameMax = Math.max(4, width - fixed - rightW - 1);
-    const nameStyle = { dim: !isCursor && terminal, bold: isCursor }; // dim terminal names; bold the cursor row
+    // A finished node's name recedes to the grey ramp rather than to SGR DIM: dim
+    // is a multiplier on the theme's own foreground, and on a dark theme that lands
+    // where the canceled rows became unreadable.
+    const nameStyle = { fg: !isCursor && terminal ? RECESSIVE_FG : undefined, bold: isCursor };
     const left = [
         gutter,
         ...status,
-        { text: treeLead, style: { dim: true } },
+        { text: treeLead, style: { fg: RECESSIVE_FG } },
         ...pinMark,
         ...nameSpans(clip(r.name, nameMax), query, nameStyle),
         ...flags,
@@ -334,32 +346,34 @@ padToWidth = false) {
     }
     return assembleRow(left, right, width, caps.color, lineBase, fill);
 }
-/** The column-header row — dim labels aligned to the same zones the rows use, so
- *  the metadata columns read as a table. */
+/** The column-header row — grey labels aligned to the same zones the rows use, so
+ *  the metadata columns read as a table. Bold + the metadata grey: a header is a
+ *  landmark you scan back to, so it sits at the same weight as the column under it. */
 function columnHeaderLine(width, showCwd, caps, showMeta = true, padToWidth = false) {
+    const hdr = { fg: META_FG, bold: true };
     const left = [
         { text: '  ' }, // viewer gutter (no label)
-        { text: 'STATUS'.padEnd(STATUS_W), style: { dim: true, bold: true } },
-        { text: 'NAME', style: { dim: true, bold: true } },
+        { text: 'STATUS'.padEnd(STATUS_W), style: hdr },
+        { text: 'NAME', style: hdr },
     ];
     if (!showMeta)
         return assemble(left, width, caps.color, '', padToWidth);
     const right = [
-        { text: 'KIND/MODE'.padEnd(KM_W), style: { dim: true, bold: true } },
+        { text: 'KIND/MODE'.padEnd(KM_W), style: hdr },
         { text: COL_GAP },
-        { text: 'CTX'.padStart(CTX_W), style: { dim: true, bold: true } },
+        { text: 'CTX'.padStart(CTX_W), style: hdr },
         { text: COL_GAP },
-        { text: 'AGE'.padStart(AGE_W), style: { dim: true, bold: true } },
+        { text: 'AGE'.padStart(AGE_W), style: hdr },
     ];
     if (showCwd)
-        right.push({ text: COL_GAP }, { text: 'PROJECT'.padEnd(PROJ_W), style: { dim: true, bold: true } });
+        right.push({ text: COL_GAP }, { text: 'PROJECT'.padEnd(PROJ_W), style: hdr });
     return assembleRow(left, right, width, caps.color, '', false);
 }
 /** The status line (always present): active profile/cwd scopes · sort mode ·
  *  committed filter. The committed-filter indicator lives here now (not its own
  *  line) so a filtered view always advertises its query without consuming a header row. */
 function statusLine(state) {
-    const dim = (s) => `${DIM}${s}${RESET}`;
+    const dim = (s) => `${ESC}${META_FG}m${s}${RESET}`;
     const profile = state.profileScope === undefined ? 'all profiles' : 'current';
     const scope = state.cwdScope === null ? 'all dirs' : baseDir(state.cwdScope);
     const segs = [
@@ -413,14 +427,14 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
     if (lines <= 0)
         return [];
     const out = [];
-    const mark = caps.color ? `${DIM}${marker}${RESET}` : marker;
+    const mark = caps.color ? `${RECESSIVE}${marker}${RESET}` : marker;
     const inner = Math.max(1, width - 2);
     // No query → render the text as markdown (see blockLines for why a live query
     // keeps the raw windowed path instead). No spacing: this panel is cramped.
     if (query === '') {
         const md = renderMarkdownSpans(text, inner, lines, false);
         if (md.length === 0)
-            out.push(`${mark}${DIM}${clip(empty, inner)}${RESET}`);
+            out.push(`${mark}${RECESSIVE}${clip(empty, inner)}${RESET}`);
         else
             for (const spans of md)
                 out.push(`${out.length === 0 ? mark : '  '}${assemble(spans, inner, caps.color, '', false)}`);
@@ -430,7 +444,7 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
     }
     const snippet = previewSnippet(query, text, inner, lines);
     if (snippet.length === 0) {
-        out.push(`${mark}${DIM}${clip(empty, inner)}${RESET}`);
+        out.push(`${mark}${RECESSIVE}${clip(empty, inner)}${RESET}`);
     }
     else {
         for (const ln of snippet)
@@ -440,11 +454,11 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
         out.push('');
     return out;
 }
-/** One `Goal`/`State` briefing line: a dim fixed-width label then the text. */
+/** One `Goal`/`State` briefing line: a grey fixed-width label then the text. */
 function recapLine(label, text, width, caps) {
     const lbl = `${label.padEnd(6)}`;
     const body = clip(text, Math.max(1, width - lbl.length));
-    return caps.color ? `${DIM}${lbl}${RESET}${BOLD}${body}${RESET}` : `${lbl}${body}`;
+    return caps.color ? `${META}${lbl}${RESET}${BOLD}${body}${RESET}` : `${lbl}${body}`;
 }
 /** The bottom preview panel — exactly PREVIEW_HEIGHT lines, ordered by how fast
  *  each answers "which node was this, and can I pick it back up?":
@@ -462,7 +476,7 @@ function recapLine(label, text, width, caps) {
  *  The optional blocks yield their lines to the literal ones when absent, so the
  *  panel is never padded with blanks. Always full height so viewport math holds. */
 function previewPanel(r, width, caps, now, query) {
-    const out = [`${DIM}${'─'.repeat(width)}${RESET}`];
+    const out = [`${RECESSIVE}${'─'.repeat(width)}${RESET}`];
     if (r === undefined) {
         while (out.length < PREVIEW_HEIGHT)
             out.push('');
@@ -486,7 +500,7 @@ function previewPanel(r, width, caps, now, query) {
     if (r.viewed === true)
         metaPieces.push('\uf06e viewing');
     const metaText = clip(metaPieces.filter((p) => p !== '').join('  ·  '), Math.max(0, width - 2));
-    out.push(caps.color ? `${glyph} ${DIM}${metaText}${RESET}` : `${glyph} ${metaText}`);
+    out.push(caps.color ? `${glyph} ${META}${metaText}${RESET}` : `${glyph} ${metaText}`);
     const alloc = previewAllocation(r.recap !== undefined, r.report !== undefined);
     // Goal / State — the generated briefing, the fastest "what is this and where is
     // it" in the panel. Absent for a node that never idled long enough to make one.
@@ -507,14 +521,14 @@ function previewPanel(r, width, caps, now, query) {
         const age = relAge(r.report.ts, now);
         const stamp = `${age === '' ? '' : `${age} `}${r.report.kind}`;
         const headline = r.report.heading === '' ? r.report.body : r.report.heading;
-        const mark = caps.color ? `${DIM}▣ ${RESET}` : '▣ ';
+        const mark = caps.color ? `${RECESSIVE}▣ ${RESET}` : '▣ ';
         const inner = Math.max(1, width - 2);
-        const stampText = caps.color ? `${ESC}${FG_CYAN}m${stamp}${RESET}${DIM} · ${RESET}` : `${stamp} · `;
+        const stampText = caps.color ? `${ESC}${FG_CYAN}m${stamp}${RESET}${RECESSIVE} · ${RESET}` : `${stamp} · `;
         out.push(`${mark}${stampText}${clip(headline, Math.max(1, inner - stamp.length - 3))}`);
         for (let i = 1; i < alloc.report; i++) {
             const detail = r.report.heading === '' ? '' : r.report.body;
             const ln = previewSnippet('', detail, inner, alloc.report - 1)[i - 1];
-            out.push(ln === undefined ? '' : `  ${DIM}${clip(ln.text, inner)}${RESET}`);
+            out.push(ln === undefined ? '' : `  ${META}${clip(ln.text, inner)}${RESET}`);
         }
     }
     return out;
@@ -537,15 +551,16 @@ function previewPanel(r, width, caps, now, query) {
 // natural size, the largest gives a line back until it fits, and only then does the
 // least-valuable section drop out entirely (report → state → goal → reply; the ask
 // is the recognition anchor and never drops).
-/** A dim hairline with a small-caps section label — `── GOAL ────────`. The optional
- *  suffix rides after the label in its own hue (the report's age · kind stamp). */
+/** A hairline with a small-caps section label — `── GOAL ────────`. The optional
+ *  suffix rides after the label in its own hue (the report's age · kind stamp).
+ *  The label is a landmark (metadata grey + bold); the rule itself recedes. */
 function sectionRule(label, width, caps, suffix) {
     const suf = suffix === undefined ? '' : `${suffix.text} `;
     const tail = Math.max(0, width - 4 - label.length - suf.length);
     const sufStyled = suffix === undefined
         ? ''
-        : caps.color ? `${ESC}${suffix.fg}m${suffix.text}${RESET}${DIM} ` : `${suffix.text} `;
-    return `${DIM}── ${BOLD}${label}${RESET}${DIM} ${sufStyled}${'─'.repeat(tail)}${RESET}`;
+        : caps.color ? `${ESC}${suffix.fg}m${suffix.text}${RESET}${RECESSIVE} ` : `${suffix.text} `;
+    return `${RECESSIVE}── ${META}${BOLD}${label}${RESET}${RECESSIVE} ${sufStyled}${'─'.repeat(tail)}${RESET}`;
 }
 /** A marked body block with a hanging indent: `marker` leads the first line, `cont`
  *  every wrapped line after it (`▌ ` keeps the accent bar running down a quote).
@@ -566,7 +581,7 @@ function blockLines(marker, cont, markerStyle, text, empty, maxLines, width, cap
         if (md.length === 0) {
             if (empty === undefined)
                 return [];
-            return [`${mk(marker, markerStyle)}${DIM}${clip(empty, inner)}${RESET}`];
+            return [`${mk(marker, markerStyle)}${RECESSIVE}${clip(empty, inner)}${RESET}`];
         }
         return md.map((spans, i) => `${mk(i === 0 ? marker : cont, markerStyle)}${assemble(spans, inner, caps.color, '', false)}`);
     }
@@ -574,17 +589,17 @@ function blockLines(marker, cont, markerStyle, text, empty, maxLines, width, cap
     if (snippet.length === 0) {
         if (empty === undefined)
             return [];
-        return [`${mk(marker, markerStyle)}${DIM}${clip(empty, inner)}${RESET}`];
+        return [`${mk(marker, markerStyle)}${RECESSIVE}${clip(empty, inner)}${RESET}`];
     }
     return snippet.map((ln, i) => `${mk(i === 0 ? marker : cont, markerStyle)}${snippetLine(ln, inner, caps, bodyStyle)}`);
 }
-/** One `label value` fact cell: a 4-col right-aligned dim label, then the value in
+/** One `label value` fact cell: a 4-col right-aligned grey label, then the value in
  *  its own hue, padded so a two-column facts block aligns down both columns. */
 function factCell(label, value, w, style, pad) {
     const vw = Math.max(1, w - 5);
     const v = clip(value, vw);
     return [
-        { text: `${label.padStart(4)} `, style: { dim: true } },
+        { text: `${label.padStart(4)} `, style: { fg: RECESSIVE_FG } },
         { text: v, style },
         ...(pad && v.length < vw ? [{ text: ' '.repeat(vw - v.length) }] : []),
     ];
@@ -594,10 +609,10 @@ function factCell(label, value, w, style, pad) {
 function factsBlock(r, width, now, caps) {
     const ctxFg = ctxColorCode(r.ctx_tokens);
     const facts = [
-        ['kind', `${r.kind}/${r.mode}`, { fg: FG_GRAY }],
-        ['ctx', fmtCtx(r.ctx_tokens), { fg: ctxFg, dim: ctxFg === undefined }],
-        ['proj', `~${baseDir(r.cwd)}`, { fg: FG_GRAY }],
-        ['age', relAge(r.created, now), { dim: true }],
+        ['kind', `${r.kind}/${r.mode}`, { fg: META_FG }],
+        ['ctx', fmtCtx(r.ctx_tokens), { fg: ctxFg ?? META_FG }],
+        ['proj', `~${baseDir(r.cwd)}`, { fg: META_FG }],
+        ['age', relAge(r.created, now), { fg: META_FG }],
     ];
     const out = [];
     // Two columns at any panel width the side layout allows; the column is capped so
@@ -628,7 +643,7 @@ function panelStatusLine(r, width, caps, now) {
         hanging: r.hanging ?? null,
     });
     const word = v.word ?? ({ active: 'active', idle: 'idle', done: 'done', dead: 'dead', canceled: 'canceled' }[r.status] ?? r.status);
-    const spans = [{ text: `${v.glyph} ${word}`, style: { fg: FG(v.color), bold: true } }];
+    const spans = [{ text: `${v.glyph} ${word}`, style: { fg: v.color, bold: true } }];
     const sep = () => ({ text: '   ' });
     if (r.asks > 0)
         spans.push(sep(), { text: `⚑${r.asks} ${r.asks === 1 ? 'ask' : 'asks'}`, style: { fg: FG_BRIGHT_YELLOW, bold: true } });
@@ -642,13 +657,13 @@ function panelStatusLine(r, width, caps, now) {
  *  beneath it: the pinned star, the node name in bold, its short id flush right. */
 function panelTitleLine(r, width, caps, isPinned) {
     if (r === undefined)
-        return assemble([{ text: 'PREVIEW', style: { dim: true, bold: true } }], width, caps.color, '', false);
+        return assemble([{ text: 'PREVIEW', style: { fg: META_FG, bold: true } }], width, caps.color, '', false);
     const left = [];
     if (isPinned)
         left.push({ text: '★ ', style: { fg: FG_MAGENTA, bold: true } });
     const id = r.node_id.slice(0, 8);
     left.push({ text: clip(r.name, Math.max(4, width - id.length - 2 - spansWidth(left))), style: { bold: true } });
-    return assembleRow(left, [{ text: id, style: { dim: true } }], width, caps.color, '', false);
+    return assembleRow(left, [{ text: id, style: { fg: META_FG } }], width, caps.color, '', false);
 }
 /** The side panel's body, at most `height` lines (never padded to it). */
 function sidePanelBody(r, width, height, caps, now, query) {
@@ -656,7 +671,7 @@ function sidePanelBody(r, width, height, caps, now, query) {
     if (height <= 0)
         return out;
     if (r === undefined) {
-        out.push(`${DIM}(no selection)${RESET}`);
+        out.push(`${RECESSIVE}(no selection)${RESET}`);
         return out;
     }
     out.push(panelStatusLine(r, width, caps, now));
@@ -669,7 +684,7 @@ function sidePanelBody(r, width, height, caps, now, query) {
         frozen: isFrozenRow(r),
         hanging: r.hanging ?? null,
     });
-    const accent = { fg: FG(v.color) };
+    const accent = { fg: v.color };
     const secs = [];
     if (r.recap !== undefined && r.recap.goal !== '') {
         const goal = r.recap.goal;
@@ -688,7 +703,7 @@ function sidePanelBody(r, width, height, caps, now, query) {
         lines: (n) => blockLines('❯ ', '  ', { fg: FG_BRIGHT_CYAN, bold: true }, askText, '(no spawn prompt)', n, width, caps, query) });
     const reply = r.lastAssistant ?? '';
     secs.push({ label: 'REPLY', drop: 1, min: 2, want: 9,
-        lines: (n) => blockLines('↩ ', '  ', { dim: true }, reply, '(no reply yet)', n, width, caps, '') });
+        lines: (n) => blockLines('↩ ', '  ', { fg: META_FG }, reply, '(no reply yet)', n, width, caps, '') });
     if (r.report !== undefined) {
         const rep = r.report;
         const age = relAge(rep.ts, now);
@@ -699,7 +714,7 @@ function sidePanelBody(r, width, height, caps, now, query) {
                 const headline = rep.heading === '' ? rep.body : rep.heading;
                 const head = blockLines('▣ ', '  ', { fg: FG_CYAN, bold: true }, headline, undefined, Math.min(2, n), width, caps, '', { bold: true });
                 if (rep.heading !== '' && n > head.length) {
-                    head.push(...blockLines('  ', '  ', undefined, rep.body, undefined, n - head.length, width, caps, '', { dim: true }));
+                    head.push(...blockLines('  ', '  ', undefined, rep.body, undefined, n - head.length, width, caps, '', { fg: META_FG }));
                 }
                 return head;
             },
@@ -806,7 +821,7 @@ function renderHelp(size, caps) {
     const lines = [];
     lines.push(`${BOLD}Canvas navigator — keys${RESET}`);
     lines.push('');
-    const dim = (s) => `${DIM}${s}${RESET}`;
+    const dim = (s) => `${META}${s}${RESET}`;
     for (const [group, keys, desc] of HELP_ROWS) {
         const g = group.padEnd(6);
         const k = keys.padEnd(12);
@@ -840,8 +855,8 @@ export function renderFrame(state, size, caps = { color: false, color256: false
     const parts = statusCounts(state.tree);
     const summaryPlain = parts.map((p) => `${STATUS_GLYPH[p.status]}${p.count}`).join(' ');
     const summaryColored = caps.color
-        ? parts.map((p) => `${ESC}${STATUS_COLOR[p.status]}m${STATUS_GLYPH[p.status]}${RESET}${DIM}${p.count}${RESET}`).join(' ')
-        : `${DIM}${summaryPlain}${RESET}`;
+        ? parts.map((p) => `${ESC}${STATUS_COLOR[p.status]}m${STATUS_GLYPH[p.status]}${RESET}${META}${p.count}${RESET}`).join(' ')
+        : `${META}${summaryPlain}${RESET}`;
     const gap = width - titlePlainLen - summaryPlain.length;
     lines.push(gap > 1 ? `${title}${' '.repeat(gap)}${summaryColored}` : title);
     // line 2 — tab bar.
@@ -862,7 +877,7 @@ export function renderFrame(state, size, caps = { color: false, color256: false
     const layout = previewLayout(cols, previewOn);
     const side = layout.mode === 'side';
     const rowsW = side ? layout.rowsW : width;
-    const gutter = `${DIM}${SIDE_GUTTER}${RESET}`;
+    const gutter = `${RECESSIVE}${SIDE_GUTTER}${RESET}`;
     const sel = state.visible[state.cursor];
     const selRow = sel !== undefined ? state.tree.nodes.get(sel.id)?.row : undefined;
     // column header (table labels, plus the panel title in side mode) + separator.
@@ -872,8 +887,8 @@ export function renderFrame(state, size, caps = { color: false, color256: false
         ? `${colHeader}${gutter}${panelTitleLine(selRow, layout.panelW, caps, sel !== undefined && state.pinned.has(sel.id))}`
         : colHeader);
     lines.push(side
-        ? `${DIM}${'─'.repeat(rowsW)}─┼─${'─'.repeat(layout.panelW)}${RESET}`
-        : `${DIM}${'─'.repeat(width)}${RESET}`);
+        ? `${RECESSIVE}${'─'.repeat(rowsW)}─┼─${'─'.repeat(layout.panelW)}${RESET}`
+        : `${RECESSIVE}${'─'.repeat(width)}${RESET}`);
     // body — windowed visible rows, leaving room for the (optional) bottom panel.
     const head = lines.length; // === headerHeight(state.search)
     const previewH = layout.mode === 'bottom' ? PREVIEW_HEIGHT : 0;
@@ -886,7 +901,7 @@ export function renderFrame(state, size, caps = { color: false, color256: false
     const compose = (row, i) => (side ? `${row}${gutter}${panel[i] ?? ''}` : row);
     const blankRow = side ? ' '.repeat(rowsW) : '';
     if (state.visible.length === 0) {
-        lines.push(`${DIM}  (no nodes match this view)${RESET}`);
+        lines.push(`${META}  (no nodes match this view)${RESET}`);
         for (let i = 1; i < viewport; i++)
             lines.push('');
     }
@@ -923,7 +938,7 @@ export function renderFrame(state, size, caps = { color: false, color256: false
             : state.readOnly === true
                 ? '↑↓ move  →/← tree  / search  p pin  v preview  Tab tabs  ? more  q quit  — read-only remote canvas'
                 : `${hangingHint}↑↓ move  ⏎ open  O bg  / search  p pin  v preview  m msg  x close  ? more  q quit`;
-        lines.push(`${DIM}${clip(footer, width)}${RESET}`);
+        lines.push(`${META}${clip(footer, width)}${RESET}`);
     }
     // Assemble: home, each line cleared to EOL, then clear below.
     const body = lines.map((l) => `${l}${ESC}K`).join('\r\n');

package/dist/core/canvas/status-glyph.d.ts

@@ -1,15 +1,16 @@
 import type { NodeStatus } from './types.js';
 import { type Fault, type FaultKind } from '../runtime/fault.js';
 export declare const STATUS_GLYPH: Record<NodeStatus, string>;
-export declare const STATUS_COLOR: Record<NodeStatus, number>;
+export declare const STATUS_COLOR: Record<NodeStatus, string>;
 export declare const HANGING_GLYPH = "\u26A0";
-export declare const HANGING_COLOR = 33;
+export declare const HANGING_COLOR = "33";
 /** Short label for the fault kind. The overlay keeps one glyph and lets the
  *  label carry the distinction. */
 export declare function hangingLabel(kind: FaultKind): string;
 export interface NodeVisual {
     glyph: string;
-    color: number;
+    /** SGR fg parameters, e.g. '32' or '38;5;243' — interpolate as `\x1b[${color}m`. */
+    color: string;
     /** Overlay word (hanging kind label / 'live'); undefined for a plain status
      *  (the caller supplies its own status word). */
     word?: string;

package/dist/core/canvas/status-glyph.js

@@ -6,6 +6,7 @@
 // because a frozen row has no process at all: any streaming read against it is
 // a stale marker, and showing it as active is the lie the freeze state exists
 // to stop telling.
+import { RECESSIVE_FG } from '../tui/draw.js';
 import { FAULT_QUIET_MS } from '../runtime/fault.js';
 // ── Status glyphs (the mono, color-free primary encoding) ─────────────────────
 export const STATUS_GLYPH = {
@@ -15,24 +16,31 @@ export const STATUS_GLYPH = {
     dead: '✗',
     canceled: '⊘',
 };
-// ── Status hue: numeric SGR codes per status. ─────────────────────────────────
+// ── Status hue: SGR fg parameters per status. ─────────────────────────────────
 // Reinforces the glyph; the glyph SHAPE stays the NO_COLOR carrier.
+//
+// The four live statuses use basic-16 hues, which every terminal palette renders
+// as a saturated colour. `canceled` cannot: it wants GREY, and basic-16 grey is
+// bright-black — a slot themes routinely set to a value barely off their own
+// background, which is what made every canceled row unreadable. Grey is therefore
+// an explicit 256-colour step (see RECESSIVE_FG) chosen for measured contrast
+// rather than delegated to the palette.
 export const STATUS_COLOR = {
-    active: 32, // green
-    idle: 33, // yellow
-    done: 36, // cyan
-    dead: 31, // red
-    canceled: 90, // grey (bright-black)
+    active: '32', // green
+    idle: '33', // yellow
+    done: '36', // cyan
+    dead: '31', // red
+    canceled: RECESSIVE_FG,
 };
 // ── Streaming overlay (genuinely mid-turn) — browse's existing statusRail visual.
 const STREAMING_GLYPH = '⟳';
-const STREAMING_COLOR = 92; // bright green (brighter than active-status green)
+const STREAMING_COLOR = '92'; // bright green (brighter than active-status green)
 // ── Frozen overlay (waiting on a broker slot: marked, but no process). ───────
 const FROZEN_GLYPH = '◌';
-const FROZEN_COLOR = 94; // bright blue
+const FROZEN_COLOR = '94'; // bright blue
 // ── Active-fault overlay (one glyph, kind label carries the detail). ─────────
 export const HANGING_GLYPH = '⚠';
-export const HANGING_COLOR = 33; // yellow
+export const HANGING_COLOR = '33'; // yellow
 /** Short label for the fault kind. The overlay keeps one glyph and lets the
  *  label carry the distinction. */
 export function hangingLabel(kind) {

package/dist/core/canvas/types.d.ts

@@ -106,6 +106,24 @@ export interface ManagedWorktree {
         blocked: string;
     };
     sweep?: ManagedWorktreeSweep;
+    /** Recorded ONLY by an explicit branch-moved `close` when the checkout's
+     *  actual branch has drifted from `branch` (its recorded `crtr/*` ref is
+     *  gone — ordinary PR work moved it there) but that branch's content was
+     *  proven, immediately before this was written, already contained in the
+     *  recorded base or its upstream. Authorizes ONLY the daemon sweep's later
+     *  checkout removal for this EXACT path + git common dir + observed branch
+     *  + observed SHA — the sweep re-verifies all four before acting and NEVER
+     *  deletes `observed_branch`, since it is not a `crtr/*` branch crouter
+     *  created. A mismatch on re-verification invalidates the authorization; a
+     *  fresh explicit close must re-establish it. Absent for every ordinary
+     *  managed worktree, and for `abandon`'s branch-moved path (which disposes
+     *  immediately instead of deferring, so it needs no persisted grant). */
+    disposal?: {
+        observed_branch: string;
+        observed_sha: string;
+        common_dir: string;
+        authorized: string;
+    };
 }
 /** Immutable companion provenance. The origin session/leaf/model coordinates
  *  remain canonical in the review row rather than being duplicated into node

package/dist/core/command-plugins/bundle.d.ts

@@ -32,6 +32,13 @@ export interface ValidatedBundle {
         path: string;
         bytes: Uint8Array;
     }>;
+    hooks?: {
+        manifest: Uint8Array;
+        files: ReadonlyArray<{
+            path: string;
+            bytes: Uint8Array;
+        }>;
+    };
 }
 export interface PluginBundleValidation {
     bundle?: ValidatedBundle;

package/dist/core/command-plugins/bundle.js

@@ -38,13 +38,13 @@ function validateMemberName(path, type) {
 }
 function validateMemberShape(path, type) {
     if (type === 'file') {
-        if (path === 'bundle.json' || path === 'commands.json' || (path.startsWith('memory/') && path.endsWith('.md')))
+        if (path === 'bundle.json' || path === 'commands.json' || path === 'hooks.json' || (path.startsWith('memory/') && path.endsWith('.md')) || path.startsWith('hooks/'))
             return undefined;
-        return bundleInvalid('bundle contains an unsupported file member', path, 'bundle.json, commands.json, or memory/**/*.md', 'Remove unsupported members from the archive.', path);
+        return bundleInvalid('bundle contains an unsupported file member', path, 'bundle.json, commands.json, hooks.json, memory/**/*.md, or hooks/**', 'Remove unsupported members from the archive.', path);
     }
-    if (path === 'memory' || path.startsWith('memory/'))
+    if (path === 'memory' || path.startsWith('memory/') || path === 'hooks' || path.startsWith('hooks/'))
         return undefined;
-    return bundleInvalid('bundle contains an unsupported directory member', path, 'memory or a directory below memory/', 'Remove unsupported directory members from the archive.', path);
+    return bundleInvalid('bundle contains an unsupported directory member', path, 'memory or hooks, or a directory below either subtree', 'Remove unsupported directory members from the archive.', path);
 }
 /** A member path as it will exist on disk: directories carry no trailing slash. */
 function materializedPath(member) {
@@ -221,6 +221,14 @@ export async function validatePluginBundle(archive, options) {
             issues: [bundleInvalid('bundle must contain exactly one bundle.json and one commands.json regular file', `bundle.json=${bundle !== undefined}, commands.json=${commands !== undefined}`, 'one regular bundle.json and one regular commands.json member', 'Add the required metadata members to the archive.')],
         };
     }
+    const hookManifest = parsed.members.find((member) => member.path === 'hooks.json' && member.type === 'file');
+    const hookFiles = parsed.members.filter((member) => member.type === 'file' && member.path.startsWith('hooks/'));
+    const carriesHooks = hookManifest !== undefined || parsed.members.some((member) => member.path === 'hooks' || member.path.startsWith('hooks/'));
+    if (carriesHooks && (hookManifest === undefined || !hookFiles.some((member) => member.path === 'hooks/dispatch'))) {
+        return {
+            issues: [bundleInvalid('bundle hook payload must contain both hooks.json and hooks/dispatch regular files', `hooks.json=${hookManifest !== undefined}, hooks/dispatch=${hookFiles.some((member) => member.path === 'hooks/dispatch')}`, 'both hooks.json and hooks/dispatch regular files', 'Add both required hook members or remove the hook payload.')],
+        };
+    }
     const metadata = parseBundleMetadata(bundle.bytes);
     if (metadata.issue !== undefined)
         return { issues: [metadata.issue] };
@@ -241,6 +249,12 @@ export async function validatePluginBundle(archive, options) {
             memory: parsed.members
                 .filter((member) => member.type === 'file' && member.path.startsWith('memory/'))
                 .map((member) => ({ path: member.path, bytes: member.bytes })),
+            ...(hookManifest !== undefined ? {
+                hooks: {
+                    manifest: hookManifest.bytes,
+                    files: hookFiles.map((member) => ({ path: member.path, bytes: member.bytes })),
+                },
+            } : {}),
         },
         issues: [],
     };

package/dist/core/git.d.ts

@@ -11,7 +11,11 @@ export interface GitSyncOptions {
     timeoutMs?: number;
 }
 export declare function gitSync(args: string[], cwd?: string, input?: string, options?: GitSyncOptions): GitResult;
-export declare function gitAsync(args: string[], cwd?: string, input?: string): Promise<GitResult>;
+export interface GitAsyncOptions {
+    timeoutMs?: number;
+    env?: NodeJS.ProcessEnv;
+}
+export declare function gitAsync(args: string[], cwd?: string, input?: string, options?: GitAsyncOptions): Promise<GitResult>;
 export declare function clone(url: string, dest: string, opts?: {
     ref?: string;
     depth?: number;

package/dist/core/git.js

@@ -10,22 +10,36 @@ export function gitSync(args, cwd, input, options = {}) {
     const timedOut = res.error?.code === 'ETIMEDOUT';
     return { status, stdout, stderr, ...(completed ? {} : { executionFailed: true }), ...(processError === undefined ? {} : { processError }), ...(timedOut ? { timedOut: true } : {}) };
 }
-export async function gitAsync(args, cwd, input) {
+export async function gitAsync(args, cwd, input, options = {}) {
     return new Promise((resolve) => {
-        const child = spawn('git', args, { cwd });
+        const child = spawn('git', args, { cwd, ...(options.env === undefined ? {} : { env: options.env }) });
         if (input === undefined)
             child.stdin.end();
         else
             child.stdin.end(input);
         let stdout = '';
         let stderr = '';
+        let timedOut = false;
+        let settled = false;
+        const timer = options.timeoutMs === undefined ? undefined : setTimeout(() => {
+            timedOut = true;
+            child.kill('SIGTERM');
+        }, options.timeoutMs);
+        const settle = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            if (timer !== undefined)
+                clearTimeout(timer);
+            resolve(result);
+        };
         child.stdout.on('data', (d) => (stdout += d.toString()));
         child.stderr.on('data', (d) => (stderr += d.toString()));
         child.on('close', (status) => {
             const code = typeof status === 'number' ? status : 1;
-            resolve({ status: code, stdout, stderr });
+            settle({ status: code, stdout, stderr, ...(timedOut ? { timedOut: true, executionFailed: true } : {}) });
         });
-        child.on('error', (e) => resolve({ status: 1, stdout: '', stderr: String(e) }));
+        child.on('error', (e) => settle({ status: 1, stdout: '', stderr: String(e), executionFailed: true, processError: String(e) }));
     });
 }
 export function clone(url, dest, opts = {}) {