@north-light/crouter 0.3.263 → 0.3.270

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

@@ -18,15 +18,48 @@ import { matchIndices } from '../../tui/fuzzy.js';
 // `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 { renderMarkdownSpans } from '../../tui/markdown.js';
 export { detectColorCaps };
 // Fixed chrome heights, shared with app.ts so its viewport math never drifts
 // from what renderFrame actually draws.
 //   header = title + tab bar + status line + separator (+ search input when searching)
-//   preview = separator + meta line + PROMPT_LINES (spawn/match) + REPLY_LINES (last reply)
-export const PROMPT_LINES = 3;
-export const REPLY_LINES = 3;
-export const PREVIEW_BODY = PROMPT_LINES + REPLY_LINES;
+//   preview = separator + meta line + PREVIEW_BODY lines of node briefing
+// The body budget is FIXED and divided between four blocks at paint time (see
+// previewPanel): the two optional blocks (recap, report) take two lines each when
+// the node has them, and whatever is left over is split between the two blocks that
+// always render (the ask and the reply). A node with neither therefore shows twice
+// as much literal conversation instead of half a panel of blanks.
+export const RECAP_LINES = 2;
+export const REPORT_LINES = 2;
+export const PREVIEW_BODY = 8;
 export const PREVIEW_HEIGHT = PREVIEW_BODY + 2;
+// ── Preview placement ─────────────────────────────────────────────────────────
+// A wide terminal gets the preview as a full-height RIGHT-HAND COLUMN: the row
+// table drops its flush-right metadata cluster (those per-row facts are noise when
+// you only care about the hovered node — they come back as a facts block inside the
+// panel) and the reclaimed columns become the panel. A narrow terminal cannot spare
+// the columns, so it keeps the bottom panel. The choice is width alone, so there is
+// 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_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
+    if (!previewOn)
+        return { mode: 'none', panelW: 0, rowsW: width };
+    if (cols < SIDE_MIN_COLS)
+        return { mode: 'bottom', panelW: 0, rowsW: width };
+    const gutter = [...SIDE_GUTTER].length;
+    let panelW = Math.min(SIDE_PANEL_MAX, Math.max(SIDE_PANEL_MIN, Math.round(width * SIDE_PANEL_RATIO)));
+    if (width - panelW - gutter < SIDE_ROWS_MIN)
+        panelW = width - gutter - SIDE_ROWS_MIN;
+    if (panelW < SIDE_PANEL_MIN)
+        return { mode: 'bottom', panelW: 0, rowsW: width };
+    return { mode: 'side', panelW, rowsW: width - panelW - gutter };
+}
 //   header = title + tab bar + status line + column header + separator (+ input line)
 // `inputLine` is true whenever a text-input mode is open (search / rename / message)
 // — each adds one prompt row above the column header.
@@ -240,7 +273,13 @@ function assembleRow(left, right, width, color, lineBase, fill) {
 }
 /** One table row: `<status rail>  <indent><collapse> <name> <flags>` ........ `<meta>`.
  *  `showCwd` adds the project column (All-dirs view); `now` drives the age. */
-function rowLine(row, tree, width, isCursor, query, caps, showCwd, now, isPinned) {
+function rowLine(row, tree, width, isCursor, query, caps, showCwd, now, isPinned, 
+/** false in side-preview mode: the metadata cluster is replaced by the panel's
+ *  facts block, so the name gets the whole row. */
+showMeta = true, 
+/** true in side-preview mode: pad every row to exactly `width` so the vertical
+ *  rule and the panel land in the same columns on every line. */
+padToWidth = false) {
     const node = tree.nodes.get(row.id);
     if (node === undefined)
         return '';
@@ -266,7 +305,7 @@ function rowLine(row, tree, width, isCursor, query, caps, showCwd, now, isPinned
     // tab/sort. Magenta keeps it distinct from the yellow ⚑ asks flag.
     const pinMark = isPinned ? [{ text: '★ ', style: { fg: FG_MAGENTA, bold: true } }] : [];
     const status = statusRail(r);
-    const right = metaCluster(r, now, showCwd);
+    const right = showMeta ? metaCluster(r, now, showCwd) : [];
     const treeLead = `${indent}${collapse} `;
     // Clip the NAME (only) so gutter + status + tree + pin + name + flags + meta all
     // fit; the cluster is dropped first (assembleRow) when even a 4-col name won't fit.
@@ -285,7 +324,7 @@ function rowLine(row, tree, width, isCursor, query, caps, showCwd, now, isPinned
     // Row base: cursor → subtle bg (256) or reverse fallback (also !color); non-matched
     // ancestor → whole-row dim for tree context.
     let lineBase = '';
-    let fill = false;
+    let fill = padToWidth;
     if (isCursor) {
         lineBase = caps.color256 ? CURSOR_BG : REVERSE;
         fill = true;
@@ -297,12 +336,14 @@ function rowLine(row, tree, width, isCursor, query, caps, showCwd, now, isPinned
 }
 /** 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) {
+function columnHeaderLine(width, showCwd, caps, showMeta = true, padToWidth = false) {
     const left = [
         { text: '  ' }, // viewer gutter (no label)
         { 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: { dim: true, bold: true } },
         { text: COL_GAP },
@@ -333,16 +374,16 @@ function statusLine(state) {
 }
 /** One snippet line → a rendered string with the query-matched columns in bold
  *  bright-cyan (mirrors the row name highlight). Unmatched text stays default. */
-function snippetLine(ln, width, caps) {
+function snippetLine(ln, width, caps, base) {
     if (ln.hi.size === 0)
-        return assemble([{ text: ln.text }], width, caps.color, '', false);
+        return assemble([{ text: ln.text, style: base }], width, caps.color, '', false);
     const spans = [];
     let buf = '';
     let bufHi = false;
     const flush = () => {
         if (buf === '')
             return;
-        spans.push(bufHi ? { text: buf, style: { fg: FG_BRIGHT_CYAN, bold: true } } : { text: buf });
+        spans.push(bufHi ? { text: buf, style: { fg: FG_BRIGHT_CYAN, bold: true } } : { text: buf, style: base });
         buf = '';
     };
     for (let i = 0; i < ln.text.length; i++) {
@@ -356,14 +397,70 @@ function snippetLine(ln, width, caps) {
     flush();
     return assemble(spans, width, caps.color, '', false);
 }
-/** The bottom preview panel — exactly PREVIEW_HEIGHT lines: a separator, a meta
- *  line (status · kind/mode · project · age · ctx · asks · fault/viewing), then
- *  TWO blocks — the spawn prompt / query-match (PROMPT_LINES) and the node's LAST
- *  assistant reply (REPLY_LINES, prefixed `↩`). Under a live query the prompt block
- *  is WINDOWED to the matching prompt (anywhere in the conversation) with the match
- *  highlighted; with no query it shows the spawn prompt from the start. Seeing both
- *  ends — what it was asked and where it left off — answers "which one was this?".
- *  Always full height so viewport math holds. */
+/** How the fixed PREVIEW_BODY budget is divided for one row: the optional blocks
+ *  take their two lines only when the node actually has them, and the remainder is
+ *  split between the ask and the reply (ask keeps the odd line). */
+export function previewAllocation(hasRecap, hasReport) {
+    const recap = hasRecap ? RECAP_LINES : 0;
+    const report = hasReport ? REPORT_LINES : 0;
+    const free = Math.max(2, PREVIEW_BODY - recap - report);
+    const ask = Math.ceil(free / 2);
+    return { recap, ask, reply: free - ask, report };
+}
+/** Render one marked block (`marker` on the first line, aligned continuation after)
+ *  into exactly `lines` rows, or the `empty` placeholder when there is no text. */
+function markedBlock(marker, text, empty, lines, width, caps, query) {
+    if (lines <= 0)
+        return [];
+    const out = [];
+    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}${DIM}${clip(empty, inner)}${RESET}`);
+        else
+            for (const spans of md)
+                out.push(`${out.length === 0 ? mark : '  '}${assemble(spans, inner, caps.color, '', false)}`);
+        while (out.length < lines)
+            out.push('');
+        return out;
+    }
+    const snippet = previewSnippet(query, text, inner, lines);
+    if (snippet.length === 0) {
+        out.push(`${mark}${DIM}${clip(empty, inner)}${RESET}`);
+    }
+    else {
+        for (const ln of snippet)
+            out.push(`${out.length === 0 ? mark : '  '}${snippetLine(ln, inner, caps)}`);
+    }
+    while (out.length < lines)
+        out.push('');
+    return out;
+}
+/** 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 ? `${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?":
+ *
+ *    separator
+ *    meta      status · kind/mode · project · age · ctx · asks · fault/viewing
+ *    Goal/State  the node's last persisted recap briefing — the one-glance answer
+ *    ❯ ask      the spawn prompt in the user's own words (the recognition anchor),
+ *               or, under a live query, the WINDOWED matching prompt from anywhere
+ *               in the conversation with the match highlighted
+ *    ↩ reply    the node's last assistant message — where it actually left off
+ *    ▣ report   the newest thing it pushed (age · kind · headline), because a
+ *               resident's reports are written to be read, unlike its live tail
+ *
+ *  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}`];
     if (r === undefined) {
@@ -390,37 +487,290 @@ function previewPanel(r, width, caps, now, query) {
         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}`);
-    // Block 1 — spawn prompt / query-match. With a query, window+highlight the
-    // matching prompt from the WHOLE conversation; otherwise the spawn prompt.
-    const sourceText = query !== '' ? promptText(r) : (r.goal ?? '');
-    const promptSnippet = previewSnippet(query, sourceText, width, PROMPT_LINES);
-    if (promptSnippet.length === 0) {
-        out.push(`${DIM}(no spawn prompt)${RESET}`);
-        for (let i = 1; i < PROMPT_LINES; i++)
-            out.push('');
+    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.
+    if (r.recap !== undefined) {
+        out.push(recapLine('Goal', r.recap.goal === '' ? '—' : r.recap.goal, width, caps));
+        out.push(recapLine('State', r.recap.state === '' ? '—' : r.recap.state, width, caps));
     }
-    else {
-        for (let i = 0; i < PROMPT_LINES; i++) {
-            const ln = promptSnippet[i];
-            out.push(ln === undefined ? '' : snippetLine(ln, width, caps));
+    // The ask, verbatim. Under a live query this becomes the windowed match from the
+    // WHOLE conversation (the one thing a search result must show), so it keeps the
+    // query highlight; with no query it is the spawn prompt from the start.
+    const askText = query !== '' ? promptText(r) : (r.goal ?? '');
+    out.push(...markedBlock('❯ ', askText, '(no spawn prompt)', alloc.ask, width, caps, query));
+    // Where it left off.
+    out.push(...markedBlock('↩ ', r.lastAssistant ?? '', '(no reply yet)', alloc.reply, width, caps, ''));
+    // What it last delivered. The stamp + kind lead the line because a report's value
+    // here is "how recently did this node report, and was that its final?".
+    if (r.report !== undefined) {
+        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 inner = Math.max(1, width - 2);
+        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 ? '' : `  ${DIM}${clip(ln.text, inner)}${RESET}`);
         }
     }
-    // Block 2 — the node's LAST assistant reply, prefixed `↩` on its first line so
-    // the two blocks read apart. Wrapped to width-2 to leave room for the marker.
-    const replyMark = caps.color ? `${DIM}↩ ${RESET}` : '↩ ';
-    const replySnippet = previewSnippet('', r.lastAssistant ?? '', Math.max(1, width - 2), REPLY_LINES);
-    if (replySnippet.length === 0) {
-        out.push(`${replyMark}${DIM}(no reply yet)${RESET}`);
-        for (let i = 1; i < REPLY_LINES; i++)
-            out.push('');
+    return out;
+}
+// ── The side preview panel ────────────────────────────────────────────────────
+//
+// Same four zones as the bottom panel (recap · ask · reply · report) with room to
+// breathe, drawn as designed chrome instead of a wall of prose:
+//
+//   <title row, drawn on the column-header line>   ★ node name          8-char id
+//   ● active   ⚑2 asks    viewing            ← state, in the status hue
+//   kind general/base    ctx  42k            ← facts block: dim right-aligned
+//   proj ~northlight     age   3h              labels, values in their own hues
+//   ── GOAL ─────────────────────────────    ← hairline + small-caps label
+//   ▌ what this conversation is for          ← accent bar: the hero quote
+//   ── ASK ──────────────────────────────
+//   ❯ the spawn prompt, hanging-indented
+//
+// Section bodies are allocated from the panel's real height: everyone asks for a
+// 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). */
+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}`;
+}
+/** 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).
+ *  Returns the lines it actually filled — never padded, so the panel stacks tight.
+ *  `empty` renders a dim placeholder for a block that must show even when absent. */
+function blockLines(marker, cont, markerStyle, text, empty, maxLines, width, caps, query, bodyStyle) {
+    if (maxLines <= 0)
+        return [];
+    const indent = [...marker].length;
+    const inner = Math.max(1, width - indent);
+    const mk = (s, st) => assemble([{ text: s, style: st }], indent, caps.color, '', true);
+    // The ONE case that stays raw: under a live query the ask shows the windowed
+    // match with the matched columns highlighted, and stripping `**` would shift
+    // every later column out from under the highlight. Everything else renders
+    // markdown — headings, lists, and emphasis are how these messages were written.
+    if (query === '') {
+        const md = renderMarkdownSpans(text, inner, maxLines, true, bodyStyle);
+        if (md.length === 0) {
+            if (empty === undefined)
+                return [];
+            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)}`);
+    }
+    const snippet = previewSnippet(query, text, inner, maxLines);
+    if (snippet.length === 0) {
+        if (empty === undefined)
+            return [];
+        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 dim 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: v, style },
+        ...(pad && v.length < vw ? [{ text: ' '.repeat(vw - v.length) }] : []),
+    ];
+}
+/** 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: 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 }],
+    ];
+    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));
+        }
     }
     else {
-        for (let i = 0; i < REPLY_LINES; i++) {
-            const ln = replySnippet[i];
-            const prefix = i === 0 ? replyMark : '  ';
-            out.push(ln === undefined ? (i === 0 ? `${replyMark}` : '') : `${prefix}${snippetLine(ln, Math.max(1, width - 2), caps)}`);
+        for (const [l, v, st] of facts)
+            out.push(assemble(factCell(l, v, width, st, false), width, caps.color, '', false));
+    }
+    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: 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 } });
+    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: { 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: { 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 = [];
+    if (height <= 0)
+        return out;
+    if (r === undefined) {
+        out.push(`${DIM}(no selection)${RESET}`);
+        return out;
+    }
+    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: 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('↩ ', '  ', { dim: true }, 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, '', { dim: true }));
+                }
+                return head;
+            },
+        });
+    }
+    // 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;
         }
     }
+    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)
+            out.push('');
+    }
+    while (out.length > height)
+        out.pop();
+    while (out.length > 0 && out[out.length - 1] === '')
+        out.pop();
     return out;
 }
 /** The keybinding help overlay — a full-screen cheatsheet that replaces the body
@@ -434,7 +784,7 @@ const HELP_ROWS = [
     ['', 'space', 'toggle fold'],
     ['Tabs', 'Tab / 1-5', 'All · Live · Dormant · Attention · Pinned'],
     ['Find', '/', 'fuzzy search (name · kind · id · prompts)'],
-    ['Pin', 'f', 'star / unstar — floats to top, Pinned tab'],
+    ['Pin', 'p', 'star / unstar — floats to top, Pinned tab'],
     ['Open', '⏎  o', 'open conversation (closes navigator)'],
     ['', 'O', 'open, keep browsing (background)'],
     ['Act', 'y', 'copy the node id to the clipboard'],
@@ -446,7 +796,7 @@ const HELP_ROWS = [
     ['', 'c', 'toggle cwd scope'],
     ['', 'P', 'toggle profile scope'],
     ['', 'r', 'toggle residents-only'],
-    ['', 'p', 'toggle preview panel'],
+    ['', 'v', 'toggle preview (goal/state, ask, reply, report)'],
     ['Quit', 'q / Esc', ''],
 ];
 function renderHelp(size, caps) {
@@ -505,17 +855,36 @@ export function renderFrame(state, size, caps = { color: false, color256: false
         const p = caps.color ? `${ESC}${FG_CYAN}m${prefix}${RESET}` : prefix;
         lines.push(`${p} ${buf}▎`);
     }
-    // column header (table labels) + separator.
-    const showCwd = state.cwdScope === null; // project column only matters across dirs
-    lines.push(columnHeaderLine(width, showCwd, caps));
-    lines.push(`${DIM}${'─'.repeat(width)}${RESET}`);
-    // body — windowed visible rows, leaving room for the (optional) preview panel.
-    const head = lines.length; // === headerHeight(state.search)
+    // Where the preview goes at this width: a full-height right-hand column when
+    // there is room for one, else the bottom panel. In side mode the rows give up
+    // their metadata cluster and the panel takes those columns.
     const previewOn = state.preview && state.visible.length > 0;
-    const previewH = previewOn ? PREVIEW_HEIGHT : 0;
+    const layout = previewLayout(cols, previewOn);
+    const side = layout.mode === 'side';
+    const rowsW = side ? layout.rowsW : width;
+    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.
+    const showCwd = state.cwdScope === null && !side; // project column only matters across dirs
+    const colHeader = columnHeaderLine(rowsW, showCwd, caps, !side, side);
+    lines.push(side
+        ? `${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}`);
+    // 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;
     const viewport = Math.max(1, rows - head - 1 /* footer */ - previewH);
     const start = state.scrollOffset;
     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 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}`);
         for (let i = 1; i < viewport; i++)
@@ -524,16 +893,14 @@ export function renderFrame(state, size, caps = { color: false, color256: false
     else {
         for (let i = start; i < end; i++) {
             const vr = state.visible[i];
-            lines.push(rowLine(vr, state.tree, width, i === state.cursor, state.query, caps, showCwd, now, state.pinned.has(vr.id)));
+            lines.push(compose(rowLine(vr, state.tree, rowsW, i === state.cursor, state.query, caps, showCwd, now, state.pinned.has(vr.id), !side, side), i - start));
         }
         for (let i = end - start; i < viewport; i++)
-            lines.push('');
+            lines.push(compose(blankRow, i));
     }
-    // preview panel — the selected row's prompt + meta.
-    if (previewOn) {
-        const sel = state.visible[state.cursor];
-        const r = sel !== undefined ? state.tree.nodes.get(sel.id)?.row : undefined;
-        for (const l of previewPanel(r, width, caps, now, state.query))
+    // bottom preview panel — the narrow-terminal layout.
+    if (layout.mode === 'bottom') {
+        for (const l of previewPanel(selRow, width, caps, now, state.query))
             lines.push(l);
     }
     // footer — the y/n close-out confirm takes over when pending; else search / nav.
@@ -550,14 +917,12 @@ export function renderFrame(state, size, caps = { color: false, color256: false
         // When the cursor row has an active fault, lead the footer with the on-demand kick
         // hint (K shells `node lifecycle revive <id> --now` — immediate revive instead of
         // waiting for the daemon's retry schedule).
-        const selRow = state.visible[state.cursor];
-        const cursorRow = selRow !== undefined ? state.tree.nodes.get(selRow.id)?.row : undefined;
-        const hangingHint = cursorRow?.hanging != null ? 'K revive now  ' : '';
+        const hangingHint = selRow?.hanging != null ? 'K revive now  ' : '';
         const footer = inputMode
             ? '⏎ commit  Esc cancel  ⌫ delete'
             : state.readOnly === true
-                ? '↑↓ move  →/← tree  / search  f pin  Tab tabs  ? more  q quit  — read-only remote canvas'
-                : `${hangingHint}↑↓ move  ⏎ open  O bg  / search  f pin  m msg  x close  R rename  ? more  q quit`;
+                ? '↑↓ 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}`);
     }
     // Assemble: home, each line cleared to EOL, then clear below.