@zhijiewang/openharness 2.5.0 → 2.9.0

package/dist/renderer/layout-sections.js

@@ -0,0 +1,462 @@
+/**
+ * Layout section renderers — individual UI widgets rasterized into a CellGrid.
+ * Each function takes (state, grid, row, limit, ...options) and returns next row.
+ */
+import { getTheme } from "../utils/theme-data.js";
+import { renderDiff } from "./diff.js";
+import { isImageOutput, renderImageInline } from "./image.js";
+// ── Style constants ──
+const s = (fg, bold = false, dim = false) => ({ fg, bg: null, bold, dim, underline: false });
+export const S_TEXT = s(null);
+export const S_DIM = s(null, false, true);
+export const S_BORDER = s(null, false, true);
+const S_BRIGHT = s(null);
+export const S_BANNER = s("cyan");
+export 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);
+// Theme-dependent styles — lazily initialized on first rasterize() call
+export let S_USER;
+export let S_ASSISTANT;
+export let S_ERROR;
+export let S_YELLOW;
+export let S_GREEN;
+let _stylesInit = false;
+/** Reset style cache — call after theme change */
+export function resetStyleCache() {
+    _stylesInit = false;
+}
+export function ensureStyles() {
+    if (_stylesInit)
+        return;
+    _stylesInit = true;
+    const t = getTheme();
+    S_USER = s(t.user, true);
+    S_ASSISTANT = s(t.assistant, true);
+    S_ERROR = s(t.error);
+    S_YELLOW = s(t.tool);
+    S_GREEN = s(t.success);
+}
+export const SPINNER_CHARS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+// ── Section renderers ──
+export function renderBannerSection(state, grid, r, limit, opts) {
+    if (!state.bannerLines)
+        return r;
+    const startLine = opts.compact ? Math.max(0, state.bannerLines.length - 2) : 0;
+    for (let i = startLine; i < state.bannerLines.length; i++) {
+        if (r >= limit)
+            break;
+        const line = state.bannerLines[i];
+        const isBannerArt = i < state.bannerLines.length - 2;
+        grid.writeText(r, 0, line, isBannerArt ? S_BANNER : S_BANNER_DIM);
+        r++;
+    }
+    if (r < limit)
+        r++; // blank line after banner
+    return r;
+}
+export function renderThinkingSection(state, grid, r, limit) {
+    if (!state.thinkingText || r >= limit)
+        return r;
+    const w = grid.width;
+    if (state.thinkingExpanded) {
+        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);
+            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);
+            }
+            r++;
+        }
+    }
+    else {
+        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]`;
+        grid.writeText(r, 0, summary, S_DIM);
+        r++;
+    }
+    return r;
+}
+export function renderThinkingSummarySection(state, grid, r, limit) {
+    if (state.loading || !state.lastThinkingSummary || r >= limit)
+        return r;
+    grid.writeText(r, 0, state.lastThinkingSummary, S_DIM);
+    return r + 1;
+}
+export function renderSpinnerSection(state, grid, r, limit) {
+    if (!state.loading || state.streamingText || state.thinkingText || r >= limit)
+        return r;
+    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 });
+    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 = "";
+    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 += "...";
+    grid.writeText(r, 2 + thinkText.length, suffix, S_DIM);
+    return r + 1;
+}
+export 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, 2, state.errorText.slice(0, w - 4), S_ERROR);
+    return r + 1;
+}
+export function renderToolCallsSection(state, grid, r, limit, opts) {
+    const w = grid.width;
+    for (const [callId, tc] of state.toolCalls) {
+        if (r >= limit)
+            break;
+        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;
+        const nameStyle = isAgent ? S_AGENT : { ...S_YELLOW, bold: true };
+        const isExpanded = state.expandedToolCalls.has(callId);
+        const canExpand = tc.status !== "running" && tc.output;
+        if (canExpand) {
+            grid.writeText(r, 0, isExpanded ? "▼" : "▶", S_DIM);
+        }
+        grid.writeText(r, 2, `${icon} `, statusStyle);
+        grid.writeText(r, 4, tc.toolName, nameStyle);
+        let afterName = 4 + tc.toolName.length + 1;
+        if (tc.args) {
+            const maxArgs = w - afterName - 15;
+            if (maxArgs > 5) {
+                const argsText = tc.args.slice(0, maxArgs) + (tc.args.length > maxArgs ? "…" : "");
+                grid.writeText(r, afterName, argsText, S_DIM);
+                afterName += argsText.length + 1;
+            }
+        }
+        if (tc.status === "running" && tc.startedAt) {
+            const elapsed = Math.floor((Date.now() - tc.startedAt) / 1000);
+            if (elapsed > 0) {
+                const lineCount = tc.liveOutput?.length ?? 0;
+                const elapsedStr = lineCount > 0 ? `${elapsed}s · ${lineCount} lines` : `${elapsed}s`;
+                grid.writeText(r, Math.min(afterName, w - elapsedStr.length - 2), elapsedStr, S_DIM);
+            }
+        }
+        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);
+        }
+        r++;
+        if (isAgent && tc.agentDescription && r < limit) {
+            grid.writeText(r, 6, tc.agentDescription.slice(0, w - 8), S_DIM);
+            r++;
+        }
+        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);
+                r++;
+            }
+            const visible = overflow > 0 ? tc.liveOutput.slice(-opts.maxLiveLines) : tc.liveOutput;
+            for (const line of visible) {
+                if (r >= limit)
+                    break;
+                grid.writeText(r, 6, line.slice(0, w - 8), S_DIM);
+                r++;
+            }
+        }
+        if (tc.output && tc.status !== "running" && isExpanded && r < limit) {
+            if (isImageOutput(tc.output)) {
+                const label = renderImageInline(tc.output);
+                grid.writeText(r, 6, label.slice(0, w - 8), S_DIM);
+                r++;
+                continue;
+            }
+            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;
+                grid.writeText(r, 6, line.slice(0, w - 8), lineStyle);
+                r++;
+            }
+            if (outLines.length > maxOut && r < limit) {
+                grid.writeText(r, 6, `… (${outLines.length} lines total)`, S_DIM);
+                r++;
+            }
+        }
+    }
+    return r;
+}
+export 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,
+    };
+    grid.writeText(r, 0, state.contextWarning.text, warnStyle);
+    return r + 1;
+}
+export function renderPermissionBoxSection(state, grid, nextRow, h, opts) {
+    if (!state.permissionBox || grid.width < 20)
+        return nextRow;
+    const w = grid.width;
+    const { toolName, riskLevel } = state.permissionBox;
+    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)
+            return nextRow;
+        const riskDim = { fg: riskColor, bg: null, bold: false, dim: true, underline: false };
+        const boxWidth = Math.max(15, Math.min(w - 2, 70));
+        grid.writeText(nextRow, 1, `╭${"─".repeat(boxWidth - 2)}╮`, riskDim);
+        nextRow++;
+        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);
+        nextRow++;
+        const rawDesc = state.permissionBox.suggestion || state.permissionBox.description.slice(0, boxWidth - 6);
+        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);
+        nextRow++;
+        if (state.permissionDiffVisible && state.permissionDiffInfo && nextRow + 3 < h) {
+            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);
+                }
+            }
+            nextRow += diffRows;
+        }
+        grid.writeText(nextRow, 1, "│ ", riskDim);
+        let kc = 3;
+        grid.writeText(nextRow, kc, "Y", S_KEY_GREEN);
+        kc += 1;
+        grid.writeText(nextRow, kc, "es", S_DIM);
+        kc += 2;
+        grid.writeText(nextRow, kc, "  ", S_DIM);
+        kc += 2;
+        grid.writeText(nextRow, kc, "N", S_KEY_RED);
+        kc += 1;
+        grid.writeText(nextRow, kc, "o", S_DIM);
+        kc += 1;
+        if (state.permissionDiffInfo) {
+            grid.writeText(nextRow, kc, "  ", S_DIM);
+            kc += 2;
+            grid.writeText(nextRow, kc, "D", S_KEY_CYAN);
+            kc += 1;
+            grid.writeText(nextRow, kc, "iff", S_DIM);
+        }
+        grid.writeText(nextRow, boxWidth, "│", riskDim);
+        nextRow++;
+        grid.writeText(nextRow, 1, `╰${"─".repeat(boxWidth - 2)}╯`, riskDim);
+        nextRow++;
+    }
+    else {
+        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);
+        if (state.permissionDiffInfo) {
+            grid.writeText(nextRow, 10, "D", S_KEY_CYAN);
+            grid.writeText(nextRow, 11, "iff", S_DIM);
+        }
+        nextRow++;
+        if (state.permissionDiffVisible && state.permissionDiffInfo && nextRow + 3 < h) {
+            const availDiffRows = Math.min(15, h - nextRow - 3);
+            const diffRows = renderDiff(grid, nextRow, 3, state.permissionDiffInfo, Math.min(w - 2, 70), availDiffRows);
+            nextRow += diffRows;
+        }
+    }
+    return nextRow;
+}
+export function renderQuestionPromptSection(state, grid, nextRow, h, opts) {
+    if (!state.questionPrompt || grid.width < 20)
+        return { nextRow, questionInputRow: -1 };
+    const w = grid.width;
+    const { question, options, input } = state.questionPrompt;
+    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 qBoxWidth = Math.max(15, Math.min(w - 2, 70));
+        grid.writeText(nextRow, 1, `╭${"─".repeat(qBoxWidth - 2)}╮`, qBorder);
+        nextRow++;
+        grid.writeText(nextRow, 1, "│ ", qBorder);
+        grid.writeText(nextRow, 3, `❓ ${question}`, qStyle);
+        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, 5, `${oi + 1}. ${options[oi]}`, S_DIM);
+                grid.writeText(nextRow, qBoxWidth, "│", qBorder);
+                nextRow++;
+            }
+        }
+        const questionInputRow = nextRow;
+        grid.writeText(nextRow, 1, "│ ", qBorder);
+        grid.writeText(nextRow, 3, "❯ ", qStyle);
+        grid.writeText(nextRow, 5, input, S_TEXT);
+        grid.writeText(nextRow, qBoxWidth, "│", qBorder);
+        nextRow++;
+        grid.writeText(nextRow, 1, `╰${"─".repeat(qBoxWidth - 2)}╯`, qBorder);
+        nextRow++;
+        return { nextRow, questionInputRow };
+    }
+    if (h - nextRow < 3)
+        return { nextRow, questionInputRow: -1 };
+    grid.writeText(nextRow, 1, `❓ ${question}`, S_TEXT);
+    nextRow++;
+    if (options) {
+        for (const opt of options) {
+            if (nextRow >= h)
+                break;
+            grid.writeText(nextRow, 3, opt, S_DIM);
+            nextRow++;
+        }
+    }
+    const questionInputRow = nextRow;
+    grid.writeText(nextRow, 1, "❯ ", S_USER);
+    grid.writeText(nextRow, 3, input, S_TEXT);
+    nextRow++;
+    return { nextRow, questionInputRow };
+}
+export function renderStatusLineSection(state, grid, nextRow, limit) {
+    if (!state.statusLine || nextRow >= limit)
+        return nextRow;
+    grid.writeText(nextRow, 0, state.statusLine, S_DIM);
+    return nextRow + 1;
+}
+export function renderAutocompleteSection(state, grid, nextRow, limit, promptWidth) {
+    if (state.autocomplete.length === 0)
+        return nextRow;
+    const w = grid.width;
+    for (let ai = 0; ai < state.autocomplete.length; ai++) {
+        if (nextRow >= limit)
+            break;
+        const cmd = state.autocomplete[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);
+        if (desc && w > promptWidth + 15)
+            grid.writeText(nextRow, promptWidth + 13, desc.slice(0, w - promptWidth - 15), S_DIM);
+        nextRow++;
+    }
+    return nextRow;
+}
+export function renderNotificationsSection(state, grid, nextRow, limit) {
+    if (!state.notifications || state.notifications.length === 0)
+        return nextRow;
+    for (const note of state.notifications.slice(-2)) {
+        if (nextRow >= limit)
+            break;
+        grid.writeText(nextRow, 0, `  ⚡ ${note.text}`, S_YELLOW);
+        nextRow++;
+    }
+    return nextRow;
+}
+export 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 maxInputLines = Math.min(inputLines.length, 5);
+    for (let li = 0; li < maxInputLines; li++) {
+        if (inputRow + li >= limit)
+            break;
+        if (li === 0) {
+            grid.writeText(inputRow, inputStart, inputLines[0], S_TEXT);
+        }
+        else {
+            grid.writeText(inputRow + li, inputStart, inputLines[li], S_TEXT);
+        }
+    }
+    if (inputLines.length > 1) {
+        const lineCountStr = ` [${inputLines.length} lines]`;
+        const lineCountCol = Math.min(inputStart + (inputLines[0]?.length ?? 0) + 1, grid.width - lineCountStr.length - 1);
+        if (lineCountCol > inputStart)
+            grid.writeText(inputRow, lineCountCol, lineCountStr, S_DIM);
+    }
+    const hintsRow = inputRow + maxInputLines;
+    if (hintsRow < limit) {
+        const hintsText = inputLines.length > 1 ? `${state.statusHints} | Alt+Enter newline` : state.statusHints;
+        grid.writeText(hintsRow, 0, hintsText, S_DIM);
+    }
+    return inputRow + maxInputLines + 1;
+}
+export 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 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 };
+    for (let i = 0; i < state.companionLines.length; i++) {
+        const compRow = anchorRow + i;
+        if (compRow >= limit)
+            break;
+        grid.writeText(compRow, compStartCol, state.companionLines[i], compStyle);
+    }
+}
+export function computeCursorPosition(state, inputRow, inputStart, questionInputRow) {
+    if (state.questionPrompt && questionInputRow >= 0) {
+        return { cursorRow: questionInputRow, cursorCol: 5 + state.questionPrompt.cursor };
+    }
+    const textBeforeCursor = state.inputText.slice(0, state.inputCursor);
+    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 };
+}
+export function getPromptText(state) {
+    const vimIndicator = state.vimMode ? (state.vimMode === "normal" ? "[N] " : "[I] ") : "";
+    const promptText = `${vimIndicator}❯ `;
+    return { promptText, promptWidth: promptText.length };
+}
+//# sourceMappingURL=layout-sections.js.map

package/dist/renderer/layout.d.ts

@@ -1,9 +1,13 @@
 /**
  * Layout engine — rasterizes application state into a CellGrid.
  * Split screen: messages area (top) + footer (bottom).
+ *
+ * Section renderers are in layout-sections.ts.
+ * This file contains types and the two main rasterization functions.
  */
 import type { Message } from "../types/message.js";
 import type { CellGrid } from "./cells.js";
+export { resetStyleCache } from "./layout-sections.js";
 export type ToolCallInfo = {
     toolName: string;
     status: "running" | "done" | "error";
@@ -64,8 +68,6 @@ export type LayoutState = {
         text: string;
     }>;
 };
-/** Reset style cache — call after theme change */
-export declare function resetStyleCache(): void;
 /**
  * Rasterize application state into the cell grid.
  * Full-screen mode with message area + scrollbar + footer.