@zhijiewang/openharness 2.1.0 → 2.3.1

package/dist/renderer/layout.js

@@ -2,23 +2,23 @@
  * Layout engine — rasterizes application state into a CellGrid.
  * Split screen: messages area (top) + footer (bottom).
  */
-import { renderMarkdown, measureMarkdown } from './markdown.js';
-import { renderDiff } from './diff.js';
-import { isImageOutput, renderImageInline } from './image.js';
-import { renderSessionBrowser } from './session-browser.js';
-import { getTheme } from '../utils/theme-data.js';
+import { getTheme } from "../utils/theme-data.js";
+import { renderDiff } from "./diff.js";
+import { isImageOutput, renderImageInline } from "./image.js";
+import { measureMarkdown, renderMarkdown } from "./markdown.js";
+import { renderSessionBrowser } from "./session-browser.js";
 // ── Style constants ──
 const s = (fg, bold = false, dim = false) => ({ fg, bg: null, bold, dim, underline: false });
 const S_TEXT = s(null);
 const S_DIM = s(null, false, true);
 const S_BORDER = s(null, false, true);
 const S_BRIGHT = s(null);
-const S_BANNER = s('cyan');
+const S_BANNER = s("cyan");
 const S_BANNER_DIM = s(null, false, true);
-const S_AGENT = s('cyan', true);
-const S_KEY_GREEN = s('green', true);
-const S_KEY_RED = s('red', true);
-const S_KEY_CYAN = s('cyan', true);
+const S_AGENT = s("cyan", true);
+const S_KEY_GREEN = s("green", true);
+const S_KEY_RED = s("red", true);
+const S_KEY_CYAN = s("cyan", true);
 // Theme-dependent styles — lazily initialized on first rasterize() call
 let S_USER;
 let S_ASSISTANT;
@@ -41,7 +41,7 @@ function ensureStyles() {
     S_YELLOW = s(t.tool);
     S_GREEN = s(t.success);
 }
-const SPINNER_CHARS = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const SPINNER_CHARS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 // ── Shared rendering helpers ──
 // Each takes (state, grid, row, limit, ...options) and returns next row.
 function renderBannerSection(state, grid, r, limit, opts) {
@@ -65,12 +65,12 @@ function renderThinkingSection(state, grid, r, limit) {
         return r;
     const w = grid.width;
     if (state.thinkingExpanded) {
-        const thinkLines = state.thinkingText.split('\n').slice(-10);
+        const thinkLines = state.thinkingText.split("\n").slice(-10);
         const shimmerPos = state.spinnerFrame % 20;
         for (const tLine of thinkLines) {
             if (r >= limit)
                 break;
-            grid.writeText(r, 0, '💭 ', S_DIM);
+            grid.writeText(r, 0, "💭 ", S_DIM);
             const chars = [...tLine];
             for (let ci = 0; ci < chars.length && ci + 3 < w; ci++) {
                 grid.setCell(r, 3 + ci, chars[ci], Math.abs(ci - shimmerPos) <= 2 ? S_BRIGHT : S_DIM);
@@ -79,9 +79,9 @@ function renderThinkingSection(state, grid, r, limit) {
         }
     }
     else {
-        const lineCount = state.thinkingText.split('\n').length;
+        const lineCount = state.thinkingText.split("\n").length;
         const elapsed = state.thinkingStartedAt ? Math.floor((Date.now() - state.thinkingStartedAt) / 1000) : 0;
-        const summary = `∴ Thinking${elapsed > 0 ? ` (${elapsed}s)` : ''} — ${lineCount} lines [Ctrl+O expand]`;
+        const summary = `∴ Thinking${elapsed > 0 ? ` (${elapsed}s)` : ""} — ${lineCount} lines [Ctrl+O expand]`;
         grid.writeText(r, 0, summary, S_DIM);
         r++;
     }
@@ -96,27 +96,27 @@ function renderThinkingSummarySection(state, grid, r, limit) {
 function renderSpinnerSection(state, grid, r, limit) {
     if (!state.loading || state.streamingText || state.thinkingText || r >= limit)
         return r;
-    const w = grid.width;
-    const thinkText = 'Thinking';
+    const _w = grid.width;
+    const thinkText = "Thinking";
     const elapsed = state.thinkingStartedAt ? Math.floor((Date.now() - state.thinkingStartedAt) / 1000) : 0;
     const t = getTheme();
     const baseColor = elapsed > 60 ? t.error : elapsed > 30 ? t.stall : t.primary;
     const shimmerColor = elapsed > 60 ? t.stallShimmer : elapsed > 30 ? t.warning : t.primaryShimmer;
     const baseStyle = { fg: baseColor, bg: null, bold: false, dim: false, underline: false };
-    grid.writeText(r, 0, '◆ ', { ...baseStyle, bold: true });
+    grid.writeText(r, 0, "◆ ", { ...baseStyle, bold: true });
     const shimmerPos = state.spinnerFrame % (thinkText.length + 6);
     const shimmerStyle = { fg: shimmerColor, bg: null, bold: true, dim: false, underline: false };
     for (let ci = 0; ci < thinkText.length; ci++) {
         grid.setCell(r, 2 + ci, thinkText[ci], Math.abs(ci - shimmerPos) <= 1 ? shimmerStyle : baseStyle);
     }
-    let suffix = '';
+    let suffix = "";
     if (elapsed > 0)
         suffix += ` ${elapsed}s`;
     if (state.tokenCount > 0) {
         const tokStr = state.tokenCount >= 1000 ? `${(state.tokenCount / 1000).toFixed(1)}K` : `${state.tokenCount}`;
         suffix += ` | ${tokStr} tokens`;
     }
-    suffix += '...';
+    suffix += "...";
     grid.writeText(r, 2 + thinkText.length, suffix, S_DIM);
     return r + 1;
 }
@@ -124,7 +124,7 @@ function renderErrorSection(state, grid, r, limit) {
     if (!state.errorText || r >= limit)
         return r;
     const w = grid.width;
-    grid.writeText(r, 0, '✗ ', S_ERROR);
+    grid.writeText(r, 0, "✗ ", S_ERROR);
     grid.writeText(r, 2, state.errorText.slice(0, w - 4), S_ERROR);
     return r + 1;
 }
@@ -133,17 +133,25 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
     for (const [callId, tc] of state.toolCalls) {
         if (r >= limit)
             break;
-        const isAgent = tc.isAgent || tc.toolName === 'Agent' || tc.toolName === 'ParallelAgents';
+        const isAgent = tc.isAgent || tc.toolName === "Agent" || tc.toolName === "ParallelAgents";
         const icon = isAgent
-            ? (tc.status === 'running' ? '⊕' : tc.status === 'done' ? '◈' : '◇')
-            : (tc.status === 'running' ? SPINNER_CHARS[state.spinnerFrame % SPINNER_CHARS.length] : tc.status === 'done' ? '✓' : '✗');
-        const statusStyle = tc.status === 'error' ? S_ERROR : tc.status === 'done' ? S_GREEN : isAgent ? S_AGENT : S_YELLOW;
+            ? tc.status === "running"
+                ? "⊕"
+                : tc.status === "done"
+                    ? "◈"
+                    : "◇"
+            : tc.status === "running"
+                ? SPINNER_CHARS[state.spinnerFrame % SPINNER_CHARS.length]
+                : tc.status === "done"
+                    ? "✓"
+                    : "✗";
+        const statusStyle = tc.status === "error" ? S_ERROR : tc.status === "done" ? S_GREEN : isAgent ? S_AGENT : S_YELLOW;
         const nameStyle = isAgent ? S_AGENT : { ...S_YELLOW, bold: true };
         const isExpanded = state.expandedToolCalls.has(callId);
-        const canExpand = tc.status !== 'running' && tc.output;
+        const canExpand = tc.status !== "running" && tc.output;
         // Collapse/expand indicator
         if (canExpand) {
-            grid.writeText(r, 0, isExpanded ? '▼' : '▶', S_DIM);
+            grid.writeText(r, 0, isExpanded ? "▼" : "▶", S_DIM);
         }
         grid.writeText(r, 2, `${icon} `, statusStyle);
         grid.writeText(r, 4, tc.toolName, nameStyle);
@@ -151,13 +159,13 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
         if (tc.args) {
             const maxArgs = w - afterName - 15;
             if (maxArgs > 5) {
-                const argsText = tc.args.slice(0, maxArgs) + (tc.args.length > maxArgs ? '…' : '');
+                const argsText = tc.args.slice(0, maxArgs) + (tc.args.length > maxArgs ? "…" : "");
                 grid.writeText(r, afterName, argsText, S_DIM);
                 afterName += argsText.length + 1;
             }
         }
         // Elapsed time for running tools
-        if (tc.status === 'running' && tc.startedAt) {
+        if (tc.status === "running" && tc.startedAt) {
             const elapsed = Math.floor((Date.now() - tc.startedAt) / 1000);
             if (elapsed > 0) {
                 const lineCount = tc.liveOutput?.length ?? 0;
@@ -166,7 +174,7 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
             }
         }
         // Result summary for completed tools
-        if (tc.status !== 'running' && tc.resultSummary) {
+        if (tc.status !== "running" && tc.resultSummary) {
             const elapsed = tc.startedAt ? Math.floor((Date.now() - tc.startedAt) / 1000) : 0;
             const suffix = elapsed > 0 ? `${tc.resultSummary} · ${elapsed}s` : tc.resultSummary;
             grid.writeText(r, Math.min(afterName, w - suffix.length - 2), suffix, S_DIM);
@@ -178,7 +186,7 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
             r++;
         }
         // Live streaming output while running
-        if (tc.status === 'running' && tc.liveOutput && tc.liveOutput.length > 0) {
+        if (tc.status === "running" && tc.liveOutput && tc.liveOutput.length > 0) {
             const overflow = tc.liveOutput.length > opts.maxLiveLines ? tc.liveOutput.length - opts.maxLiveLines : 0;
             if (opts.showOverflow && overflow > 0 && r < limit) {
                 grid.writeText(r, 6, `… (${overflow} earlier lines)`, S_DIM);
@@ -193,7 +201,7 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
             }
         }
         // Final output — collapsed by default (only show when expanded via Tab)
-        if (tc.output && tc.status !== 'running' && isExpanded && r < limit) {
+        if (tc.output && tc.status !== "running" && isExpanded && r < limit) {
             // Image results: show inline placeholder
             if (isImageOutput(tc.output)) {
                 const label = renderImageInline(tc.output);
@@ -201,13 +209,13 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
                 r++;
                 continue;
             }
-            const outLines = tc.output.split('\n');
+            const outLines = tc.output.split("\n");
             const maxOut = 20;
             const showLines = outLines.slice(0, maxOut);
             for (const line of showLines) {
                 if (r >= limit)
                     break;
-                const lineStyle = tc.status === 'error' ? S_ERROR : S_DIM;
+                const lineStyle = tc.status === "error" ? S_ERROR : S_DIM;
                 grid.writeText(r, 6, line.slice(0, w - 8), lineStyle);
                 r++;
             }
@@ -222,7 +230,13 @@ function renderToolCallsSection(state, grid, r, limit, opts) {
 function renderContextWarningSection(state, grid, r, limit) {
     if (!state.contextWarning || r >= limit)
         return r;
-    const warnStyle = { fg: 'yellow', bg: null, bold: state.contextWarning.critical, dim: false, underline: false };
+    const warnStyle = {
+        fg: "yellow",
+        bg: null,
+        bold: state.contextWarning.critical,
+        dim: false,
+        underline: false,
+    };
     grid.writeText(r, 0, state.contextWarning.text, warnStyle);
     return r + 1;
 }
@@ -231,84 +245,84 @@ function renderPermissionBoxSection(state, grid, nextRow, h, opts) {
         return nextRow;
     const w = grid.width;
     const { toolName, description, riskLevel } = state.permissionBox;
-    const riskColor = riskLevel === 'high' ? 'red' : riskLevel === 'medium' ? 'yellow' : 'green';
+    const riskColor = riskLevel === "high" ? "red" : riskLevel === "medium" ? "yellow" : "green";
     const riskStyle = { fg: riskColor, bg: null, bold: true, dim: false, underline: false };
     if (opts.boxed) {
-        if ((h - nextRow) < 6)
+        if (h - nextRow < 6)
             return nextRow;
         const riskDim = { fg: riskColor, bg: null, bold: false, dim: true, underline: false };
         const boxWidth = Math.max(15, Math.min(w - 2, 70));
         // Top border
-        grid.writeText(nextRow, 1, '╭' + '─'.repeat(boxWidth - 2) + '╮', riskDim);
+        grid.writeText(nextRow, 1, `╭${"─".repeat(boxWidth - 2)}╮`, riskDim);
         nextRow++;
         // Tool name + risk
-        grid.writeText(nextRow, 1, '│ ', riskDim);
-        grid.writeText(nextRow, 3, '⚠ ', riskStyle);
+        grid.writeText(nextRow, 1, "│ ", riskDim);
+        grid.writeText(nextRow, 3, "⚠ ", riskStyle);
         grid.writeText(nextRow, 5, toolName, { ...riskStyle });
         grid.writeText(nextRow, 5 + toolName.length, ` ${riskLevel} risk`, S_DIM);
-        grid.writeText(nextRow, boxWidth, '│', riskDim);
+        grid.writeText(nextRow, boxWidth, "│", riskDim);
         nextRow++;
         // Description (truncated)
         const rawDesc = state.permissionBox.suggestion || description.slice(0, boxWidth - 6);
-        const descText = rawDesc.replace(/\|/g, ' ').replace(/\\/g, '/');
-        grid.writeText(nextRow, 1, '│ ', riskDim);
+        const descText = rawDesc.replace(/\|/g, " ").replace(/\\/g, "/");
+        grid.writeText(nextRow, 1, "│ ", riskDim);
         grid.writeText(nextRow, 3, descText.slice(0, boxWidth - 4), S_DIM);
-        grid.writeText(nextRow, boxWidth, '│', riskDim);
+        grid.writeText(nextRow, boxWidth, "│", riskDim);
         nextRow++;
         // Inline diff
         if (state.permissionDiffVisible && state.permissionDiffInfo && nextRow + 3 < h) {
-            grid.writeText(nextRow, 1, '│', riskDim);
+            grid.writeText(nextRow, 1, "│", riskDim);
             nextRow++;
             const availDiffRows = Math.min(opts.maxDiffHeight, h - nextRow - 3);
             const diffRows = renderDiff(grid, nextRow, 3, state.permissionDiffInfo, boxWidth - 2, availDiffRows);
             for (let dr = 0; dr < diffRows; dr++) {
                 if (nextRow + dr < grid.height) {
-                    grid.setCell(nextRow + dr, 1, '│', riskDim);
-                    grid.setCell(nextRow + dr, boxWidth, '│', riskDim);
+                    grid.setCell(nextRow + dr, 1, "│", riskDim);
+                    grid.setCell(nextRow + dr, boxWidth, "│", riskDim);
                 }
             }
             nextRow += diffRows;
         }
         // Action keys
-        grid.writeText(nextRow, 1, '│ ', riskDim);
+        grid.writeText(nextRow, 1, "│ ", riskDim);
         let kc = 3;
-        grid.writeText(nextRow, kc, 'Y', S_KEY_GREEN);
+        grid.writeText(nextRow, kc, "Y", S_KEY_GREEN);
         kc += 1;
-        grid.writeText(nextRow, kc, 'es', S_DIM);
+        grid.writeText(nextRow, kc, "es", S_DIM);
         kc += 2;
-        grid.writeText(nextRow, kc, '  ', S_DIM);
+        grid.writeText(nextRow, kc, "  ", S_DIM);
         kc += 2;
-        grid.writeText(nextRow, kc, 'N', S_KEY_RED);
+        grid.writeText(nextRow, kc, "N", S_KEY_RED);
         kc += 1;
-        grid.writeText(nextRow, kc, 'o', S_DIM);
+        grid.writeText(nextRow, kc, "o", S_DIM);
         kc += 1;
         if (state.permissionDiffInfo) {
-            grid.writeText(nextRow, kc, '  ', S_DIM);
+            grid.writeText(nextRow, kc, "  ", S_DIM);
             kc += 2;
-            grid.writeText(nextRow, kc, 'D', S_KEY_CYAN);
+            grid.writeText(nextRow, kc, "D", S_KEY_CYAN);
             kc += 1;
-            grid.writeText(nextRow, kc, 'iff', S_DIM);
+            grid.writeText(nextRow, kc, "iff", S_DIM);
             kc += 3;
         }
-        grid.writeText(nextRow, boxWidth, '│', riskDim);
+        grid.writeText(nextRow, boxWidth, "│", riskDim);
         nextRow++;
         // Bottom border
-        grid.writeText(nextRow, 1, '╰' + '─'.repeat(boxWidth - 2) + '╯', riskDim);
+        grid.writeText(nextRow, 1, `╰${"─".repeat(boxWidth - 2)}╯`, riskDim);
         nextRow++;
     }
     else {
         // Compact mode (rasterizeLive)
-        if ((h - nextRow) < 4)
+        if (h - nextRow < 4)
             return nextRow;
         grid.writeText(nextRow, 1, `⚠ ${toolName} (${riskLevel} risk)`, riskStyle);
         nextRow++;
-        grid.writeText(nextRow, 1, 'Y', S_KEY_GREEN);
-        grid.writeText(nextRow, 2, 'es  ', S_DIM);
-        grid.writeText(nextRow, 6, 'N', S_KEY_RED);
-        grid.writeText(nextRow, 7, 'o', S_DIM);
+        grid.writeText(nextRow, 1, "Y", S_KEY_GREEN);
+        grid.writeText(nextRow, 2, "es  ", S_DIM);
+        grid.writeText(nextRow, 6, "N", S_KEY_RED);
+        grid.writeText(nextRow, 7, "o", S_DIM);
         if (state.permissionDiffInfo) {
-            grid.writeText(nextRow, 10, 'D', S_KEY_CYAN);
-            grid.writeText(nextRow, 11, 'iff', S_DIM);
+            grid.writeText(nextRow, 10, "D", S_KEY_CYAN);
+            grid.writeText(nextRow, 11, "iff", S_DIM);
         }
         nextRow++;
         // Inline diff (when toggled)
@@ -325,37 +339,37 @@ function renderQuestionPromptSection(state, grid, nextRow, h, opts) {
         return { nextRow, questionInputRow: -1 };
     const w = grid.width;
     const { question, options, input, cursor } = state.questionPrompt;
-    const qStyle = { fg: 'yellow', bg: null, bold: false, dim: false, underline: false };
+    const qStyle = { fg: "yellow", bg: null, bold: false, dim: false, underline: false };
     if (opts.boxed) {
-        const qBorder = { fg: 'yellow', bg: null, bold: false, dim: true, underline: false };
+        const qBorder = { fg: "yellow", bg: null, bold: false, dim: true, underline: false };
         const qBoxWidth = Math.max(15, Math.min(w - 2, 70));
-        grid.writeText(nextRow, 1, '╭' + '─'.repeat(qBoxWidth - 2) + '╮', qBorder);
+        grid.writeText(nextRow, 1, `╭${"─".repeat(qBoxWidth - 2)}╮`, qBorder);
         nextRow++;
-        grid.writeText(nextRow, 1, '│ ', qBorder);
+        grid.writeText(nextRow, 1, "│ ", qBorder);
         grid.writeText(nextRow, 3, `❓ ${question}`, qStyle);
-        grid.writeText(nextRow, qBoxWidth, '│', qBorder);
+        grid.writeText(nextRow, qBoxWidth, "│", qBorder);
         nextRow++;
         if (options && options.length > 0) {
             for (let oi = 0; oi < options.length; oi++) {
-                grid.writeText(nextRow, 1, '│ ', qBorder);
+                grid.writeText(nextRow, 1, "│ ", qBorder);
                 grid.writeText(nextRow, 5, `${oi + 1}. ${options[oi]}`, S_DIM);
-                grid.writeText(nextRow, qBoxWidth, '│', qBorder);
+                grid.writeText(nextRow, qBoxWidth, "│", qBorder);
                 nextRow++;
             }
         }
         const questionInputRow = nextRow;
-        grid.writeText(nextRow, 1, '│ ', qBorder);
-        grid.writeText(nextRow, 3, '❯ ', qStyle);
+        grid.writeText(nextRow, 1, "│ ", qBorder);
+        grid.writeText(nextRow, 3, "❯ ", qStyle);
         grid.writeText(nextRow, 5, input, S_TEXT);
-        grid.writeText(nextRow, qBoxWidth, '│', qBorder);
+        grid.writeText(nextRow, qBoxWidth, "│", qBorder);
         nextRow++;
-        grid.writeText(nextRow, 1, '╰' + '─'.repeat(qBoxWidth - 2) + '╯', qBorder);
+        grid.writeText(nextRow, 1, `╰${"─".repeat(qBoxWidth - 2)}╯`, qBorder);
         nextRow++;
         return { nextRow, questionInputRow };
     }
     else {
         // Compact mode (rasterizeLive)
-        if ((h - nextRow) < 3)
+        if (h - nextRow < 3)
             return { nextRow, questionInputRow: -1 };
         grid.writeText(nextRow, 1, `❓ ${question}`, S_TEXT);
         nextRow++;
@@ -368,7 +382,7 @@ function renderQuestionPromptSection(state, grid, nextRow, h, opts) {
             }
         }
         const questionInputRow = nextRow;
-        grid.writeText(nextRow, 1, '❯ ', S_USER);
+        grid.writeText(nextRow, 1, "❯ ", S_USER);
         grid.writeText(nextRow, 3, input, S_TEXT);
         nextRow++;
         return { nextRow, questionInputRow };
@@ -388,7 +402,7 @@ function renderAutocompleteSection(state, grid, nextRow, limit, promptWidth) {
         if (nextRow >= limit)
             break;
         const cmd = state.autocomplete[ai];
-        const desc = state.autocompleteDescriptions[ai] ?? '';
+        const desc = state.autocompleteDescriptions[ai] ?? "";
         const selected = ai === state.autocompleteIndex;
         const acStyle = selected ? s(getTheme().user, true) : s(null, false, true);
         grid.writeText(nextRow, promptWidth, `/${cmd.padEnd(12)}`, acStyle);
@@ -412,7 +426,7 @@ function renderNotificationsSection(state, grid, nextRow, limit) {
 function renderInputSection(state, grid, inputRow, limit, promptText, promptWidth) {
     grid.writeText(inputRow, 0, promptText, S_USER);
     const inputStart = promptWidth;
-    const inputLines = state.inputText.split('\n');
+    const inputLines = state.inputText.split("\n");
     const maxInputLines = Math.min(inputLines.length, 5);
     for (let li = 0; li < maxInputLines; li++) {
         if (inputRow + li >= limit)
@@ -433,9 +447,7 @@ function renderInputSection(state, grid, inputRow, limit, promptText, promptWidt
     }
     const hintsRow = inputRow + maxInputLines;
     if (hintsRow < limit) {
-        const hintsText = inputLines.length > 1
-            ? `${state.statusHints} | Alt+Enter newline`
-            : state.statusHints;
+        const hintsText = inputLines.length > 1 ? `${state.statusHints} | Alt+Enter newline` : state.statusHints;
         grid.writeText(hintsRow, 0, hintsText, S_DIM);
     }
     return inputRow + maxInputLines + 1;
@@ -444,11 +456,11 @@ function renderCompanionSection(state, grid, anchorRow, limit, promptWidth) {
     if (!state.companionLines || grid.width < 50)
         return;
     const w = grid.width;
-    const compWidth = Math.max(...state.companionLines.map(l => l.length), 0);
+    const compWidth = Math.max(...state.companionLines.map((l) => l.length), 0);
     const compStartCol = Math.max(0, w - compWidth - 1);
     if (compStartCol <= promptWidth + 20)
         return;
-    const compStyle = { fg: state.companionColor || 'cyan', bg: null, bold: false, dim: false, underline: false };
+    const compStyle = { fg: state.companionColor || "cyan", bg: null, bold: false, dim: false, underline: false };
     for (let i = 0; i < state.companionLines.length; i++) {
         const compRow = anchorRow + i;
         if (compRow >= limit)
@@ -462,14 +474,14 @@ function computeCursorPosition(state, inputRow, inputStart, questionInputRow) {
         return { cursorRow: questionInputRow, cursorCol: 5 + state.questionPrompt.cursor };
     }
     const textBeforeCursor = state.inputText.slice(0, state.inputCursor);
-    const cursorLines = textBeforeCursor.split('\n');
+    const cursorLines = textBeforeCursor.split("\n");
     const cursorLineIdx = Math.min(cursorLines.length - 1, 4);
     const cursorColInLine = cursorLines[cursorLines.length - 1].length;
     return { cursorRow: inputRow + cursorLineIdx, cursorCol: inputStart + cursorColInLine };
 }
 function getPromptText(state) {
-    const vimIndicator = state.vimMode ? (state.vimMode === 'normal' ? '[N] ' : '[I] ') : '';
-    const promptText = vimIndicator + '❯ ';
+    const vimIndicator = state.vimMode ? (state.vimMode === "normal" ? "[N] " : "[I] ") : "";
+    const promptText = `${vimIndicator}❯ `;
     return { promptText, promptWidth: promptText.length };
 }
 // ── Main rasterization functions ──
@@ -485,14 +497,17 @@ export function rasterize(state, grid) {
     // Footer height — capped at 50% of terminal to preserve message area
     const companionHeight = state.companionLines ? Math.min(state.companionLines.length + 1, 8) : 0;
     const maxDiffHeight = Math.min(15, Math.floor(h / 3));
-    const diffHeight = (state.permissionDiffVisible && state.permissionDiffInfo) ? maxDiffHeight : 0;
+    const diffHeight = state.permissionDiffVisible && state.permissionDiffInfo ? maxDiffHeight : 0;
     const permissionHeight = state.permissionBox ? 6 + diffHeight : 0;
     const questionHeight = state.questionPrompt ? 4 + (state.questionPrompt.options?.length ?? 0) : 0;
     const statusLineHeight = state.statusLine ? 1 : 0;
     const contextWarningHeight = state.contextWarning ? 1 : 0;
     const autocompleteHeight = state.autocomplete.length;
     const inputLineCount = Math.min(5, (state.inputText.match(/\n/g)?.length ?? 0) + 1);
-    const rawFooterHeight = Math.max(2 + inputLineCount + statusLineHeight + autocompleteHeight, companionHeight + 1) + permissionHeight + questionHeight + contextWarningHeight;
+    const rawFooterHeight = Math.max(2 + inputLineCount + statusLineHeight + autocompleteHeight, companionHeight + 1) +
+        permissionHeight +
+        questionHeight +
+        contextWarningHeight;
     const footerHeight = Math.min(rawFooterHeight, Math.floor(h / 2));
     const msgAreaHeight = Math.max(1, h - footerHeight);
     // ── Session browser overlay ──
@@ -500,30 +515,48 @@ export function rasterize(state, grid) {
         const browserRows = renderSessionBrowser(grid, 0, 0, state.sessionBrowser, w, msgAreaHeight);
         const footerStart = Math.min(browserRows, msgAreaHeight);
         for (let c = 0; c < w; c++)
-            grid.setCell(footerStart, c, '─', S_BORDER);
+            grid.setCell(footerStart, c, "─", S_BORDER);
         const inputRow = footerStart + 1;
-        grid.writeText(inputRow, 0, '❯ ', S_USER);
-        grid.writeText(inputRow + 1, 0, '↑/↓ navigate | Enter resume | Esc cancel', S_DIM);
+        grid.writeText(inputRow, 0, "❯ ", S_USER);
+        grid.writeText(inputRow + 1, 0, "↑/↓ navigate | Enter resume | Esc cancel", S_DIM);
         return { cursorRow: inputRow, cursorCol: 2 };
     }
     // ── Messages area (top) ──
     const allContent = [];
     for (const msg of state.messages) {
-        if (msg.role === 'user') {
-            allContent.push({ role: 'user', content: msg.content, style: { ...S_TEXT, bold: true }, prefixStyle: S_USER, prefix: '❯ ' });
-        }
-        else if (msg.role === 'assistant') {
-            allContent.push({ role: 'assistant', content: msg.content, style: S_TEXT, prefixStyle: S_ASSISTANT, prefix: '◆ ' });
-        }
-        else if (msg.role === 'system') {
-            allContent.push({ role: 'system', content: msg.content, style: S_DIM, prefixStyle: S_DIM, prefix: '  ' });
+        if (msg.role === "user") {
+            allContent.push({
+                role: "user",
+                content: msg.content,
+                style: { ...S_TEXT, bold: true },
+                prefixStyle: S_USER,
+                prefix: "❯ ",
+            });
+        }
+        else if (msg.role === "assistant") {
+            allContent.push({
+                role: "assistant",
+                content: msg.content,
+                style: S_TEXT,
+                prefixStyle: S_ASSISTANT,
+                prefix: "◆ ",
+            });
+        }
+        else if (msg.role === "system") {
+            allContent.push({ role: "system", content: msg.content, style: S_DIM, prefixStyle: S_DIM, prefix: "  " });
         }
     }
     if (state.loading && state.streamingText) {
-        allContent.push({ role: 'streaming', content: state.streamingText, style: S_TEXT, prefixStyle: S_ASSISTANT, prefix: '◆ ' });
+        allContent.push({
+            role: "streaming",
+            content: state.streamingText,
+            style: S_TEXT,
+            prefixStyle: S_ASSISTANT,
+            prefix: "◆ ",
+        });
     }
     if (state.errorText) {
-        allContent.push({ role: 'error', content: state.errorText, style: S_ERROR, prefixStyle: S_ERROR, prefix: '✗ ' });
+        allContent.push({ role: "error", content: state.errorText, style: S_ERROR, prefixStyle: S_ERROR, prefix: "✗ " });
     }
     const prefixLen = 2;
     const contentWidth = w - 1; // reserve rightmost column for scrollbar
@@ -536,20 +569,20 @@ export function rasterize(state, grid) {
         totalRows += visibleLines + 1;
     }
     for (const item of allContent) {
-        if (item.role === 'user' && totalRows > 0)
+        if (item.role === "user" && totalRows > 0)
             totalRows++;
-        if (item.role === 'assistant' || item.role === 'streaming') {
+        if (item.role === "assistant" || item.role === "streaming") {
             totalRows += measureMarkdown(item.content, contentWidth);
         }
         else {
-            const lines = item.content.split('\n');
+            const lines = item.content.split("\n");
             for (const line of lines) {
                 totalRows += Math.max(1, Math.ceil((line.length || 1) / textWidth));
             }
         }
     }
     if (state.thinkingText) {
-        totalRows += state.thinkingExpanded ? Math.min(state.thinkingText.split('\n').length, 10) : 1;
+        totalRows += state.thinkingExpanded ? Math.min(state.thinkingText.split("\n").length, 10) : 1;
     }
     if (!state.loading && state.lastThinkingSummary)
         totalRows += 1;
@@ -559,10 +592,10 @@ export function rasterize(state, grid) {
         totalRows += 1;
         if (tc.isAgent && tc.agentDescription)
             totalRows += 1;
-        if (tc.status === 'running' && tc.liveOutput)
+        if (tc.status === "running" && tc.liveOutput)
             totalRows += Math.min(tc.liveOutput.length, 5);
-        if (tc.output && tc.status !== 'running' && state.expandedToolCalls.has(callId)) {
-            totalRows += Math.min(tc.output.split('\n').length, 20);
+        if (tc.output && tc.status !== "running" && state.expandedToolCalls.has(callId)) {
+            totalRows += Math.min(tc.output.split("\n").length, 20);
         }
     }
     if (state.contextWarning)
@@ -602,21 +635,21 @@ export function rasterize(state, grid) {
     for (const item of allContent) {
         if (r >= msgAreaHeight)
             break;
-        if (item.role === 'user' && contentIdx > 0) {
+        if (item.role === "user" && contentIdx > 0) {
             if (virtualR >= scrollOffset) {
                 for (let c = 0; c < w; c++) {
-                    grid.setCell(r, c, '─', S_BORDER);
+                    grid.setCell(r, c, "─", S_BORDER);
                 }
                 r++;
             }
             virtualR++;
         }
         let itemRows;
-        if (item.role === 'assistant' || item.role === 'streaming') {
+        if (item.role === "assistant" || item.role === "streaming") {
             itemRows = measureMarkdown(item.content, contentWidth);
         }
         else {
-            const lines = item.content.split('\n');
+            const lines = item.content.split("\n");
             itemRows = 0;
             for (const line of lines) {
                 itemRows += Math.max(1, Math.ceil((line.length || 1) / textWidth));
@@ -629,7 +662,7 @@ export function rasterize(state, grid) {
         }
         grid.writeText(r, 0, item.prefix, item.prefixStyle);
         let rows;
-        if (item.role === 'assistant' || item.role === 'streaming') {
+        if (item.role === "assistant" || item.role === "streaming") {
             rows = renderMarkdown(grid, r, prefixLen, item.content, contentWidth, state.codeBlocksExpanded, msgAreaHeight);
         }
         else {
@@ -651,16 +684,16 @@ export function rasterize(state, grid) {
         const S_THUMB = { fg: null, bg: null, bold: false, dim: false, underline: false };
         for (let sr = 0; sr < msgAreaHeight; sr++) {
             const isThumb = sr >= thumbStart && sr < thumbStart + thumbSize;
-            grid.setCell(sr, w - 1, isThumb ? '█' : '░', isThumb ? S_THUMB : S_TRACK);
+            grid.setCell(sr, w - 1, isThumb ? "█" : "░", isThumb ? S_THUMB : S_TRACK);
         }
     }
     // ── Footer ──
     const footerStart = Math.min(r, msgAreaHeight);
     for (let c = 0; c < w; c++) {
-        grid.setCell(footerStart, c, '─', S_BORDER);
+        grid.setCell(footerStart, c, "─", S_BORDER);
     }
     if (hasScrollbar) {
-        grid.setCell(footerStart, w - 1, '┤', S_BORDER);
+        grid.setCell(footerStart, w - 1, "┤", S_BORDER);
     }
     if (state.manualScroll > 0 && totalRows > msgAreaHeight) {
         const hiddenBelow = state.manualScroll;
@@ -687,11 +720,17 @@ export function rasterize(state, grid) {
     renderInputSection(state, grid, inputRow, h, promptText, promptWidth);
     // Companion (right-aligned in footer, skipped if it would overlap input)
     if (state.companionLines && w >= 50) {
-        const compWidth = Math.max(...state.companionLines.map(l => l.length), 0);
+        const compWidth = Math.max(...state.companionLines.map((l) => l.length), 0);
         const compStartCol = Math.max(0, w - compWidth - 1);
-        const inputEndCol = promptWidth + (state.inputText.split('\n')[0]?.length ?? 0);
+        const inputEndCol = promptWidth + (state.inputText.split("\n")[0]?.length ?? 0);
         if (compStartCol > inputEndCol + 3) {
-            const compStyle = { fg: state.companionColor || 'cyan', bg: null, bold: false, dim: false, underline: false };
+            const compStyle = {
+                fg: state.companionColor || "cyan",
+                bg: null,
+                bold: false,
+                dim: false,
+                underline: false,
+            };
             for (let i = 0; i < state.companionLines.length; i++) {
                 const compRow = footerStart + i;
                 if (compRow >= inputRow)
@@ -721,7 +760,7 @@ export function rasterizeLive(state, grid) {
     }
     // ── Streaming text ──
     if (state.loading && state.streamingText) {
-        grid.writeText(r, 0, '◆ ', S_ASSISTANT);
+        grid.writeText(r, 0, "◆ ", S_ASSISTANT);
         const rows = renderMarkdown(grid, r, 2, state.streamingText, w, state.codeBlocksExpanded, h);
         r += rows;
     }
@@ -735,7 +774,7 @@ export function rasterizeLive(state, grid) {
     // ── Footer border ──
     if (r < h) {
         for (let c = 0; c < w; c++)
-            grid.setCell(r, c, '─', S_BORDER);
+            grid.setCell(r, c, "─", S_BORDER);
         r++;
     }
     let nextRow = r;
@@ -758,7 +797,7 @@ export function rasterizeLive(state, grid) {
         return { cursorRow: questionInputRow, cursorCol: 3 + state.questionPrompt.cursor };
     }
     const textBeforeCursor = state.inputText.slice(0, state.inputCursor);
-    const cursorLines = textBeforeCursor.split('\n');
+    const cursorLines = textBeforeCursor.split("\n");
     const cursorLineIdx = Math.min(cursorLines.length - 1, 4);
     const cursorColInLine = cursorLines[cursorLines.length - 1].length;
     return { cursorRow: inputRow + cursorLineIdx, cursorCol: promptWidth + cursorColInLine };