@north-light/crouter 0.3.277 → 0.3.278

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, META_FG, RECESSIVE_FG } from '../../tui/draw.js';
+import { clip, assemble, detectColorCaps } 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
@@ -42,9 +42,9 @@ export const PREVIEW_HEIGHT = PREVIEW_BODY + 2;
 // one code path per layout and never two hand-maintained copies of the content.
 const SIDE_MIN_COLS = 100; // below this the side column would starve the name column
 const SIDE_PANEL_MIN = 46;
-const SIDE_PANEL_MAX = 80;
-const SIDE_PANEL_RATIO = 0.46;
-const SIDE_ROWS_MIN = 44; // the row table never shrinks below this
+const SIDE_PANEL_MAX = 110;
+const SIDE_PANEL_RATIO = 0.55;
+const SIDE_ROWS_MIN = 40; // the row table never shrinks below this
 const SIDE_GUTTER = ' │ '; // rows │ panel — the dim rule that separates them
 export function previewLayout(cols, previewOn) {
     const width = Math.max(20, cols) - 1; // last column is reserved for \x1b[K
@@ -85,26 +85,12 @@ const RESET = `${ESC}0m`;
 const REVERSE = `${ESC}7m`;
 const DIM = `${ESC}2m`;
 const BOLD = `${ESC}1m`;
-// 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`;
+const CURSOR_BG = `${ESC}48;5;236m`; // subtle dark-gray cursor-row bg (256-color)
 // Basic-16 ANSI fg codes used by the palette.
 const FG_YELLOW = '33';
 const FG_RED = '31';
 const FG_CYAN = '36';
-// 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_GRAY = '90'; // bright-black
 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)
@@ -182,17 +168,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 ? `${META}  ${t}  ${RESET}` : `  ${t}  `;
+        return color ? `${DIM}  ${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 (the
- *  recessive grey for terminal status, bold on the cursor row). */
+ *  matches are scannable. Non-matched chars carry the row's name style (dim 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: { fg: style.fg, bold: style.bold } }];
+        return [{ text: name, style: { dim: style.dim, bold: style.bold } }];
     const out = [];
     let buf = '';
     let bufHi = false;
@@ -202,7 +188,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: { fg: style.fg, bold: style.bold } });
+            out.push({ text: buf, style: { dim: style.dim, bold: style.bold } });
         buf = '';
     };
     for (let i = 0; i < name.length; i++) {
@@ -252,14 +238,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: META_FG } },
+        { text: clipPad(`${r.kind}/${r.mode}`, KM_W), style: { fg: FG_GRAY } },
         { text: COL_GAP },
-        { text: fmtCtx(r.ctx_tokens).padStart(CTX_W), style: { fg: ctxFg ?? META_FG } },
+        { text: fmtCtx(r.ctx_tokens).padStart(CTX_W), style: { fg: ctxFg, dim: ctxFg === undefined } },
         { text: COL_GAP },
-        { text: relAge(r.created, now).padStart(AGE_W), style: { fg: META_FG } },
+        { text: relAge(r.created, now).padStart(AGE_W), style: { dim: true } },
     ];
     if (showCwd) {
-        out.push({ text: COL_GAP }, { text: clipPad(`~${baseDir(r.cwd)}`, PROJ_W), style: { fg: META_FG } });
+        out.push({ text: COL_GAP }, { text: clipPad(`~${baseDir(r.cwd)}`, PROJ_W), style: { fg: FG_GRAY } });
     }
     return out;
 }
@@ -309,7 +295,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 } });
+        flags.push({ text: ` · ${faultSummary(r.hanging, now)}`, style: { fg: FG_YELLOW, dim: true } });
     // 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 } }] : [];
@@ -321,14 +307,11 @@ 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);
-    // 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 nameStyle = { dim: !isCursor && terminal, bold: isCursor }; // dim terminal names; bold the cursor row
     const left = [
         gutter,
         ...status,
-        { text: treeLead, style: { fg: RECESSIVE_FG } },
+        { text: treeLead, style: { dim: true } },
         ...pinMark,
         ...nameSpans(clip(r.name, nameMax), query, nameStyle),
         ...flags,
@@ -346,34 +329,32 @@ padToWidth = false) {
     }
     return assembleRow(left, right, width, caps.color, lineBase, fill);
 }
-/** 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. */
+/** The column-header row — dim labels aligned to the same zones the rows use, so
+ *  the metadata columns read as a table. */
 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: hdr },
-        { text: 'NAME', style: hdr },
+        { text: 'STATUS'.padEnd(STATUS_W), style: { dim: true, bold: true } },
+        { text: 'NAME', style: { dim: true, bold: true } },
     ];
     if (!showMeta)
         return assemble(left, width, caps.color, '', padToWidth);
     const right = [
-        { text: 'KIND/MODE'.padEnd(KM_W), style: hdr },
+        { text: 'KIND/MODE'.padEnd(KM_W), style: { dim: true, bold: true } },
         { text: COL_GAP },
-        { text: 'CTX'.padStart(CTX_W), style: hdr },
+        { text: 'CTX'.padStart(CTX_W), style: { dim: true, bold: true } },
         { text: COL_GAP },
-        { text: 'AGE'.padStart(AGE_W), style: hdr },
+        { text: 'AGE'.padStart(AGE_W), style: { dim: true, bold: true } },
     ];
     if (showCwd)
-        right.push({ text: COL_GAP }, { text: 'PROJECT'.padEnd(PROJ_W), style: hdr });
+        right.push({ text: COL_GAP }, { text: 'PROJECT'.padEnd(PROJ_W), style: { dim: true, bold: true } });
     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) => `${ESC}${META_FG}m${s}${RESET}`;
+    const dim = (s) => `${DIM}${s}${RESET}`;
     const profile = state.profileScope === undefined ? 'all profiles' : 'current';
     const scope = state.cwdScope === null ? 'all dirs' : baseDir(state.cwdScope);
     const segs = [
@@ -427,14 +408,14 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
     if (lines <= 0)
         return [];
     const out = [];
-    const mark = caps.color ? `${RECESSIVE}${marker}${RESET}` : marker;
+    const mark = caps.color ? `${DIM}${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}${RECESSIVE}${clip(empty, inner)}${RESET}`);
+            out.push(`${mark}${DIM}${clip(empty, inner)}${RESET}`);
         else
             for (const spans of md)
                 out.push(`${out.length === 0 ? mark : '  '}${assemble(spans, inner, caps.color, '', false)}`);
@@ -444,7 +425,7 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
     }
     const snippet = previewSnippet(query, text, inner, lines);
     if (snippet.length === 0) {
-        out.push(`${mark}${RECESSIVE}${clip(empty, inner)}${RESET}`);
+        out.push(`${mark}${DIM}${clip(empty, inner)}${RESET}`);
     }
     else {
         for (const ln of snippet)
@@ -454,11 +435,11 @@ function markedBlock(marker, text, empty, lines, width, caps, query) {
         out.push('');
     return out;
 }
-/** One `Goal`/`State` briefing line: a grey fixed-width label then the text. */
+/** One `Goal`/`State` briefing line: a dim 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 ? `${META}${lbl}${RESET}${BOLD}${body}${RESET}` : `${lbl}${body}`;
+    return caps.color ? `${DIM}${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?":
@@ -476,7 +457,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 = [`${RECESSIVE}${'─'.repeat(width)}${RESET}`];
+    const out = [`${DIM}${'─'.repeat(width)}${RESET}`];
     if (r === undefined) {
         while (out.length < PREVIEW_HEIGHT)
             out.push('');
@@ -500,7 +481,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} ${META}${metaText}${RESET}` : `${glyph} ${metaText}`);
+    out.push(caps.color ? `${glyph} ${DIM}${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.
@@ -521,14 +502,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 ? `${RECESSIVE}▣ ${RESET}` : '▣ ';
+        const mark = caps.color ? `${DIM}▣ ${RESET}` : '▣ ';
         const inner = Math.max(1, width - 2);
-        const stampText = caps.color ? `${ESC}${FG_CYAN}m${stamp}${RESET}${RECESSIVE} · ${RESET}` : `${stamp} · `;
+        const stampText = caps.color ? `${ESC}${FG_CYAN}m${stamp}${RESET}${DIM} · ${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 ? '' : `  ${META}${clip(ln.text, inner)}${RESET}`);
+            out.push(ln === undefined ? '' : `  ${DIM}${clip(ln.text, inner)}${RESET}`);
         }
     }
     return out;
@@ -551,16 +532,15 @@ 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 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. */
+/** 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). */
 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}${RECESSIVE} ` : `${suffix.text} `;
-    return `${RECESSIVE}── ${META}${BOLD}${label}${RESET}${RECESSIVE} ${sufStyled}${'─'.repeat(tail)}${RESET}`;
+        : caps.color ? `${ESC}${suffix.fg}m${suffix.text}${RESET}${DIM} ` : `${suffix.text} `;
+    return `${DIM}── ${BOLD}${label}${RESET}${DIM} ${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).
@@ -581,7 +561,7 @@ function blockLines(marker, cont, markerStyle, text, empty, maxLines, width, cap
         if (md.length === 0) {
             if (empty === undefined)
                 return [];
-            return [`${mk(marker, markerStyle)}${RECESSIVE}${clip(empty, inner)}${RESET}`];
+            return [`${mk(marker, markerStyle)}${DIM}${clip(empty, inner)}${RESET}`];
         }
         return md.map((spans, i) => `${mk(i === 0 ? marker : cont, markerStyle)}${assemble(spans, inner, caps.color, '', false)}`);
     }
@@ -589,204 +569,323 @@ function blockLines(marker, cont, markerStyle, text, empty, maxLines, width, cap
     if (snippet.length === 0) {
         if (empty === undefined)
             return [];
-        return [`${mk(marker, markerStyle)}${RECESSIVE}${clip(empty, inner)}${RESET}`];
+        return [`${mk(marker, markerStyle)}${DIM}${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 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: { fg: RECESSIVE_FG } },
-        { text: v, style },
-        ...(pad && v.length < vw ? [{ text: ' '.repeat(vw - v.length) }] : []),
-    ];
+// ── The chat transcript ───────────────────────────────────────────────
+//
+// The panel's centrepiece: the node's conversation painted the way the attach viewer
+// paints it — a coloured left bar per turn, a small-caps role label, and the message
+// body with its markdown honoured. It serves two jobs from one renderer:
+//
+//   no query — the RECENT tail, newest turn last, so the panel reads as "where did
+//              this conversation get to".
+//   a query  — only the turns that CONTAIN the query, oldest match first, with every
+//              occurrence highlighted and the skipped turns counted in a dim elision
+//              marker. Every visible line is then evidence for the search.
+/** Rendered lines a single turn may occupy before it is windowed. Bounded by the
+ *  per-message cap in readTranscript, so this is a ceiling, not a budget. */
+const TURN_RENDER_MAX = 400;
+/** Rendered lines kept above the first match when a matched turn must be windowed. */
+const TURN_MATCH_LEAD = 1;
+/** Lines a single turn may take when several turns share the panel. */
+const TURN_SOFT_CAP = 14;
+/** The matched-run style. `reverse` is structural SGR, so a search match stays
+ *  visible with hue disabled — which the fg-only row highlight cannot manage. */
+const MATCH_STYLE = { fg: FG_BRIGHT_CYAN, bold: true, reverse: true };
+function spansText(spans) {
+    let out = '';
+    for (const s of spans)
+        out += s.text;
+    return out;
 }
-/** The panel's facts block — the per-row metadata cluster the side layout took off
- *  the rows, laid out as two columns when the panel is wide enough for them. */
-function factsBlock(r, width, now, caps) {
-    const ctxFg = ctxColorCode(r.ctx_tokens);
-    const facts = [
-        ['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 }],
-    ];
+/** Re-style every case-insensitive occurrence of `query` inside already-rendered
+ *  spans, splitting runs at the match edges. Working on the RENDERED text is what
+ *  lets a transcript keep its markdown and still highlight: the markup is already
+ *  gone, so no column can drift out from under a highlight. */
+export function highlightSpans(spans, query) {
+    if (query === '')
+        return { spans, hits: 0 };
+    const text = spansText(spans);
+    const lower = text.toLowerCase();
+    const q = query.toLowerCase();
+    if (lower.indexOf(q) < 0)
+        return { spans, hits: 0 };
+    const hi = new Uint8Array(text.length);
+    let hits = 0;
+    for (let i = lower.indexOf(q); i >= 0; i = lower.indexOf(q, i + q.length)) {
+        hits++;
+        for (let j = i; j < i + q.length; j++)
+            hi[j] = 1;
+    }
     const out = [];
-    // Two columns at any panel width the side layout allows; the column is capped so
-    // a wide panel does not fling `ctx`/`age` out to its far edge.
-    if (width >= SIDE_PANEL_MIN) {
-        const colW = Math.min(30, Math.floor((width - 2) / 2));
-        for (let i = 0; i < facts.length; i += 2) {
-            const a = facts[i];
-            const b = facts[i + 1];
-            const spans = [...factCell(a[0], a[1], colW, a[2], true), { text: '  ' }];
-            if (b !== undefined)
-                spans.push(...factCell(b[0], b[1], colW, b[2], false));
-            out.push(assemble(spans, width, caps.color, '', false));
+    let col = 0;
+    for (const s of spans) {
+        let buf = '';
+        let bufHi = hi[col] === 1;
+        for (let k = 0; k < s.text.length; k++) {
+            const h = hi[col] === 1;
+            if (h !== bufHi) {
+                if (buf !== '')
+                    out.push({ text: buf, style: bufHi ? MATCH_STYLE : s.style });
+                buf = '';
+                bufHi = h;
+            }
+            buf += s.text[k];
+            col++;
         }
+        if (buf !== '')
+            out.push({ text: buf, style: bufHi ? MATCH_STYLE : s.style });
     }
-    else {
-        for (const [l, v, st] of facts)
-            out.push(assemble(factCell(l, v, width, st, false), width, caps.color, '', false));
+    return { spans: out, hits };
+}
+const TURN_BAR = '▌ ';
+/** Paint one turn: `▌ YOU` / `▌ AGENT` then the body, every line carrying the bar so
+ *  a turn stays one contiguous block. The user's bar is the cyan accent and the
+ *  agent's is dim gray — the same weight distinction the row table already uses
+ *  between what you said and what the runtime produced. */
+function turnBlock(turn, query, maxLines, width, caps) {
+    if (maxLines < 2)
+        return { lines: [], hits: 0, truncated: true };
+    const user = turn.role === 'user';
+    const barStyle = user ? { fg: FG_BRIGHT_CYAN, bold: true } : { fg: FG_GRAY };
+    const inner = Math.max(1, width - TURN_BAR.length);
+    const bar = () => assemble([{ text: TURN_BAR, style: barStyle }], TURN_BAR.length, caps.color, '', true);
+    const out = [
+        assemble([{ text: TURN_BAR, style: barStyle }, { text: user ? 'YOU' : 'AGENT', style: { ...barStyle, bold: true } }], width, caps.color, '', false),
+    ];
+    const body = renderMarkdownSpans(turn.text, inner, TURN_RENDER_MAX, false, user ? {} : { dim: true });
+    const marked = body.map((spans) => highlightSpans(spans, query));
+    const hits = marked.reduce((n, m) => n + m.hits, 0);
+    // Window the body when it outgrows its slice of the panel. Searching, the window
+    // opens on the first match (that is the only line the search has to prove); idle,
+    // it opens at the top of the message.
+    const budget = maxLines - 1;
+    let start = 0;
+    if (marked.length > budget && hits > 0) {
+        start = Math.max(0, marked.findIndex((m) => m.hits > 0) - TURN_MATCH_LEAD);
+        start = Math.min(start, marked.length - budget);
+    }
+    const shown = marked.slice(start, start + budget);
+    for (const m of shown)
+        out.push(`${bar()}${assemble(m.spans, inner, caps.color, '', false)}`);
+    // An honest edge: a windowed body must not read as the whole message. The marker
+    // costs a body line, so it is only worth drawing when a body line survives it.
+    const cutHead = start > 0;
+    const cutTail = start + shown.length < marked.length;
+    if (cutHead && shown.length > 1)
+        out[1] = `${bar()}${DIM}⋯${RESET}`;
+    if (cutTail && shown.length > (cutHead ? 2 : 1))
+        out[out.length - 1] = `${bar()}${DIM}⋯${RESET}`;
+    return { lines: out, hits, truncated: cutHead || cutTail };
+}
+/** The dim `⋯ n turns` marker standing in for turns the search skipped over. */
+function elisionLine(n, width, caps) {
+    return assemble([{ text: `  ⋯ ${n} ${n === 1 ? 'turn' : 'turns'}`, style: { dim: true } }], width, caps.color, '', false);
+}
+/** Does this turn contain the query as a literal, case-insensitive substring?
+ *  Scattered letters are not a transcript hit — the same rule the row preview uses. */
+function turnMatches(turn, query) {
+    return query !== '' && turn.text.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+}
+/** How many turns contain the query — the count the section rule advertises. */
+export function transcriptHitTurns(turns, query) {
+    return turns.reduce((n, t) => n + (turnMatches(t, query) ? 1 : 0), 0);
+}
+/** The transcript body, at most `height` lines. With a query it shows the matching
+ *  turns from the oldest match forward; without one it shows the newest turns,
+ *  bottom-anchored so the latest turn is the last line — the chat reading order. */
+function transcriptLines(turns, query, width, height, caps) {
+    if (height <= 0 || turns.length === 0)
+        return [];
+    const hitIdx = query === '' ? [] : turns.map((t, i) => (turnMatches(t, query) ? i : -1)).filter((i) => i >= 0);
+    // Searching with hits: forward from the oldest match, eliding the gaps.
+    if (hitIdx.length > 0) {
+        const out = [];
+        let prev = -1;
+        for (const i of hitIdx) {
+            const lead = out.length === 0 ? 0 : 1; // blank separator between turns
+            const left = height - out.length - lead;
+            if (left < 3)
+                break; // a header over one elision marker proves nothing
+            const { lines } = turnBlock(turns[i], query, Math.min(left, TURN_SOFT_CAP), width, caps);
+            if (lines.length === 0)
+                break;
+            const gap = prev < 0 ? i : i - prev - 1;
+            const marker = gap > 0 && out.length + lead + lines.length + 1 <= height;
+            if (lead > 0)
+                out.push('');
+            if (marker)
+                out.push(elisionLine(gap, width, caps));
+            out.push(...lines);
+            prev = i;
+        }
+        // Slack goes to the turns that FOLLOW the last match, painted in full, so the
+        // panel reads on as a conversation instead of stopping dead at the evidence.
+        let last = prev;
+        for (let i = prev + 1; i < turns.length; i++) {
+            const left = height - out.length - 1;
+            if (left < 3)
+                break;
+            const { lines, truncated } = turnBlock(turns[i], query, Math.min(left, TURN_SOFT_CAP), width, caps);
+            if (lines.length === 0 || truncated)
+                break;
+            out.push('', ...lines);
+            last = i;
+        }
+        if (last >= 0 && last < turns.length - 1 && out.length < height) {
+            out.push(elisionLine(turns.length - 1 - last, width, caps));
+        }
+        return out.slice(0, height);
+    }
+    // No query (or a query that only matched the node's name/kind/id): the tail.
+    // Built newest-first so the budget is spent on recent turns, then reversed.
+    const blocks = [];
+    let used = 0;
+    for (let i = turns.length - 1; i >= 0; i--) {
+        const newest = blocks.length === 0;
+        const lead = newest ? 0 : 1;
+        const left = height - used - lead;
+        if (left < 3)
+            break;
+        const { lines, truncated } = turnBlock(turns[i], '', Math.min(left, TURN_SOFT_CAP), width, caps);
+        if (lines.length === 0)
+            break;
+        // Only the newest turn may be shown cut — an older one that no longer fits is
+        // dropped whole rather than left as a header over an elision marker, which
+        // reads as a message the panel refused to show.
+        if (truncated && !newest)
+            break;
+        if (lead > 0)
+            blocks.push(['']);
+        blocks.push(lines);
+        used += lines.length + lead;
     }
+    return blocks.reverse().flat().slice(-height);
+}
+/** The turns the panel paints. A node that was never revived has no session, so its
+ *  spawn prompt and last reply stand in — the panel then still reads as a chat
+ *  rather than going blank, and a remote canvas (no local session file) keeps a body. */
+function panelTurns(r) {
+    const t = r.transcript;
+    if (t !== undefined && t.length > 0)
+        return t;
+    const out = [];
+    if (r.goal !== undefined && r.goal !== '')
+        out.push({ role: 'user', text: r.goal });
+    if (r.lastAssistant !== undefined && r.lastAssistant !== '')
+        out.push({ role: 'assistant', text: r.lastAssistant });
     return out;
 }
-/** The panel's state line: the status glyph + WORD in the status hue, then the
- *  attention facts that only matter when they are true (asks, a live viewer, a fault). */
-function panelStatusLine(r, width, caps, now) {
-    const v = resolveNodeVisual(r.status, {
-        streaming: r.streaming === true,
-        frozen: isFrozenRow(r),
-        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: 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 } });
-    if (r.viewed === true)
-        spans.push(sep(), { text: '\uf06e viewing', style: { fg: FG_BRIGHT_CYAN } });
-    if (r.hanging != null)
-        spans.push(sep(), { text: faultSummary(r.hanging, now), style: { fg: FG_YELLOW } });
+/** Lines the GOAL and STATE briefings each get. They are one-sentence summaries by
+ *  construction, so a small fixed budget leaves the chat everything else. */
+const BRIEFING_LINES = 4;
+/** The panel's one metadata line. Deliberately ONE line: the row the cursor sits on
+ *  already carries this node's status word, ask flag, fault and viewer cues, so a
+ *  status line and a four-cell facts grid here would spend six of the panel's rows
+ *  repeating what is on screen a few columns to the left. What is left is what the
+ *  row table gave up in side mode — kind/mode, project, age, ctx. */
+function panelFactsLine(r, width, now, caps) {
+    const ctxFg = ctxColorCode(r.ctx_tokens);
+    const dot = () => ({ text: ' · ', style: { dim: true } });
+    const spans = [
+        { text: `${r.kind}/${r.mode}`, style: { fg: FG_GRAY } },
+        dot(),
+        { text: `~${baseDir(r.cwd)}`, style: { fg: FG_GRAY } },
+        dot(),
+        { text: relAge(r.created, now), style: { dim: true } },
+        dot(),
+        { text: `ctx ${fmtCtx(r.ctx_tokens)}`, style: { fg: ctxFg, dim: ctxFg === undefined } },
+    ];
     return assemble(spans, width, caps.color, '', false);
 }
 /** The panel's title, drawn on the column-header row so the header rule crosses
  *  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: { fg: META_FG, bold: true } }], width, caps.color, '', false);
+        return assemble([{ text: 'PREVIEW', style: { dim: true, 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: { fg: META_FG } }], width, caps.color, '', false);
+    return assembleRow(left, [{ text: id, style: { dim: true } }], 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) {
-    const out = [];
+/** The side panel's body, at most `height` lines. Three exclusive shapes:
+ *
+ *    searching — the panel IS a chat transcript: the turns that literally contain
+ *                the query, oldest match first, every occurrence highlighted.
+ *    report    — the node's newest pushed report in full (toggled with `V`).
+ *    default   — goal on top, the recent conversation in the middle, state pinned to
+ *                the bottom edge. That is the vertical order the live chat surface
+ *                uses, so the preview reads as a small copy of the conversation it
+ *                is previewing instead of a different presentation of the same node.
+ */
+function sidePanelBody(r, width, height, caps, now, query, showReport) {
     if (height <= 0)
-        return out;
-    if (r === undefined) {
-        out.push(`${RECESSIVE}(no selection)${RESET}`);
-        return out;
+        return [];
+    if (r === undefined)
+        return [`${DIM}(no selection)${RESET}`];
+    // ── searching ── the transcript takes the whole panel. The goal/state briefing is
+    // a summary, and a summary cannot show you WHERE your term appears.
+    if (query !== '') {
+        const turns = panelTurns(r);
+        const hits = transcriptHitTurns(turns, query);
+        const out = [sectionRule('TRANSCRIPT', width, caps, hits > 0
+                ? { text: `${hits} ${hits === 1 ? 'turn' : 'turns'}`, fg: FG_BRIGHT_CYAN }
+                : { text: 'matched on name', fg: FG_GRAY })];
+        const body = transcriptLines(turns, query, width, height - 1, caps);
+        out.push(...(body.length === 0 ? [`${DIM}(no conversation yet)${RESET}`] : body));
+        return out.slice(0, height);
     }
-    out.push(panelStatusLine(r, width, caps, now));
-    out.push('');
-    for (const l of factsBlock(r, width, now, caps))
-        out.push(l);
-    out.push('');
-    const v = resolveNodeVisual(r.status, {
-        streaming: r.streaming === true,
-        frozen: isFrozenRow(r),
-        hanging: r.hanging ?? null,
-    });
-    const accent = { fg: v.color };
-    const secs = [];
-    if (r.recap !== undefined && r.recap.goal !== '') {
-        const goal = r.recap.goal;
-        secs.push({ label: 'GOAL', drop: 2, min: 1, want: 4,
-            lines: (n) => blockLines('▌ ', '▌ ', accent, goal, undefined, n, width, caps, '', { bold: true }) });
-    }
-    if (r.recap !== undefined && r.recap.state !== '') {
-        const stateText = r.recap.state;
-        secs.push({ label: 'STATE', drop: 3, min: 1, want: 5,
-            lines: (n) => blockLines('▌ ', '▌ ', accent, stateText, undefined, n, width, caps, '', { bold: true }) });
-    }
-    // Under a live query the ask becomes the WINDOWED match from anywhere in the
-    // conversation, highlighted — the one thing a search result has to show.
-    const askText = query !== '' ? promptText(r) : (r.goal ?? '');
-    secs.push({ label: 'ASK', drop: 0, min: 2, want: 6,
-        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('↩ ', '  ', { fg: META_FG }, reply, '(no reply yet)', n, width, caps, '') });
-    if (r.report !== undefined) {
-        const rep = r.report;
-        const age = relAge(rep.ts, now);
-        secs.push({
-            label: 'REPORT', drop: 4, min: 2, want: 6,
-            suffix: { text: `${age === '' ? '' : `${age} · `}${rep.kind}`, fg: FG_CYAN },
-            lines: (n) => {
-                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, '', { fg: META_FG }));
-                }
-                return head;
-            },
+    const rep = r.report;
+    const accentOf = () => {
+        const v = resolveNodeVisual(r.status, {
+            streaming: r.streaming === true, frozen: isFrozenRow(r), hanging: r.hanging ?? null,
         });
-    }
-    // Fit the sections into what is left: shrink the largest first, and only drop a
-    // whole section once every survivor is already at its minimum.
-    const avail = height - out.length;
-    let list = secs.slice();
-    // A blank line between sections when the panel can afford one; when it cannot,
-    // the hairlines alone separate them, which beats dropping a whole section.
-    const minNeed = (g) => secs.reduce((n, s) => n + s.min, 0) + (1 + g) * secs.length - g;
-    const gap = minNeed(1) <= avail ? 1 : 0;
-    const alloc = new Map();
-    const need = () => list.reduce((n, s) => n + (alloc.get(s.label) ?? 0), 0) + (1 + gap) * list.length - gap;
-    for (;;) {
-        for (const s of list)
-            alloc.set(s.label, s.want);
-        for (;;) {
-            if (need() <= avail)
-                break;
-            let biggest;
-            for (const s of list) {
-                const a = alloc.get(s.label);
-                if (a > s.min && (biggest === undefined || a > alloc.get(biggest.label)))
-                    biggest = s;
-            }
-            if (biggest === undefined)
-                break;
-            alloc.set(biggest.label, alloc.get(biggest.label) - 1);
-        }
-        if (need() <= avail || list.length <= 1)
-            break;
-        let victim = list[0];
-        for (const s of list)
-            if (s.drop > victim.drop)
-                victim = s;
-        list = list.filter((s) => s !== victim);
-    }
-    // Render, then hand any room the content did not use to the blocks that always
-    // have more to show (the live tail first, then the ask). Growing a block by at
-    // most the measured surplus keeps every later section on screen.
-    const rendered = list.map((s) => s.lines(alloc.get(s.label) ?? s.min));
-    let spare = avail - (rendered.reduce((n, b) => n + b.length + 1 + gap, 0) - gap);
-    for (const key of ['REPLY', 'ASK']) {
-        if (spare <= 0)
-            break;
-        const i = list.findIndex((s) => s.label === key);
-        if (i < 0)
-            continue;
-        const grown = list[i].lines((alloc.get(key) ?? 0) + spare);
-        const delta = grown.length - rendered[i].length;
-        if (delta > 0) {
-            rendered[i] = grown;
-            spare -= delta;
+        return { fg: v.color };
+    };
+    // ── report ── what the node deliberately DELIVERED, at full length. Reports are
+    // written to be read, so this one gets the panel rather than a two-line teaser.
+    if (showReport && rep !== undefined) {
+        const age = relAge(rep.ts, now);
+        const out = [sectionRule('REPORT', width, caps, { text: `${age === '' ? '' : `${age} · `}${rep.kind}`, fg: FG_CYAN })];
+        const headline = rep.heading === '' ? rep.body : rep.heading;
+        out.push(...blockLines('▣ ', '  ', { fg: FG_CYAN, bold: true }, headline, undefined, 3, width, caps, '', { bold: true }));
+        if (rep.heading !== '' && rep.body !== '') {
+            out.push('');
+            out.push(...blockLines('  ', '  ', undefined, rep.body, undefined, height - out.length, width, caps, ''));
         }
+        return out.slice(0, height);
+    }
+    // ── default ── goal, chat, state.
+    const out = [panelFactsLine(r, width, now, caps), ''];
+    const accent = accentOf();
+    const briefing = (label, text) => [
+        sectionRule(label, width, caps),
+        ...blockLines('▌ ', '▌ ', accent, text, undefined, BRIEFING_LINES, width, caps, '', { bold: true }),
+    ];
+    const goal = r.recap?.goal ?? '';
+    if (goal !== '')
+        out.push(...briefing('GOAL', goal), '');
+    // State is measured before the chat is drawn so the chat can claim exactly the
+    // slack that is left and state still lands on the panel's bottom edge.
+    const stateText = r.recap?.state ?? '';
+    const stateBlock = stateText === '' ? [] : [...briefing('STATE', stateText)];
+    const reserved = stateBlock.length === 0 ? 0 : stateBlock.length + 1;
+    const chatH = height - out.length - reserved - 1 /* the CHAT rule */;
+    if (chatH >= 2) {
+        out.push(sectionRule('CHAT', width, caps));
+        const body = transcriptLines(panelTurns(r), '', width, chatH, caps);
+        out.push(...(body.length === 0 ? [`${DIM}(no conversation yet)${RESET}`] : body));
     }
-    for (let i = 0; i < list.length; i++) {
-        const body = rendered[i];
-        if (body.length === 0 || out.length >= height)
-            continue;
-        out.push(sectionRule(list[i].label, width, caps, list[i].suffix));
-        for (const l of body)
-            out.push(l);
-        if (gap > 0)
+    if (stateBlock.length > 0) {
+        while (out.length < height - stateBlock.length)
             out.push('');
+        out.push(...stateBlock);
     }
-    while (out.length > height)
-        out.pop();
-    while (out.length > 0 && out[out.length - 1] === '')
-        out.pop();
-    return out;
+    return out.slice(0, height);
 }
 /** The keybinding help overlay — a full-screen cheatsheet that replaces the body
  *  while `?` is held open. Grouped by intent so the whole key surface is legible in
@@ -811,7 +910,8 @@ const HELP_ROWS = [
     ['', 'c', 'toggle cwd scope'],
     ['', 'P', 'toggle profile scope'],
     ['', 'r', 'toggle residents-only'],
-    ['', 'v', 'toggle preview (goal/state, ask, reply, report)'],
+    ['', 'v', 'toggle preview (goal, chat, state)'],
+    ['', 'V', 'in the preview: swap chat for the newest report'],
     ['Quit', 'q / Esc', ''],
 ];
 function renderHelp(size, caps) {
@@ -821,7 +921,7 @@ function renderHelp(size, caps) {
     const lines = [];
     lines.push(`${BOLD}Canvas navigator — keys${RESET}`);
     lines.push('');
-    const dim = (s) => `${META}${s}${RESET}`;
+    const dim = (s) => `${DIM}${s}${RESET}`;
     for (const [group, keys, desc] of HELP_ROWS) {
         const g = group.padEnd(6);
         const k = keys.padEnd(12);
@@ -855,8 +955,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}${META}${p.count}${RESET}`).join(' ')
-        : `${META}${summaryPlain}${RESET}`;
+        ? parts.map((p) => `${ESC}${STATUS_COLOR[p.status]}m${STATUS_GLYPH[p.status]}${RESET}${DIM}${p.count}${RESET}`).join(' ')
+        : `${DIM}${summaryPlain}${RESET}`;
     const gap = width - titlePlainLen - summaryPlain.length;
     lines.push(gap > 1 ? `${title}${' '.repeat(gap)}${summaryColored}` : title);
     // line 2 — tab bar.
@@ -877,7 +977,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 = `${RECESSIVE}${SIDE_GUTTER}${RESET}`;
+    const gutter = `${DIM}${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.
@@ -887,8 +987,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
-        ? `${RECESSIVE}${'─'.repeat(rowsW)}─┼─${'─'.repeat(layout.panelW)}${RESET}`
-        : `${RECESSIVE}${'─'.repeat(width)}${RESET}`);
+        ? `${DIM}${'─'.repeat(rowsW)}─┼─${'─'.repeat(layout.panelW)}${RESET}`
+        : `${DIM}${'─'.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;
@@ -897,11 +997,11 @@ export function renderFrame(state, size, caps = { color: false, color256: false
     const end = Math.min(state.visible.length, start + viewport);
     // In side mode each body line is `<row><rule><panel line>`, so the rows are padded
     // to an exact width and the panel body is rendered once for the whole column.
-    const panel = side ? sidePanelBody(selRow, layout.panelW, viewport, caps, now, state.query) : [];
+    const panel = side ? sidePanelBody(selRow, layout.panelW, viewport, caps, now, state.query, state.showReport === true) : [];
     const compose = (row, i) => (side ? `${row}${gutter}${panel[i] ?? ''}` : row);
     const blankRow = side ? ' '.repeat(rowsW) : '';
     if (state.visible.length === 0) {
-        lines.push(`${META}  (no nodes match this view)${RESET}`);
+        lines.push(`${DIM}  (no nodes match this view)${RESET}`);
         for (let i = 1; i < viewport; i++)
             lines.push('');
     }
@@ -937,8 +1037,8 @@ export function renderFrame(state, size, caps = { color: false, color256: false
             ? '⏎ commit  Esc cancel  ⌫ delete'
             : 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(`${META}${clip(footer, width)}${RESET}`);
+                : `${hangingHint}${selRow?.report !== undefined && side && state.query === '' ? (state.showReport === true ? 'V chat  ' : 'V report  ') : ''}↑↓ move  ⏎ open  O bg  / search  p pin  v preview  m msg  x close  ? more  q quit`;
+        lines.push(`${DIM}${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');