nou-cli 0.0.0-stage → 0.1.0

package/dist/src/ui/App.js

@@ -0,0 +1,432 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { readFileSync, writeFileSync } from "fs";
+import path from "path";
+import { Box, Text, useApp, useInput, useWindowSize } from "ink";
+import { Agent, buildSystemPrompt } from "../agent/index.js";
+import { describe, providers, resolveModel, saveModel } from "../providers/index.js";
+import { loadSettings, saveSettings } from "../config/index.js";
+import { branch as gitBranch, diffAgainstHead, isRepo, status as gitStatus, summary as gitSummary } from "../git/index.js";
+import { gitTools } from "../git/tools.js";
+import { discoverPlugins, loadPlugin } from "../plugins/index.js";
+import { changedLines } from "./text.js";
+import { C } from "./theme.js";
+import { FileTree } from "./FileTree.js";
+import { CodeView } from "./CodeView.js";
+import { Editor } from "./Editor.js";
+import { Chat } from "./Chat.js";
+import { Header } from "./Header.js";
+import { QuickOpen, listAllFiles } from "./QuickOpen.js";
+import { Settings } from "./Settings.js";
+const FOCUS_ORDER = ["tree", "code", "chat"];
+const NO_LINES = new Set();
+const HELP = `Commands:
+  /settings            models, preferences and plugins
+  /model               show providers and the current model
+  /model <provider[:model]>  switch, e.g. /model anthropic  /model ollama:qwen3:8b
+  /models [provider]   list models a provider offers
+  /clear               start a fresh conversation
+Keys:
+  Ctrl+P  find a file      Tab  switch pane      Esc  stop / back
+  e  edit open file        v    diff (git / Nou)  f   follow mode
+  c  (in files) show only changed files            s   settings`;
+function readText(filePath) {
+    try {
+        return readFileSync(path.resolve(process.cwd(), filePath), "utf-8");
+    }
+    catch {
+        return "";
+    }
+}
+export function App({ initialModel, permContext }) {
+    const { exit } = useApp();
+    const { columns, rows } = useWindowSize();
+    const [settings, setSettings] = useState(loadSettings);
+    const [view, setView] = useState("main");
+    const [quickOpen, setQuickOpen] = useState(false);
+    const [focus, setFocus] = useState("chat");
+    const [follow, setFollow] = useState(settings.followMode);
+    const [entries, setEntries] = useState([]);
+    const [streaming, setStreaming] = useState("");
+    const [busy, setBusy] = useState(null);
+    const [choice, setChoice] = useState(initialModel);
+    const [approval, setApproval] = useState(null);
+    const [openFile, setOpenFile] = useState(null);
+    const [content, setContent] = useState("");
+    const [reveal, setReveal] = useState(null);
+    const [treeVersion, setTreeVersion] = useState(0);
+    // The last change Nou made per file, so we can flag edited lines and re-open the diff.
+    const [changes, setChanges] = useState(new Map());
+    const [diffMode, setDiffMode] = useState("off");
+    const [editing, setEditing] = useState(false);
+    const [git, setGit] = useState(() => gitStatus());
+    const [plugins, setPlugins] = useState([]);
+    const [viewport, setViewport] = useState(null);
+    const [editorState, setEditorState] = useState(null);
+    // Unsaved editor text survives switching to a diff and back.
+    const draft = useRef(null);
+    const followRef = useRef(follow);
+    followRef.current = follow;
+    const settingsRef = useRef(settings);
+    settingsRef.current = settings;
+    const refreshGit = useCallback(() => setGit(gitStatus()), []);
+    const allFiles = useMemo(() => (quickOpen ? listAllFiles() : []), [quickOpen]);
+    const repo = useMemo(() => isRepo(), []);
+    const branch = useMemo(() => (repo ? gitBranch() : null), [repo, git]);
+    const open = useCallback((filePath) => {
+        setOpenFile(filePath);
+        setContent(readText(filePath));
+        setDiffMode("off");
+        setEditing(false);
+    }, []);
+    const agentRef = useRef(null);
+    if (!agentRef.current) {
+        agentRef.current = new Agent(initialModel, buildSystemPrompt(permContext), {
+            onEntry: (entry) => setEntries((prev) => [...prev, entry]),
+            onStream: setStreaming,
+            onBusy: setBusy,
+            onRead: (filePath) => {
+                if (!followRef.current)
+                    return;
+                open(filePath);
+                setReveal(filePath);
+            },
+            onChange: (change, status) => {
+                const lines = status === "applied" ? changedLines(change.before, change.after) : NO_LINES;
+                setChanges((prev) => new Map(prev).set(change.path, { change, status, lines }));
+                // Diffs awaiting approval are always shown, follow mode or not.
+                if (status === "pending" || followRef.current) {
+                    setOpenFile(change.path);
+                    setContent(status === "applied" ? change.after : readText(change.path));
+                    setDiffMode("off");
+                    setReveal(change.path);
+                }
+                if (status === "applied") {
+                    setTreeVersion((v) => v + 1);
+                    setGit(gitStatus());
+                    if (draft.current?.path === change.path) {
+                        setEntries((prev) => [...prev, { kind: "info", text: `Heads up: you have unsaved edits in ${change.path}; saving them will overwrite Nou's change.` }]);
+                    }
+                }
+            },
+            approve: (request) => {
+                const s = settingsRef.current;
+                if ((request.kind === "change" && s.autoApproveEdits) || (request.kind !== "change" && s.autoApproveCommands)) {
+                    return Promise.resolve(true);
+                }
+                return new Promise((resolve) => setApproval({ request, resolve }));
+            },
+        });
+    }
+    // Discover plugins once and load the enabled ones.
+    useEffect(() => {
+        void (async () => {
+            const found = discoverPlugins();
+            const enabled = loadSettings().plugins;
+            setPlugins(await Promise.all(found.map((p) => (enabled[p.id] ? loadPlugin(p) : p))));
+        })();
+    }, []);
+    const activePlugins = useMemo(() => plugins.filter((p) => settings.plugins[p.id] && p.plugin), [plugins, settings.plugins]);
+    // Keep the agent's system prompt and tools in sync with settings and plugins.
+    useEffect(() => {
+        const extras = [];
+        const extraTools = [];
+        if (settings.gitContext && repo) {
+            const summary = gitSummary();
+            if (summary)
+                extras.push(summary);
+            extraTools.push(...gitTools());
+        }
+        for (const { plugin } of activePlugins) {
+            if (plugin.systemPrompt)
+                extras.push(`Plugin ${plugin.name}: ${plugin.systemPrompt}`);
+            for (const tool of plugin.tools ?? []) {
+                extraTools.push({
+                    definition: tool.definition,
+                    readOnly: !!tool.readOnly,
+                    source: plugin.name,
+                    run: (args) => tool.run(args, { cwd: process.cwd() }),
+                });
+            }
+        }
+        agentRef.current.configure({ system: buildSystemPrompt(permContext, extras), extraTools, effort: settings.effort });
+    }, [settings.gitContext, settings.effort, activePlugins]);
+    // Pick up changes made outside Nou (other editors, git commands).
+    useEffect(() => {
+        if (!repo)
+            return;
+        const timer = setInterval(() => {
+            if (!busy)
+                setGit(gitStatus());
+        }, 4000);
+        return () => clearInterval(timer);
+    }, [repo, busy]);
+    useEffect(() => {
+        if (busy)
+            return;
+        refreshGit();
+        if (openFile && diffMode === "off" && !editing)
+            setContent(readText(openFile));
+    }, [busy]);
+    const updateSettings = (patch) => setSettings(saveSettings(patch));
+    const switchModel = (next) => {
+        const problem = next.provider.unavailable();
+        if (problem) {
+            setEntries((prev) => [...prev, { kind: "error", text: `${next.provider.label} isn't set up: ${problem}` }]);
+            return false;
+        }
+        agentRef.current.setModel(next);
+        setChoice(next);
+        saveModel(next);
+        setSettings(loadSettings());
+        setEntries((prev) => [...prev, { kind: "info", text: `Now using ${describe(next)}. The conversation carries over.` }]);
+        return true;
+    };
+    const togglePlugin = async (id, enabled) => {
+        updateSettings({ plugins: { ...settings.plugins, [id]: enabled } });
+        if (!enabled)
+            return;
+        const entry = plugins.find((p) => p.id === id);
+        if (entry && !entry.plugin) {
+            const loaded = await loadPlugin(entry);
+            setPlugins((prev) => prev.map((p) => (p.id === id ? loaded : p)));
+        }
+    };
+    const answer = (ok) => {
+        approval?.resolve(ok);
+        setApproval(null);
+    };
+    const record = openFile ? changes.get(openFile) : undefined;
+    const pendingChange = approval?.request.kind === "change" ? approval.request.change : null;
+    const gitChange = useMemo(() => (diffMode === "git" && openFile ? diffAgainstHead(openFile, content) : null), [diffMode, openFile, content]);
+    const diff = pendingChange ?? (diffMode === "git" ? gitChange : diffMode === "nou" && record ? record.change : null);
+    const showEditor = editing && !!openFile && !pendingChange;
+    const startEditing = () => {
+        if (!openFile)
+            return;
+        if (draft.current && draft.current.path !== openFile)
+            draft.current = null;
+        setDiffMode("off");
+        setEditing(true);
+        setFocus("code");
+    };
+    const cycleDiff = () => {
+        if (!openFile)
+            return;
+        const order = ["off"];
+        if (git.has(openFile))
+            order.push("git");
+        if (record?.status === "applied")
+            order.push("nou");
+        if (order.length === 1) {
+            setEntries((prev) => [...prev, { kind: "info", text: `${openFile} has no changes vs git HEAD.` }]);
+            return;
+        }
+        setEditing(false);
+        setDiffMode((m) => order[(order.indexOf(m) + 1) % order.length]);
+    };
+    useInput((input, key) => {
+        if (approval) {
+            if (input === "y" || input === "Y")
+                answer(true);
+            else if (input === "n" || input === "N")
+                answer(false);
+            else if (key.escape) {
+                agentRef.current?.cancel();
+                answer(false);
+            }
+            return;
+        }
+        if (key.ctrl && input === "p") {
+            setQuickOpen(true);
+            return;
+        }
+        if (showEditor && focus === "code")
+            return; // the editor owns the keyboard
+        if (key.tab) {
+            const step = key.shift ? -1 : 1;
+            setFocus((f) => FOCUS_ORDER[(FOCUS_ORDER.indexOf(f) + step + FOCUS_ORDER.length) % FOCUS_ORDER.length]);
+            return;
+        }
+        if (key.escape) {
+            if (busy)
+                agentRef.current?.cancel();
+            else if (diffMode !== "off")
+                setDiffMode("off");
+            else
+                setFocus("chat");
+            return;
+        }
+        if (focus === "chat")
+            return; // letters belong to the text box
+        if (input === "f")
+            setFollow((f) => !f);
+        else if (input === "v")
+            cycleDiff();
+        else if (input === "e")
+            startEditing();
+        else if (input === "s" || input === ",")
+            setView("settings");
+        else if (input === "r") {
+            refreshGit();
+            setTreeVersion((v) => v + 1);
+        }
+        else if (input === "q")
+            exit();
+    }, { isActive: view === "main" && !quickOpen });
+    /** What the user is looking at, attached to each message so "this file" / "here" make sense. */
+    const editorContext = () => {
+        if (!openFile)
+            return null;
+        const unsaved = showEditor && editorState?.dirty;
+        const lines = showEditor && editorState ? editorState.lines : content.replace(/\r\n/g, "\n").split("\n");
+        let from;
+        let to;
+        let where;
+        if (showEditor && editorState) {
+            from = Math.max(1, editorState.line - 15);
+            to = Math.min(lines.length, editorState.line + 15);
+            where = `cursor on line ${editorState.line}`;
+        }
+        else {
+            from = viewport?.top ?? 1;
+            to = Math.min(lines.length, viewport?.bottom ?? 40, from + 80);
+            where = `lines ${from}-${to} visible`;
+        }
+        const snippet = lines.slice(from - 1, to).map((l, i) => `${String(from + i).padStart(4)}| ${l}`).join("\n");
+        return `<editor_context>
+The user has ${openFile} open in the editor (${where}${unsaved ? "; they have unsaved edits, shown below" : ""}${git.get(openFile) ? `; git status ${git.get(openFile)}` : ""}).
+${snippet}
+</editor_context>`;
+    };
+    const contextChip = openFile
+        ? `${openFile}${showEditor && editorState ? `:${editorState.line}${editorState.dirty ? " ✎ unsaved" : ""}` : viewport ? `:${viewport.top}-${viewport.bottom}` : ""}`
+        : null;
+    const runCommand = async (input) => {
+        const [command, ...rest] = input.slice(1).split(/\s+/);
+        const arg = rest.join(" ").trim();
+        const info = (text, kind = "info") => setEntries((prev) => [...prev, { kind, text }]);
+        switch (command) {
+            case "settings":
+                setView("settings");
+                return;
+            case "model": {
+                if (!arg) {
+                    const list = providers.map((p) => {
+                        const problem = p.unavailable();
+                        return `${p.id === choice.provider.id ? "▸" : " "} ${p.id.padEnd(10)} ${p.local ? "local " : "cloud "} ${problem ? `(${problem})` : `default ${p.defaultModel}`}`;
+                    });
+                    info(`Current: ${describe(choice)}\n${list.join("\n")}\nSwitch with /model <provider[:model]> or open /settings`);
+                    return;
+                }
+                switchModel(resolveModel(arg));
+                return;
+            }
+            case "models": {
+                const provider = arg ? providers.find((p) => p.id === arg) : choice.provider;
+                if (!provider)
+                    return info(`Unknown provider "${arg}". Try /model to see them.`, "error");
+                setBusy(`Listing ${provider.id} models...`);
+                try {
+                    const models = await provider.listModels();
+                    info(models.length ? `${provider.id} models:\n${models.slice(0, 60).map((m) => `  ${provider.id}:${m}`).join("\n")}` : `${provider.id} has no models.`);
+                }
+                catch (error) {
+                    info(`Couldn't list ${provider.id} models: ${error.message}`, "error");
+                }
+                finally {
+                    setBusy(null);
+                }
+                return;
+            }
+            case "clear":
+                agentRef.current.clear();
+                setEntries([]);
+                return;
+            case "help":
+                return info(HELP);
+            default: {
+                for (const { plugin } of activePlugins) {
+                    const found = plugin.commands?.find((c) => c.name === command);
+                    if (!found)
+                        continue;
+                    try {
+                        const out = await found.run(arg, { cwd: process.cwd() });
+                        if (out)
+                            info(out);
+                    }
+                    catch (error) {
+                        info(`/${command}: ${error.message}`, "error");
+                    }
+                    return;
+                }
+                return info(`Unknown command /${command}. Type /help.`, "error");
+            }
+        }
+    };
+    const send = (text) => {
+        if (text.startsWith("/")) {
+            void runCommand(text);
+            return;
+        }
+        setEntries((prev) => [...prev, { kind: "user", text }]);
+        void agentRef.current.send(text, editorContext() ?? undefined);
+    };
+    const saveFromEditor = (text) => {
+        if (!openFile)
+            return;
+        try {
+            writeFileSync(path.resolve(process.cwd(), openFile), text, "utf-8");
+            setContent(text);
+            draft.current = null;
+            setTreeVersion((v) => v + 1);
+            refreshGit();
+        }
+        catch (error) {
+            setEntries((prev) => [...prev, { kind: "error", text: `Couldn't save ${openFile}: ${error.message}` }]);
+        }
+    };
+    if (view === "settings") {
+        return (_jsx(Settings, { width: columns, height: rows, settings: settings, choice: choice, plugins: plugins, onModel: (next) => switchModel(next), onChange: updateSettings, onTogglePlugin: (id, enabled) => void togglePlugin(id, enabled), onRescanPlugins: () => {
+                const found = discoverPlugins();
+                setPlugins((prev) => found.map((f) => prev.find((p) => p.id === f.id && p.plugin) ?? f));
+            }, onClose: () => setView("main") }));
+    }
+    const height = Math.max(10, rows - 2);
+    const treeWidth = Math.max(24, Math.floor(columns * 0.2));
+    const chatWidth = Math.max(34, Math.floor(columns * 0.3));
+    const codeWidth = Math.max(20, columns - treeWidth - chatWidth);
+    const edited = new Set([...changes].filter(([, c]) => c.status === "applied").map(([p]) => p));
+    const mode = approval
+        ? { label: "APPROVE", color: C.yellow }
+        : showEditor ? { label: "EDIT", color: C.green }
+            : diff ? { label: "DIFF", color: C.accent2 }
+                : busy ? { label: "WORKING", color: C.accent2 }
+                    : { label: focus.toUpperCase(), color: C.accent };
+    const hints = approval
+        ? "y accept · n reject · Esc stop"
+        : showEditor && focus === "code"
+            ? "Ctrl+S save · Ctrl+Z undo · Esc close editor · Ctrl+P find file"
+            : focus === "chat"
+                ? busy ? "Esc stop · Tab switch pane" : "Enter send · / commands · Ctrl+P find file · Tab switch pane"
+                : focus === "tree"
+                    ? "↑↓ move · Enter open · c changes · e edit · Ctrl+P find · s settings · q quit"
+                    : diff ? "n/N next/prev change · v cycle diff · Esc close diff" : "↑↓ scroll · e edit · v diff · f follow · s settings · q quit";
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Header, { width: columns, branch: branch, changes: git.size, model: describe(choice), local: choice.provider.local, busy: busy }), _jsxs(Box, { flexDirection: "row", height: height, children: [_jsx(FileTree, { width: treeWidth, height: height, focused: focus === "tree" && !approval, openFile: openFile, reveal: reveal, version: treeVersion, changed: edited, git: git, onOpen: (filePath) => {
+                            open(filePath);
+                            setFocus("code");
+                        }, onHover: () => { } }), showEditor ? (_jsx(Editor, { width: codeWidth, height: height, focused: focus === "code", filePath: openFile, initial: draft.current?.path === openFile ? draft.current.text : content, baseline: draft.current?.path === openFile ? draft.current.baseline : content, onSave: saveFromEditor, onExit: () => {
+                            draft.current = null;
+                            setEditing(false);
+                        }, onState: (state) => {
+                            setEditorState(state);
+                            draft.current = state.dirty
+                                ? { path: openFile, text: state.lines.join("\n"), baseline: draft.current?.path === openFile ? draft.current.baseline : content }
+                                : null;
+                        } }, openFile)) : (_jsx(CodeView, { width: codeWidth, height: height, focused: focus === "code" && !approval, filePath: openFile, content: content, diff: diff, diffLabel: diffMode === "git" ? "vs HEAD" : "Nou's edit", pending: !!pendingChange, marked: record?.lines ?? NO_LINES, onViewport: (top, bottom) => setViewport((v) => (v?.top === top && v.bottom === bottom ? v : { top, bottom })) })), _jsx(Chat, { width: chatWidth, height: height, focused: focus === "chat", entries: entries, streaming: streaming, busy: busy, approval: approval?.request ?? null, contextChip: contextChip, onSubmit: send })] }), _jsx(Box, { children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { backgroundColor: mode.color, color: "black", bold: true, children: ` ${mode.label} ` }), _jsx(Text, { backgroundColor: C.panel, color: follow ? C.green : C.dim, children: follow ? " ◉ follow " : " ○ follow " }), _jsxs(Text, { color: C.dim, children: ["  ", hints] })] }) }), quickOpen && (_jsx(QuickOpen, { width: columns, top: 3, files: allFiles, onPick: (file) => {
+                    setQuickOpen(false);
+                    open(file);
+                    setReveal(file);
+                    setFocus("code");
+                }, onClose: () => setQuickOpen(false) }))] }));
+}

package/dist/src/ui/Chat.js

@@ -0,0 +1,90 @@
+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 TextInput from "ink-text-input";
+import { wrap } from "./text.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, 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 });
+        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 rows = Math.max(1, height - 3 - footer.length - 3);
+    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)) }), _jsxs(Box, { height: 1, overflow: "hidden", children: [_jsx(Text, { color: focused ? C.accent2 : C.dim, bold: true, children: "❯ " }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !approval, placeholder: busy ? "working… Esc to stop" : "Ask anything · / for commands" })] })] }));
+}

package/dist/src/ui/CodeView.js

@@ -0,0 +1,84 @@
+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 { 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, 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]);
+    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]);
+    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] }), _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 title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, _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);
+                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: isMarked ? C.green : C.dim, children: String(n).padStart(gutter) }), _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), line || " "] }, n));
+            }) }) }));
+}