nou-cli 0.5.1 → 0.5.3

package/dist/src/ui/GamePanel.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { GAMES, gameById } from "../games/index.js";
+import { C } from "./theme.js";
+/** The panel's tallest height (borders included) when docked under a pane, and the least it needs. */
+export const GAME_PANEL = { height: 19, minWidth: 26, minHeight: 10 };
+const KEYS = { w: "up", s: "down", a: "left", d: "right", k: "up", j: "down", h: "left", l: "right" };
+/** A row of the playfield, colored per character in runs so it stays a handful of Text nodes. */
+function Row({ line, colors }) {
+    const runs = [];
+    for (const ch of line) {
+        const color = colors[ch];
+        const last = runs[runs.length - 1];
+        if (last && last.color === color)
+            last.text += ch;
+        else
+            runs.push({ text: ch, color });
+    }
+    return _jsx(Text, { children: runs.map((r, i) => _jsx(Text, { ...(r.color ? { color: r.color } : {}), children: r.text }, i)) });
+}
+/**
+ * A panel for little games, docked under a pane (drag its title to another pane; × closes it). The app gives it
+ * the keyboard while it's focused; a game only runs while it has the keyboard, so it pauses as you leave.
+ */
+export const GamePanel = memo(function GamePanel({ width, height, focused, moving, installed, onLeave, onOpenSettings }) {
+    const FIELD = { width: Math.max(10, width - 4), height: Math.max(3, height - 6) };
+    const games = installed.map(gameById).filter((g) => !!g);
+    const [row, setRow] = useState(0);
+    const [playing, setPlaying] = useState(null);
+    const [paused, setPaused] = useState(false);
+    const inputs = useRef([]);
+    const view = playing ? playing.game.view(playing.state) : null;
+    const running = !!playing && focused && !paused && !view?.over;
+    useEffect(() => {
+        if (!running)
+            return;
+        const timer = setInterval(() => {
+            const pressed = inputs.current;
+            inputs.current = [];
+            setPlaying((p) => (p ? { ...p, state: p.game.tick(p.state, pressed) } : p));
+        }, playing.game.tickMs);
+        return () => clearInterval(timer);
+    }, [running, playing?.game]);
+    // A different size (moved to another pane, or the window changed) starts the game over at that size.
+    useEffect(() => {
+        if (playing)
+            setPlaying({ game: playing.game, state: playing.game.create(FIELD.width, FIELD.height) });
+    }, [FIELD.width, FIELD.height]);
+    const start = (game) => {
+        inputs.current = [];
+        setPaused(false);
+        setPlaying({ game, state: game.create(FIELD.width, FIELD.height) });
+    };
+    useInput((input, key) => {
+        if (key.escape)
+            return onLeave();
+        if (!playing) {
+            if (key.upArrow || input === "k")
+                setRow((r) => Math.max(0, r - 1));
+            else if (key.downArrow || input === "j")
+                setRow((r) => Math.min(games.length - 1, r + 1));
+            else if ((key.return || input === " ") && games[row])
+                start(games[row]);
+            else if (input === "s" && !games.length)
+                onOpenSettings();
+            return;
+        }
+        if (input === "q")
+            return setPlaying(null);
+        if (view?.over) {
+            if (key.return || input === " " || input === "r")
+                start(playing.game);
+            return;
+        }
+        if (input === " " || input === "p")
+            return setPaused((p) => !p);
+        const pressed = key.upArrow ? "up" : key.downArrow ? "down" : key.leftArrow ? "left" : key.rightArrow ? "right" : KEYS[input];
+        if (pressed)
+            inputs.current.push(pressed);
+    }, { isActive: focused });
+    const color = focused || moving ? C.accent2 : C.dim;
+    const inner = width - 2;
+    const title = moving ? " ✦ Drop it on a pane: files, code or chat" : playing ? ` ✦ ${playing.game.title}  ⠿ drag to move` : " ✦ Games  ⠿ drag to move";
+    // The title row: the name and the drag handle, and × (close) at the right.
+    const head = title.length > inner - 3 ? `${title.slice(0, inner - 4)}…` : title.padEnd(inner - 3);
+    const hint = !focused ? "click to play" : playing ? (view?.over ? "Enter again · q games · Esc leave" : `${paused ? "PAUSED · " : ""}Space pause · q games · Esc leave`) : "↑↓ choose · Enter play · Esc leave";
+    const small = width < GAME_PANEL.minWidth || height < GAME_PANEL.minHeight;
+    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", borderStyle: "round", borderColor: color, overflow: "hidden", children: [_jsxs(Text, { backgroundColor: C.panel, wrap: "truncate-end", children: [_jsx(Text, { color: color, bold: true, children: head }), _jsx(Text, { color: C.text, bold: true, children: " \u00D7 " })] }), small ? (_jsx(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: _jsx(Text, { color: C.dim, wrap: "wrap", children: "Too small here: drag me to a bigger pane, or make this one wider." }) })) : null, small ? null : playing && view ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: FIELD.height + 2, children: [view.lines.map((line, i) => {
+                        // The end-of-game message goes over the middle of the field.
+                        if (view.over && i === Math.floor(FIELD.height / 2)) {
+                            const msg = ` ${view.over} `;
+                            const left = Math.max(0, Math.floor((FIELD.width - msg.length) / 2));
+                            return _jsxs(Text, { children: [line.slice(0, left), _jsx(Text, { backgroundColor: C.yellow, color: "black", bold: true, children: msg }), line.slice(left + msg.length)] }, i);
+                        }
+                        return _jsx(Row, { line: line, colors: playing.game.colors }, i);
+                    }), _jsx(Text, { color: C.dim, children: "─".repeat(FIELD.width) }), _jsx(Text, { color: C.text, wrap: "truncate-end", children: view.status })] })) : (_jsx(Box, { flexDirection: "column", paddingX: 1, height: FIELD.height + 2, children: games.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: C.text, children: "No games yet." }), _jsxs(Text, { color: C.dim, wrap: "wrap", children: ["Add some in settings \u2192 Games", focused ? " (press s)" : "", ": Pong, Snake and Breakout."] })] })) : games.map((g, i) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { ...(i === row && focused ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: i === row ? C.accent2 : C.dim, children: i === row ? "▸ " : "  " }), _jsx(Text, { color: C.text, bold: i === row, children: g.title }), _jsxs(Text, { color: C.dim, children: ["  ", g.controls] })] }), _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: ["    ", g.blurb] })] }, g.id))) })), _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: [" ", hint] })] }));
+});
+export { GAMES };

package/dist/src/ui/Header.js

@@ -8,5 +8,5 @@ const VERSION = `v${currentVersion()}`;
 export const Header = memo(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)), _jsxs(Text, { color: C.dim, children: [" ", VERSION] }), _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} ` }), " "] })] }));
+    return (_jsxs(Box, { width: width, justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, flexGrow: 1, overflow: "hidden", 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)), _jsxs(Text, { color: C.dim, children: [" ", VERSION] }), _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] })] }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { wrap: "truncate-end", children: [update && width >= 110 && _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/QuickOpen.js

@@ -32,7 +32,7 @@ export function listAllFiles(limit = 5000) {
     return files;
 }
 /** Subsequence fuzzy match; higher is better, null if no match. Returns matched indexes for highlighting. */
-function score(file, query) {
+export function score(file, query) {
     if (!query)
         return { score: 0, hits: [] };
     const lower = file.toLowerCase();
@@ -57,35 +57,74 @@ function score(file, query) {
     }
     return { score: total - file.length * 0.05, hits };
 }
-export function QuickOpen({ width, top, files, onPick, onClose }) {
-    const [query, setQuery] = useState("");
+/** Ctrl+P: find a file. Start with ">" (or press ?) for every action Nou has, with its shortcut. */
+export function QuickOpen({ width, top, files, recent = [], actions, initialQuery = "", onPick, onRun, onClose }) {
+    const [query, setQuery] = useState(initialQuery);
     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 commandMode = query.startsWith(">");
+    const rowsShown = 12;
     const results = useMemo(() => {
+        if (commandMode)
+            return [];
+        // Recent files first when nothing's typed; a small boost otherwise, so the one you just had wins a tie.
+        const rank = new Map(recent.map((f, i) => [f, i]));
+        const boost = (f) => (rank.has(f) ? (query ? 3 : 1000) - rank.get(f) * 0.01 : 0);
         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]);
+            .sort((a, b) => b.m.score + boost(b.file) - (a.m.score + boost(a.file)))
+            .slice(0, rowsShown);
+    }, [files, recent, query, commandMode]);
+    const found = useMemo(() => {
+        if (!commandMode)
+            return [];
+        const q = query.slice(1).trim();
+        return actions
+            .map((a, order) => ({ action: a, m: score(a.title, q), order }))
+            .filter((r) => r.m !== null)
+            .sort((a, b) => (q ? b.m.score - a.m.score : a.order - b.order));
+    }, [actions, query, commandMode]);
+    const count = commandMode ? found.length : results.length;
+    const first = Math.max(0, Math.min(cursor - rowsShown + 1, count - rowsShown));
     useInput((_input, key) => {
         if (key.escape)
             onClose();
         else if (key.upArrow)
-            setCursor((c) => Math.max(0, c - 1));
+            setCursor((c) => (c - 1 + Math.max(1, count)) % Math.max(1, count));
         else if (key.downArrow)
-            setCursor((c) => Math.min(results.length - 1, c + 1));
+            setCursor((c) => (c + 1) % Math.max(1, count));
+        else if (key.pageUp)
+            setCursor((c) => Math.max(0, c - rowsShown));
+        else if (key.pageDown)
+            setCursor((c) => Math.min(count - 1, c + rowsShown));
     });
+    const recentSet = useMemo(() => new Set(recent), [recent]);
     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) => {
+                        }, onSubmit: () => {
+                            if (commandMode) {
+                                if (found[cursor])
+                                    onRun(found[cursor].action);
+                            }
+                            else if (results[cursor])
+                                onPick(results[cursor].file);
+                        }, placeholder: "Go to file\u2026  (> for commands)" }), _jsx(Text, { children: " ".repeat(Math.max(0, inner - 4 - Math.max(query.length, 29))) })] }), _jsx(Text, { color: C.dim, children: "─".repeat(inner) }), commandMode && found.length === 0 && _jsx(Text, { color: C.dim, children: pad("  No matching commands") }), commandMode && found.slice(first, first + rowsShown).map((r, i) => {
+                const selected = first + i === cursor;
+                const keys = r.action.keys ?? "";
+                const room = inner - 3 - keys.length - 1;
+                const title = r.action.title.length > room ? `${r.action.title.slice(0, room - 1)}…` : r.action.title.padEnd(room);
+                const hits = new Set(r.m.hits);
+                return (_jsxs(Text, { ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▌" : " " }), _jsx(Text, { color: C.accent2, children: "\u203A " }), [...title].map((ch, j) => (_jsx(Text, { color: hits.has(j) ? C.yellow : selected ? C.text : C.dim, bold: hits.has(j), children: ch }, j))), _jsxs(Text, { color: C.accent, children: [" ", keys] })] }, r.action.title));
+            }), !commandMode && 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 tag = recentSet.has(r.file) ? " recent" : "";
+                const label = pad(` ${r.file}`).slice(0, inner - 2 - tag.length);
                 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") })] }));
+                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))), _jsx(Text, { color: C.dim, children: tag })] }, r.file));
+            }), _jsx(Text, { color: C.dim, children: pad(commandMode ? ` ↑↓ select · Enter run · Esc close   ${found.length} commands` : " ↑↓ select · Enter open · > commands · Esc close") })] }));
 }

package/dist/src/ui/Settings.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { AUTO_SAVE, CODE_THEMES, EFFORTS, FOLLOW_SPEEDS } from "../config/index.js";
+import { highlightLines } from "./text.js";
+import { GAMES } from "../games/index.js";
 import { saveCredentials } from "../config/credentials.js";
 import { originOf, setOutsideNou } from "../config/origins.js";
 import { PLUGIN_DIRS, isEnabled, trustState } from "../plugins/index.js";
@@ -10,9 +12,16 @@ import { currentVersion } from "../update/index.js";
 import { describe, providers, rejectedKey } from "../providers/index.js";
 import { ENGINES, isInstalled } from "../engines/index.js";
 import { C, SPINNER } from "./theme.js";
-const TABS = ["Model", "Engine", "Preferences", "Plugins"];
+/** A few lines of code to show what a code theme looks like. */
+const THEME_PREVIEW = `// Greets someone, politely
+export function greet(name: string, times = 2): string {
+  return \`Hello \${name}!\`.repeat(times) || null;
+}`;
+const TABS = ["Model", "Engine", "Preferences", "Plugins", "Games"];
 const PREFS = [
     { key: "effort", label: "Reasoning effort", help: "How hard Claude thinks (low → max). Higher is smarter but slower and pricier." },
+    { key: "followSpeed", label: "Follow mode speed", help: "How long each file Nou reads stays on screen in follow mode (f): slow, normal, fast, or as it happens." },
+    { key: "codeTheme", label: "Code colors", help: "The theme for code. ←/→ to try them; github-light is for light terminals." },
     { key: "autoSave", label: "Auto-save", help: "delay: a second after you stop typing · focus: when you leave the editor · off: only Ctrl+S." },
     { key: "mouse", label: "Mouse", help: "Wheel scrolls the pane under the pointer; click to focus or open files. Hold Shift to select text." },
     { key: "followMode", label: "Follow mode on start", help: "The code view jumps to files Nou reads and edits." },
@@ -21,7 +30,7 @@ const PREFS = [
     { 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, connectTo, onModel, onEngine, onChange, onTogglePlugin, onRescanPlugins, onClose }) {
+export function Settings({ width, height, settings, choice, plugins, connectTo, reason, onModel, onEngine, onChange, onTogglePlugin, onRescanPlugins, onClose }) {
     const [tab, setTab] = useState("Model");
     const [row, setRow] = useState(() => Math.max(0, providers.indexOf(connectTo ?? choice.provider)));
     const [column, setColumn] = useState("providers");
@@ -72,7 +81,7 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
         }
     };
     const modelItems = Array.isArray(listed) ? listed : [];
-    const rowsFor = (t) => (t === "Model" ? providers.length : t === "Engine" ? ENGINES.length : t === "Preferences" ? PREFS.length : plugins.length);
+    const rowsFor = (t) => (t === "Model" ? providers.length : t === "Engine" ? ENGINES.length : t === "Preferences" ? PREFS.length : t === "Games" ? GAMES.length : plugins.length);
     useInput((input, key) => {
         if (connecting) {
             if (key.escape)
@@ -142,6 +151,12 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
             if (pref.key === "effort") {
                 onChange({ effort: EFFORTS[(EFFORTS.indexOf(settings.effort) + step + EFFORTS.length) % EFFORTS.length] });
             }
+            else if (pref.key === "followSpeed") {
+                onChange({ followSpeed: FOLLOW_SPEEDS[(FOLLOW_SPEEDS.indexOf(settings.followSpeed) + step + FOLLOW_SPEEDS.length) % FOLLOW_SPEEDS.length] });
+            }
+            else if (pref.key === "codeTheme") {
+                onChange({ codeTheme: CODE_THEMES[(CODE_THEMES.indexOf(settings.codeTheme) + step + CODE_THEMES.length) % CODE_THEMES.length] });
+            }
             else if (pref.key === "autoSave") {
                 onChange({ autoSave: AUTO_SAVE[(AUTO_SAVE.indexOf(settings.autoSave) + step + AUTO_SAVE.length) % AUTO_SAVE.length] });
             }
@@ -149,6 +164,10 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
                 onChange({ [pref.key]: !settings[pref.key] });
             }
         }
+        else if (tab === "Games" && (key.return || input === " ") && GAMES[row]) {
+            const id = GAMES[row].id;
+            onChange({ games: settings.games.includes(id) ? settings.games.filter((g) => g !== id) : [...settings.games, id] });
+        }
         else if (tab === "Plugins") {
             if (input === "r")
                 onRescanPlugins();
@@ -157,6 +176,20 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
         }
     });
     const boxHeight = height - 6;
+    // Preferences take three rows each (label, help, gap), the code theme's preview four more: show the ones
+    // around the selected one that fit.
+    const prefWindow = (() => {
+        const room = Math.max(3, boxHeight - 4);
+        const cost = (i) => 3 + (tab === "Preferences" && i === row && PREFS[i]?.key === "codeTheme" ? 4 : 0);
+        let first = tab === "Preferences" ? row : 0;
+        let last = first + 1;
+        let used = cost(first);
+        while (last < PREFS.length && used + cost(last) <= room)
+            used += cost(last++);
+        while (first > 0 && used + cost(first - 1) <= room)
+            used += cost(--first);
+        return { first, last };
+    })();
     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") {
@@ -168,7 +201,7 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
                                 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(labelWidth).slice(0, labelWidth) }), _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] }), connecting && provider.connect ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: C.accent2, bold: true, children: ["Connect ", provider.label] }), provider.connect.map((f, i) => {
+                            })] }), _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] }), reason ? _jsxs(Text, { color: C.red, wrap: "wrap", children: ["\u2716 ", reason] }) : null, connecting && provider.connect ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: C.accent2, bold: true, children: ["Connect ", provider.label] }), provider.connect.map((f, i) => {
                                         const entered = connecting.values[f.env];
                                         const shown = (v) => (f.secret ? "•".repeat(Math.min(v.length, 12)) : v);
                                         if (i < connecting.step) {
@@ -205,13 +238,25 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
                     }), _jsx(Text, { color: C.dim, wrap: "truncate-end", children: "The engine is the agent that answers in the chat. Diffs, approvals, undo and problems work with each one." })] }));
         }
         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, overflow: "hidden", children: [prefWindow.first > 0 ? _jsxs(Text, { color: C.dim, children: ["  \u2191 ", prefWindow.first, " more"] }) : null, PREFS.slice(prefWindow.first, prefWindow.last).map((pref, at) => {
+                        const i = prefWindow.first + at;
+                        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 === "codeTheme"
+                                            ? _jsxs(Text, { children: [_jsx(Text, { color: C.dim, children: "\u2039 " }), _jsx(Text, { color: C.accent2, bold: true, children: String(value) }), _jsxs(Text, { color: C.dim, children: [" \u203A  ", CODE_THEMES.indexOf(value) + 1, "/", CODE_THEMES.length] })] })
+                                            : pref.key === "effort" || pref.key === "autoSave" || pref.key === "followSpeed"
+                                                ? _jsx(Text, { children: (pref.key === "effort" ? EFFORTS : pref.key === "autoSave" ? AUTO_SAVE : FOLLOW_SPEEDS).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, wrap: "truncate-end", children: ["    ", pref.help] }), pref.key === "codeTheme" && selected
+                                    ? highlightLines("preview.ts", THEME_PREVIEW).map((line, n) => _jsxs(Text, { wrap: "truncate-end", children: ["    ", line] }, n))
+                                    : null] }, pref.key));
+                    }), prefWindow.last < PREFS.length ? _jsxs(Text, { color: C.dim, children: ["  \u2193 ", PREFS.length - prefWindow.last, " more"] }) : null] }));
+        }
+        if (tab === "Games") {
+            return (_jsxs(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Little games for a break while Nou works. Added ones show in the Games panel: /games, or ? then \"games\"." }), _jsx(Text, { children: " " }), GAMES.map((g, i) => {
+                        const selected = i === row;
+                        const added = settings.games.includes(g.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 ? "▸ " : "  " }), added ? _jsx(Text, { color: C.green, bold: true, children: "\u2713 ADDED" }) : _jsx(Text, { color: C.accent2, bold: true, children: "\u2B07 GET  " }), _jsxs(Text, { color: C.text, bold: true, children: [" ", g.title] }), _jsxs(Text, { color: C.dim, children: ["  ", g.controls] })] }), _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: ["    ", g.blurb] })] }, g.id));
+                    })] }));
         }
         return (_jsxs(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: [plugins.map((p, i) => {
                     const selected = i === row;
@@ -233,7 +278,7 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
     };
     const hints = tab === "Model"
         ? connecting ? "Enter next · Esc cancel" : column === "models" ? `↑↓ choose · Enter use model · ← providers${provider.connect ? " · k change key" : ""}` : `↑↓ provider · Enter/→ ${provider.unavailable() ? "connect" : "pick a model"}${provider.connect ? " · k change key" : ""}`
-        : tab === "Engine" ? "↑↓ move · Enter use this engine" : tab === "Preferences" ? "↑↓ move · Enter/Space toggle · ←→ change option" : "↑↓ move · Enter toggle · r rescan";
+        : tab === "Engine" ? "↑↓ move · Enter use this engine" : tab === "Preferences" ? "↑↓ move · Enter/Space toggle · ←→ change option" : tab === "Games" ? "↑↓ move · Enter add / remove · /games opens the panel" : "↑↓ 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" })] })] }));
 }
 /** What a connect field starts with: the current URL to edit (keys stay hidden, so they start empty). */

package/dist/src/ui/Tabs.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+import path from "path";
+import { Text } from "ink";
+import { C, fileIcon } from "./theme.js";
+/** Tab labels: file names, with the folder added when two open files share a name. */
+function labels(tabs) {
+    return tabs.map((file) => {
+        const name = path.posix.basename(file);
+        const twin = tabs.some((other) => other !== file && path.posix.basename(other) === name);
+        return twin ? `${path.posix.basename(path.posix.dirname(file))}/${name}` : name;
+    });
+}
+/**
+ * Lays out the tabs that fit in `width` columns, keeping the active one in view: the ones that don't fit
+ * are left out at the ends, marked with ‹ ›.
+ */
+export function layoutTabs(tabs, active, width) {
+    const all = labels(tabs).map((label, i) => ({ file: tabs[i], label: label.length > 24 ? `${label.slice(0, 23)}…` : label }));
+    const size = (t) => t.label.length + 6 + 1; // " ◆ name × " and "│"
+    const at = Math.max(0, all.findIndex((t) => t.file === active));
+    let from = at;
+    let to = at + 1;
+    let used = all[at] ? size(all[at]) : 0;
+    // Grow to the right, then to the left, while there's room (2 columns kept for ‹ ›).
+    for (let grew = true; grew;) {
+        grew = false;
+        if (to < all.length && used + size(all[to]) <= width - 2) {
+            used += size(all[to++]);
+            grew = true;
+        }
+        if (from > 0 && used + size(all[from - 1]) <= width - 2) {
+            used += size(all[--from]);
+            grew = true;
+        }
+    }
+    const shown = all.slice(from, to);
+    const zones = [];
+    let x = from > 0 ? 1 : 0;
+    for (const t of shown) {
+        const w = size(t) - 1;
+        zones.push({ file: t.file, from: x, to: x + w, close: x + w - 2 });
+        x += w + 1;
+    }
+    // ‹ and › (tabs that don't fit) are clickable too: they go to the previous / next tab.
+    return { shown, before: from > 0, after: to < all.length, zones, prev: from > 0 ? 0 : null, next: to < all.length ? x : null };
+}
+/** The open files as tabs, for a pane's title row: the active one highlighted, with × to close it. */
+export function Tabs({ tabs, active, width, dirty }) {
+    const { shown, before, after } = layoutTabs(tabs, active, width);
+    return (_jsxs(_Fragment, { children: [before ? _jsx(Text, { color: C.dim, children: "\u2039" }) : null, shown.map((t) => {
+                const on = t.file === active;
+                const { icon, color } = fileIcon(t.file);
+                return (_jsxs(Fragment, { children: [_jsxs(Text, { ...(on ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { children: " " }), _jsx(Text, { color: color, children: icon }), _jsxs(Text, { color: on ? C.text : C.dim, bold: on, children: [" ", t.label] }), _jsxs(Text, { color: on && dirty ? C.yellow : on ? C.text : C.dim, children: [" ", on && dirty ? "●" : "×"] }), _jsx(Text, { children: " " })] }), _jsx(Text, { color: C.dim, children: "\u2502" })] }, t.file));
+            }), after ? _jsx(Text, { color: C.dim, children: "\u203A" }) : null] }));
+}

package/dist/src/ui/Terminal.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { C } from "./theme.js";
+const COLORS = { out: C.text, command: C.accent, info: C.dim, error: C.red };
+/**
+ * The terminal panel, under the code like VS Code's: type a command and Enter runs it. While one runs,
+ * what you type goes to it; Ctrl+C stops it. ↑↓ go through what you ran, Ctrl+L clears, Esc leaves.
+ */
+export const Terminal = memo(function Terminal({ shell, version, width, height, focused, wheel, onLeave }) {
+    const [input, setInput] = useState("");
+    const [history, setHistory] = useState([]);
+    const [back, setBack] = useState(-1);
+    const [scroll, setScroll] = useState(0);
+    const inner = width - 2;
+    const rows = Math.max(1, height - 3); // borders and the title
+    const lines = shell.view();
+    // Fit long lines by wrapping them, newest at the bottom.
+    const wrapped = [];
+    for (const line of lines.slice(-rows * 4)) {
+        const text = line.text || " ";
+        for (let i = 0; i < text.length; i += inner)
+            wrapped.push({ text: text.slice(i, i + inner), color: COLORS[line.kind] });
+    }
+    const promptText = shell.running ? "› " : shell.prompt();
+    const shownPrompt = `${promptText}${input}`;
+    const promptRows = Math.max(1, Math.ceil((shownPrompt.length + 1) / inner));
+    const outRows = Math.max(0, rows - promptRows);
+    const maxScroll = Math.max(0, wrapped.length - outRows);
+    const at = Math.min(scroll, maxScroll);
+    const shown = wrapped.slice(Math.max(0, wrapped.length - outRows - at), wrapped.length - at);
+    useEffect(() => setScroll(0), [version]); // new output: back to the bottom
+    useEffect(() => {
+        if (wheel?.lines)
+            setScroll((s) => Math.max(0, Math.min(maxScroll, s - wheel.lines)));
+    }, [wheel?.nonce]);
+    useInput((typed, key) => {
+        if (key.escape)
+            return onLeave();
+        if (key.ctrl && typed === "c") {
+            if (shell.running)
+                shell.interrupt();
+            else
+                setInput("");
+            return;
+        }
+        if (key.ctrl && typed === "l")
+            return shell.clear();
+        if (key.return) {
+            if (!shell.running && input.trim())
+                setHistory((h) => [...h.filter((c) => c !== input.trim()), input.trim()].slice(-100));
+            if (shell.running)
+                shell.input(input);
+            else
+                shell.run(input);
+            setInput("");
+            setBack(-1);
+            return;
+        }
+        if (key.upArrow || key.downArrow) {
+            if (!history.length)
+                return;
+            const next = key.upArrow ? Math.min(history.length - 1, back + 1) : back - 1;
+            setBack(next);
+            setInput(next < 0 ? "" : history[history.length - 1 - next]);
+            return;
+        }
+        if (key.pageUp)
+            return setScroll((s) => Math.min(maxScroll, s + outRows - 1));
+        if (key.pageDown)
+            return setScroll((s) => Math.max(0, s - outRows + 1));
+        if (key.backspace || key.delete)
+            return setInput((v) => v.slice(0, -1));
+        if (key.ctrl && typed === "u")
+            return setInput("");
+        if (key.ctrl || key.meta || key.tab)
+            return;
+        if (typed)
+            setInput((v) => v + typed.replace(/[\r\n]+/g, " "));
+    }, { isActive: focused });
+    const color = focused ? C.accent : C.dim;
+    const title = ` ▸ Terminal${shell.running ? "  ● running · Ctrl+C stops" : ""}${at ? `  ↑ ${at} lines` : ""}`;
+    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", borderStyle: focused ? "round" : "single", borderColor: color, overflow: "hidden", children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: color, bold: true, children: title.slice(0, inner - 3).padEnd(inner - 3) }), _jsx(Text, { color: C.text, bold: true, children: " \u00D7 " })] }), _jsx(Box, { flexDirection: "column", height: outRows, flexShrink: 0, children: shown.map((l, i) => _jsx(Text, { color: l.color, wrap: "truncate-end", children: l.text }, i)) }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: shell.running ? C.yellow : C.green, children: promptText }), _jsx(Text, { color: C.text, children: input }), focused ? _jsx(Text, { inverse: true, children: " " }) : null] })] }));
+});

package/dist/src/ui/clipboard.js

@@ -1,18 +1,20 @@
 import { spawn } from "child_process";
 /** Native clipboard commands to try, in order, for this platform. */
 function commands() {
+    // clip.exe is built in and instant; PowerShell can take seconds to start, so it's only the fallback.
     if (process.platform === "win32")
-        return [["powershell", ["-NoProfile", "-Command", "Set-Clipboard -Value ([Console]::In.ReadToEnd())"]]];
+        return [["clip", [], "utf16"], ["powershell", ["-NoProfile", "-Command", "Set-Clipboard -Value ([Console]::In.ReadToEnd())"], "utf8"]];
     if (process.platform === "darwin")
-        return [["pbcopy", []]];
-    return [["wl-copy", []], ["xclip", ["-selection", "clipboard"]], ["xsel", ["--clipboard", "--input"]]];
+        return [["pbcopy", [], "utf8"]];
+    return [["wl-copy", [], "utf8"], ["xclip", ["-selection", "clipboard"], "utf8"], ["xsel", ["--clipboard", "--input"], "utf8"]];
 }
-function run(cmd, args, text) {
+function run(cmd, args, text, encoding) {
     return new Promise((resolve) => {
         const child = spawn(cmd, args, { stdio: ["pipe", "ignore", "ignore"] });
         child.on("error", () => resolve(false));
         child.on("close", (code) => resolve(code === 0));
-        child.stdin.end(text);
+        child.stdin.on("error", () => { }); // the command is missing: "error" above answers
+        child.stdin.end(encoding === "utf16" ? Buffer.concat([Buffer.from([0xff, 0xfe]), Buffer.from(text, "utf16le")]) : text);
     });
 }
 /**
@@ -22,8 +24,8 @@ function run(cmd, args, text) {
 export async function copyToClipboard(text) {
     if (process.stdout.isTTY)
         process.stdout.write(`\x1b]52;c;${Buffer.from(text).toString("base64")}\x07`);
-    for (const [cmd, args] of commands())
-        if (await run(cmd, args, text))
+    for (const [cmd, args, encoding] of commands())
+        if (await run(cmd, args, text, encoding))
             return true;
     return process.stdout.isTTY === true;
 }

package/dist/src/ui/commands.js

@@ -0,0 +1,36 @@
+export const SLASH_COMMANDS = [
+    { name: "model", args: "[provider:model]", description: "show or switch the model" },
+    { name: "models", args: "[provider]", description: "list the models a provider offers" },
+    { name: "connect", args: "<provider>", description: "enter an API key (and URL) for a provider" },
+    { name: "open", args: "<file>[:line]", description: "open a file in the code view (part of its name is enough)" },
+    { name: "settings", description: "models, engine, preferences and plugins" },
+    { name: "auto", args: "[ask|auto-edit|auto]", description: "how much Nou does without asking" },
+    { name: "engine", args: "[name]", description: "which agent answers: nou, claude-code, codex or pi" },
+    { name: "cancel", description: "take back your last message (stops Nou; edit it and resend)" },
+    { name: "undo", description: "undo Nou's last change" },
+    { name: "rewind", description: "undo everything from Nou's last turn" },
+    { name: "diff", args: "[file|n]", description: "everything changed this session (or session n)" },
+    { name: "sessions", description: "earlier sessions with changes" },
+    { name: "history", description: "recent changes, yours and Nou's" },
+    { name: "problems", description: "every error and warning in the project" },
+    { name: "copy", args: "[code|file]", description: "copy the last reply, its last code block, or the open file" },
+    { name: "compact", description: "summarize the conversation to free up context" },
+    { name: "clear", description: "start a fresh conversation" },
+    { name: "terminal", description: "a terminal under the code, like VS Code's (or press `)" },
+    { name: "resume", args: "[number|last]", description: "pick up an earlier conversation in this folder (any engine)" },
+    { name: "pull", args: "<model>", description: "download an Ollama model" },
+    { name: "plugins", args: "[add|new <name>]", description: "your plugins and the starter ones" },
+    { name: "mcp", args: "[add|remove|import]", description: "MCP servers: tools from other programs (/mcp add browser for a browser)" },
+    { name: "games", description: "open or close the Games panel (Pong, Snake, Breakout)" },
+    { name: "version", description: "which version of Nou this is" },
+    { name: "help", description: "all commands and keys" },
+];
+/** Commands whose name starts with what's typed after the slash (exact match first), plus plugin commands. */
+export function matchCommands(typed, extra = []) {
+    const query = typed.replace(/^\//, "").toLowerCase();
+    const all = [...SLASH_COMMANDS, ...extra];
+    const starts = all.filter((c) => c.name.startsWith(query));
+    // Then ones that merely contain it, so "/conn" and "/key"-style guesses still find something.
+    const contains = query ? all.filter((c) => !c.name.startsWith(query) && (c.name.includes(query) || c.description.includes(query))) : [];
+    return [...starts.sort((a, b) => Number(b.name === query) - Number(a.name === query)), ...contains];
+}