nou-cli 0.5.1 → 0.5.2

package/dist/src/ui/Chat.js

@@ -1,15 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useAnimation, useInput } from "ink";
-import { renderMarkdown, wrap } from "./text.js";
+import { statSync } from "fs";
+import path from "path";
+import { linkAt, linkFileRefs, renderMarkdown, wrap } from "./text.js";
 import { ChatInput, inputHeight } from "./ChatInput.js";
 import { C, SPINNER } from "./theme.js";
 import { Pane } from "./Pane.js";
+import { matchCommands } from "./commands.js";
 import { Scrollbar, topFor } from "./scroll.js";
 const BAR = "▌ ";
-export const COMMANDS = ["/model", "/models", "/settings", "/auto", "/engine", "/copy", "/undo", "/rewind", "/history", "/problems", "/version", "/clear", "/help"];
+// Whether a path in a message is a file in the project, remembered so each one is checked once.
+const knownFiles = new Map();
+function isProjectFile(file) {
+    let known = knownFiles.get(file);
+    if (known === undefined) {
+        const full = path.resolve(file);
+        const rel = path.relative(process.cwd(), full);
+        try {
+            known = !rel.startsWith("..") && !path.isAbsolute(rel) && statSync(full).isFile();
+        }
+        catch {
+            known = false;
+        }
+        if (knownFiles.size > 5000)
+            knownFiles.clear();
+        // Only files that exist are remembered: one Nou is about to create becomes a link once it's there.
+        if (known)
+            knownFiles.set(file, known);
+    }
+    return known;
+}
 /** Display lines for one message, wrapped to `inner` columns. */
-function entryLines(entry, inner) {
+function entryLines(entry, inner, links = true) {
     const out = [];
     if (entry.kind === "user") {
         out.push({ text: "you", color: C.cyan, bold: true, lead: BAR, leadColor: C.cyan });
@@ -19,7 +42,7 @@ function entryLines(entry, inner) {
     }
     else if (entry.kind === "assistant") {
         out.push({ text: "◆ nou", color: C.accent2, bold: true, lead: BAR, leadColor: C.accent2 });
-        for (const line of renderMarkdown(entry.text, inner - 3)) {
+        for (const line of renderMarkdown(entry.text, inner - 3, links ? isProjectFile : undefined)) {
             const color = line.kind === "heading" ? C.accent2 : line.kind === "quote" ? C.dim : undefined;
             out.push({ text: "", spans: line.spans, ...(color ? { color } : {}), lead: BAR, leadColor: C.accent2 });
         }
@@ -29,7 +52,10 @@ function entryLines(entry, inner) {
         const style = entry.kind === "tool"
             ? { icon: "⚙", color: C.dim }
             : entry.kind === "error" ? { icon: "✖", color: C.red } : { icon: "ℹ", color: C.accent };
-        wrap(entry.text, inner - 4).forEach((line, i) => out.push({ text: ` ${line}`, color: style.color, lead: i === 0 ? ` ${style.icon}` : "  ", leadColor: style.color }));
+        wrap(entry.text, inner - 4).forEach((line, i) => {
+            const spans = links && entry.kind !== "user" ? linkFileRefs([{ text: ` ${line}` }], isProjectFile) : [];
+            out.push({ text: ` ${line}`, color: style.color, lead: i === 0 ? ` ${style.icon}` : "  ", leadColor: style.color, ...(spans.some((sp) => sp.link) ? { spans } : {}) });
+        });
     }
     return out;
 }
@@ -44,7 +70,7 @@ function cachedLines(entry, inner) {
     laidOut.set(entry, { inner, lines });
     return lines;
 }
-export const Chat = memo(function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, scrollTo, prefill, onSubmit, onAnswer }) {
+export const Chat = memo(function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, scrollTo, prefill, extraCommands, onMenu, onSubmit, onAnswer, click, onOpenRef, queued = [] }) {
     const [input, setInput] = useState("");
     useEffect(() => {
         if (prefill)
@@ -54,7 +80,7 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
     const { frame } = useAnimation({ interval: 80, isActive: !!busy });
     const inner = width - 3; // minus the borders and the scrollbar
     const history = useMemo(() => entries.flatMap((e) => cachedLines(e, inner)), [entries, inner]);
-    const lines = useMemo(() => (streaming ? [...history, ...entryLines({ kind: "assistant", text: streaming }, inner)] : history), [history, streaming, inner]);
+    const lines = useMemo(() => (streaming ? [...history, ...entryLines({ kind: "assistant", text: streaming }, inner, false)] : history), [history, streaming, inner]);
     // At the bottom, new output scrolls into view. Scrolled up to read, the view stays where it is
     // (counted from the bottom, so it moves up by however many lines arrived) until you scroll back down.
     const lastCount = useRef(lines.length);
@@ -84,7 +110,7 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         footer.push({ text: " [y] allow   [n] deny   [Esc] stop", color: C.yellow });
     }
     else if (approval?.kind === "tool") {
-        footer.push({ text: `🔌 Plugin tool: ${approval.name}`, color: C.yellow, bold: true });
+        footer.push({ text: `🔌 ${approval.name.startsWith("mcp__") ? `MCP tool ${approval.name.split("__")[1]} → ${approval.name.split("__").slice(2).join("__")}` : `Plugin tool: ${approval.name}`}`, color: C.yellow, bold: true });
         for (const line of wrap(JSON.stringify(approval.args), inner - 2).slice(0, 4))
             footer.push({ text: ` ${line}`, color: C.text });
         footer.push({ text: " [y] allow   [n] deny   [Esc] stop", color: C.yellow });
@@ -101,11 +127,23 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
     else if (busy) {
         footer.push({ text: `${SPINNER[frame % SPINNER.length]} ${busy}`, color: C.accent2 });
     }
-    const suggestions = input.startsWith("/") && !input.includes(" ")
-        ? COMMANDS.filter((c) => c.startsWith(input) && c !== input)
-        : [];
+    for (const text of queued) {
+        footer.push({ text: `⏳ next: ${text.replace(/\s+/g, " ")}`, color: C.dim });
+    }
+    // Typing "/" opens a menu of commands with what each does; ↑↓ pick one, Tab completes, Enter runs it.
+    const menuOpen = focused && !approval && input.startsWith("/") && !input.includes(" ") && !input.includes("\n");
+    const matches = useMemo(() => (menuOpen ? matchCommands(input, extraCommands) : []), [menuOpen, input, extraCommands]);
+    const [menuRow, setMenuRow] = useState(0);
+    useEffect(() => setMenuRow(0), [input]);
+    const showMenu = matches.length > 0;
+    useEffect(() => onMenu?.(showMenu), [showMenu]);
+    const menuRows = Math.min(matches.length, Math.max(1, Math.min(7, height - 12)));
+    const menuStart = Math.max(0, Math.min(menuRow - menuRows + 1, matches.length - menuRows));
+    const picked = matches[menuRow];
+    /** Puts the picked command in the input, with a space when it takes arguments. */
+    const complete = (c) => setInput(`/${c.name}${c.args ? " " : ""}`);
     const inputRows = inputHeight(input, inner + 1);
-    const rows = Math.max(1, height - 3 - footer.length - 2 - inputRows);
+    const rows = Math.max(1, height - 3 - footer.length - 2 - inputRows - (showMenu ? menuRows - 1 : 0));
     const sent = useMemo(() => entries.filter((e) => e.kind === "user").map((e) => e.text), [entries]);
     const maxBack = Math.max(0, lines.length - rows);
     const back = Math.min(scrollBack, maxBack);
@@ -119,6 +157,15 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         if (scrollTo)
             setScrollBack(maxBack - topFor(scrollTo.fraction, lines.length, rows));
     }, [scrollTo?.nonce]);
+    // Clicking a file named in a message opens it in the code view.
+    useEffect(() => {
+        if (!click)
+            return;
+        const line = visible[click.row];
+        const ref = line?.spans ? linkAt(line.spans, click.col) : null;
+        if (ref)
+            onOpenRef?.(ref);
+    }, [click?.nonce]);
     // While something waits for approval, y/n into an empty input answer it; any other key starts a message.
     useInput((typed) => {
         if (/^[yYnN]$/.test(typed))
@@ -136,16 +183,31 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         else if (key.ctrl && key.end)
             setScrollBack(0);
     }, { isActive: focused });
-    const submit = (value) => {
-        if (!value.trim() || busy || approval)
+    useInput((_input, key) => {
+        if (key.upArrow && !key.shift)
+            setMenuRow((r) => (r - 1 + matches.length) % matches.length);
+        else if (key.downArrow && !key.shift)
+            setMenuRow((r) => (r + 1) % matches.length);
+        else if (key.tab && picked)
+            complete(picked);
+        else if (key.escape)
+            setInput("");
+    }, { isActive: focused && showMenu });
+    const submit = (value, now = false) => {
+        if (!value.trim() || approval)
             return;
-        // "/se" + Enter runs /settings when only one command matches.
-        const command = !COMMANDS.includes(value.trim()) && suggestions.length === 1 ? suggestions[0] : value.trim();
+        let text = value.trim();
+        if (showMenu && picked) {
+            // Enter runs the highlighted command; one that needs an argument is completed instead, to type it.
+            if (picked.args?.startsWith("<"))
+                return complete(picked);
+            text = `/${picked.name}`;
+        }
         setInput("");
-        onSubmit(command);
+        onSubmit(text, now);
     };
     const render = (line, key, withLead = true) => (_jsxs(Text, { wrap: "truncate-end", children: [withLead && line.lead ? _jsx(Text, { color: line.leadColor ?? C.dim, children: line.lead }) : null, line.spans?.length
-                ? line.spans.map((span, i) => (_jsx(Text, { bold: !!span.bold || !!line.bold, italic: !!span.italic, dimColor: !!span.dim, ...(span.code ? { color: C.yellow } : line.color ? { color: line.color } : { color: C.text }), children: span.text }, i)))
+                ? line.spans.map((span, i) => (_jsx(Text, { bold: !!span.bold || !!line.bold, italic: !!span.italic, dimColor: !!span.dim && !span.link, underline: !!span.link, ...(span.link ? { color: C.cyan } : span.code ? { color: C.yellow } : line.color ? { color: line.color } : { color: C.text }), children: span.text }, i)))
                 : _jsx(Text, { bold: !!line.bold, dimColor: !!line.dim, ...(line.color ? { color: line.color } : {}), children: line.text || " " })] }, key));
     const empty = entries.length === 0 && !streaming;
     const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u25C6" }), " Chat", back
@@ -153,7 +215,8 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
                     ? _jsxs(Text, { color: C.green, bold: true, children: ["  \u2193 ", unread, " new lines below", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
                     : _jsxs(Text, { color: C.yellow, children: ["  \u2191 scrolled ", back, " lines", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
                 : maxBack > 0 ? _jsx(Text, { color: C.dim, children: "  PgUp / wheel to scroll" }) : null] }));
-    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { children: visible.map((line, i) => _jsx(Text, { color: line.leadColor ?? C.dim, children: `${line.lead ?? "  "}${i < visible.length - 1 ? "\n" : ""}` }, i)) }) }), _jsx(Box, { flexDirection: "column", width: inner - 2, flexShrink: 0, children: visible.map((line, i) => render(line, firstShown + i, false)) })] })) }), _jsx(Scrollbar, { total: lines.length, top: firstShown, rows: rows, focused: focused })] }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), _jsx(Text, { wrap: "truncate-end", color: C.dim, children: suggestions.length
-                    ? _jsxs(Text, { color: C.accent, children: [suggestions.join("  "), "  ", _jsx(Text, { color: C.dim, children: suggestions.length === 1 ? "Enter ↵" : "" })] })
-                    : contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " }), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner + 1)) }), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !(approval && !input), width: inner + 1, history: sent, placeholder: busy ? "working… Esc to stop" : "Ask anything · / for commands · ↑ history" })] }));
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { children: visible.map((line, i) => _jsx(Text, { color: line.leadColor ?? C.dim, children: `${line.lead ?? "  "}${i < visible.length - 1 ? "\n" : ""}` }, i)) }) }), _jsx(Box, { flexDirection: "column", width: inner - 2, flexShrink: 0, children: visible.map((line, i) => render(line, firstShown + i, false)) })] })) }), _jsx(Scrollbar, { total: lines.length, top: firstShown, rows: rows, focused: focused })] }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), showMenu ? (_jsx(Box, { flexDirection: "column", children: matches.slice(menuStart, menuStart + menuRows).map((c, i) => {
+                    const selected = menuStart + i === menuRow;
+                    return (_jsxs(Text, { wrap: "truncate-end", ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▸" : " " }), _jsxs(Text, { color: selected ? C.accent : C.text, bold: selected, children: ["/", c.name] }), c.args && inner >= 56 ? _jsxs(Text, { color: C.dim, children: [" ", c.args] }) : null /* narrow: the description matters more */, _jsxs(Text, { color: C.dim, children: ["  ", c.description] })] }, c.name));
+                }) })) : (_jsx(Text, { wrap: "truncate-end", color: C.dim, children: contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " })), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner + 1)) }), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !(approval && !input), width: inner + 1, history: sent, arrowsTaken: showMenu, placeholder: busy ? (inner >= 44 ? "Enter queues · Alt+Enter sends now · Esc stops" : "Enter queues · Esc stops") : showMenu ? "↑↓ choose · Tab complete · Enter run" : inner >= 44 ? "Ask anything · / for commands · ↑ history" : "Ask anything · / commands" })] }));
 });

package/dist/src/ui/ChatInput.js

@@ -35,7 +35,7 @@ function cursorLine(segments, cursor) {
     }
     return segments.length - 1;
 }
-export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder, history, maxLines = 6 }) {
+export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder, history, maxLines = 6, arrowsTaken = false }) {
     const [cursor, setCursor] = useState(value.length);
     const [recall, setRecall] = useState(null);
     const stash = useRef("");
@@ -75,9 +75,11 @@ export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder
     useInput((input, key) => {
         if (key.tab || key.escape || key.pageUp || key.pageDown || (key.shift && (key.upArrow || key.downArrow)))
             return;
+        if (arrowsTaken && (key.upArrow || key.downArrow))
+            return;
         if (key.return) {
             setRecall(null);
-            onSubmit(value);
+            onSubmit(value, key.meta);
             return;
         }
         if (key.backspace)

package/dist/src/ui/CodeView.js

@@ -1,22 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { artWork } from "../util/index.js";
-import { highlightLines, sideBySide, splitLines } from "./text.js";
+import { highlightLines, markAnsi, sideBySide, sliceAnsi, splitLines } from "./text.js";
 import { C, fileIcon, gradient } from "./theme.js";
 import { Pane } from "./Pane.js";
 import { Scrollbar, topFor } from "./scroll.js";
+/** The current match: a yellow background; the others are shown inverted. */
+const CURRENT_MATCH = ["\x1b[43m\x1b[30m", "\x1b[49m\x1b[39m"];
 /** Columns ←/→ and Shift+wheel move sideways. */
 const SIDE_STEP = 8;
-export const CodeView = memo(function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, problems, focusLine, syntaxVersion, diffNote, wheel, scrollTo, onViewport }) {
+const EDIT_HINT = "   double-click or e to edit · v diff";
+export const CodeView = memo(function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, problems, focusLine, syntaxVersion, diffNote, wheel, scrollTo, onViewport, defineAt, onDefine, tabs, onFinding, findRequest }) {
     const [top, setTop] = useState(0);
-    // Columns scrolled sideways. Scrolled lines show without colors (slicing colored text could cut a color code in half).
+    // Columns scrolled sideways (colors are kept: see sliceAnsi).
     const [left, setLeft] = useState(0);
-    const rows = Math.max(1, height - 3);
+    // Ctrl+F: what's being looked for, and which match is current.
+    const [find, setFind] = useState(null);
+    useEffect(() => onFinding?.(!!find), [!!find]);
+    useEffect(() => setFind(null), [filePath]);
+    // Only a new request opens it: not the old one seen again when the view comes back (after the editor, settings...).
+    const lastFindRequest = useRef(findRequest);
+    useEffect(() => {
+        if (findRequest && findRequest !== lastFindRequest.current)
+            setFind({ query: "", index: 0 });
+        lastFindRequest.current = findRequest;
+    }, [findRequest]);
+    const rows = Math.max(1, height - 3 - (find ? 1 : 0));
     const inner = width - 3; // minus the borders and the scrollbar
     const lines = useMemo(() => (filePath ? highlightLines(filePath, content) : []), [filePath, content, syntaxVersion]);
-    const plain = useMemo(() => (left > 0 ? splitLines(content) : []), [content, left > 0]);
     const problemsByLine = useMemo(() => {
         const map = new Map();
         for (const d of problems)
@@ -39,6 +52,31 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
     }, [focusLine]);
     const maxTop = Math.max(0, total - rows);
     const start = Math.min(top, maxTop);
+    const shownLines = useMemo(() => (find ? splitLines(content) : []), [content, !!find]);
+    const matches = useMemo(() => {
+        const out = [];
+        const q = find?.query.toLowerCase();
+        if (!q)
+            return out;
+        shownLines.forEach((text, i) => {
+            const lower = text.toLowerCase();
+            for (let at = lower.indexOf(q); at >= 0 && out.length < 10_000; at = lower.indexOf(q, at + q.length))
+                out.push({ line: i, col: at });
+        });
+        return out;
+    }, [shownLines, find?.query]);
+    const current = find && matches.length ? matches[((find.index % matches.length) + matches.length) % matches.length] : null;
+    // Bring the current match into view (a third of the way down, like a jump), sideways too.
+    useEffect(() => {
+        if (!current)
+            return;
+        if (current.line < start || current.line >= start + rows)
+            setTop(Math.max(0, current.line - Math.floor(rows / 3)));
+        const room = inner - String(lines.length).length - 2;
+        if (current.col < left || current.col + (find?.query.length ?? 0) > left + room)
+            setLeft(Math.max(0, current.col - Math.floor(room / 3)));
+    }, [current?.line, current?.col]);
+    const found = focusLine?.path && focusLine.path === filePath ? { from: focusLine.line, to: Math.max(focusLine.line, focusLine.to ?? focusLine.line) } : null;
     useEffect(() => {
         if (!wheel)
             return;
@@ -55,7 +93,42 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
         if (filePath && !diff)
             onViewport(start + 1, Math.min(total, start + rows));
     }, [filePath, diff, start, rows, total]);
+    useEffect(() => {
+        if (!defineAt || diff || !filePath)
+            return;
+        const n = start + defineAt.row + 1;
+        const raw = content.replace(/\r\n/g, "\n").split("\n")[n - 1];
+        if (raw === undefined)
+            return;
+        // Screen column to the file's own column: tabs are shown as two spaces.
+        const want = defineAt.x - (String(lines.length).length + 1) + left;
+        let shown = 0;
+        let col = 0;
+        while (col < raw.length && shown + (raw[col] === "\t" ? 2 : 1) <= want)
+            shown += raw[col++] === "\t" ? 2 : 1;
+        onDefine?.(n, col + 1);
+    }, [defineAt?.nonce]);
     useInput((input, key) => {
+        if (!find)
+            return;
+        if (key.escape)
+            return setFind(null);
+        if (key.return || key.downArrow || (key.ctrl && input === "g"))
+            return setFind((f) => f && { ...f, index: f.index + 1 });
+        if (key.upArrow)
+            return setFind((f) => f && { ...f, index: f.index - 1 });
+        if (key.backspace || key.delete)
+            return setFind((f) => f && { query: f.query.slice(0, -1), index: 0 });
+        if (key.ctrl && input === "f")
+            return;
+        if (input && !key.ctrl && !key.meta && input >= " ")
+            setFind((f) => f && { query: f.query + input, index: 0 });
+    }, { isActive: focused && !!find });
+    useInput((input, key) => {
+        if (find)
+            return;
+        if (key.ctrl && input === "f" && !diff)
+            return setFind({ query: "", index: 0 });
         if (key.upArrow || input === "k")
             setTop((t) => Math.max(0, Math.min(t, maxTop) - 1));
         else if (key.downArrow || input === "j")
@@ -99,11 +172,14 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
     }
     if (!filePath) {
         const tips = [
-            ["Ctrl+P", "find a file"],
-            ["Tab", "switch panes"],
-            ["e", "edit the open file"],
+            ["?", "everything Nou can do, searchable"],
+            ["Ctrl+P", "find a file (recent ones first)"],
+            ["/", "commands, with a menu"],
+            ["Tab", "switch panes (or click one)"],
+            ["e", "edit the open file (or double-click it)"],
             ["v", "diff vs git HEAD"],
-            ["/settings", "models, preferences, plugins"],
+            ["drag", "a pane's border to resize it"],
+            ["s", "settings: models, keys, plugins"],
         ];
         return (_jsx(Pane, { title: _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u2726" }), " Welcome"] }), width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [inner > 62 && artWork.split("\n").filter((l) => l.trim()).map((line, i) => (_jsx(Text, { children: gradient(line, i).map((g, j) => _jsx(Text, { color: g.color, children: g.ch }, j)) }, i))), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: C.text, children: "Hello, I am Nou! \uD83C\uDF1E  Your terminal coding companion." }), _jsx(Text, { color: C.dim, children: "Ask in the chat on the right. Files I read or edit open here as I work." }), _jsx(Text, { children: " " }), tips.map(([k, d]) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: C.accent, bold: true, children: k.padEnd(10) }), _jsx(Text, { color: C.dim, children: d })] }, k)))] }) }));
     }
@@ -111,13 +187,28 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
     const { icon, color } = fileIcon(filePath);
     const errorCount = problems.filter((d) => d.severity === "error").length;
     const warningCount = problems.filter((d) => d.severity === "warning").length;
-    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, errorCount > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", errorCount] }), warningCount > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", warningCount] }), _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused ? "   double-click or e to edit · v diff" : ""] })] }));
-    return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: lines.slice(start, start + rows).map((line, i) => {
-                        const n = start + i + 1;
-                        const isMarked = marked.has(n);
-                        const here = problemsByLine.get(n);
-                        const worst = here?.[0];
-                        const style = worst ? SEVERITY_STYLE[worst.severity] : null;
-                        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: style?.color ?? (isMarked ? C.green : C.dim), children: String(n).padStart(gutter) }), style ? _jsx(Text, { color: style.color, children: style.icon }) : _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), (left ? plain[start + i]?.slice(left) : line) || " ", worst && style ? _jsxs(Text, { color: style.color, dimColor: true, children: ["   ", style.icon, " ", worst.message, here.length > 1 ? ` (+${here.length - 1})` : ""] }) : null] }, n));
-                    }) }), _jsx(Scrollbar, { total: total, top: start, rows: rows, focused: focused })] }) }));
+    // The edit hint only when it fits: a cut-off hint reads as noise.
+    const titleRoom = tabs ? 0 : width - 4 - (3 + filePath.length + (errorCount ? 5 + String(errorCount).length : 0) + (warningCount ? 5 + String(warningCount).length : 0) + scroll.length + (total > rows ? 7 : 0));
+    const title = (_jsxs(_Fragment, { children: [tabs ?? _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath] }), errorCount > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", errorCount] }), warningCount > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", warningCount] }), _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused && titleRoom >= EDIT_HINT.length ? EDIT_HINT : ""] })] }));
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: lines.slice(start, start + rows).map((line, i) => {
+                            const n = start + i + 1;
+                            const isFound = !!found && n >= found.from && n <= found.to;
+                            const isMarked = marked.has(n);
+                            const here = problemsByLine.get(n);
+                            const worst = here?.[0];
+                            const style = worst ? SEVERITY_STYLE[worst.severity] : null;
+                            return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: style?.color ?? (isMarked ? C.green : C.dim), children: String(n).padStart(gutter) }), style ? _jsx(Text, { color: style.color, children: style.icon }) : isFound ? _jsx(Text, { color: C.cyan, bold: true, children: "\u258C" }) : _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), (() => {
+                                        let text = line;
+                                        if (find?.query) {
+                                            for (const m of matches) {
+                                                if (m.line !== n - 1)
+                                                    continue;
+                                                const now = m === current;
+                                                text = markAnsi(text, m.col, m.col + find.query.length, ...(now ? CURRENT_MATCH : []));
+                                            }
+                                        }
+                                        text = (left ? sliceAnsi(text, left) : text) || " ";
+                                        return isFound ? _jsx(Text, { backgroundColor: C.panel, children: text }) : text;
+                                    })(), worst && style ? _jsxs(Text, { color: style.color, dimColor: true, children: ["   ", style.icon, " ", worst.message, here.length > 1 ? ` (+${here.length - 1})` : ""] }) : null] }, n));
+                        }) }), _jsx(Scrollbar, { total: total, top: start, rows: rows, focused: focused })] }), find ? (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: C.accent2, bold: true, children: " \u2315 " }), _jsx(Text, { backgroundColor: C.panel, children: find.query }), _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { color: find.query && !matches.length ? C.red : C.dim, children: ["  ", find.query ? (matches.length ? `${matches.indexOf(current) + 1}/${matches.length}${matches.length >= 10_000 ? "+" : ""}` : "no matches") : "type to find", "  ", "Enter/\u2193 next \u00B7 \u2191 previous \u00B7 Esc close"] })] })) : null] }));
 });

package/dist/src/ui/Editor.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import path from "path";
 import { Box, Text, useInput, usePaste } from "ink";
-import { highlightLines } from "./text.js";
+import { highlightLines, sliceAnsi } from "./text.js";
 import { C, fileIcon } from "./theme.js";
 import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { Pane } from "./Pane.js";
@@ -88,7 +88,7 @@ const LINE_COMMENTS = {
 };
 const commentFor = (file) => LINE_COMMENTS[path.extname(file).toLowerCase()] ?? (path.basename(file).toLowerCase() === "dockerfile" ? "#" : null);
 /** A text editor: arrows and the mouse to move, Shift to select, Ctrl+C/X/V clipboard, Ctrl+S save, Ctrl+Z undo, Esc leave. */
-export const Editor = memo(function Editor({ width, height, focused, filePath, initial, baseline, startLine, startCol, problems, autoSave, syntaxVersion, wheel, scrollTo, mouse, onSave, onExit, onState, onHover, onDefinition }) {
+export const Editor = memo(function Editor({ width, height, focused, filePath, initial, baseline, startLine, startCol, problems, autoSave, syntaxVersion, wheel, scrollTo, mouse, onSave, onExit, onState, onHover, onDefinition, tabs }) {
     const eol = useMemo(() => (baseline.includes("\r\n") ? "\r\n" : "\n"), [baseline]);
     const indentUnit = useMemo(() => (/^\t/m.test(initial) ? "\t" : "  "), [initial]);
     const comment = useMemo(() => commentFor(filePath), [filePath]);
@@ -329,6 +329,11 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
         const col = bufferCol(buf.lines[row], Math.max(0, mouse.x - gutter) + v.left);
         setHover(null);
         setPrompt((p) => (p?.kind === "line" ? null : p));
+        if (mouse.kind === "define") {
+            dragFrom.current = null;
+            setBuf((b) => ({ ...b, row, col, anchor: null }));
+            return onDefinition(buf.lines.join("\n"), row + 1, col + 1);
+        }
         setBuf((b) => {
             if (mouse.kind === "press") {
                 dragFrom.current = { row, col };
@@ -571,9 +576,11 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
     v.top = Math.max(0, Math.min(v.top, maxTop));
     const visible = buf.lines.slice(v.top, v.top + rows);
     const colored = useMemo(
-    // Scrolled sideways: every line shifts by the same amount (plain text, since slicing highlighted
-    // text could cut a color code in half).
-    () => (v.left === 0 ? highlightLines(filePath, visible.join("\n")) : visible.map((l) => expand(l).slice(v.left, v.left + textWidth))), [filePath, visible.join("\n"), v.left, textWidth, syntaxVersion]);
+    // Scrolled sideways: every line shifts by the same amount, colors and all.
+    () => {
+        const lines = highlightLines(filePath, visible.join("\n"));
+        return v.left === 0 ? lines : lines.map((l) => sliceAnsi(l, v.left, textWidth));
+    }, [filePath, visible.join("\n"), v.left, textWidth, syntaxVersion]);
     const { icon, color } = fileIcon(filePath);
     const byLine = useMemo(() => {
         const map = new Map();
@@ -594,7 +601,7 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
     const statusColor = confirmExit ? C.red : prompt ? C.accent : flash ? C.green : cursorProblem ? SEVERITY_STYLE[cursorProblem.severity].color : C.dim;
     const hoverLines = hover ? hover.split("\n").filter((l) => l.trim()).slice(0, 6) : [];
     const cursorVisible = buf.row >= v.top && buf.row < v.top + rows;
-    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 " }), !cursorVisible ? _jsxs(Text, { color: C.dim, children: ["  cursor on line ", buf.row + 1, " \u00B7 \u2191\u2193 to go back"] }) : null] }), width: width, height: height, focused: focused, accent: C.green, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: width - 3, flexShrink: 0, children: visible.map((line, i) => {
+    return (_jsxs(Pane, { title: _jsxs(_Fragment, { children: [tabs ?? _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 " }), !cursorVisible ? _jsxs(Text, { color: C.dim, children: ["  cursor on line ", buf.row + 1, " \u00B7 \u2191\u2193 to go back"] }) : null] }), width: width, height: height, focused: focused, accent: C.green, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: width - 3, flexShrink: 0, children: visible.map((line, i) => {
                             const n = v.top + i;
                             const isCursorLine = n === buf.row;
                             const problem = byLine.get(n + 1)?.[0];

package/dist/src/ui/FileTree.js

@@ -170,7 +170,7 @@ export const FileTree = memo(function FileTree({ width, height, focused, openFil
     const inner = width - 3; // minus the borders and the scrollbar
     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] });
+        : _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent, children: "\u25A4" }), " Explorer", git.size ? _jsx(Text, { color: C.dim, children: inner >= 30 ? `  c: changes (${git.size})` : `  ±${git.size}` }) : null] });
     return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "row", height: rows, children: [_jsxs(Box, { flexDirection: "column", width: inner, flexShrink: 0, 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);

package/dist/src/ui/GamePanel.js

@@ -0,0 +1,92 @@
+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 size on screen, borders included. */
+export const GAME_PANEL = { width: 40, height: 19 };
+const FIELD = { width: GAME_PANEL.width - 4, height: GAME_PANEL.height - 6 };
+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 floating panel for little games. The app places it (it can be dragged by its title bar) and 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({ x, y, focused, installed, onLeave, onOpenSettings }) {
+    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]);
+    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 ? C.accent2 : C.dim;
+    const inner = GAME_PANEL.width - 2;
+    const pad = (s) => (s.length >= inner ? s.slice(0, inner) : s + " ".repeat(inner - s.length));
+    const title = playing ? ` ✦ ${playing.game.title}` : " ✦ Games";
+    const hint = !focused ? "click to play · drag the title to move" : playing ? (view?.over ? "Enter again · q games · Esc leave" : `${paused ? "PAUSED · " : ""}Space pause · q games · Esc leave`) : "↑↓ choose · Enter play · Esc leave";
+    return (_jsxs(Box, { position: "absolute", top: y, left: x, width: GAME_PANEL.width, height: GAME_PANEL.height, flexDirection: "column", borderStyle: "round", borderColor: color, children: [_jsx(Text, { backgroundColor: C.panel, color: color, bold: true, wrap: "truncate-end", children: pad(`${title}  ⠿ drag`) }), 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} ` }), " "] }) })] }));
 });