nou-cli 0.0.0-stage → 0.2.0

package/dist/src/ui/FileTree.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { readdirSync } from "fs";
+import path from "path";
+import { Box, Text, useInput } from "ink";
+import { IGNORED } from "../commands/index.js";
+import { C, GIT_COLORS, fileIcon } from "./theme.js";
+import { Pane } from "./Pane.js";
+function listDir(dir) {
+    try {
+        return readdirSync(path.resolve(process.cwd(), dir), { withFileTypes: true })
+            .filter((e) => !IGNORED.has(e.name))
+            .map((e) => ({ name: e.name, isDir: e.isDirectory() }))
+            .sort((a, b) => Number(b.isDir) - Number(a.isDir) || a.name.localeCompare(b.name));
+    }
+    catch {
+        return [];
+    }
+}
+function flatten(expanded) {
+    const nodes = [];
+    const walk = (dir, depth) => {
+        for (const entry of listDir(dir)) {
+            const rel = dir === "." ? entry.name : `${dir}/${entry.name}`;
+            nodes.push({ path: rel, name: entry.name, depth, isDir: entry.isDir });
+            if (entry.isDir && expanded.has(rel))
+                walk(rel, depth + 1);
+        }
+    };
+    walk(".", 0);
+    return nodes;
+}
+export function FileTree({ width, height, focused, openFile, reveal, version, changed, git, problemCounts, onOpen, onHover }) {
+    const [expanded, setExpanded] = useState(() => new Set(["src"]));
+    const [cursor, setCursor] = useState(0);
+    const [changesOnly, setChangesOnly] = useState(false);
+    const nodes = useMemo(() => {
+        if (!changesOnly)
+            return flatten(expanded);
+        return [...new Set([...git.keys(), ...changed])].sort().map((p) => ({ path: p, name: p, depth: 0, isDir: false }));
+    }, [expanded, version, changesOnly, git, changed]);
+    const rows = Math.max(1, height - 3);
+    // Folders that contain git changes get a dot.
+    const dirtyDirs = useMemo(() => {
+        const dirs = new Set();
+        for (const file of git.keys()) {
+            const parts = file.split("/");
+            for (let i = 1; i < parts.length; i++)
+                dirs.add(parts.slice(0, i).join("/"));
+        }
+        return dirs;
+    }, [git]);
+    // Expand the folders leading to whatever the agent is touching and move to it.
+    useEffect(() => {
+        if (!reveal)
+            return;
+        const parts = reveal.split("/");
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            for (let i = 1; i < parts.length; i++)
+                next.add(parts.slice(0, i).join("/"));
+            return next;
+        });
+    }, [reveal, version]);
+    useEffect(() => {
+        if (!reveal)
+            return;
+        const index = nodes.findIndex((n) => n.path === reveal);
+        if (index >= 0)
+            setCursor(index);
+    }, [nodes, reveal]);
+    useEffect(() => {
+        setCursor((c) => Math.min(c, Math.max(0, nodes.length - 1)));
+    }, [nodes.length]);
+    useEffect(() => {
+        onHover(focused ? nodes[cursor]?.path ?? null : null);
+    }, [focused, cursor, nodes]);
+    const toggle = (dir, open) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (open ?? !next.has(dir))
+            next.add(dir);
+        else
+            next.delete(dir);
+        return next;
+    });
+    useInput((input, key) => {
+        const node = nodes[cursor];
+        if (input === "c") {
+            setChangesOnly((v) => !v);
+            setCursor(0);
+        }
+        else if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(nodes.length - 1, c + 1));
+        else if (key.pageUp)
+            setCursor((c) => Math.max(0, c - rows));
+        else if (key.pageDown)
+            setCursor((c) => Math.min(nodes.length - 1, c + rows));
+        else if (!node)
+            return;
+        else if (key.return || key.rightArrow || input === "l") {
+            if (node.isDir)
+                toggle(node.path, key.return ? undefined : true);
+            else
+                onOpen(node.path);
+        }
+        else if (key.leftArrow || input === "h") {
+            if (node.isDir && expanded.has(node.path))
+                toggle(node.path, false);
+            else {
+                const parent = node.path.split("/").slice(0, -1).join("/");
+                const index = nodes.findIndex((n) => n.path === parent);
+                if (index >= 0)
+                    setCursor(index);
+            }
+        }
+    }, { isActive: focused });
+    const start = Math.max(0, Math.min(cursor - Math.floor(rows / 2), nodes.length - rows));
+    const visible = nodes.slice(start, start + rows);
+    const inner = width - 2;
+    const title = changesOnly
+        ? _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.yellow, children: "\u00B1" }), " Changes ", _jsxs(Text, { color: C.dim, children: ["(", nodes.length, ")  c: all files"] })] })
+        : _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent, children: "\u25A4" }), " Explorer", git.size ? _jsxs(Text, { color: C.dim, children: ["  c: changes (", git.size, ")"] }) : null] });
+    return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", children: [visible.length === 0 && _jsxs(Text, { color: C.dim, children: ["  ", changesOnly ? "No changes ✓" : "(empty)"] }), visible.map((node, i) => {
+                    const selected = start + i === cursor;
+                    const code = git.get(node.path);
+                    const isOpen = node.path === openFile;
+                    const { icon, color } = node.isDir
+                        ? { icon: expanded.has(node.path) ? "▾" : "▸", color: C.accent }
+                        : fileIcon(node.path);
+                    const counts = problemCounts.get(node.path);
+                    const problemMark = counts?.errors ? "✖" : counts?.warnings ? "▲" : "";
+                    const marker = problemMark || code || (changed.has(node.path) ? "●" : dirtyDirs.has(node.path) ? "•" : "");
+                    const markerColor = counts?.errors ? C.red : counts?.warnings ? C.yellow : code ? GIT_COLORS[code] ?? C.yellow : changed.has(node.path) ? C.green : C.yellow;
+                    const label = `${"  ".repeat(node.depth)}${icon} ${node.name}`;
+                    const nameColor = isOpen ? C.cyan : counts?.errors ? C.red : code ? GIT_COLORS[code] : node.isDir ? C.text : undefined;
+                    const room = Math.max(1, inner - marker.length - 1);
+                    const shown = label.length > room ? `${label.slice(0, room - 1)}…` : label.padEnd(room);
+                    const iconAt = shown.indexOf(icon);
+                    return (_jsxs(Text, { wrap: "truncate-end", ...(selected && focused ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, children: shown.slice(0, iconAt) }), _jsx(Text, { color: color, children: shown.slice(iconAt, iconAt + icon.length) }), _jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, inverse: selected && focused, children: shown.slice(iconAt + icon.length) }), _jsxs(Text, { color: markerColor, children: [" ", marker] })] }, node.path));
+                })] }) }));
+}

package/dist/src/ui/Header.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import path from "path";
+import { Box, Text, useAnimation } from "ink";
+import { C, SPINNER, gradient } from "./theme.js";
+export function Header({ width, branch, changes, model, local, busy, update }) {
+    const { frame } = useAnimation({ interval: 120, isActive: !!busy });
+    const project = path.basename(process.cwd());
+    return (_jsxs(Box, { width: width, justifyContent: "space-between", children: [_jsxs(Text, { wrap: "truncate-end", children: [" ", gradient("◆ NOU", busy ? frame : 0).map((g, i) => _jsx(Text, { bold: true, color: g.color, children: g.ch }, i)), _jsx(Text, { color: C.dim, children: "  \u2502  " }), _jsx(Text, { color: C.text, children: project }), branch && (_jsxs(_Fragment, { children: [_jsx(Text, { color: C.dim, children: "  \u2502  " }), _jsxs(Text, { color: C.accent2, children: ["\u2387 ", branch] }), changes > 0 && _jsxs(Text, { color: C.yellow, children: [" \u00B1", changes] })] })), busy && _jsxs(Text, { color: C.accent2, children: ["  ", SPINNER[frame % SPINNER.length], " ", busy] })] }), _jsxs(Text, { children: [update && _jsxs(Text, { color: C.green, bold: true, children: ["\u2B06 v", update, " available \u00B7 run `nou update`  "] }), _jsx(Text, { backgroundColor: local ? C.green : C.accent2, color: "black", bold: true, children: ` ${local ? "⌂ LOCAL" : "☁ CLOUD"} ` }), _jsx(Text, { backgroundColor: C.panel, color: C.text, children: ` ${model} ` }), " "] })] }));
+}

package/dist/src/ui/Pane.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { C } from "./theme.js";
+/** A bordered panel with a title row. Content gets `width - 2` columns and `height - 3` rows. */
+export function Pane({ title, width, height, focused, accent, children }) {
+    const color = accent ?? (focused ? C.accent : C.dim);
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: focused || accent ? "round" : "single", borderColor: color, overflow: "hidden", children: [_jsx(Text, { bold: true, color: focused || accent ? color : C.dim, wrap: "truncate-end", children: title }), children] }));
+}

package/dist/src/ui/ProblemsView.js

@@ -0,0 +1,71 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Box, Text, useAnimation, useInput } from "ink";
+import { C, SPINNER, fileIcon } from "./theme.js";
+import { Pane } from "./Pane.js";
+export const SEVERITY_STYLE = {
+    error: { icon: "✖", color: C.red },
+    warning: { icon: "▲", color: C.yellow },
+    info: { icon: "ℹ", color: C.accent },
+};
+export function ProblemsView({ width, height, focused, problems, checking, onJump, onClose }) {
+    const [cursor, setCursor] = useState(0);
+    const [onlyErrors, setOnlyErrors] = useState(false);
+    const { frame } = useAnimation({ interval: 80, isActive: checking.length > 0 });
+    const rows = useMemo(() => {
+        const list = onlyErrors ? problems.filter((d) => d.severity === "error") : problems;
+        const out = [];
+        let current = "";
+        for (const d of list) {
+            if (d.file !== current) {
+                current = d.file;
+                const inFile = list.filter((x) => x.file === d.file);
+                out.push({
+                    kind: "file",
+                    file: d.file,
+                    errors: inFile.filter((x) => x.severity === "error").length,
+                    warnings: inFile.filter((x) => x.severity === "warning").length,
+                });
+            }
+            out.push({ kind: "problem", d });
+        }
+        return out;
+    }, [problems, onlyErrors]);
+    useEffect(() => setCursor((c) => Math.min(c, Math.max(0, rows.length - 1))), [rows.length]);
+    const visibleRows = Math.max(1, height - 4);
+    useInput((input, key) => {
+        if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        else if (key.pageUp)
+            setCursor((c) => Math.max(0, c - visibleRows));
+        else if (key.pageDown)
+            setCursor((c) => Math.min(rows.length - 1, c + visibleRows));
+        else if (input === "e")
+            setOnlyErrors((v) => !v);
+        else if (input === "p" || key.escape)
+            onClose();
+        else if (key.return) {
+            const row = rows[cursor];
+            if (row?.kind === "problem")
+                onJump(row.d.file, row.d.line);
+            else if (row?.kind === "file")
+                onJump(row.file, problems.find((d) => d.file === row.file)?.line ?? 1);
+        }
+    }, { isActive: focused });
+    const errors = problems.filter((d) => d.severity === "error").length;
+    const warnings = problems.filter((d) => d.severity === "warning").length;
+    const start = Math.max(0, Math.min(cursor - Math.floor(visibleRows / 2), rows.length - visibleRows));
+    const title = (_jsxs(_Fragment, { children: [" ", _jsxs(Text, { color: C.red, children: ["\u2716 ", errors] }), "  ", _jsxs(Text, { color: C.yellow, children: ["\u25B2 ", warnings] }), "  Problems", checking.length > 0 && _jsxs(Text, { color: C.accent2, children: ["  ", SPINNER[frame % SPINNER.length], " checking ", checking.join(", ")] }), _jsx(Text, { color: C.dim, children: onlyErrors ? "  (errors only)" : "" })] }));
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, ...(focused ? { accent: C.red } : {}), children: [_jsxs(Box, { flexDirection: "column", height: visibleRows, children: [rows.length === 0 && (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.green, children: checking.length ? "Checking…" : "✓ No problems found" }), _jsx(Text, { color: C.dim, children: "Checked by the syntax parser, plus ESLint, TypeScript, Ruff and language servers when your project has them." })] })), rows.slice(start, start + visibleRows).map((row, i) => {
+                        const selected = focused && start + i === cursor;
+                        const bg = selected ? { backgroundColor: C.panel } : {};
+                        if (row.kind === "file") {
+                            const { icon, color } = fileIcon(row.file);
+                            return (_jsxs(Text, { wrap: "truncate-end", ...bg, children: [_jsx(Text, { color: color, children: icon }), " ", _jsx(Text, { bold: true, color: C.text, children: row.file }), row.errors > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", row.errors] }), row.warnings > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", row.warnings] })] }, `f${row.file}`));
+                        }
+                        const style = SEVERITY_STYLE[row.d.severity];
+                        return (_jsxs(Text, { wrap: "truncate-end", ...bg, children: ["  ", _jsx(Text, { color: style.color, children: style.icon }), _jsxs(Text, { color: C.dim, children: [" ", String(row.d.line).padStart(4), ":", String(row.d.col).padEnd(3), " "] }), _jsx(Text, { ...(selected ? { color: C.text } : {}), children: row.d.message }), _jsxs(Text, { color: C.dim, children: ["  ", row.d.source, row.d.code ? ` ${row.d.code}` : ""] })] }, `${row.d.file}:${row.d.line}:${row.d.col}:${i}`));
+                    })] }), _jsx(Text, { color: C.dim, wrap: "truncate-end", children: " \u2191\u2193 move \u00B7 Enter go to line \u00B7 e errors only \u00B7 p/Esc close" })] }));
+}

package/dist/src/ui/QuickOpen.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { readdirSync } from "fs";
+import path from "path";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { IGNORED } from "../commands/index.js";
+import { C, fileIcon } from "./theme.js";
+export function listAllFiles(limit = 5000) {
+    const files = [];
+    const walk = (dir) => {
+        if (files.length >= limit)
+            return;
+        let entries;
+        try {
+            entries = readdirSync(path.resolve(process.cwd(), dir), { withFileTypes: true });
+        }
+        catch {
+            return;
+        }
+        for (const e of entries) {
+            if (IGNORED.has(e.name))
+                continue;
+            const rel = dir === "." ? e.name : `${dir}/${e.name}`;
+            if (e.isDirectory())
+                walk(rel);
+            else
+                files.push(rel);
+        }
+    };
+    walk(".");
+    return files;
+}
+/** Subsequence fuzzy match; higher is better, null if no match. Returns matched indexes for highlighting. */
+function score(file, query) {
+    if (!query)
+        return { score: 0, hits: [] };
+    const lower = file.toLowerCase();
+    const q = query.toLowerCase();
+    const baseStart = lower.lastIndexOf("/") + 1;
+    const hits = [];
+    let total = 0;
+    let from = 0;
+    for (const ch of q) {
+        const i = lower.indexOf(ch, from);
+        if (i < 0)
+            return null;
+        total += 1;
+        if (hits.length && hits[hits.length - 1] === i - 1)
+            total += 5; // consecutive
+        if (i >= baseStart)
+            total += 3; // in the file name
+        if (i === baseStart || "/._-".includes(lower[i - 1] ?? "/"))
+            total += 4; // word start
+        hits.push(i);
+        from = i + 1;
+    }
+    return { score: total - file.length * 0.05, hits };
+}
+export function QuickOpen({ width, top, files, onPick, onClose }) {
+    const [query, setQuery] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const boxWidth = Math.min(80, Math.max(40, width - 10));
+    const inner = boxWidth - 2; // fill every cell so the screen underneath doesn't show through
+    const results = useMemo(() => {
+        return files
+            .map((f) => ({ file: f, m: score(f, query) }))
+            .filter((r) => r.m !== null)
+            .sort((a, b) => b.m.score - a.m.score)
+            .slice(0, 12);
+    }, [files, query]);
+    useInput((_input, key) => {
+        if (key.escape)
+            onClose();
+        else if (key.upArrow)
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow)
+            setCursor((c) => Math.min(results.length - 1, c + 1));
+    });
+    const pad = (s) => (s.length > inner ? `…${s.slice(-(inner - 1))}` : s.padEnd(inner));
+    return (_jsxs(Box, { position: "absolute", top: top, left: Math.floor((width - boxWidth) / 2), width: boxWidth, flexDirection: "column", borderStyle: "round", borderColor: C.accent2, children: [_jsxs(Text, { backgroundColor: C.panel, children: [_jsx(Text, { color: C.accent2, bold: true, children: " \u2315 " }), _jsx(TextInput, { value: query, onChange: (v) => {
+                            setQuery(v);
+                            setCursor(0);
+                        }, onSubmit: () => results[cursor] && onPick(results[cursor].file), placeholder: "Go to file\u2026" }), _jsx(Text, { children: " ".repeat(Math.max(0, inner - 4 - Math.max(query.length, 11))) })] }), _jsx(Text, { color: C.dim, children: "─".repeat(inner) }), results.length === 0 && _jsx(Text, { color: C.dim, children: pad("  No matching files") }), results.map((r, i) => {
+                const selected = i === cursor;
+                const { icon, color } = fileIcon(r.file);
+                const label = pad(` ${r.file}`).slice(0, inner - 2);
+                const hits = new Set(r.m.hits.map((h) => h + 1));
+                return (_jsxs(Text, { ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▌" : " " }), _jsx(Text, { color: color, children: icon }), [...label].map((ch, j) => (_jsx(Text, { color: hits.has(j) ? C.yellow : selected ? C.text : C.dim, bold: hits.has(j), children: ch }, j)))] }, r.file));
+            }), _jsx(Text, { color: C.dim, children: pad(" ↑↓ select · Enter open · Esc close") })] }));
+}

package/dist/src/ui/Settings.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useAnimation, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { AUTO_SAVE, EFFORTS } from "../config/index.js";
+import { PLUGIN_DIRS, isEnabled, trustState } from "../plugins/index.js";
+import { currentVersion } from "../update/index.js";
+import { describe, providers } from "../providers/index.js";
+import { C, SPINNER } from "./theme.js";
+const TABS = ["Model", "Preferences", "Plugins"];
+const PREFS = [
+    { key: "effort", label: "Reasoning effort", help: "How hard Claude thinks (low → max). Higher is smarter but slower and pricier." },
+    { key: "autoSave", label: "Auto-save", help: "delay: a second after you stop typing · focus: when you leave the editor · off: only Ctrl+S." },
+    { key: "followMode", label: "Follow mode on start", help: "The code view jumps to files Nou reads and edits." },
+    { key: "gitContext", label: "Git context", help: "Give the model your branch, changes and commits, plus git tools." },
+    { key: "autoApproveEdits", label: "Auto-approve edits", help: "Apply file edits without asking (diffs are still shown).", warn: true },
+    { key: "autoApproveCommands", label: "Auto-approve commands", help: "Run shell commands without asking. Only turn on if you trust the model.", warn: true },
+];
+export function Settings({ width, height, settings, choice, plugins, onModel, onChange, onTogglePlugin, onRescanPlugins, onClose }) {
+    const [tab, setTab] = useState("Model");
+    const [row, setRow] = useState(0);
+    const [column, setColumn] = useState("providers");
+    const [modelRow, setModelRow] = useState(0);
+    const [typing, setTyping] = useState(false);
+    const [custom, setCustom] = useState("");
+    const [models, setModels] = useState({});
+    const { frame } = useAnimation({ interval: 80 });
+    const provider = providers[row] ?? providers[0];
+    const listed = models[provider.id];
+    // Load the model list for the highlighted provider.
+    useEffect(() => {
+        if (tab !== "Model" || provider.unavailable() || models[provider.id])
+            return;
+        setModels((m) => ({ ...m, [provider.id]: "loading" }));
+        provider.listModels()
+            .then((list) => setModels((m) => ({ ...m, [provider.id]: list })))
+            .catch((error) => setModels((m) => ({ ...m, [provider.id]: { error: String(error.message ?? error) } })));
+    }, [tab, provider.id]);
+    const modelItems = Array.isArray(listed) ? listed : [];
+    const rowsFor = (t) => (t === "Model" ? providers.length : t === "Preferences" ? PREFS.length : plugins.length);
+    useInput((input, key) => {
+        if (typing) {
+            if (key.escape)
+                setTyping(false);
+            return;
+        }
+        if (key.tab) {
+            const next = TABS[(TABS.indexOf(tab) + (key.shift ? TABS.length - 1 : 1)) % TABS.length];
+            setTab(next);
+            setRow(next === "Model" ? Math.max(0, providers.indexOf(choice.provider)) : 0);
+            setColumn("providers");
+            return;
+        }
+        if (key.escape) {
+            if (tab === "Model" && column === "models")
+                setColumn("providers");
+            else
+                onClose();
+            return;
+        }
+        if (tab === "Model" && column === "models") {
+            const count = modelItems.length + 1;
+            if (key.upArrow)
+                setModelRow((r) => Math.max(0, r - 1));
+            else if (key.downArrow)
+                setModelRow((r) => Math.min(count - 1, r + 1));
+            else if (key.leftArrow)
+                setColumn("providers");
+            else if (key.return) {
+                if (modelRow === 0) {
+                    setCustom("");
+                    setTyping(true);
+                }
+                else
+                    onModel({ provider, model: modelItems[modelRow - 1] });
+            }
+            return;
+        }
+        if (key.upArrow)
+            setRow((r) => Math.max(0, r - 1));
+        else if (key.downArrow)
+            setRow((r) => Math.min(rowsFor(tab) - 1, r + 1));
+        else if (tab === "Model" && (key.return || key.rightArrow)) {
+            if (!provider.unavailable()) {
+                setColumn("models");
+                setModelRow(0);
+            }
+        }
+        else if (tab === "Preferences" && (key.return || input === " " || key.leftArrow || key.rightArrow)) {
+            const pref = PREFS[row];
+            const step = key.leftArrow ? -1 : 1;
+            if (pref.key === "effort") {
+                onChange({ effort: EFFORTS[(EFFORTS.indexOf(settings.effort) + step + EFFORTS.length) % EFFORTS.length] });
+            }
+            else if (pref.key === "autoSave") {
+                onChange({ autoSave: AUTO_SAVE[(AUTO_SAVE.indexOf(settings.autoSave) + step + AUTO_SAVE.length) % AUTO_SAVE.length] });
+            }
+            else {
+                onChange({ [pref.key]: !settings[pref.key] });
+            }
+        }
+        else if (tab === "Plugins") {
+            if (input === "r")
+                onRescanPlugins();
+            else if ((key.return || input === " ") && plugins[row])
+                onTogglePlugin(plugins[row].id, !isEnabled(plugins[row], settings));
+        }
+    });
+    const boxHeight = height - 6;
+    const toggle = (on, warn) => (_jsx(Text, { color: on ? (warn ? C.orange : C.green) : C.dim, bold: true, children: on ? "● ON " : "○ OFF" }));
+    const body = () => {
+        if (tab === "Model") {
+            const leftWidth = Math.min(46, Math.floor(width * 0.45));
+            return (_jsxs(Box, { flexDirection: "row", height: boxHeight, children: [_jsxs(Box, { flexDirection: "column", width: leftWidth, borderStyle: "round", borderColor: column === "providers" ? C.accent : C.dim, children: [_jsx(Text, { color: C.dim, bold: true, children: " PROVIDER" }), providers.map((p, i) => {
+                                const problem = p.unavailable();
+                                const selected = i === row;
+                                const current = p.id === choice.provider.id;
+                                return (_jsxs(Text, { wrap: "truncate-end", ...(selected && column === "providers" ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: current ? C.green : C.dim, children: current ? " ● " : "   " }), _jsx(Text, { color: problem ? C.dim : C.text, bold: selected, children: p.label.padEnd(26).slice(0, 26) }), _jsx(Text, { color: p.local ? C.green : C.accent2, children: p.local ? " local" : " cloud" }), problem ? _jsx(Text, { color: C.dim, children: " \uD83D\uDD12" }) : null] }, p.id));
+                            })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: column === "models" ? C.accent : C.dim, paddingX: 1, children: [_jsxs(Text, { color: C.dim, bold: true, children: ["MODELS \u00B7 ", provider.label] }), provider.unavailable() ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: C.yellow, children: ["Not set up: ", provider.unavailable()] }), _jsx(Text, { color: C.dim, children: "Add it to a .env file in your project (see .env.example) or your environment, then restart Nou." })] })) : (_jsxs(_Fragment, { children: [typing ? (_jsxs(Text, { children: [_jsx(Text, { color: C.accent2, children: "\u270E " }), _jsx(TextInput, { value: custom, onChange: setCustom, onSubmit: (v) => {
+                                                    setTyping(false);
+                                                    if (v.trim())
+                                                        onModel({ provider, model: v.trim() });
+                                                }, placeholder: `e.g. ${provider.defaultModel}` })] })) : (_jsx(Text, { ...(column === "models" && modelRow === 0 ? { backgroundColor: C.panel } : {}), color: C.accent2, children: "\u270E Type a model name\u2026" })), listed === "loading" && _jsxs(Text, { color: C.accent2, children: [SPINNER[frame % SPINNER.length], " loading models\u2026"] }), listed && typeof listed === "object" && !Array.isArray(listed) && _jsxs(Text, { color: C.red, children: ["Couldn't list models: ", listed.error] }), (() => {
+                                        const visibleCount = Math.max(1, boxHeight - 6);
+                                        const offset = Math.max(0, Math.min(modelRow - 1 - Math.floor(visibleCount / 2), modelItems.length - visibleCount));
+                                        return modelItems.slice(offset, offset + visibleCount).map((m, i) => {
+                                            const index = offset + i + 1;
+                                            const selected = column === "models" && modelRow === index;
+                                            const current = provider.id === choice.provider.id && m === choice.model;
+                                            return (_jsxs(Text, { wrap: "truncate-end", ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: current ? C.green : C.dim, children: current ? "● " : "  " }), _jsx(Text, { color: selected ? C.text : C.dim, bold: selected, children: m })] }, m));
+                                        });
+                                    })()] }))] })] }));
+        }
+        if (tab === "Preferences") {
+            return (_jsx(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: PREFS.map((pref, i) => {
+                    const selected = i === row;
+                    const value = settings[pref.key];
+                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▸ " : "  " }), _jsx(Text, { color: C.text, bold: selected, children: pref.label.padEnd(26) }), pref.key === "effort" || pref.key === "autoSave"
+                                        ? _jsx(Text, { children: (pref.key === "effort" ? EFFORTS : AUTO_SAVE).map((e) => _jsx(Text, { color: e === value ? C.accent2 : C.dim, bold: e === value, children: e === value ? `[${e}]` : ` ${e} ` }, e)) })
+                                        : toggle(value, pref.warn)] }), _jsxs(Text, { color: C.dim, children: ["    ", pref.help] })] }, pref.key));
+                }) }));
+        }
+        return (_jsxs(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: [plugins.map((p, i) => {
+                    const selected = i === row;
+                    const state = trustState(p, settings);
+                    const enabled = state === "on";
+                    const parts = p.plugin
+                        ? [
+                            (p.plugin.tools ?? []).length && `${p.plugin.tools.length} tools`,
+                            (p.plugin.commands ?? []).length && `${p.plugin.commands.length} commands`,
+                            (p.plugin.diagnostics ?? []).length && "checker",
+                        ].filter(Boolean)
+                        : [];
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▸ " : "  " }), toggle(enabled), _jsxs(Text, { color: C.text, bold: true, children: [" ", p.plugin?.name ?? p.id] }), _jsxs(Text, { color: C.dim, children: [" ", p.plugin?.version ? `v${p.plugin.version} · ` : "", p.scope, parts.length ? ` · ${parts.join(", ")}` : ""] })] }), state === "changed"
+                                ? _jsx(Text, { color: C.yellow, wrap: "truncate-end", children: "    \u26A0 Changed since you enabled it. Review the code, then press Enter to enable again." })
+                                : p.error
+                                    ? _jsxs(Text, { color: C.red, wrap: "truncate-end", children: ["    \u2716 ", p.error] })
+                                    : _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: ["    ", p.plugin?.description ?? (enabled ? "" : "Enable to load it.")] })] }, p.id));
+                }), _jsx(Text, { children: " " }), _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: ["Add your own: drop a .js/.mjs file into ", PLUGIN_DIRS.map((d) => d.dir).join(" or "), ", then press r."] }), _jsx(Text, { color: C.dim, wrap: "truncate-end", children: "Example: examples/plugins/word-count.mjs in the Nou repo." })] }));
+    };
+    const hints = tab === "Model"
+        ? column === "models" ? "↑↓ choose · Enter use model · ← providers" : "↑↓ provider · Enter/→ pick a model"
+        : tab === "Preferences" ? "↑↓ move · Enter/Space toggle · ←→ change option" : "↑↓ move · Enter toggle · r rescan";
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: C.accent2, bold: true, children: "\u2699 Settings  " }), TABS.map((t) => (_jsx(Text, { ...(t === tab ? { backgroundColor: C.accent2, color: "black" } : { color: C.dim }), bold: t === tab, children: ` ${t} ` }, t))), _jsx(Text, { color: C.dim, children: "   current: " }), _jsx(Text, { color: C.green, children: describe(choice) }), _jsxs(Text, { color: C.dim, children: ["   nou v", currentVersion()] })] }), _jsx(Text, { children: " " }), body(), _jsxs(Text, { color: C.dim, children: [" Tab next section \u00B7 ", hints, " \u00B7 Esc close   ", _jsx(Text, { color: C.dim, children: "saved to ~/.nou/config.json" })] })] }));
+}

package/dist/src/ui/text.js

@@ -0,0 +1,100 @@
+import path from "path";
+import { highlight, supportsLanguage } from "cli-highlight";
+import { diffLines } from "diff";
+import { highlightTree } from "../syntax/index.js";
+const LANGUAGES = {
+    ".ts": "typescript", ".tsx": "typescript", ".mts": "typescript", ".cts": "typescript",
+    ".js": "javascript", ".jsx": "javascript", ".mjs": "javascript", ".cjs": "javascript",
+    ".py": "python", ".json": "json", ".md": "markdown", ".css": "css", ".html": "xml",
+    ".sh": "bash", ".ps1": "powershell", ".yml": "yaml", ".yaml": "yaml", ".go": "go",
+    ".rs": "rust", ".java": "java", ".c": "c", ".cpp": "cpp", ".cs": "csharp", ".sql": "sql",
+};
+/** Splits file text into display lines: normalizes CRLF and expands tabs. */
+export function splitLines(text) {
+    const lines = text.replace(/\r\n/g, "\n").replace(/\t/g, "  ").split("\n");
+    if (lines.length > 1 && lines[lines.length - 1] === "")
+        lines.pop();
+    return lines;
+}
+export function highlightLines(filePath, text) {
+    const plain = splitLines(text);
+    // tree-sitter when the grammar is loaded (accurate); highlight.js otherwise.
+    const tree = highlightTree(filePath, plain.join("\n"));
+    if (tree)
+        return tree;
+    const language = LANGUAGES[path.extname(filePath).toLowerCase()];
+    if (!language || !supportsLanguage(language) || text.length > 200_000)
+        return plain;
+    try {
+        return highlight(plain.join("\n"), { language, ignoreIllegals: true }).split("\n");
+    }
+    catch {
+        return plain;
+    }
+}
+/** Word-wraps plain text to the given width. */
+export function wrap(text, width) {
+    const out = [];
+    const max = Math.max(1, width);
+    for (const raw of splitLines(text)) {
+        if (raw.length <= max) {
+            out.push(raw);
+            continue;
+        }
+        let line = "";
+        for (const word of raw.split(/(\s+)/)) {
+            if ((line + word).length <= max) {
+                line += word;
+                continue;
+            }
+            if (line.trim())
+                out.push(line.trimEnd());
+            line = word.trimStart();
+            while (line.length > max) {
+                out.push(line.slice(0, max));
+                line = line.slice(max);
+            }
+        }
+        out.push(line);
+    }
+    return out;
+}
+/** Lines up before/after text into rows for a side by side diff. */
+export function sideBySide(before, after) {
+    const parts = diffLines(before.replace(/\r\n/g, "\n"), after.replace(/\r\n/g, "\n"));
+    const rows = [];
+    let ln = 1;
+    let rn = 1;
+    const cells = (value) => (value ? splitLines(value) : []);
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (!part.added && !part.removed) {
+            for (const text of cells(part.value))
+                rows.push({ left: { n: ln++, text }, right: { n: rn++, text }, changed: false });
+            continue;
+        }
+        const removed = part.removed ? cells(part.value) : [];
+        let added = part.added ? cells(part.value) : [];
+        if (part.removed && parts[i + 1]?.added) {
+            added = cells(parts[++i].value);
+        }
+        for (let k = 0; k < Math.max(removed.length, added.length); k++) {
+            const row = { changed: true };
+            if (k < removed.length)
+                row.left = { n: ln++, text: removed[k] };
+            if (k < added.length)
+                row.right = { n: rn++, text: added[k] };
+            rows.push(row);
+        }
+    }
+    return rows;
+}
+/** 1-based line numbers in `after` that were added or changed. */
+export function changedLines(before, after) {
+    const lines = new Set();
+    for (const row of sideBySide(before, after)) {
+        if (row.changed && row.right)
+            lines.add(row.right.n);
+    }
+    return lines;
+}

package/dist/src/ui/theme.js

@@ -0,0 +1,41 @@
+import path from "path";
+/** Tokyo Night inspired palette (truecolor; Windows Terminal supports it). */
+export const C = {
+    accent: "#7aa2f7",
+    accent2: "#bb9af7",
+    cyan: "#7dcfff",
+    green: "#9ece6a",
+    yellow: "#e0af68",
+    orange: "#ff9e64",
+    red: "#f7768e",
+    text: "#c0caf5",
+    dim: "#565f89",
+    panel: "#1f2335",
+};
+export const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const GRADIENT = [C.accent, "#8c9cf7", C.accent2, "#c39af2", "#e08ad6", C.red, C.orange, C.yellow, C.green, C.cyan];
+/** Colors for each character of a label, shifted by `frame` so it shimmers when animated. */
+export function gradient(text, frame = 0) {
+    return [...text].map((ch, i) => ({ ch, color: GRADIENT[(i + frame) % GRADIENT.length] }));
+}
+export const GIT_COLORS = {
+    M: C.yellow, A: C.green, "?": C.green, D: C.red, R: C.cyan, U: C.orange,
+};
+const ICONS = {
+    ".ts": ["◆", "#3178c6"], ".tsx": ["◆", C.cyan], ".mts": ["◆", "#3178c6"], ".cts": ["◆", "#3178c6"],
+    ".js": ["◆", "#f1e05a"], ".jsx": ["◆", C.cyan], ".mjs": ["◆", "#f1e05a"], ".cjs": ["◆", "#f1e05a"],
+    ".py": ["◆", "#3572a5"], ".json": ["◇", C.yellow], ".md": ["≡", C.text], ".css": ["◆", C.accent2],
+    ".html": ["◆", C.orange], ".yml": ["◇", C.red], ".yaml": ["◇", C.red], ".go": ["◆", C.cyan],
+    ".rs": ["◆", C.orange], ".sh": ["$", C.green], ".ps1": ["$", C.accent], ".lock": ["◌", C.dim],
+};
+export function fileIcon(file) {
+    const base = path.basename(file).toLowerCase();
+    if (base.startsWith(".env"))
+        return { icon: "⚿", color: C.yellow };
+    if (base.startsWith(".git"))
+        return { icon: "◌", color: C.orange };
+    if (base === "package.json")
+        return { icon: "⬢", color: C.green };
+    const [icon, color] = ICONS[path.extname(base)] ?? ["•", C.dim];
+    return { icon, color };
+}