nou-cli 0.0.0-stage → 0.1.0

package/dist/src/ui/Editor.js

@@ -0,0 +1,165 @@
+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 { 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, onSave, onExit, onState }) {
+    const eol = useMemo(() => (baseline.includes("\r\n") ? "\r\n" : "\n"), [baseline]);
+    const indentUnit = useMemo(() => (/^\t/m.test(initial) ? "\t" : "  "), [initial]);
+    const [buf, setBuf] = useState(() => ({ lines: initial.replace(/\r\n/g, "\n").split("\n"), row: 0, col: 0 }));
+    const [saved, setSaved] = useState(() => baseline.replace(/\r\n/g, "\n"));
+    const [confirmExit, setConfirmExit] = useState(false);
+    const [flash, setFlash] = useState(null);
+    const undo = useRef([]);
+    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) => setBuf((b) => {
+        undo.current.push(b);
+        if (undo.current.length > 300)
+            undo.current.shift();
+        return fn(b);
+    });
+    const insert = (text) => 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 };
+    });
+    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 = () => {
+        const text = buf.lines.join("\n");
+        onSave(text.replace(/\n/g, eol));
+        setSaved(text);
+        setFlash("Saved ✓");
+    };
+    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 (key.ctrl && input === "s")
+            return save();
+        if (key.ctrl && input === "z") {
+            const prev = undo.current.pop();
+            if (prev)
+                setBuf(prev);
+            return;
+        }
+        if (key.escape)
+            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 };
+            });
+        }
+        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 };
+            });
+        }
+        if (input && !key.ctrl && !key.meta)
+            insert(input);
+    }, { 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(() => (v.left === 0 ? highlightLines(filePath, visible.join("\n")) : visible.map(expand)), [filePath, visible.join("\n"), v.left]);
+    const { icon, color } = fileIcon(filePath);
+    const status = confirmExit
+        ? "Unsaved changes! Ctrl+S save & close · Esc discard · any key keep editing"
+        : flash ?? `Ln ${buf.row + 1}, Col ${buf.col + 1}${dirty ? "  ● modified" : ""}`;
+    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 num = _jsxs(Text, { color: isCursorLine ? C.green : C.dim, children: [String(n + 1).padStart(gutter - 2), 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));
+                }) }), _jsxs(Text, { wrap: "truncate-end", color: confirmExit ? C.red : flash ? C.green : C.dim, children: [` ${status}`, _jsx(Text, { color: C.dim, children: confirmExit ? "" : "   Ctrl+S save · Ctrl+Z undo · Esc close" })] })] }));
+}

package/dist/src/ui/FileTree.js

@@ -0,0 +1,141 @@
+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, 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 marker = code ?? (changed.has(node.path) ? "●" : dirtyDirs.has(node.path) ? "•" : "");
+                    const markerColor = 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 : 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 }) {
+    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: [_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/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,150 @@
+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 { EFFORTS } from "../config/index.js";
+import { PLUGIN_DIRS } from "../plugins/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: "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];
+            if (pref.key === "effort") {
+                const step = key.leftArrow ? -1 : 1;
+                onChange({ effort: EFFORTS[(EFFORTS.indexOf(settings.effort) + step + EFFORTS.length) % EFFORTS.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, !settings.plugins[plugins[row].id]);
+        }
+    });
+    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"
+                                        ? _jsx(Text, { children: EFFORTS.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 (_jsx(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: plugins.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: C.text, children: "No plugins found." }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "Drop a .js/.mjs/.ts file (or a folder with index.*) into one of:" }), PLUGIN_DIRS.map((d) => _jsxs(Text, { color: C.cyan, children: ["  ", d.dir, "  ", _jsxs(Text, { color: C.dim, children: ["(", d.scope, ")"] })] }, d.dir)), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "See examples/plugins/word-count.mjs for the shape. Press r to rescan." })] })) : plugins.map((p, i) => {
+                const selected = i === row;
+                const enabled = !!settings.plugins[p.id];
+                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 ? "▸ " : "  " }), 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] })] }), p.error
+                            ? _jsxs(Text, { color: C.red, children: ["    \u2716 ", p.error] })
+                            : _jsxs(Text, { color: C.dim, children: ["    ", p.plugin?.description ?? (enabled ? "" : "Enable to load it."), p.plugin ? `  [${(p.plugin.tools ?? []).length} tools, ${(p.plugin.commands ?? []).length} commands]` : ""] })] }, p.id));
+            }) }));
+    };
+    const hints = tab === "Model"
+        ? column === "models" ? "↑↓ choose · Enter use model · ← providers" : "↑↓ provider · Enter/→ pick a model"
+        : tab === "Preferences" ? "↑↓ move · Enter/Space toggle · ←→ change effort" : "↑↓ 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) })] }), _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" })] })] }));
+}