nou-cli 0.4.0 → 0.5.0

package/dist/src/ui/Chat.js

@@ -1,45 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useAnimation, useInput } from "ink";
 import { renderMarkdown, wrap } from "./text.js";
 import { ChatInput, inputHeight } from "./ChatInput.js";
 import { C, SPINNER } from "./theme.js";
 import { Pane } from "./Pane.js";
+import { Scrollbar, topFor } from "./scroll.js";
+const BAR = "▌ ";
 export const COMMANDS = ["/model", "/models", "/settings", "/auto", "/engine", "/copy", "/undo", "/rewind", "/history", "/problems", "/version", "/clear", "/help"];
-export function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, onSubmit, onAnswer }) {
+/** Display lines for one message, wrapped to `inner` columns. */
+function entryLines(entry, inner) {
+    const out = [];
+    if (entry.kind === "user") {
+        out.push({ text: "you", color: C.cyan, bold: true, lead: BAR, leadColor: C.cyan });
+        for (const line of wrap(entry.text, inner - 3))
+            out.push({ text: line, color: C.text, lead: BAR, leadColor: C.cyan });
+        out.push({ text: "" });
+    }
+    else if (entry.kind === "assistant") {
+        out.push({ text: "◆ nou", color: C.accent2, bold: true, lead: BAR, leadColor: C.accent2 });
+        for (const line of renderMarkdown(entry.text, inner - 3)) {
+            const color = line.kind === "heading" ? C.accent2 : line.kind === "quote" ? C.dim : undefined;
+            out.push({ text: "", spans: line.spans, ...(color ? { color } : {}), lead: BAR, leadColor: C.accent2 });
+        }
+        out.push({ text: "" });
+    }
+    else {
+        const style = entry.kind === "tool"
+            ? { icon: "⚙", color: C.dim }
+            : entry.kind === "error" ? { icon: "✖", color: C.red } : { icon: "ℹ", color: C.accent };
+        wrap(entry.text, inner - 4).forEach((line, i) => out.push({ text: ` ${line}`, color: style.color, lead: i === 0 ? ` ${style.icon}` : "  ", leadColor: style.color }));
+    }
+    return out;
+}
+// Finished messages never change, so each is laid out once per width; only the reply being streamed
+// is redone as it grows. Without this every streamed token re-rendered the whole conversation.
+const laidOut = new WeakMap();
+function cachedLines(entry, inner) {
+    const hit = laidOut.get(entry);
+    if (hit?.inner === inner)
+        return hit.lines;
+    const lines = entryLines(entry, inner);
+    laidOut.set(entry, { inner, lines });
+    return lines;
+}
+export const Chat = memo(function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, scrollTo, prefill, onSubmit, onAnswer }) {
     const [input, setInput] = useState("");
+    useEffect(() => {
+        if (prefill)
+            setInput(prefill.text);
+    }, [prefill?.nonce]);
     const [scrollBack, setScrollBack] = useState(0);
     const { frame } = useAnimation({ interval: 80, isActive: !!busy });
-    const inner = width - 2;
-    const lines = useMemo(() => {
-        const out = [];
-        const all = streaming ? [...entries, { kind: "assistant", text: streaming }] : entries;
-        for (const entry of all) {
-            if (entry.kind === "user") {
-                out.push({ text: "you", color: C.cyan, bold: true, bar: C.cyan });
-                for (const line of wrap(entry.text, inner - 3))
-                    out.push({ text: line, color: C.text, bar: C.cyan });
-                out.push({ text: "" });
-            }
-            else if (entry.kind === "assistant") {
-                out.push({ text: "◆ nou", color: C.accent2, bold: true, bar: C.accent2 });
-                for (const line of renderMarkdown(entry.text, inner - 3)) {
-                    const color = line.kind === "heading" ? C.accent2 : line.kind === "quote" ? C.dim : undefined;
-                    out.push({ text: "", spans: line.spans, ...(color ? { color } : {}), bar: C.accent2 });
-                }
-                out.push({ text: "" });
-            }
-            else {
-                const style = entry.kind === "tool"
-                    ? { icon: "⚙", color: C.dim }
-                    : entry.kind === "error" ? { icon: "✖", color: C.red } : { icon: "ℹ", color: C.accent };
-                wrap(entry.text, inner - 4).forEach((line, i) => out.push({ text: `${i === 0 ? ` ${style.icon}` : "  "} ${line}`, color: style.color }));
-            }
-        }
-        return out;
-    }, [entries, streaming, inner]);
-    // New output snaps the view back to the bottom.
-    useEffect(() => setScrollBack(0), [entries.length, streaming]);
+    const inner = width - 3; // minus the borders and the scrollbar
+    const history = useMemo(() => entries.flatMap((e) => cachedLines(e, inner)), [entries, inner]);
+    const lines = useMemo(() => (streaming ? [...history, ...entryLines({ kind: "assistant", text: streaming }, inner)] : history), [history, streaming, inner]);
+    // At the bottom, new output scrolls into view. Scrolled up to read, the view stays where it is
+    // (counted from the bottom, so it moves up by however many lines arrived) until you scroll back down.
+    const lastCount = useRef(lines.length);
+    const [unread, setUnread] = useState(0);
+    useEffect(() => {
+        const added = lines.length - lastCount.current;
+        lastCount.current = lines.length;
+        if (added <= 0)
+            return;
+        setScrollBack((b) => (b > 0 ? b + added : 0));
+        setUnread((u) => (scrollBack > 0 ? u + added : 0));
+    }, [lines.length]);
+    // Sending a message always goes back to the bottom.
+    useEffect(() => {
+        if (entries[entries.length - 1]?.kind === "user")
+            setScrollBack(0);
+    }, [entries.length]);
+    useEffect(() => {
+        if (scrollBack === 0)
+            setUnread(0);
+    }, [scrollBack]);
     const footer = [];
     if (approval?.kind === "command") {
         footer.push({ text: "⚡ Run this command?", color: C.yellow, bold: true });
@@ -68,16 +104,21 @@ export function Chat({ width, height, focused, entries, streaming, busy, approva
     const suggestions = input.startsWith("/") && !input.includes(" ")
         ? COMMANDS.filter((c) => c.startsWith(input) && c !== input)
         : [];
-    const inputRows = inputHeight(input, inner);
+    const inputRows = inputHeight(input, inner + 1);
     const rows = Math.max(1, height - 3 - footer.length - 2 - inputRows);
-    const history = useMemo(() => entries.filter((e) => e.kind === "user").map((e) => e.text), [entries]);
+    const sent = useMemo(() => entries.filter((e) => e.kind === "user").map((e) => e.text), [entries]);
     const maxBack = Math.max(0, lines.length - rows);
     const back = Math.min(scrollBack, maxBack);
-    const visible = lines.slice(Math.max(0, lines.length - rows - back), lines.length - back);
+    const firstShown = Math.max(0, lines.length - rows - back);
+    const visible = lines.slice(firstShown, lines.length - back);
     useEffect(() => {
-        if (wheel)
-            setScrollBack((b) => Math.max(0, Math.min(maxBack, b - wheel.dir * 3)));
+        if (wheel?.lines)
+            setScrollBack((b) => Math.max(0, Math.min(maxBack, Math.min(b, maxBack) - wheel.lines)));
     }, [wheel?.nonce]);
+    useEffect(() => {
+        if (scrollTo)
+            setScrollBack(maxBack - topFor(scrollTo.fraction, lines.length, rows));
+    }, [scrollTo?.nonce]);
     // While something waits for approval, y/n into an empty input answer it; any other key starts a message.
     useInput((typed) => {
         if (/^[yYnN]$/.test(typed))
@@ -87,9 +128,13 @@ export function Chat({ width, height, focused, entries, streaming, busy, approva
     }, { isActive: focused && !!approval && !input });
     useInput((_input, key) => {
         if (key.pageUp || (key.upArrow && key.shift))
-            setScrollBack((b) => Math.min(maxBack, b + Math.max(1, rows - 2)));
+            setScrollBack((b) => Math.min(maxBack, Math.min(b, maxBack) + Math.max(1, rows - 2)));
         else if (key.pageDown || (key.downArrow && key.shift))
-            setScrollBack((b) => Math.max(0, b - Math.max(1, rows - 2)));
+            setScrollBack((b) => Math.max(0, Math.min(b, maxBack) - Math.max(1, rows - 2)));
+        else if (key.ctrl && key.home)
+            setScrollBack(maxBack);
+        else if (key.ctrl && key.end)
+            setScrollBack(0);
     }, { isActive: focused });
     const submit = (value) => {
         if (!value.trim() || busy || approval)
@@ -99,14 +144,16 @@ export function Chat({ width, height, focused, entries, streaming, busy, approva
         setInput("");
         onSubmit(command);
     };
-    const render = (line, key) => (_jsxs(Text, { wrap: "truncate-end", children: [line.bar ? _jsx(Text, { color: line.bar, children: "\u258C " }) : null, line.spans?.length
+    const render = (line, key, withLead = true) => (_jsxs(Text, { wrap: "truncate-end", children: [withLead && line.lead ? _jsx(Text, { color: line.leadColor ?? C.dim, children: line.lead }) : null, line.spans?.length
                 ? line.spans.map((span, i) => (_jsx(Text, { bold: !!span.bold || !!line.bold, italic: !!span.italic, dimColor: !!span.dim, ...(span.code ? { color: C.yellow } : line.color ? { color: line.color } : { color: C.text }), children: span.text }, i)))
                 : _jsx(Text, { bold: !!line.bold, dimColor: !!line.dim, ...(line.color ? { color: line.color } : {}), children: line.text || " " })] }, key));
     const empty = entries.length === 0 && !streaming;
     const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u25C6" }), " Chat", back
-                ? _jsxs(Text, { color: C.yellow, children: ["  \u2191 scrolled ", back, " lines \u00B7 Shift+\u2193 / PgDn / wheel to go back"] })
-                : maxBack > 0 ? _jsx(Text, { color: C.dim, children: "  Shift+\u2191 / PgUp / wheel to scroll" }) : null] }));
-    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsx(Box, { flexDirection: "column", height: rows, children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : visible.map((line, i) => render(line, i)) }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), _jsx(Text, { wrap: "truncate-end", color: C.dim, children: suggestions.length
+                ? unread
+                    ? _jsxs(Text, { color: C.green, bold: true, children: ["  \u2193 ", unread, " new lines below", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
+                    : _jsxs(Text, { color: C.yellow, children: ["  \u2191 scrolled ", back, " lines", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
+                : maxBack > 0 ? _jsx(Text, { color: C.dim, children: "  PgUp / wheel to scroll" }) : null] }));
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { children: visible.map((line, i) => _jsx(Text, { color: line.leadColor ?? C.dim, children: `${line.lead ?? "  "}${i < visible.length - 1 ? "\n" : ""}` }, i)) }) }), _jsx(Box, { flexDirection: "column", width: inner - 2, flexShrink: 0, children: visible.map((line, i) => render(line, firstShown + i, false)) })] })) }), _jsx(Scrollbar, { total: lines.length, top: firstShown, rows: rows, focused: focused })] }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), _jsx(Text, { wrap: "truncate-end", color: C.dim, children: suggestions.length
                     ? _jsxs(Text, { color: C.accent, children: [suggestions.join("  "), "  ", _jsx(Text, { color: C.dim, children: suggestions.length === 1 ? "Enter ↵" : "" })] })
-                    : contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " }), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner)) }), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !(approval && !input), width: inner, history: history, placeholder: busy ? "working… Esc to stop" : "Ask anything · / for commands · ↑ history" })] }));
-}
+                    : contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " }), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner + 1)) }), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !(approval && !input), width: inner + 1, history: sent, placeholder: busy ? "working… Esc to stop" : "Ask anything · / for commands · ↑ history" })] }));
+});

package/dist/src/ui/ChatInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Box, Text, useInput, usePaste } from "ink";
 import { C } from "./theme.js";
 /** Word-wraps `text` into segments of at most `width` characters, honoring newlines. */
@@ -39,11 +39,20 @@ export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder
     const [cursor, setCursor] = useState(value.length);
     const [recall, setRecall] = useState(null);
     const stash = useRef("");
+    // Text put in from outside (e.g. "/" typed in another pane) puts the cursor at its end.
+    const own = useRef(value);
+    useEffect(() => {
+        if (value !== own.current)
+            setCursor(value.length);
+        own.current = value;
+    }, [value]);
     const textWidth = Math.max(4, width - 2);
-    const pos = Math.min(cursor, value.length);
+    // Until the effect above catches up, text from outside puts the cursor at its end right away.
+    const pos = value !== own.current ? value.length : Math.min(cursor, value.length);
     const segments = layout(value, textWidth);
     const line = cursorLine(segments, pos);
     const set = (next, nextCursor) => {
+        own.current = next;
         onChange(next);
         setCursor(Math.max(0, Math.min(next.length, nextCursor)));
     };

package/dist/src/ui/CodeView.js

@@ -1,16 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { artWork } from "../util/index.js";
-import { highlightLines, sideBySide } from "./text.js";
+import { highlightLines, sideBySide, splitLines } from "./text.js";
 import { C, fileIcon, gradient } from "./theme.js";
 import { Pane } from "./Pane.js";
-export function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, problems, focusLine, syntaxVersion, diffNote, wheel, onViewport }) {
+import { Scrollbar, topFor } from "./scroll.js";
+/** Columns ←/→ and Shift+wheel move sideways. */
+const SIDE_STEP = 8;
+export const CodeView = memo(function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, problems, focusLine, syntaxVersion, diffNote, wheel, scrollTo, onViewport }) {
     const [top, setTop] = useState(0);
+    // Columns scrolled sideways. Scrolled lines show without colors (slicing colored text could cut a color code in half).
+    const [left, setLeft] = useState(0);
     const rows = Math.max(1, height - 3);
-    const inner = width - 2;
+    const inner = width - 3; // minus the borders and the scrollbar
     const lines = useMemo(() => (filePath ? highlightLines(filePath, content) : []), [filePath, content, syntaxVersion]);
+    const plain = useMemo(() => (left > 0 ? splitLines(content) : []), [content, left > 0]);
     const problemsByLine = useMemo(() => {
         const map = new Map();
         for (const d of problems)
@@ -25,6 +31,7 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
             ? diffRows.findIndex((r) => r.changed)
             : marked.size ? Math.min(...marked) - 1 : 0;
         setTop(Math.max(0, first - 3));
+        setLeft(0);
     }, [filePath, diff, diffRows, marked]);
     useEffect(() => {
         if (focusLine && !diff)
@@ -33,9 +40,17 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
     const maxTop = Math.max(0, total - rows);
     const start = Math.min(top, maxTop);
     useEffect(() => {
-        if (wheel)
-            setTop((t) => Math.max(0, Math.min(maxTop, Math.min(t, maxTop) + wheel.dir * 3)));
+        if (!wheel)
+            return;
+        if (wheel.lines)
+            setTop((t) => Math.max(0, Math.min(maxTop, Math.min(t, maxTop) + wheel.lines)));
+        if (wheel.columns)
+            setLeft((l) => Math.max(0, l + wheel.columns * 2));
     }, [wheel?.nonce]);
+    useEffect(() => {
+        if (scrollTo)
+            setTop(topFor(scrollTo.fraction, total, rows));
+    }, [scrollTo?.nonce]);
     useEffect(() => {
         if (filePath && !diff)
             onViewport(start + 1, Math.min(total, start + rows));
@@ -45,14 +60,18 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
             setTop((t) => Math.max(0, Math.min(t, maxTop) - 1));
         else if (key.downArrow || input === "j")
             setTop((t) => Math.min(maxTop, t + 1));
-        else if (key.pageUp || input === "u")
+        else if (key.pageUp)
             setTop((t) => Math.max(0, Math.min(t, maxTop) - rows));
         else if (key.pageDown || input === "d" || input === " ")
             setTop((t) => Math.min(maxTop, t + rows));
-        else if (input === "g")
+        else if (input === "g" || key.home)
             setTop(0);
-        else if (input === "G")
+        else if (input === "G" || key.end)
             setTop(maxTop);
+        else if (key.leftArrow || input === "h")
+            setLeft((l) => Math.max(0, l - SIDE_STEP));
+        else if (key.rightArrow || input === "l")
+            setLeft((l) => l + SIDE_STEP);
         else if (diff && !pending && (input === "n" || input === "N")) {
             // Jump between change hunks.
             const starts = diffRows.flatMap((r, i) => (r.changed && !diffRows[i - 1]?.changed ? [i] : []));
@@ -61,7 +80,7 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
                 setTop(Math.max(0, Math.min(maxTop, target - 3)));
         }
     }, { isActive: focused });
-    const scroll = total > rows ? `  ${start + 1}-${Math.min(total, start + rows)}/${total}` : "";
+    const scroll = (total > rows ? `  ${start + 1}-${Math.min(total, start + rows)}/${total}` : "") + (left ? `  →${left}` : "");
     const percent = total > rows ? Math.round(((start + rows) / total) * 100) : 100;
     if (diff) {
         const half = Math.floor((inner - 1) / 2);
@@ -72,11 +91,11 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
             if (!c)
                 return _jsx(Box, { width: w, children: _jsx(Text, { color: C.dim, wrap: "truncate-end", children: "╱".repeat(Math.max(0, w)) }) });
             const color = changed ? (side === "-" ? C.red : C.green) : undefined;
-            return (_jsx(Box, { width: w, children: _jsxs(Text, { wrap: "truncate-end", ...(color ? { color } : { color: C.dim }), children: [String(c.n).padStart(gutter - 1), changed ? side : " ", c.text || " "] }) }));
+            return (_jsx(Box, { width: w, children: _jsxs(Text, { wrap: "truncate-end", ...(color ? { color } : { color: C.dim }), children: [String(c.n).padStart(gutter - 1), changed ? side : " ", c.text.slice(left) || " "] }) }));
         };
         const { icon, color } = fileIcon(diff.path);
         const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", diff.path, "  ", _jsx(Text, { backgroundColor: pending ? C.yellow : C.accent2, color: "black", children: pending ? (diff.isNew ? " NEW FILE " : " PROPOSED ") : ` ${diffLabel.toUpperCase()} ` }), "  ", _jsxs(Text, { color: C.green, children: ["+", added] }), " ", _jsxs(Text, { color: C.red, children: ["-", removed] }), diffNote ? _jsxs(Text, { color: diffNote.startsWith("✓") ? C.green : C.red, children: ["  ", diffNote] }) : null, _jsxs(Text, { color: C.dim, children: [pending ? "   y accept · n reject" : "   n/N next/prev change", scroll] })] }));
-        return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, ...(pending ? { accent: C.yellow } : {}), children: _jsx(Box, { flexDirection: "column", children: diffRows.slice(start, start + rows).map((row, i) => (_jsxs(Box, { flexDirection: "row", children: [cell(row.left, "-", row.changed, half), _jsx(Text, { color: C.dim, children: "\u2502" }), cell(row.right, "+", row.changed, inner - half - 1)] }, start + i))) }) }));
+        return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, ...(pending ? { accent: C.yellow } : {}), children: _jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: diffRows.slice(start, start + rows).map((row, i) => (_jsxs(Box, { flexDirection: "row", children: [cell(row.left, "-", row.changed, half), _jsx(Text, { color: C.dim, children: "\u2502" }), cell(row.right, "+", row.changed, inner - half - 1)] }, start + i))) }), _jsx(Scrollbar, { total: total, top: start, rows: rows, focused: focused })] }) }));
     }
     if (!filePath) {
         const tips = [
@@ -92,13 +111,13 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
     const { icon, color } = fileIcon(filePath);
     const errorCount = problems.filter((d) => d.severity === "error").length;
     const warningCount = problems.filter((d) => d.severity === "warning").length;
-    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, errorCount > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", errorCount] }), warningCount > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", warningCount] }), _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused ? "   e edit · v diff" : ""] })] }));
-    return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsx(Box, { flexDirection: "column", children: lines.slice(start, start + rows).map((line, i) => {
-                const n = start + i + 1;
-                const isMarked = marked.has(n);
-                const here = problemsByLine.get(n);
-                const worst = here?.[0];
-                const style = worst ? SEVERITY_STYLE[worst.severity] : null;
-                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: style?.color ?? (isMarked ? C.green : C.dim), children: String(n).padStart(gutter) }), style ? _jsx(Text, { color: style.color, children: style.icon }) : _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), line || " ", worst && style ? _jsxs(Text, { color: style.color, dimColor: true, children: ["   ", style.icon, " ", worst.message, here.length > 1 ? ` (+${here.length - 1})` : ""] }) : null] }, n));
-            }) }) }));
-}
+    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, errorCount > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", errorCount] }), warningCount > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", warningCount] }), _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused ? "   click or e to edit · v diff" : ""] })] }));
+    return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: lines.slice(start, start + rows).map((line, i) => {
+                        const n = start + i + 1;
+                        const isMarked = marked.has(n);
+                        const here = problemsByLine.get(n);
+                        const worst = here?.[0];
+                        const style = worst ? SEVERITY_STYLE[worst.severity] : null;
+                        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: style?.color ?? (isMarked ? C.green : C.dim), children: String(n).padStart(gutter) }), style ? _jsx(Text, { color: style.color, children: style.icon }) : _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), (left ? plain[start + i]?.slice(left) : line) || " ", worst && style ? _jsxs(Text, { color: style.color, dimColor: true, children: ["   ", style.icon, " ", worst.message, here.length > 1 ? ` (+${here.length - 1})` : ""] }) : null] }, n));
+                    }) }), _jsx(Scrollbar, { total: total, top: start, rows: rows, focused: focused })] }) }));
+});