nou-cli 0.0.0-stage → 0.2.0

package/dist/src/ui/Chat.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text, useAnimation, useInput } from "ink";
+import { wrap } from "./text.js";
+import { ChatInput, inputHeight } from "./ChatInput.js";
+import { C, SPINNER } from "./theme.js";
+import { Pane } from "./Pane.js";
+export const COMMANDS = ["/model", "/models", "/settings", "/clear", "/help"];
+export function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, onSubmit }) {
+    const [input, setInput] = useState("");
+    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 wrap(entry.text, inner - 3)) {
+                    const isCode = /^\s{2,}|^```|^\s*[{}();]/.test(line);
+                    out.push({ text: line, ...(isCode ? { color: C.yellow } : {}), 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 footer = [];
+    if (approval?.kind === "command") {
+        footer.push({ text: "⚡ Run this command?", color: C.yellow, bold: true });
+        for (const line of wrap(`$ ${approval.command}`, inner - 2))
+            footer.push({ text: ` ${line}`, color: C.text });
+        footer.push({ text: " [y] allow   [n] deny   [Esc] stop", color: C.yellow });
+    }
+    else if (approval?.kind === "tool") {
+        footer.push({ text: `🔌 Plugin tool: ${approval.name}`, color: C.yellow, bold: true });
+        for (const line of wrap(JSON.stringify(approval.args), inner - 2).slice(0, 4))
+            footer.push({ text: ` ${line}`, color: C.text });
+        footer.push({ text: " [y] allow   [n] deny   [Esc] stop", color: C.yellow });
+    }
+    else if (approval?.kind === "change") {
+        footer.push({ text: `✎ Review ${approval.change.path} →`, color: C.yellow, bold: true });
+        if (approvalNote) {
+            footer.push({ text: "⚠ This edit adds problems:", color: C.red, bold: true });
+            for (const line of wrap(approvalNote, inner - 2).slice(0, 6))
+                footer.push({ text: ` ${line}`, color: C.red });
+        }
+        footer.push({ text: " [y] accept   [n] reject   [Esc] stop", color: C.yellow });
+    }
+    else if (busy) {
+        footer.push({ text: `${SPINNER[frame % SPINNER.length]} ${busy}`, color: C.accent2 });
+    }
+    const suggestions = input.startsWith("/") && !input.includes(" ")
+        ? COMMANDS.filter((c) => c.startsWith(input) && c !== input)
+        : [];
+    const inputRows = inputHeight(input, inner);
+    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 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);
+    useInput((_input, key) => {
+        if (key.pageUp || (key.upArrow && key.shift))
+            setScrollBack((b) => Math.min(maxBack, b + Math.max(1, rows - 2)));
+        else if (key.pageDown || (key.downArrow && key.shift))
+            setScrollBack((b) => Math.max(0, b - Math.max(1, rows - 2)));
+    }, { isActive: focused });
+    const submit = (value) => {
+        if (!value.trim() || busy || approval)
+            return;
+        // "/se" + Enter runs /settings when only one command matches.
+        const command = !COMMANDS.includes(value.trim()) && suggestions.length === 1 ? suggestions[0] : value.trim();
+        setInput("");
+        onSubmit(command);
+    };
+    const render = (line, key) => (_jsxs(Text, { wrap: "truncate-end", children: [line.bar ? _jsx(Text, { color: line.bar, children: "\u258C " }) : null, _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.dim, children: [" \u2191", back, " more"] }) : 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
+                    ? _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, width: inner, history: history, placeholder: busy ? "working… Esc to stop" : "Ask anything · / for commands · ↑ history" })] }));
+}

package/dist/src/ui/ChatInput.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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. */
+export function layout(text, width) {
+    const w = Math.max(1, width);
+    const segments = [];
+    let pos = 0;
+    while (pos <= text.length) {
+        const newline = text.indexOf("\n", pos);
+        const lineEnd = newline === -1 ? text.length : newline;
+        if (lineEnd - pos <= w) {
+            segments.push({ start: pos, end: lineEnd });
+            if (newline === -1)
+                break;
+            pos = newline + 1;
+            continue;
+        }
+        // Break after the last space that fits, or hard-break a long word.
+        const space = text.lastIndexOf(" ", pos + w - 1);
+        const end = space >= pos ? space + 1 : pos + w;
+        segments.push({ start: pos, end });
+        pos = end;
+    }
+    return segments;
+}
+/** The segment the cursor sits in; a cursor at a wrap boundary belongs to the next line. */
+function cursorLine(segments, cursor) {
+    for (let i = 0; i < segments.length; i++) {
+        const s = segments[i];
+        const next = segments[i + 1];
+        if (cursor >= s.start && (cursor < s.end || (cursor === s.end && (!next || next.start > s.end))))
+            return i;
+    }
+    return segments.length - 1;
+}
+export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder, history, maxLines = 6 }) {
+    const [cursor, setCursor] = useState(value.length);
+    const [recall, setRecall] = useState(null);
+    const stash = useRef("");
+    const textWidth = Math.max(4, width - 2);
+    const pos = Math.min(cursor, value.length);
+    const segments = layout(value, textWidth);
+    const line = cursorLine(segments, pos);
+    const set = (next, nextCursor) => {
+        onChange(next);
+        setCursor(Math.max(0, Math.min(next.length, nextCursor)));
+    };
+    const insert = (text) => set(value.slice(0, pos) + text + value.slice(pos), pos + text.length);
+    const recallHistory = (step) => {
+        if (!history.length)
+            return false;
+        const current = recall ?? history.length;
+        const next = current + step;
+        if (next < 0 || next > history.length)
+            return false;
+        if (recall === null)
+            stash.current = value;
+        const text = next === history.length ? stash.current : history[next];
+        setRecall(next === history.length ? null : next);
+        set(text, text.length);
+        return true;
+    };
+    usePaste((text) => insert(text.replace(/\r\n?/g, "\n")), { isActive: focus });
+    useInput((input, key) => {
+        if (key.tab || key.escape || key.pageUp || key.pageDown || (key.shift && (key.upArrow || key.downArrow)))
+            return;
+        if (key.return) {
+            setRecall(null);
+            onSubmit(value);
+            return;
+        }
+        if (key.backspace)
+            return pos > 0 && set(value.slice(0, pos - 1) + value.slice(pos), pos - 1);
+        if (key.delete)
+            return pos < value.length && set(value.slice(0, pos) + value.slice(pos + 1), pos);
+        if (key.leftArrow)
+            return setCursor(key.ctrl || key.meta ? value.lastIndexOf(" ", pos - 2) + 1 : pos - 1 < 0 ? 0 : pos - 1);
+        if (key.rightArrow) {
+            if (key.ctrl || key.meta) {
+                const next = value.indexOf(" ", pos + 1);
+                return setCursor(next === -1 ? value.length : next);
+            }
+            return setCursor(Math.min(value.length, pos + 1));
+        }
+        if (key.home || (key.ctrl && input === "a"))
+            return setCursor(segments[line].start);
+        if (key.end || (key.ctrl && input === "e"))
+            return setCursor(segments[line].end);
+        if (key.ctrl && input === "u")
+            return set("", 0);
+        if (key.upArrow || key.downArrow) {
+            const target = line + (key.upArrow ? -1 : 1);
+            if (target >= 0 && target < segments.length) {
+                // Move between wrapped lines, keeping the column.
+                const col = pos - segments[line].start;
+                const s = segments[target];
+                return setCursor(Math.min(s.start + col, s.end));
+            }
+            recallHistory(key.upArrow ? -1 : 1);
+            return;
+        }
+        if (key.ctrl || key.meta || !input)
+            return;
+        insert(input.replace(/\r\n?/g, "\n"));
+    }, { isActive: focus });
+    // Show a window of lines around the cursor once the message gets long.
+    const first = Math.max(0, Math.min(line - maxLines + 1, segments.length - maxLines));
+    const shown = segments.slice(first, first + maxLines);
+    const prompt = (i) => (_jsx(Text, { color: focus ? C.accent2 : C.dim, bold: true, children: first + i === 0 ? "❯ " : first > 0 && i === 0 ? "↑ " : "  " }));
+    if (!value) {
+        return (_jsxs(Box, { children: [prompt(0), focus ? _jsx(Text, { inverse: true, children: " " }) : null, _jsx(Text, { color: C.dim, wrap: "truncate-end", children: placeholder })] }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: shown.map((s, i) => {
+            const text = value.slice(s.start, s.end).replace(/\n/g, "");
+            const isCursor = focus && first + i === line;
+            if (!isCursor) {
+                return _jsxs(Text, { children: [prompt(i), _jsx(Text, { color: C.text, children: text || " " })] }, first + i);
+            }
+            const at = pos - s.start;
+            return (_jsxs(Text, { children: [prompt(i), _jsx(Text, { color: C.text, children: text.slice(0, at) }), _jsx(Text, { inverse: true, children: text[at] ?? " " }), _jsx(Text, { color: C.text, children: text.slice(at + 1) })] }, first + i));
+        }) }));
+}
+/** How many rows the input will take, so the chat can size its history above it. */
+export function inputHeight(value, width, maxLines = 6) {
+    return value ? Math.min(maxLines, layout(value, Math.max(4, width - 2)).length) : 1;
+}

package/dist/src/ui/CodeView.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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 { 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, onViewport }) {
+    const [top, setTop] = useState(0);
+    const rows = Math.max(1, height - 3);
+    const inner = width - 2;
+    const lines = useMemo(() => (filePath ? highlightLines(filePath, content) : []), [filePath, content, syntaxVersion]);
+    const problemsByLine = useMemo(() => {
+        const map = new Map();
+        for (const d of problems)
+            map.set(d.line, [...(map.get(d.line) ?? []), d]);
+        return map;
+    }, [problems]);
+    const diffRows = useMemo(() => (diff ? sideBySide(diff.before, diff.after) : []), [diff]);
+    const total = diff ? diffRows.length : lines.length;
+    // Jump to the first change whenever a new file or diff is shown.
+    useEffect(() => {
+        const first = diff
+            ? diffRows.findIndex((r) => r.changed)
+            : marked.size ? Math.min(...marked) - 1 : 0;
+        setTop(Math.max(0, first - 3));
+    }, [filePath, diff, diffRows, marked]);
+    useEffect(() => {
+        if (focusLine && !diff)
+            setTop(Math.max(0, focusLine.line - Math.floor(rows / 3)));
+    }, [focusLine]);
+    const maxTop = Math.max(0, total - rows);
+    const start = Math.min(top, maxTop);
+    useEffect(() => {
+        if (filePath && !diff)
+            onViewport(start + 1, Math.min(total, start + rows));
+    }, [filePath, diff, start, rows, total]);
+    useInput((input, key) => {
+        if (key.upArrow || input === "k")
+            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")
+            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")
+            setTop(0);
+        else if (input === "G")
+            setTop(maxTop);
+        else if (diff && (input === "n" || input === "N")) {
+            // Jump between change hunks.
+            const starts = diffRows.flatMap((r, i) => (r.changed && !diffRows[i - 1]?.changed ? [i] : []));
+            const target = input === "n" ? starts.find((s) => s - 3 > start) : [...starts].reverse().find((s) => s - 3 < start);
+            if (target !== undefined)
+                setTop(Math.max(0, Math.min(maxTop, target - 3)));
+        }
+    }, { isActive: focused });
+    const scroll = total > rows ? `  ${start + 1}-${Math.min(total, start + rows)}/${total}` : "";
+    const percent = total > rows ? Math.round(((start + rows) / total) * 100) : 100;
+    if (diff) {
+        const half = Math.floor((inner - 1) / 2);
+        const gutter = String(diffRows.length).length + 1;
+        const added = diffRows.filter((r) => r.changed && r.right).length;
+        const removed = diffRows.filter((r) => r.changed && r.left).length;
+        const cell = (c, side, changed, w) => {
+            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 || " "] }) }));
+        };
+        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))) }) }));
+    }
+    if (!filePath) {
+        const tips = [
+            ["Ctrl+P", "find a file"],
+            ["Tab", "switch panes"],
+            ["e", "edit the open file"],
+            ["v", "diff vs git HEAD"],
+            ["/settings", "models, preferences, plugins"],
+        ];
+        return (_jsx(Pane, { title: _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u2726" }), " Welcome"] }), width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [inner > 62 && artWork.split("\n").filter((l) => l.trim()).map((line, i) => (_jsx(Text, { children: gradient(line, i).map((g, j) => _jsx(Text, { color: g.color, children: g.ch }, j)) }, i))), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: C.text, children: "Hello, I am Nou! \uD83C\uDF1E  Your terminal coding companion." }), _jsx(Text, { color: C.dim, children: "Ask in the chat on the right. Files I read or edit open here as I work." }), _jsx(Text, { children: " " }), tips.map(([k, d]) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: C.accent, bold: true, children: k.padEnd(10) }), _jsx(Text, { color: C.dim, children: d })] }, k)))] }) }));
+    }
+    const gutter = String(lines.length).length;
+    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));
+            }) }) }));
+}

package/dist/src/ui/Editor.js

@@ -0,0 +1,234 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import { highlightLines } from "./text.js";
+import { C, fileIcon } from "./theme.js";
+import { SEVERITY_STYLE } from "./ProblemsView.js";
+import { Pane } from "./Pane.js";
+const expand = (s) => s.replace(/\t/g, "  ");
+/** A small modal text editor: arrows to move, type to insert, Ctrl+S save, Ctrl+Z undo, Esc leave. */
+export function Editor({ width, height, focused, filePath, initial, baseline, startLine, problems, autoSave, syntaxVersion, onSave, onExit, onState, onHover, onDefinition }) {
+    const eol = useMemo(() => (baseline.includes("\r\n") ? "\r\n" : "\n"), [baseline]);
+    const indentUnit = useMemo(() => (/^\t/m.test(initial) ? "\t" : "  "), [initial]);
+    const [buf, setBuf] = useState(() => {
+        const lines = initial.replace(/\r\n/g, "\n").split("\n");
+        const row = Math.max(0, Math.min(lines.length - 1, (startLine ?? 1) - 1));
+        return { lines, row, col: lines[row].match(/^\s*/)[0].length };
+    });
+    const [hover, setHover] = useState(null);
+    const [saved, setSaved] = useState(() => baseline.replace(/\r\n/g, "\n"));
+    const [confirmExit, setConfirmExit] = useState(false);
+    const [flash, setFlash] = useState(null);
+    const undo = useRef([]);
+    const redo = useRef([]);
+    // Consecutive typing within a word is one undo step, like VS Code.
+    const lastEdit = useRef({ kind: "", time: 0 });
+    const view = useRef({ top: 0, left: 0 });
+    const dirty = useMemo(() => buf.lines.join("\n") !== saved, [buf.lines, saved]);
+    useEffect(() => onState({ line: buf.row + 1, col: buf.col + 1, dirty, lines: buf.lines }), [buf, dirty]);
+    useEffect(() => {
+        if (!flash)
+            return;
+        const t = setTimeout(() => setFlash(null), 1500);
+        return () => clearTimeout(t);
+    }, [flash]);
+    const edit = (fn, kind = "other") => setBuf((b) => {
+        const now = Date.now();
+        const grouped = kind !== "other" && kind === lastEdit.current.kind && now - lastEdit.current.time < 1000;
+        if (!grouped) {
+            undo.current.push(b);
+            if (undo.current.length > 500)
+                undo.current.shift();
+        }
+        redo.current = [];
+        lastEdit.current = { kind, time: now };
+        return fn(b);
+    });
+    const step = (from, to) => setBuf((b) => {
+        const target = from.current.pop();
+        if (!target)
+            return b;
+        to.current.push(b);
+        lastEdit.current = { kind: "", time: 0 };
+        return target;
+    });
+    const insert = (text, kind = "other") => edit((b) => {
+        const pieces = text.replace(/\r\n?/g, "\n").split("\n");
+        const line = b.lines[b.row];
+        const before = line.slice(0, b.col);
+        const after = line.slice(b.col);
+        const lines = [...b.lines];
+        if (pieces.length === 1) {
+            lines[b.row] = before + text + after;
+            return { lines, row: b.row, col: b.col + text.length };
+        }
+        const last = pieces[pieces.length - 1];
+        lines.splice(b.row, 1, before + pieces[0], ...pieces.slice(1, -1), last + after);
+        return { lines, row: b.row + pieces.length - 1, col: last.length };
+    }, kind);
+    const move = (fn) => setBuf((b) => {
+        const next = { ...b, ...fn(b) };
+        next.row = Math.max(0, Math.min(next.lines.length - 1, next.row));
+        next.col = Math.max(0, Math.min(next.lines[next.row].length, next.col));
+        return next;
+    });
+    const save = (auto = false) => {
+        const text = buf.lines.join("\n");
+        onSave(text.replace(/\n/g, eol));
+        setSaved(text);
+        setFlash(auto ? "Auto-saved ✓" : "Saved ✓");
+    };
+    // Auto-save: a second after you stop typing, or when you leave the editor.
+    useEffect(() => {
+        if (autoSave !== "delay" || !dirty)
+            return;
+        const timer = setTimeout(() => save(true), 1000);
+        return () => clearTimeout(timer);
+    }, [buf.lines, dirty, autoSave]);
+    useEffect(() => {
+        if (autoSave !== "off" && !focused && dirty)
+            save(true);
+    }, [focused]);
+    const position = () => ({ text: buf.lines.join("\n"), line: buf.row + 1, col: buf.col + 1 });
+    const rows = Math.max(1, height - 4);
+    usePaste((text) => insert(text), { isActive: focused });
+    useInput((input, key) => {
+        if (confirmExit) {
+            if (key.escape)
+                onExit();
+            else if (key.ctrl && input === "s") {
+                save();
+                onExit();
+            }
+            else
+                setConfirmExit(false);
+            return;
+        }
+        if (hover)
+            setHover(null);
+        if (key.ctrl && input === "c")
+            return; // the app handles Ctrl+C (press twice to quit)
+        if (key.ctrl && input === "s")
+            return save();
+        if (key.ctrl && input === "z")
+            return step(undo, redo);
+        if (key.ctrl && input === "y")
+            return step(redo, undo);
+        if (key.ctrl && input === "k") {
+            const { text, line, col } = position();
+            setFlash("…");
+            void onHover(text, line, col).then((info) => {
+                setFlash(null);
+                setHover(info ?? "No info here (needs a language server for this file type).");
+            });
+            return;
+        }
+        if (key.ctrl && input === "g") {
+            const { text, line, col } = position();
+            return onDefinition(text, line, col);
+        }
+        if (key.escape) {
+            if (dirty && autoSave !== "off") {
+                save(true);
+                return onExit();
+            }
+            return dirty ? setConfirmExit(true) : onExit();
+        }
+        if (key.upArrow)
+            return move((b) => ({ row: b.row - 1 }));
+        if (key.downArrow)
+            return move((b) => ({ row: b.row + 1 }));
+        if (key.leftArrow) {
+            return move((b) => (b.col > 0 ? { col: b.col - 1 } : b.row > 0 ? { row: b.row - 1, col: b.lines[b.row - 1].length } : {}));
+        }
+        if (key.rightArrow) {
+            return move((b) => (b.col < b.lines[b.row].length ? { col: b.col + 1 } : b.row < b.lines.length - 1 ? { row: b.row + 1, col: 0 } : {}));
+        }
+        if (key.home)
+            return move((b) => ({ col: b.lines[b.row].match(/^\s*/)[0].length === b.col ? 0 : b.lines[b.row].match(/^\s*/)[0].length }));
+        if (key.end)
+            return move((b) => ({ col: b.lines[b.row].length }));
+        if (key.pageUp)
+            return move((b) => ({ row: b.row - rows }));
+        if (key.pageDown)
+            return move((b) => ({ row: b.row + rows }));
+        if (key.return) {
+            const indent = buf.lines[buf.row].match(/^\s*/)[0];
+            return insert(`\n${indent}`);
+        }
+        if (key.tab)
+            return insert(indentUnit);
+        if (key.backspace) {
+            return edit((b) => {
+                const lines = [...b.lines];
+                if (b.col > 0) {
+                    const line = lines[b.row];
+                    lines[b.row] = line.slice(0, b.col - 1) + line.slice(b.col);
+                    return { lines, row: b.row, col: b.col - 1 };
+                }
+                if (b.row === 0)
+                    return b;
+                const prev = lines[b.row - 1];
+                lines.splice(b.row - 1, 2, prev + lines[b.row]);
+                return { lines, row: b.row - 1, col: prev.length };
+            }, "delete");
+        }
+        if (key.delete) {
+            return edit((b) => {
+                const lines = [...b.lines];
+                const line = lines[b.row];
+                if (b.col < line.length)
+                    lines[b.row] = line.slice(0, b.col) + line.slice(b.col + 1);
+                else if (b.row < lines.length - 1)
+                    lines.splice(b.row, 2, line + lines[b.row + 1]);
+                return { ...b, lines };
+            });
+        }
+        // Letters/digits group into one undo step per word; spaces and punctuation start a new one.
+        if (input && !key.ctrl && !key.meta)
+            insert(input, /^\w+$/.test(input) ? "type" : "other");
+    }, { isActive: focused });
+    // Keep the cursor on screen.
+    const gutter = String(buf.lines.length).length + 2;
+    const textWidth = Math.max(10, width - 2 - gutter);
+    const v = view.current;
+    if (buf.row < v.top)
+        v.top = buf.row;
+    if (buf.row >= v.top + rows)
+        v.top = buf.row - rows + 1;
+    const cursorX = expand(buf.lines[buf.row].slice(0, buf.col)).length;
+    if (cursorX < v.left)
+        v.left = Math.max(0, cursorX - 8);
+    if (cursorX >= v.left + textWidth)
+        v.left = cursorX - textWidth + 8;
+    const visible = buf.lines.slice(v.top, v.top + rows);
+    const colored = useMemo(
+    // Scrolled sideways: every line shifts by the same amount as the cursor line (plain text, since
+    // slicing highlighted text could cut a color code in half).
+    () => (v.left === 0 ? highlightLines(filePath, visible.join("\n")) : visible.map((l) => expand(l).slice(v.left, v.left + textWidth))), [filePath, visible.join("\n"), v.left, textWidth, syntaxVersion]);
+    const { icon, color } = fileIcon(filePath);
+    const byLine = new Map();
+    for (const d of problems)
+        byLine.set(d.line, [...(byLine.get(d.line) ?? []), d]);
+    const cursorProblem = byLine.get(buf.row + 1)?.[0];
+    const status = confirmExit
+        ? "Unsaved changes! Ctrl+S save & close · Esc discard · any key keep editing"
+        : flash ?? (cursorProblem
+            ? `${SEVERITY_STYLE[cursorProblem.severity].icon} ${cursorProblem.message} (${cursorProblem.source})`
+            : `Ln ${buf.row + 1}, Col ${buf.col + 1}${dirty ? "  ● modified" : ""}`);
+    const statusColor = confirmExit ? C.red : flash ? C.green : cursorProblem ? SEVERITY_STYLE[cursorProblem.severity].color : C.dim;
+    const hoverLines = hover ? hover.split("\n").filter((l) => l.trim()).slice(0, 6) : [];
+    return (_jsxs(Pane, { title: _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, dirty ? _jsx(Text, { color: C.yellow, children: " \u25CF" }) : "", "  ", _jsx(Text, { backgroundColor: C.green, color: "black", children: " \u270E EDITING " })] }), width: width, height: height, focused: focused, accent: C.green, children: [_jsx(Box, { flexDirection: "column", height: rows, children: visible.map((line, i) => {
+                    const n = v.top + i;
+                    const isCursorLine = n === buf.row;
+                    const problem = byLine.get(n + 1)?.[0];
+                    const mark = problem ? SEVERITY_STYLE[problem.severity] : null;
+                    const num = (_jsxs(Text, { color: mark?.color ?? (isCursorLine ? C.green : C.dim), children: [String(n + 1).padStart(gutter - 2), mark ? ` ${mark.icon}` : isCursorLine ? " ▸" : "  "] }));
+                    if (!isCursorLine) {
+                        return _jsxs(Text, { wrap: "truncate-end", children: [num, colored[i] || " "] }, n);
+                    }
+                    const shown = expand(line).slice(v.left, v.left + textWidth);
+                    const at = cursorX - v.left;
+                    return (_jsxs(Text, { wrap: "truncate-end", children: [num, _jsx(Text, { color: C.text, children: shown.slice(0, at) }), _jsx(Text, { inverse: true, color: C.green, children: shown[at] ?? " " }), _jsx(Text, { color: C.text, children: shown.slice(at + 1) })] }, n));
+                }) }), hoverLines.length > 0 && (_jsx(Box, { position: "absolute", top: Math.max(1, rows - hoverLines.length - 1), left: gutter + 1, flexDirection: "column", borderStyle: "round", borderColor: C.accent2, width: Math.min(width - gutter - 3, 2 + Math.max(...hoverLines.map((l) => l.length))), children: hoverLines.map((l, i) => _jsx(Text, { color: C.text, wrap: "truncate-end", children: l.padEnd(width) }, i)) })), _jsxs(Text, { wrap: "truncate-end", color: statusColor, children: [` ${status}`, _jsx(Text, { color: C.dim, children: confirmExit ? "" : `   Ctrl+S save${autoSave === "off" ? "" : " (auto)"} · Ctrl+Z/Y undo/redo · Ctrl+K info · Ctrl+G definition · Esc close` })] })] }));
+}