nou-cli 0.5.4 → 0.5.6

package/dist/src/ui/App.js

@@ -22,9 +22,10 @@ import { lsp } from "../lsp/index.js";
 import { onGrammarLoaded, preload } from "../syntax/index.js";
 import { setCodeTheme } from "../syntax/themes.js";
 import { checkForUpdate, currentVersion } from "../update/index.js";
-import { changedLines, lineCounts, loadFallbackHighlighter } from "./text.js";
+import { changedLines, lineCounts, loadFallbackHighlighter, splitLines } from "./text.js";
 import { findDefinition, wordAt } from "./definition.js";
 import { ProblemsView } from "./ProblemsView.js";
+import { useFocusReporting, useTerminalFocused } from "./focus.js";
 import { useMouse } from "./mouse.js";
 import { C } from "./theme.js";
 import { FileTree } from "./FileTree.js";
@@ -36,8 +37,9 @@ import { Chat, chatTabZones } from "./Chat.js";
 import { copyToClipboard, openInBrowser } from "./clipboard.js";
 import { Header } from "./Header.js";
 import { Tabs, layoutTabs } from "./Tabs.js";
-import { GAME_PANEL, GamePanel } from "./GamePanel.js";
+import { GAME_PANEL, GameGuard, GamePanel } from "./GamePanel.js";
 import { Terminal } from "./Terminal.js";
+import { forgetScreen } from "./redraw.js";
 import { showMePrompt, showStepsTool, stepsFromReply } from "../guide/index.js";
 import { Shell } from "../terminal/index.js";
 import { QuickOpen, listAllFiles, score } from "./QuickOpen.js";
@@ -127,6 +129,8 @@ export function App({ initialModel, permContext, resume }) {
     const [termVersion, setTermVersion] = useState(0);
     /** Its height while its top border is being dragged (saved when you let go). */
     const [termDrag, setTermDrag] = useState(null);
+    /** Bumped to draw every line again after the screen is cleared (/redraw, Ctrl+L). */
+    const [, setRepaint] = useState(0);
     /** The Games panel's height while its top border is being dragged (saved when you let go). */
     const [gameSizeDrag, setGameSizeDrag] = useState(null);
     /** The tab strip, kept while nothing in it changes: a new one would redraw the whole code view on every scroll. */
@@ -139,6 +143,8 @@ export function App({ initialModel, permContext, resume }) {
     const guideAsk = useRef(null);
     /** Where the undo history stood when the steps were asked for: an engine that edits anyway is put back. */
     const guideMark = useRef(0);
+    /** /resume just listed the conversations: the next message, if it's a number, picks one. */
+    const pickingResume = useRef(false);
     const guideFound = useRef(null);
     const shellRef = useRef(null);
     const beforeTerm = useRef("code");
@@ -201,6 +207,9 @@ export function App({ initialModel, permContext, resume }) {
     const [plugins, setPlugins] = useState([]);
     const [starters, setStarters] = useState([]);
     const [viewport, setViewport] = useState(null);
+    /** Folding in the code view: a click on a row's fold marker, and /fold, /unfold for the whole file. */
+    const [foldClick, setFoldClick] = useState(null);
+    const [foldAll, setFoldAll] = useState(null);
     // The editor reports every keystroke; the app only re-renders when what it shows changes (line, unsaved, selection).
     const editorStateRef = useRef(null);
     const [editorState, setEditorState] = useState(null);
@@ -539,12 +548,18 @@ export function App({ initialModel, permContext, resume }) {
         engineConfig.current = { system: buildSystemPrompt(permContext, extras), extras: [...extras, nouRulesOnly(permContext)].filter(Boolean), extraTools: [...extraTools, showStepsTool((steps) => (guideFound.current = steps)), ...mcpRef.current.tools()], effort: settings.effort };
         agentRef.current.configure(engineConfig.current);
     }, [settings.gitContext, settings.effort, activePlugins, mcpVersion]);
-    // Pick up changes made outside Nou (other editors, git commands).
+    // Pick up changes made outside Nou (other editors, git commands). Not while Nou's window is in the
+    // background (in a big repo each `git status` costs real CPU); coming back checks right away.
     const polling = useRef(false);
+    const wasFocused = useRef(true);
+    const windowFocused = useTerminalFocused();
+    useFocusReporting(true);
     useEffect(() => {
-        if (!repo)
+        const cameBack = windowFocused && !wasFocused.current;
+        wasFocused.current = windowFocused;
+        if (!repo || !windowFocused)
             return;
-        const timer = setInterval(() => {
+        const poll = () => {
             if (busy || polling.current)
                 return;
             polling.current = true;
@@ -553,9 +568,12 @@ export function App({ initialModel, permContext, resume }) {
                 // Only redraw when something changed.
                 setGit((prev) => (sameStatus(prev, next) ? prev : next));
             });
-        }, 4000);
+        };
+        if (cameBack)
+            poll();
+        const timer = setInterval(poll, 4000);
         return () => clearInterval(timer);
-    }, [repo, busy]);
+    }, [repo, busy, windowFocused]);
     useEffect(() => {
         if (busy)
             return;
@@ -626,7 +644,8 @@ export function App({ initialModel, permContext, resume }) {
             return info("No earlier conversations in this folder yet: Nou's are saved after each reply, and Claude Code's and Codex's own sessions here show up too.");
         if (!arg) {
             const rows = list.slice(0, 10).map((c, i) => `  ${String(i + 1).padStart(2)}. ${c.title}  (${c.messages} message${c.messages === 1 ? "" : "s"} · ${"file" in c ? `${engineInfo(c.engine).label} CLI` : engineInfo(isEngineId(c.engine) ? c.engine : "nou").label} · ${ago(c.updated)})`);
-            return info(`Earlier conversations here. /resume <number> picks one up (or /resume last):\n${rows.join("\n")}`);
+            pickingResume.current = true; // a bare number, typed next, picks one
+            return info(`Earlier conversations here. Type a number to pick one up (or /resume last):\n${rows.join("\n")}`);
         }
         const pick = arg === "last" ? list[0] : list[Number(arg) - 1] ?? list.find((c) => c.id === arg);
         if (!pick)
@@ -1081,14 +1100,23 @@ export function App({ initialModel, permContext, resume }) {
         const double = !!last && Date.now() - last.time < DOUBLE_CLICK_MS && Math.abs(last.x - event.x) <= 1 && last.y === event.y;
         lastClick.current = double ? null : { x: event.x, y: event.y, time: Date.now() };
         if (pane === "code" && event.y >= 3 && codePanel === "code") {
+            // As the code view counts them (a last empty line after the final newline isn't shown).
+            const digits = String(splitLines(content).length).length;
             if (showEditor) {
                 dragging.current = "editor";
                 editorAt(event.x, event.y, double ? "double" : "press");
             }
+            else if (openFile && !diff && event.x - codeLeft - 1 === digits + 1) {
+                // The fold marker (▾/▸) beside the line number: fold or unfold that block.
+                lastClick.current = null;
+                setFoldClick((f) => ({ row: event.y - 3, nonce: (f?.nonce ?? 0) + 1 }));
+            }
             else if (double && openFile && !diff && settleDraft(openFile)) {
                 // Double-click in the code: edit right there.
-                const gutter = String(content.split("\n").length).length + 1;
-                setEditorStart((s) => ({ line: (viewport?.top ?? 1) + event.y - 3, col: Math.max(1, event.x - codeLeft - gutter), nonce: s.nonce + 1 }));
+                // The code view's gutter: the line number, a marker and the fold arrow; folds hide lines between rows.
+                const gutter = digits + 2;
+                const line = viewport?.lines?.[event.y - 3] ?? (viewport?.top ?? 1) + event.y - 3;
+                setEditorStart((s) => ({ line, col: Math.max(1, event.x - codeLeft - gutter), nonce: s.nonce + 1 }));
                 setDiffMode("off");
                 setEditing(true);
             }
@@ -1414,6 +1442,8 @@ export function App({ initialModel, permContext, resume }) {
                 setFocus("chat");
             return;
         }
+        if (key.ctrl && input === "l")
+            return redraw(); // (the editor and terminal use Ctrl+L themselves)
         if (focus === "chat")
             return; // letters belong to the text box
         if (input === "?")
@@ -1716,6 +1746,15 @@ ${snippet}
                 return;
             case "terminal":
                 return toggleTerminal();
+            case "redraw":
+                return redraw();
+            case "fold":
+            case "unfold":
+                if (!openFile)
+                    return info("Open a file first: /fold folds every function and block in it, /unfold opens them.", "error");
+                setEditing(false);
+                setFocus("code");
+                return setFoldAll((f) => ({ fold: command === "fold", nonce: (f?.nonce ?? 0) + 1 }));
             case "new":
                 return newChatTab();
             case "close":
@@ -1941,6 +1980,11 @@ ${snippet}
             setQueued((q) => [...q, text]);
     };
     const send = (text) => {
+        // Right after /resume lists them, a number picks a conversation instead of being sent to the agent.
+        const picking = pickingResume.current;
+        pickingResume.current = false;
+        if (picking && /^\s*\d+\s*$/.test(text))
+            return void resumeConversation(text.trim());
         if (text.startsWith("/")) {
             void runCommand(text);
             return;
@@ -1984,7 +2028,7 @@ ${snippet}
     const onTreeHover = useEvent(() => { });
     const onJump = useEvent((file, line) => openAt(file, line));
     const onCloseProblems = useEvent(() => setCodePanel("code"));
-    const onViewport = useEvent((top, bottom) => setViewport((v) => (v?.top === top && v.bottom === bottom ? v : { top, bottom })));
+    const onViewport = useEvent((top, bottom, lines) => setViewport((v) => (v?.top === top && v.bottom === bottom && v.lines?.join() === lines?.join() ? v : { top, bottom, ...(lines ? { lines } : {}) })));
     const onSend = useEvent(submit);
     const onChatMenu = useEvent((open) => {
         chatMenuOpen.current = open;
@@ -2080,6 +2124,11 @@ ${snippet}
         updateSettings({ mouse: !settings.mouse });
         info(settings.mouse ? "Mouse off: drag to select text and copy it as usual in your terminal. m turns it back on." : "Mouse on: wheel scrolls, click focuses, drag borders to resize.");
     };
+    /** /redraw, Ctrl+L: draws the whole screen again, in case anything else wrote to the terminal and shifted it. */
+    function redraw() {
+        forgetScreen();
+        setRepaint((n) => n + 1);
+    }
     /** Opens the terminal panel (starting its shell the first time) and gives it the keyboard, or closes it. */
     function toggleTerminal(open = !termOpen) {
         shellRef.current ??= new Shell(() => setTermVersion((v) => v + 1));
@@ -2113,6 +2162,7 @@ ${snippet}
             setFocus(beforeGame.current);
     };
     // Plain functions, not hooks: this runs after the settings screen's early return.
+    const onGameScore = (game, score) => updateSettings({ gameBest: { ...(settings.gameBest ?? {}), [game]: score } });
     const leaveGames = () => setFocus(beforeGame.current === "game" ? "chat" : beforeGame.current);
     const gamesSettings = () => {
         setFocus(beforeGame.current === "game" ? "chat" : beforeGame.current);
@@ -2145,7 +2195,7 @@ ${snippet}
         { title: "MCP servers: tools from other programs", keys: "/mcp", run: () => void runCommand("/mcp") },
         { title: "Browser control (Playwright MCP)", keys: "/mcp add browser", run: () => void runCommand("/mcp add browser") },
         { title: "Import MCP servers from Claude Code, Cursor, Codex...", keys: "/mcp import", run: () => void runCommand("/mcp import") },
-        { title: gamesOpen ? "Close the Games panel" : "Games: Pong, Snake, Breakout", keys: "/games", run: () => toggleGames() },
+        { title: gamesOpen ? "Close the Games panel" : "Games: Pong, Snake, Breakout, Dodge, Hop, Pairs", keys: "/games", run: () => toggleGames() },
         { title: "Next tab", keys: "]", run: () => cycleTab(1) },
         { title: "Previous tab", keys: "[", run: () => cycleTab(-1) },
         { title: "Close the tab", keys: "x", run: () => closeTab() },
@@ -2252,9 +2302,9 @@ ${snippet}
     }
     const modelLabel = agentRef.current.id === "nou" ? describe(choice) : `${engineInfo(agentRef.current.id).label} · ${engineInfo(agentRef.current.id).model(choice)}`;
     clickable.current = { status: zones, modelFrom: columns - (" ⌂ LOCAL ".length + ` ${modelLabel} `.length + 1) };
-    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Header, { width: columns, branch: branch, changes: git.size, model: modelLabel, local: choice.provider.local, busy: busy, update: update }), _jsxs(Box, { flexDirection: "row", height: height, children: [_jsx(FileTree, { width: treeWidth, height: heights.tree, focused: focus === "tree", openFile: openFile, reveal: reveal, version: treeVersion, changed: edited, working: working, git: git, problemCounts: problemCounts, wheel: wheelFor("tree"), scrollTo: scrollFor("tree"), click: treeClick, onOpen: onTreeOpen, onHover: onTreeHover }), codePanel === "problems" && !pendingChange ? (_jsx(ProblemsView, { width: codeWidth, height: heights.code, focused: focus === "code", problems: diagnostics.all(), checking: checking, wheel: wheelFor("code"), onJump: onJump, onClose: onCloseProblems })) : showEditor ? (_jsx(Editor, { ...(tabStrip ? { tabs: tabStrip } : {}), width: codeWidth, height: heights.code, focused: focus === "code", filePath: openFile, initial: draft.current?.path === openFile ? draft.current.text : content, baseline: draft.current?.path === openFile ? draft.current.baseline : content, startLine: editorStart.line, ...(editorStart.col ? { startCol: editorStart.col } : {}), problems: fileProblems, autoSave: settings.autoSave, syntaxVersion: syntaxVersion, wheel: wheelFor("code"), scrollTo: scrollFor("code"), mouse: editorMouse, onHover: onEditorHover, onDefinition: onEditorDefinition, onSave: onEditorSave, onExit: onEditorExit, onState: onEditorState, ...(guideStep && openFile === guideStep.file ? { guide: { row: guideStep.line - 1, code: guideStep.code }, onGuideDone } : {}) }, `${openFile}:${editorStart.nonce}`)) : (_jsx(CodeView, { ...(tabStrip && !diff ? { tabs: tabStrip } : {}), width: codeWidth, height: heights.code, focused: focus === "code", filePath: openFile, content: content, diff: diff, diffLabel: diffMode === "git" ? "vs HEAD" : diffMode === "session" ? sessionView?.label ?? "this session" : "Nou's edit", pending: !!pendingChange && diff === pendingChange, marked: record?.lines ?? NO_LINES, problems: fileProblems, focusLine: focusLine, syntaxVersion: syntaxVersion, diffNote: pendingChange && diff === pendingChange ? pendingNote?.short ?? (checking.length ? "checking…" : null) : null, wheel: wheelFor("code"), scrollTo: scrollFor("code"), onViewport: onViewport, defineAt: codeDefine, onDefine: onCodeDefine, onFinding: onCodeFinding, findRequest: findRequest })), _jsx(Chat, { width: chatWidth, height: heights.chat, focused: focus === "chat", entries: entries, streaming: streaming, busy: busy, approval: approval?.request ?? null, approvalNote: pendingChange ? pendingNote?.detail ?? null : null, contextChip: contextChip, wheel: wheelFor("chat"), scrollTo: scrollFor("chat"), prefill: chatPrefill, extraCommands: pluginCommands, onMenu: onChatMenu, onSubmit: onSend, queued: queued, onAnswer: onAnswer, click: chatClick, select: chatSelect, tabs: chatTabsProp(), onOpenRef: openRef })] }), _jsx(Box, { children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { backgroundColor: mode.color, color: "black", bold: true, children: ` ${mode.label} ` }), _jsx(Text, { backgroundColor: C.panel, color: autoMode === "ask" ? C.dim : C.orange, bold: autoMode !== "ask", children: ` ${autoMode === "ask" ? "ask" : autoMode} ` }), _jsx(Text, { backgroundColor: C.panel, color: follow ? C.green : C.dim, children: followChip }), _jsx(Text, { backgroundColor: C.panel, color: totals.errors ? C.red : C.dim, children: ` ✖ ${totals.errors}` }), _jsx(Text, { backgroundColor: C.panel, color: totals.warnings ? C.yellow : C.dim, children: ` ▲ ${totals.warnings} ` }), checking.length > 0 && _jsxs(Text, { color: C.accent2, children: [" \u27F3 ", checking.join(", ")] }), exitArmed
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Header, { width: columns, branch: branch, changes: git.size, model: modelLabel, local: choice.provider.local, busy: busy, update: update }), _jsxs(Box, { flexDirection: "row", height: height, children: [_jsx(FileTree, { width: treeWidth, height: heights.tree, focused: focus === "tree", openFile: openFile, reveal: reveal, version: treeVersion, changed: edited, working: working, git: git, problemCounts: problemCounts, wheel: wheelFor("tree"), scrollTo: scrollFor("tree"), click: treeClick, onOpen: onTreeOpen, onHover: onTreeHover }), codePanel === "problems" && !pendingChange ? (_jsx(ProblemsView, { width: codeWidth, height: heights.code, focused: focus === "code", problems: diagnostics.all(), checking: checking, wheel: wheelFor("code"), onJump: onJump, onClose: onCloseProblems })) : showEditor ? (_jsx(Editor, { ...(tabStrip ? { tabs: tabStrip } : {}), width: codeWidth, height: heights.code, focused: focus === "code", filePath: openFile, initial: draft.current?.path === openFile ? draft.current.text : content, baseline: draft.current?.path === openFile ? draft.current.baseline : content, startLine: editorStart.line, ...(editorStart.col ? { startCol: editorStart.col } : {}), problems: fileProblems, autoSave: settings.autoSave, syntaxVersion: syntaxVersion, wheel: wheelFor("code"), scrollTo: scrollFor("code"), mouse: editorMouse, onHover: onEditorHover, onDefinition: onEditorDefinition, onSave: onEditorSave, onExit: onEditorExit, onState: onEditorState, ...(guideStep && openFile === guideStep.file ? { guide: { row: guideStep.line - 1, code: guideStep.code }, onGuideDone } : {}) }, `${openFile}:${editorStart.nonce}`)) : (_jsx(CodeView, { ...(tabStrip && !diff ? { tabs: tabStrip } : {}), width: codeWidth, height: heights.code, focused: focus === "code", filePath: openFile, content: content, diff: diff, diffLabel: diffMode === "git" ? "vs HEAD" : diffMode === "session" ? sessionView?.label ?? "this session" : "Nou's edit", pending: !!pendingChange && diff === pendingChange, marked: record?.lines ?? NO_LINES, problems: fileProblems, focusLine: focusLine, syntaxVersion: syntaxVersion, diffNote: pendingChange && diff === pendingChange ? pendingNote?.short ?? (checking.length ? "checking…" : null) : null, wheel: wheelFor("code"), scrollTo: scrollFor("code"), onViewport: onViewport, defineAt: codeDefine, onDefine: onCodeDefine, onFinding: onCodeFinding, findRequest: findRequest, foldClick: foldClick, foldAll: foldAll })), _jsx(Chat, { width: chatWidth, height: heights.chat, focused: focus === "chat", entries: entries, streaming: streaming, busy: busy, approval: approval?.request ?? null, approvalNote: pendingChange ? pendingNote?.detail ?? null : null, contextChip: contextChip, wheel: wheelFor("chat"), scrollTo: scrollFor("chat"), prefill: chatPrefill, extraCommands: pluginCommands, onMenu: onChatMenu, onSubmit: onSend, queued: queued, onAnswer: onAnswer, click: chatClick, select: chatSelect, tabs: chatTabsProp(), onOpenRef: openRef })] }), _jsx(Box, { children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { backgroundColor: mode.color, color: "black", bold: true, children: ` ${mode.label} ` }), _jsx(Text, { backgroundColor: C.panel, color: autoMode === "ask" ? C.dim : C.orange, bold: autoMode !== "ask", children: ` ${autoMode === "ask" ? "ask" : autoMode} ` }), _jsx(Text, { backgroundColor: C.panel, color: follow ? C.green : C.dim, children: followChip }), _jsx(Text, { backgroundColor: C.panel, color: totals.errors ? C.red : C.dim, children: ` ✖ ${totals.errors}` }), _jsx(Text, { backgroundColor: C.panel, color: totals.warnings ? C.yellow : C.dim, children: ` ▲ ${totals.warnings} ` }), checking.length > 0 && _jsxs(Text, { color: C.accent2, children: [" \u27F3 ", checking.join(", ")] }), exitArmed
                             ? _jsxs(Text, { color: C.yellow, bold: true, children: ["  ", "Press again to quit", draft.current && settings.autoSave === "off" ? ` (unsaved changes in ${draft.current.path} will be lost)` : ""] })
-                            : shownHints.map(([key, action], i) => (_jsxs(Text, { children: [i === 0 ? "  " : _jsx(Text, { color: C.dim, children: " \u00B7 " }), _jsx(Text, { color: C.text, children: key }), _jsxs(Text, { color: C.dim, children: [" ", action] })] }, key)))] }) }), layout.current.terminal && shellRef.current && (_jsx(Box, { position: "absolute", marginLeft: layout.current.terminal.x, marginTop: layout.current.terminal.y, children: _jsx(Terminal, { shell: shellRef.current, version: termVersion, width: layout.current.terminal.width, height: layout.current.terminal.height, focused: focus === "terminal", wheel: wheelFor("terminal"), onLeave: leaveTerminal, onResize: resizeTerminal }) })), layout.current.game && (_jsx(Box, { position: "absolute", marginLeft: layout.current.game.x, marginTop: layout.current.game.y, children: _jsx(GamePanel, { width: layout.current.game.width, height: layout.current.game.height, focused: focus === "game", moving: !!gameDrag, installed: settings.games, onLeave: leaveGames, onOpenSettings: gamesSettings }) })), quickOpen !== null && (_jsx(QuickOpen, { width: columns, top: 3, files: allFiles, recent: recent, actions: paletteActions, initialQuery: quickOpen, onPick: (file) => {
+                            : shownHints.map(([key, action], i) => (_jsxs(Text, { children: [i === 0 ? "  " : _jsx(Text, { color: C.dim, children: " \u00B7 " }), _jsx(Text, { color: C.text, children: key }), _jsxs(Text, { color: C.dim, children: [" ", action] })] }, key)))] }) }), layout.current.terminal && shellRef.current && (_jsx(Box, { position: "absolute", marginLeft: layout.current.terminal.x, marginTop: layout.current.terminal.y, children: _jsx(Terminal, { shell: shellRef.current, version: termVersion, width: layout.current.terminal.width, height: layout.current.terminal.height, focused: focus === "terminal", wheel: wheelFor("terminal"), onLeave: leaveTerminal, onResize: resizeTerminal }) })), layout.current.game && (_jsx(Box, { position: "absolute", marginLeft: layout.current.game.x, marginTop: layout.current.game.y, children: _jsx(GameGuard, { children: _jsx(GamePanel, { width: layout.current.game.width, height: layout.current.game.height, focused: focus === "game", moving: !!gameDrag, installed: settings.games, best: settings.gameBest ?? {}, onScore: onGameScore, onLeave: leaveGames, onOpenSettings: gamesSettings }) }) })), quickOpen !== null && (_jsx(QuickOpen, { width: columns, top: 3, files: allFiles, recent: recent, actions: paletteActions, initialQuery: quickOpen, onPick: (file) => {
                     setQuickOpen(null);
                     clearFollow();
                     open(file);

package/dist/src/ui/Chat.js

@@ -7,6 +7,7 @@ import { closeOpenMarkdown, linkAt, linkFileRefs, linkUrls, renderMarkdown, wrap
 import { ChatInput, inputHeight } from "./ChatInput.js";
 import { copyToClipboard } from "./clipboard.js";
 import { C, SPINNER, ANIMATION_MS } from "./theme.js";
+import { useTerminalFocused } from "./focus.js";
 import { Pane } from "./Pane.js";
 import { matchCommands } from "./commands.js";
 import { Scrollbar, topFor } from "./scroll.js";
@@ -117,7 +118,9 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
             setInput(prefill.text);
     }, [prefill?.nonce]);
     const [scrollBack, setScrollBack] = useState(0);
-    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy });
+    // Spinners stop while Nou's window is in the background: nobody sees them, and each frame is a redraw.
+    const windowFocused = useTerminalFocused();
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy && windowFocused });
     const inner = width - 3; // minus the borders and the scrollbar
     const [openSteps, setOpenSteps] = useState(new Set());
     const [allOpen, setAllOpen] = useState(false);

package/dist/src/ui/CodeView.js

@@ -3,7 +3,7 @@ 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, markAnsi, sideBySide, sliceAnsi, splitLines } from "./text.js";
+import { foldRanges, highlightLines, markAnsi, sideBySide, sliceAnsi, splitLines, unfoldedLines } from "./text.js";
 import { C, fileIcon, gradient } from "./theme.js";
 import { Pane } from "./Pane.js";
 import { Scrollbar, topFor } from "./scroll.js";
@@ -12,7 +12,7 @@ const CURRENT_MATCH = ["\x1b[43m\x1b[30m", "\x1b[49m\x1b[39m"];
 /** Columns ←/→ and Shift+wheel move sideways. */
 const SIDE_STEP = 8;
 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 }) {
+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, foldClick, foldAll }) {
     const [top, setTop] = useState(0);
     // Columns scrolled sideways (colors are kept: see sliceAnsi).
     const [left, setLeft] = useState(0);
@@ -37,18 +37,39 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
         return map;
     }, [problems]);
     const diffRows = useMemo(() => (diff ? sideBySide(diff.before, diff.after) : []), [diff]);
-    const total = diff ? diffRows.length : lines.length;
+    // Folding: regions from indentation, the ones folded, and the file lines left showing (rows map to these).
+    const ranges = useMemo(() => (filePath && !diff ? foldRanges(content) : new Map()), [filePath, content, !!diff]);
+    const [folded, setFolded] = useState(new Set());
+    useEffect(() => setFolded(new Set()), [filePath]);
+    const shown = useMemo(() => unfoldedLines(lines.length, ranges, folded), [lines.length, ranges, folded]);
+    /** The row a file line is on (a folded-away line: its fold's row). */
+    const rowOf = (line, list = shown) => {
+        let row = 0;
+        while (row + 1 < list.length && list[row + 1] <= line)
+            row++;
+        return row;
+    };
+    /** Opens any fold hiding `line`, and returns the rows with it open. */
+    const reveal = (line) => {
+        const hiding = [...folded].filter((s) => s < line && (ranges.get(s) ?? 0) >= line);
+        if (!hiding.length)
+            return shown;
+        const next = new Set([...folded].filter((s) => !hiding.includes(s)));
+        setFolded(next);
+        return unfoldedLines(lines.length, ranges, next);
+    };
+    const total = diff ? diffRows.length : shown.length;
     // Jump to the first change whenever a new file or diff is shown.
     useEffect(() => {
         const first = diff
             ? diffRows.findIndex((r) => r.changed)
-            : marked.size ? Math.min(...marked) - 1 : 0;
+            : marked.size ? rowOf(Math.min(...marked)) : 0;
         setTop(Math.max(0, first - 3));
         setLeft(0);
     }, [filePath, diff, diffRows, marked]);
     useEffect(() => {
         if (focusLine && !diff)
-            setTop(Math.max(0, focusLine.line - Math.floor(rows / 3)));
+            setTop(Math.max(0, rowOf(focusLine.line, reveal(focusLine.line)) + 1 - Math.floor(rows / 3)));
     }, [focusLine]);
     const maxTop = Math.max(0, total - rows);
     const start = Math.min(top, maxTop);
@@ -70,8 +91,10 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
     useEffect(() => {
         if (!current)
             return;
-        if (current.line < start || current.line >= start + rows)
-            setTop(Math.max(0, current.line - Math.floor(rows / 3)));
+        const list = reveal(current.line + 1);
+        const at = rowOf(current.line + 1, list);
+        if (at < start || at >= start + rows)
+            setTop(Math.max(0, at - 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)));
@@ -90,22 +113,45 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
             setTop(topFor(scrollTo.fraction, total, rows));
     }, [scrollTo?.nonce]);
     useEffect(() => {
-        if (filePath && !diff)
-            onViewport(start + 1, Math.min(total, start + rows));
-    }, [filePath, diff, start, rows, total]);
+        if (filePath && !diff) {
+            const onScreen = shown.slice(start, start + rows);
+            onViewport(onScreen[0] ?? 1, onScreen[onScreen.length - 1] ?? 1, onScreen);
+        }
+    }, [filePath, diff, start, rows, total, shown]);
+    useEffect(() => {
+        if (!foldClick || diff)
+            return;
+        const n = shown[start + foldClick.row];
+        if (n === undefined || !ranges.has(n))
+            return;
+        setFolded((f) => {
+            const next = new Set(f);
+            if (next.has(n))
+                next.delete(n);
+            else
+                next.add(n);
+            return next;
+        });
+    }, [foldClick?.nonce]);
+    useEffect(() => {
+        if (foldAll && !diff)
+            setFolded(foldAll.fold ? new Set(ranges.keys()) : new Set());
+    }, [foldAll?.nonce]);
     useEffect(() => {
         if (!defineAt || diff || !filePath)
             return;
-        const n = start + defineAt.row + 1;
+        const n = shown[start + defineAt.row];
+        if (n === undefined)
+            return;
         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;
+        const want = defineAt.x - (String(lines.length).length + 2) + left;
+        let cells = 0;
         let col = 0;
-        while (col < raw.length && shown + (raw[col] === "\t" ? 2 : 1) <= want)
-            shown += raw[col++] === "\t" ? 2 : 1;
+        while (col < raw.length && cells + (raw[col] === "\t" ? 2 : 1) <= want)
+            cells += raw[col++] === "\t" ? 2 : 1;
         onDefine?.(n, col + 1);
     }, [defineAt?.nonce]);
     useInput((input, key) => {
@@ -141,6 +187,9 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
             setTop(0);
         else if (input === "G" || key.end)
             setTop(maxTop);
+        // z: fold everything, or (when it already is) open everything.
+        else if (input === "z" && !diff && ranges.size)
+            setFolded([...ranges.keys()].every((k) => folded.has(k)) ? new Set() : new Set(ranges.keys()));
         else if (key.leftArrow || input === "h")
             setLeft((l) => Math.max(0, l - SIDE_STEP));
         else if (key.rightArrow || input === "l")
@@ -190,14 +239,16 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
     // 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;
+    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: shown.slice(start, start + rows).map((n) => {
+                            const line = lines[n - 1] ?? "";
+                            const fold = ranges.get(n);
+                            const isFolded = fold !== undefined && folded.has(n);
                             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 ? "▎" : " " }), (() => {
+                            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 ? "▎" : " " }), _jsx(Text, { color: isFolded ? C.accent2 : C.dim, children: fold === undefined ? " " : isFolded ? "▸" : "▾" }), (() => {
                                         let text = line;
                                         if (find?.query) {
                                             for (const m of matches) {
@@ -209,6 +260,6 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
                                         }
                                         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));
+                                    })(), isFolded ? _jsx(Text, { color: C.accent2, backgroundColor: C.panel, children: ` ⋯ ${fold - n} lines ` }) : null, 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/FileTree.js

@@ -5,6 +5,7 @@ import path from "path";
 import { Box, Text, useAnimation, useInput } from "ink";
 import { IGNORED } from "../commands/index.js";
 import { C, GIT_COLORS, fileIcon, gradient, ANIMATION_MS } from "./theme.js";
+import { useTerminalFocused } from "./focus.js";
 import { Pane } from "./Pane.js";
 import { Scrollbar, topFor } from "./scroll.js";
 function listDir(dir) {
@@ -167,7 +168,8 @@ export const FileTree = memo(function FileTree({ width, height, focused, openFil
         else
             onOpen(node.path);
     }, [click?.nonce]);
-    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!working?.size });
+    const windowFocused = useTerminalFocused();
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!working?.size && windowFocused });
     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"] })] })

package/dist/src/ui/GamePanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect, useRef, useState } from "react";
+import { Component, memo, useEffect, useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { GAMES, gameById } from "../games/index.js";
 import { C } from "./theme.js";
@@ -23,15 +23,33 @@ function Row({ line, colors }) {
  * 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) };
+/**
+ * Keeps a game that throws from taking Nou down with it: the panel says so, and you can pick another.
+ */
+export class GameGuard extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error: error instanceof Error ? error.message : String(error) };
+    }
+    render() {
+        if (!this.state.error)
+            return this.props.children;
+        return (_jsxs(Box, { borderStyle: "round", borderColor: C.red, flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: C.red, children: ["The game stopped: ", this.state.error.slice(0, 80)] }), _jsx(Text, { color: C.dim, children: "Close the panel (\u00D7) and open it again with /games." })] }));
+    }
+}
+export const GamePanel = memo(function GamePanel({ width, height, focused, moving, installed, best = {}, onScore, onLeave, onOpenSettings }) {
+    const FIELD = { width: Math.max(0, width - 4), height: Math.max(0, height - 6) };
+    const fits = (g) => FIELD.width >= g.minWidth && FIELD.height >= g.minHeight;
     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;
+    // A game that doesn't fit the panel any more (it was made smaller) waits, saying how much room it needs.
+    const tooSmall = !!playing && !fits(playing.game);
+    const view = playing && !tooSmall ? playing.game.view(playing.state) : null;
+    const running = !!playing && !tooSmall && focused && !paused && !view?.over;
+    const tickMs = playing ? playing.game.speed?.(playing.state) ?? playing.game.tickMs : 100;
     useEffect(() => {
         if (!running)
             return;
@@ -39,15 +57,25 @@ export const GamePanel = memo(function GamePanel({ width, height, focused, movin
             const pressed = inputs.current;
             inputs.current = [];
             setPlaying((p) => (p ? { ...p, state: p.game.tick(p.state, pressed) } : p));
-        }, playing.game.tickMs);
+        }, 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.
+    }, [running, playing?.game, tickMs]);
+    // A different size (moved to another pane, or the window changed) starts the game over at that size,
+    // once it fits.
     useEffect(() => {
-        if (playing)
+        if (playing && fits(playing.game))
             setPlaying({ game: playing.game, state: playing.game.create(FIELD.width, FIELD.height) });
     }, [FIELD.width, FIELD.height]);
+    // A finished game's score goes into the best scores.
+    const final = view?.over ? view.score ?? 0 : null;
+    const newBest = final !== null && playing !== null && final > (best[playing.game.id] ?? 0);
+    useEffect(() => {
+        if (newBest && playing)
+            onScore?.(playing.game.id, final);
+    }, [newBest]);
     const start = (game) => {
+        if (!fits(game))
+            return;
         inputs.current = [];
         setPaused(false);
         setPlaying({ game, state: game.create(FIELD.width, FIELD.height) });
@@ -75,7 +103,7 @@ export const GamePanel = memo(function GamePanel({ width, height, focused, movin
         }
         if (input === " " || input === "p")
             return setPaused((p) => !p);
-        const pressed = key.upArrow ? "up" : key.downArrow ? "down" : key.leftArrow ? "left" : key.rightArrow ? "right" : KEYS[input];
+        const pressed = key.return ? "action" : key.upArrow ? "up" : key.downArrow ? "down" : key.leftArrow ? "left" : key.rightArrow ? "right" : KEYS[input];
         if (pressed)
             inputs.current.push(pressed);
     }, { isActive: focused });
@@ -86,14 +114,14 @@ export const GamePanel = memo(function GamePanel({ width, height, focused, movin
     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) => {
+    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 && tooSmall ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: C.yellow, wrap: "wrap", children: [playing.game.title, " needs more room: a field of ", playing.game.minWidth, "\u00D7", playing.game.minHeight, ", and this one is ", FIELD.width, "\u00D7", FIELD.height, "."] }), _jsx(Text, { color: C.dim, wrap: "wrap", children: "Drag the top edge up, move the panel to a wider pane, or q for another game." })] })) : 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 msg = ` ${view.over}${newBest ? " New best!" : ""} `;
                             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] })] }));
+                    }), _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)" : "", ": ", GAMES.map((g) => g.title).join(", "), "."] })] })) : (_jsxs(_Fragment, { children: [games.map((g, i) => (_jsxs(Text, { wrap: "truncate-end", ...(i === row && focused ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: i === row ? C.accent2 : C.dim, children: i === row ? "▸ " : "  " }), _jsx(Text, { color: fits(g) ? C.text : C.dim, bold: i === row, children: g.title }), best[g.id] ? _jsxs(Text, { color: C.yellow, children: ["  best ", best[g.id]] }) : null, fits(g) ? null : _jsx(Text, { color: C.dim, children: "  (needs more room)" })] }, g.id))), games[row] ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: C.dim, wrap: "wrap", children: games[row].blurb }), _jsx(Text, { color: C.accent2, wrap: "truncate-end", children: games[row].controls })] })) : null] })) })), _jsxs(Text, { color: C.dim, wrap: "truncate-end", children: [" ", hint] })] }));
 });
 export { GAMES };

package/dist/src/ui/Header.js

@@ -3,10 +3,13 @@ import { memo } from "react";
 import path from "path";
 import { Box, Text, useAnimation } from "ink";
 import { C, SPINNER, gradient, ANIMATION_MS } from "./theme.js";
+import { useTerminalFocused } from "./focus.js";
 import { currentVersion } from "../update/index.js";
 const VERSION = `v${currentVersion()}`;
 export const Header = memo(function Header({ width, branch, changes, model, local, busy, update }) {
-    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy });
+    // The spinner stops while Nou's window is in the background: nobody sees it, and each frame is a redraw.
+    const windowFocused = useTerminalFocused();
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy && windowFocused });
     const project = path.basename(process.cwd());
     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/ProblemsView.js

@@ -2,6 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from "react";
 import { Box, Text, useAnimation, useInput } from "ink";
 import { C, SPINNER, fileIcon, ANIMATION_MS } from "./theme.js";
+import { useTerminalFocused } from "./focus.js";
 import { Pane } from "./Pane.js";
 export const SEVERITY_STYLE = {
     error: { icon: "✖", color: C.red },
@@ -11,7 +12,8 @@ export const SEVERITY_STYLE = {
 export function ProblemsView({ width, height, focused, problems, checking, wheel, onJump, onClose }) {
     const [cursor, setCursor] = useState(0);
     const [onlyErrors, setOnlyErrors] = useState(false);
-    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: checking.length > 0 });
+    const windowFocused = useTerminalFocused();
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: checking.length > 0 && windowFocused });
     const rows = useMemo(() => {
         const list = onlyErrors ? problems.filter((d) => d.severity === "error") : problems;
         const out = [];

package/dist/src/ui/Settings.js

@@ -40,9 +40,11 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
     const [models, setModels] = useState({});
     const [connecting, setConnecting] = useState(connectTo?.connect ? { step: 0, values: {} } : null);
     const [field, setField] = useState(() => (connectTo?.connect ? initialValue(connectTo.connect[0]) : ""));
-    const { frame } = useAnimation({ interval: ANIMATION_MS });
     const provider = providers[row] ?? providers[0];
     const listed = models[provider.id];
+    // Only "loading models…" animates; a timer running the whole time settings is open would redraw it 10
+    // times a second for nothing.
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: listed === "loading" });
     // Load the model list for the highlighted provider.
     useEffect(() => {
         if (tab !== "Model" || connecting || provider.unavailable() || models[provider.id])
@@ -190,6 +192,11 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
             used += cost(--first);
         return { first, last };
     })();
+    const gameWindow = (() => {
+        const fit = Math.max(1, Math.floor((boxHeight - 4) / 3));
+        const first = Math.max(0, Math.min((tab === "Games" ? row : 0) - fit + 1, GAMES.length - fit));
+        return { first, last: first + fit };
+    })();
     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") {
@@ -252,7 +259,7 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
                     }), 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) => {
+            return (_jsxs(Box, { flexDirection: "column", height: boxHeight, borderStyle: "round", borderColor: C.accent, paddingX: 1, children: [_jsx(Text, { color: C.dim, wrap: "truncate-end", children: "Little games for a break while Nou works. Added ones show in the Games panel: /games." }), _jsx(Text, { children: " " }), GAMES.map((g, i) => ({ g, i })).slice(gameWindow.first, gameWindow.last).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));