@north-light/crouter 0.3.274 → 0.3.275

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/runtime/surface-bg.d.ts

@@ -1,10 +1,12 @@
-/** The SGR escape that turns ON the distinct-surface background (theme
- *  `selectedBg`), e.g. `\x1b[48;2;58;58;74m`. Pair with `\x1b[49m` to reset just
+/** The SGR escape that turns ON the distinct-surface background (the theme's
+ *  card plane), e.g. `\x1b[48;2;52;53;65m`. Pair with `\x1b[49m` to reset just
  *  the background. Throws if no process has initialized the theme — callers on a
  *  render path (the attach overlay) always have, by construction. */
 export declare function surfaceBgAnsi(): string;
-/** tmux flags that frame a `display-menu` / `display-popup` on the distinct
- *  surface background — a rounded border + the surface bg on the body and border.
+/** tmux flags that frame a `display-menu` / `display-popup` as a distinct
+ *  surface — a rounded border in the theme accent around a body painted with the
+ *  theme's card plane. The accent border is what carries the "you are somewhere
+ *  else" signal, because a card sits close to the page by design.
  *  Empty when the theme is unavailable in this process (chrome stays default; the
  *  attach viewer re-installs the menu with these once it has themed). One knob:
  *  every crtr tmux float shares this single definition. */

package/dist/core/runtime/surface-bg.js

@@ -3,10 +3,24 @@
 // crtr's overlays and popups must read as a SEPARATE surface from the normal one
 // (CTO ruling, insights/terminal-ui/inline-ui-placement #11): a popup whose background matches
 // the surface has invisible edges, so you can't tell where the float begins. We
-// paint them with the active pi theme's `selectedBg` role — theme-derived, so it
-// adapts to light/dark and is ONE centralized knob, not a scattered hardcode.
+// paint them from the active pi theme — theme-derived, so it adapts to light/dark
+// and is ONE centralized knob, not a scattered hardcode.
 //
-// pi 0.79 does not re-export `selectedBg` through its public API (the `.` entry
+// WHICH ROLE: `userMessageBg`, the theme's CARD plane — not `selectedBg`. Every
+// theme places its card one step off the page background (gruvbox-material
+// #32302f vs #282828; pi's own dark #343541, light #e8e8e8) while `selectedBg` is
+// a SELECTION BAND, deliberately pushed far off the page so a highlighted row
+// lifts. Painting a 90%×85% takeover with the selection band made the whole
+// screen that band: every dim/muted role lost the contrast it was designed
+// against (gruvbox dim text fell to 2.1:1), and the row highlight drawn ON TOP
+// had nowhere left to go. The card plane keeps content legibility and leaves the
+// selection band free to do its actual job inside the popup.
+//
+// A card sits close to the page by design, so the EDGE signal rule 11 demands
+// comes from the border, not the fill: we paint the rounded border in the theme
+// accent so the float's boundary is unmistakable.
+//
+// pi 0.79 does not re-export these roles through its public API (the `.` entry
 // omits `getResolvedThemeColors` and the live `theme` singleton). It DOES publish
 // the live `Theme` instance on a process-global symbol once `initTheme()` has run
 // — the same hook pi's own SDK reads (see broker.ts `ctx.ui.theme`). We read it
@@ -26,43 +40,46 @@ function liveTheme() {
     const t = globalThis[THEME_SYMBOL];
     return (t ?? undefined);
 }
-/** The SGR escape that turns ON the distinct-surface background (theme
- *  `selectedBg`), e.g. `\x1b[48;2;58;58;74m`. Pair with `\x1b[49m` to reset just
+/** The SGR escape that turns ON the distinct-surface background (the theme's
+ *  card plane), e.g. `\x1b[48;2;52;53;65m`. Pair with `\x1b[49m` to reset just
  *  the background. Throws if no process has initialized the theme — callers on a
  *  render path (the attach overlay) always have, by construction. */
 export function surfaceBgAnsi() {
     const t = liveTheme();
     if (t === undefined)
         throw new Error('surfaceBgAnsi: pi theme not initialized in this process');
-    return t.getBgAnsi('selectedBg');
+    return t.getBgAnsi('userMessageBg');
 }
-/** The distinct-surface background as a tmux colour token (`#rrggbb` on a
- *  truecolor theme, `colourN` on a 256-colour theme), or undefined when the theme
- *  is not yet loaded in this process OR defines no selection background. tmux
- *  cannot read pi's theme, so we translate the SGR pi resolved for us. */
-function surfaceBgTmux() {
-    const t = liveTheme();
-    if (t === undefined)
-        return undefined;
-    const ansi = t.getBgAnsi('selectedBg');
-    const tc = /48;2;(\d+);(\d+);(\d+)/.exec(ansi);
+/** An SGR colour parameter (`48;2;r;g;b` or `38;5;n`) as a tmux colour token —
+ *  `#rrggbb` on a truecolor theme, `colourN` on a 256-colour one. tmux cannot
+ *  read pi's theme, so we translate the SGR pi already resolved for us.
+ *  undefined when the role is empty (the SGR is a bare default-colour reset). */
+function tmuxColor(ansi) {
+    const tc = /[34]8;2;(\d+);(\d+);(\d+)/.exec(ansi);
     if (tc !== null) {
         const hex = (n) => Number(n).toString(16).padStart(2, '0');
         return `#${hex(tc[1])}${hex(tc[2])}${hex(tc[3])}`;
     }
-    const c256 = /48;5;(\d+)/.exec(ansi);
+    const c256 = /[34]8;5;(\d+)/.exec(ansi);
     if (c256 !== null)
         return `colour${c256[1]}`;
-    return undefined; // empty/default selectedBg → nothing distinct to paint
+    return undefined;
 }
-/** tmux flags that frame a `display-menu` / `display-popup` on the distinct
- *  surface background — a rounded border + the surface bg on the body and border.
+/** tmux flags that frame a `display-menu` / `display-popup` as a distinct
+ *  surface — a rounded border in the theme accent around a body painted with the
+ *  theme's card plane. The accent border is what carries the "you are somewhere
+ *  else" signal, because a card sits close to the page by design.
  *  Empty when the theme is unavailable in this process (chrome stays default; the
  *  attach viewer re-installs the menu with these once it has themed). One knob:
  *  every crtr tmux float shares this single definition. */
 export function surfaceTmuxStyleArgs() {
-    const bg = surfaceBgTmux();
+    const t = liveTheme();
+    if (t === undefined)
+        return [];
+    const bg = tmuxColor(t.getBgAnsi('userMessageBg'));
     if (bg === undefined)
         return [];
-    return ['-b', 'rounded', '-s', `bg=${bg}`, '-S', `bg=${bg}`];
+    const accent = tmuxColor(t.getFgAnsi('accent'));
+    const border = accent === undefined ? `bg=${bg}` : `fg=${accent},bg=${bg}`;
+    return ['-b', 'rounded', '-s', `bg=${bg}`, '-S', border];
 }

package/dist/core/tui/draw.d.ts

@@ -1,3 +1,5 @@
+export declare const META_FG = "38;5;246";
+export declare const RECESSIVE_FG = "38;5;243";
 export interface Size {
     cols: number;
     rows: number;