nou-cli 0.5.3 → 0.5.6

package/dist/src/ui/App.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { readFileSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import path from "path";
 import { Box, Text, useApp, useInput, useWindowSize } from "ink";
 import { nouRulesOnly } from "../context/index.js";
@@ -22,22 +22,25 @@ 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";
 import { CodeView } from "./CodeView.js";
 import { Editor } from "./Editor.js";
-import { SLASH_COMMANDS } from "./commands.js";
+import { SLASH_COMMANDS, runsWhileBusy } from "./commands.js";
 import { WHEEL_STEP } from "./scroll.js";
-import { Chat } from "./Chat.js";
-import { copyToClipboard } from "./clipboard.js";
+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";
 import { Settings } from "./Settings.js";
@@ -124,6 +127,25 @@ export function App({ initialModel, permContext, resume }) {
     /** The terminal panel under the code (` or /terminal): its shell lives on while the panel is closed. */
     const [termOpen, setTermOpen] = useState(false);
     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. */
+    const tabStripCache = useRef(null);
+    /**
+     * "Show me how" (/showme): the steps Nou found, and the one you're on. While Nou looks for them,
+     * `guideAsk` holds what you asked (and its edits are turned down: you're doing the typing).
+     */
+    const [guide, setGuide] = useState(null);
+    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");
     const [follow, setFollow] = useState(settings.followMode);
@@ -185,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);
@@ -287,34 +312,11 @@ export function App({ initialModel, permContext, resume }) {
                 openAtRef.current(filePath, line ?? 1, false, to);
             },
             onRead: (filePath, line, to) => followStepRef.current({ file: filePath, ...(line ? { line } : {}), ...(to ? { to } : {}) }),
-            onChange: (change, status, turn) => {
-                if (status === "applied") {
-                    timelineRef.current.record({ path: change.path, before: change.isNew ? null : change.before, after: change.after, source: "nou", turn });
-                }
-                const lines = status === "applied" ? changedLines(change.before, change.after) : NO_LINES;
-                setChanges((prev) => new Map(prev).set(change.path, { change, status, lines }));
-                setWorking((w) => {
-                    if (status === "rejected")
-                        return w.has(change.path) ? new Set([...w].filter((p) => p !== change.path)) : w;
-                    return w.has(change.path) ? w : new Set(w).add(change.path);
-                });
-                // Diffs awaiting approval are shown unless you're in the middle of editing a file (the chat says what's waiting).
-                if ((status === "pending" && !draftActiveRef.current) || followRef.current) {
-                    clearFollow(); // an edit is shown as it happens, ahead of reads still waiting
-                    setOpenFile(change.path);
-                    setContent(status === "applied" ? change.after : readText(change.path));
-                    setDiffMode("off");
-                    setReveal(change.path);
-                }
-                if (status === "applied") {
-                    setTreeVersion((v) => v + 1);
-                    setGit(gitStatus());
-                    if (draft.current?.path === change.path) {
-                        setEntries((prev) => [...prev, { kind: "info", text: `Heads up: you have unsaved edits in ${change.path}; saving them will overwrite Nou's change.` }]);
-                    }
-                }
-            },
+            onChange: (change, status, turn) => applyChange(change, status, turn, false),
             approve: (request) => {
+                // Asked to show how, not to do it: edits are turned down (the model is told to hand back steps).
+                if (guideAsk.current && request.kind === "change")
+                    return Promise.resolve(false);
                 const s = settingsRef.current;
                 if ((request.kind === "change" && s.autoApproveEdits) || (request.kind !== "change" && s.autoApproveCommands)) {
                     return Promise.resolve(true);
@@ -324,9 +326,154 @@ export function App({ initialModel, permContext, resume }) {
             checkChange: (change) => problemsIntroduced(diagnosticsRef.current, change),
         };
     }
+    /** A change an engine made or proposes; one from a tab in the background doesn't take over the code view. */
+    function applyChange(change, status, turn, background) {
+        if (status === "applied") {
+            timelineRef.current.record({ path: change.path, before: change.isNew ? null : change.before, after: change.after, source: "nou", turn });
+        }
+        const lines = status === "applied" ? changedLines(change.before, change.after) : NO_LINES;
+        setChanges((prev) => new Map(prev).set(change.path, { change, status, lines }));
+        setWorking((w) => {
+            if (status === "rejected")
+                return w.has(change.path) ? new Set([...w].filter((p) => p !== change.path)) : w;
+            return w.has(change.path) ? w : new Set(w).add(change.path);
+        });
+        // Diffs awaiting approval are shown unless you're in the middle of editing a file (the chat says what's waiting).
+        if (!background && ((status === "pending" && !draftActiveRef.current) || followRef.current)) {
+            clearFollow(); // an edit is shown as it happens, ahead of reads still waiting
+            setOpenFile(change.path);
+            setContent(status === "applied" ? change.after : readText(change.path));
+            setDiffMode("off");
+            setReveal(change.path);
+        }
+        if (status === "applied") {
+            setTreeVersion((v) => v + 1);
+            setGit(gitStatus());
+            if (draft.current?.path === change.path) {
+                setEntries((prev) => [...prev, { kind: "info", text: `Heads up: you have unsaved edits in ${change.path}; saving them will overwrite Nou's change.` }]);
+            }
+        }
+    }
+    // Conversation tabs: several agents at once. The one on screen uses the state above; the others keep
+    // theirs here, and each tab's engine reports through hooks that send it to the right place.
+    const activeTab = useRef("1");
+    const [activeTabId, setActiveTabId] = useState("1");
+    const [chatTabs, setChatTabs] = useState(["1"]);
+    const tabStore = useRef(new Map());
+    const [, setTabVersion] = useState(0);
+    const tabHooks = useRef(new Map());
+    /** The tab strip's data, kept while it reads the same, so the chat doesn't redraw on every app render. */
+    const chatTabsCache = useRef(null);
+    /** The hooks for tab `id`'s engine: on screen, they're the chat's own; in the background, its stored state. */
+    function hooksFor(id) {
+        const cached = tabHooks.current.get(id);
+        if (cached)
+            return cached;
+        const live = () => hooksRef.current;
+        const shown = () => activeTab.current === id;
+        const stored = (fn) => {
+            const t = tabStore.current.get(id);
+            if (!t)
+                return;
+            fn(t);
+            setTabVersion((v) => v + 1);
+        };
+        const hooks = {
+            onEntry: (entry) => (shown() ? live().onEntry(entry) : stored((t) => (t.entries = [...t.entries, entry]))),
+            onStream: (text) => (shown() ? live().onStream(text) : void (tabStore.current.get(id) && (tabStore.current.get(id).streaming = text))),
+            onBusy: (label) => {
+                if (shown())
+                    return live().onBusy(label);
+                stored((t) => {
+                    t.busy = label;
+                    if (!label)
+                        saveTab(t); // it finished in the background: keep it for /resume
+                });
+            },
+            onOpen: (...args) => (shown() ? live().onOpen?.(...args) : undefined),
+            onRead: (...args) => (shown() ? live().onRead(...args) : undefined),
+            onChange: (change, status, turn) => applyChange(change, status, turn, !shown()),
+            approve: (request) => {
+                if (shown())
+                    return live().approve(request);
+                const s = settingsRef.current;
+                if ((request.kind === "change" && s.autoApproveEdits) || (request.kind !== "change" && s.autoApproveCommands))
+                    return Promise.resolve(true);
+                // It waits for you: its tab says so, and the question is there when you switch to it.
+                return new Promise((resolve) => stored((t) => (t.approval = { request, resolve })));
+            },
+            checkChange: (change) => live().checkChange?.(change) ?? Promise.resolve(null),
+        };
+        tabHooks.current.set(id, hooks);
+        return hooks;
+    }
+    /** Puts tab `id` on screen, keeping the one there now (and whatever it's doing) in the background. */
+    function switchChatTab(id) {
+        if (id === activeTab.current || !tabStore.current.has(id))
+            return;
+        tabStore.current.set(activeTab.current, { entries, streaming: streamed.current.text, busy, approval, queued, conversationId, agent: agentRef.current });
+        const t = tabStore.current.get(id);
+        tabStore.current.delete(id);
+        activeTab.current = id;
+        setActiveTabId(id);
+        agentRef.current = t.agent;
+        setEntries(t.entries);
+        showStream(t.streaming);
+        setBusy(t.busy);
+        setApproval(t.approval);
+        setQueued(t.queued);
+        setConversationId(t.conversationId);
+        setFocus("chat");
+    }
+    /** A new conversation tab, with the same engine and model, next to the others. */
+    function newChatTab() {
+        const id = String(Date.now());
+        const agent = createEngine(agentRef.current.id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksFor(id));
+        agent.configure(engineConfig.current);
+        tabStore.current.set(id, { entries: [], streaming: "", busy: null, approval: null, queued: [], conversationId: newSessionId(), agent });
+        setChatTabs((tabs) => [...tabs, id]);
+        switchChatTab(id);
+    }
+    /** Closes the conversation tab on screen (stopping its engine); the conversation stays saved for /resume. */
+    function closeChatTab() {
+        if (chatTabs.length < 2)
+            return info("That's the only conversation tab. /clear starts a fresh conversation in it.");
+        const id = activeTab.current;
+        const at = chatTabs.indexOf(id);
+        const next = chatTabs[at + 1] ?? chatTabs[at - 1];
+        const agent = agentRef.current;
+        approval?.resolve(false);
+        switchChatTab(next);
+        agent.cancel();
+        agent.dispose?.();
+        tabStore.current.delete(id);
+        tabHooks.current.delete(id);
+        setChatTabs((tabs) => tabs.filter((t) => t !== id));
+    }
+    /** The tabs as the chat's title row shows them: named for what you asked first, marked when working or waiting. */
+    function chatTabItems() {
+        return chatTabs.map((id, i) => {
+            const t = id === activeTab.current ? { entries, busy, approval } : tabStore.current.get(id);
+            const first = t?.entries.find((e) => e.kind === "user")?.text.replace(/\s+/g, " ");
+            const label = first ? (first.length > 14 ? `${first.slice(0, 13)}…` : first) : `chat ${i + 1}`;
+            return { id, label, state: t?.approval ? "waiting" : t?.busy ? "busy" : "idle" };
+        });
+    }
+    function chatTabsProp() {
+        const items = chatTabItems();
+        const key = `${activeTabId}|${items.map((t) => `${t.id}:${t.label}:${t.state}`).join("|")}`;
+        if (chatTabsCache.current?.key !== key)
+            chatTabsCache.current = { key, tabs: { items, active: activeTabId } };
+        return chatTabsCache.current.tabs;
+    }
+    function saveTab(t) {
+        const first = t.entries.find((e) => e.kind === "user");
+        if (first)
+            saveConversation({ id: t.conversationId, title: first.text.replace(/\s+/g, " ").slice(0, 80), updated: Date.now(), engine: t.agent.id, entries: t.entries, state: t.agent.snapshot?.() });
+    }
     if (!agentRef.current) {
         const saved = loadSettings().engine;
-        agentRef.current = createEngine(isEngineId(saved) ? saved : "nou", initialModel, buildSystemPrompt(permContext), hooksRef.current);
+        agentRef.current = createEngine(isEngineId(saved) ? saved : "nou", initialModel, buildSystemPrompt(permContext), hooksFor(activeTab.current));
     }
     useEffect(() => diagnostics.subscribe(() => setDiagVersion((v) => v + 1)), []);
     useEffect(() => onGrammarLoaded(() => setSyntaxVersion((v) => v + 1)), []);
@@ -398,15 +545,21 @@ export function App({ initialModel, permContext, resume }) {
     useEffect(() => {
         const { extras, extraTools } = harness({ diagnostics, plugins: activePlugins.map((p) => p.plugin), git: settings.gitContext && repo });
         // Other engines read AGENTS.md / CLAUDE.md themselves: they get only the NOU.md rules on top.
-        engineConfig.current = { system: buildSystemPrompt(permContext, extras), extras: [...extras, nouRulesOnly(permContext)].filter(Boolean), extraTools: [...extraTools, ...mcpRef.current.tools()], effort: settings.effort };
+        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;
@@ -415,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;
@@ -466,7 +622,7 @@ export function App({ initialModel, permContext, resume }) {
             info(`Installed ${target.label} (${target.package}).`);
         }
         agentRef.current.dispose?.();
-        const engine = createEngine(id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksRef.current);
+        const engine = createEngine(id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksFor(activeTab.current));
         engine.configure(engineConfig.current);
         agentRef.current = engine;
         updateSettings({ engine: id });
@@ -488,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)
@@ -522,7 +679,7 @@ export function App({ initialModel, permContext, resume }) {
         let engine = agentRef.current;
         if (id && id !== engine.id && isInstalled(engineInfo(id))) {
             engine.dispose?.();
-            engine = createEngine(id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksRef.current);
+            engine = createEngine(id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksFor(activeTab.current));
             engine.configure(engineConfig.current);
             agentRef.current = engine;
             updateSettings({ engine: id });
@@ -752,6 +909,18 @@ export function App({ initialModel, permContext, resume }) {
         // The Games panel sits under a pane: it takes the clicks that land on it, × on its title closes it,
         // and dragging its title docks it under the pane you let go over.
         const term = layout.current.terminal;
+        // Dragging the terminal's top border makes it taller or shorter; its bottom stays put.
+        if (term && dragging.current === "terminal") {
+            const rows = Math.max(4, term.y + term.height - event.y);
+            if (event.kind === "release") {
+                dragging.current = null;
+                setTermDrag(null);
+                updateSettings({ terminalRows: rows });
+            }
+            else if (event.kind === "drag")
+                setTermDrag(rows);
+            return;
+        }
         if (term && event.x >= term.x && event.x < term.x + term.width && event.y >= term.y && event.y < term.y + term.height && !dragging.current) {
             if (event.kind === "wheel")
                 return queueWheel("terminal", event.dir, false);
@@ -759,6 +928,10 @@ export function App({ initialModel, permContext, resume }) {
                 return;
             if (event.y === term.y + 1 && event.x >= term.x + term.width - 5)
                 return toggleTerminal(false); // ×
+            if (event.y === term.y) {
+                dragging.current = "terminal"; // its top border: drag to resize
+                return;
+            }
             if (focus !== "terminal")
                 beforeTerm.current = focus;
             setFocus("terminal");
@@ -767,6 +940,18 @@ export function App({ initialModel, permContext, resume }) {
         const game = layout.current.game;
         if (gamesOpen && game) {
             const drag = dragging.current;
+            // Its top border makes it taller or shorter (its bottom stays put); its title moves it.
+            if (drag === "gameSize") {
+                const rows = Math.max(GAME_PANEL.minHeight, game.y + game.height - event.y);
+                if (event.kind === "release") {
+                    dragging.current = null;
+                    setGameSizeDrag(null);
+                    updateSettings({ gameRows: rows });
+                }
+                else if (event.kind === "drag")
+                    setGameSizeDrag(rows);
+                return;
+            }
             if (drag === "game") {
                 const { treeWidth, codeWidth } = layout.current;
                 const over = event.x < treeWidth ? "tree" : event.x < treeWidth + codeWidth ? "code" : "chat";
@@ -793,7 +978,9 @@ export function App({ initialModel, permContext, resume }) {
                 if (focus !== "game")
                     beforeGame.current = focus;
                 setFocus("game");
-                if (event.y <= game.y + 1)
+                if (event.y === game.y)
+                    dragging.current = "gameSize";
+                else if (event.y === game.y + 1)
                     dragging.current = "game";
                 return;
             }
@@ -858,6 +1045,16 @@ export function App({ initialModel, permContext, resume }) {
             scrollPane(pane, event.y);
             return;
         }
+        // The chat's title row holds the conversation tabs: a click switches, + opens a new one.
+        if (event.kind === "click" && pane === "chat" && event.y === 2) {
+            const at = event.x - treeWidth - codeWidth - 1;
+            const { zones, plus } = chatTabZones(chatTabItems());
+            if (Math.abs(at - plus) <= 1)
+                return newChatTab();
+            const zone = zones.find((z) => at >= z.from && at < z.to);
+            if (zone)
+                return switchChatTab(zone.id);
+        }
         // The code view's title row holds the tabs: a click switches, the × closes.
         if (event.kind === "click" && pane === "code" && event.y === 2 && tabs.length && !diff) {
             const at = event.x - codeLeft - 1;
@@ -903,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);
             }
@@ -1161,6 +1367,8 @@ export function App({ initialModel, permContext, resume }) {
     openAtRef.current = openAt;
     /** A file named in the chat (clicked, or shown by Nou): open it there, highlighting the lines it names. */
     const openRef = useEvent((ref) => {
+        if (ref.url)
+            return openInBrowser(ref.url);
         clearFollow();
         const file = path.relative(process.cwd(), path.resolve(ref.path)).replace(/\\/g, "/");
         openAt(file, ref.line ?? 1, false, ref.line ? ref.to ?? ref.line : undefined);
@@ -1234,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 === "?")
@@ -1536,6 +1746,28 @@ ${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":
+                return closeChatTab();
+            case "tab": {
+                const n = Number(arg);
+                if (!n || !chatTabs[n - 1])
+                    return info(`Conversation tabs: ${chatTabItems().map((t, i) => `${i + 1}. ${t.label}${t.state !== "idle" ? ` (${t.state === "busy" ? "working" : "waiting on you"})` : ""}`).join("  ")}. /tab <n> switches, /new opens one, /close closes this one.`);
+                return switchChatTab(chatTabs[n - 1]);
+            }
+            case "showme":
+            case "teach":
+                return showMe(rest.join(" "));
             case "resume":
                 return resumeConversation(rest[0] ?? "");
             case "plugins":
@@ -1640,13 +1872,104 @@ ${snippet}
         setQueued(queued.slice(take));
         send(queued.slice(0, take).join("\n\n"));
     }, [busy, approval, queued]);
+    // When Nou has finished looking, the guide starts at its first step.
+    useEffect(() => {
+        if (busy || !guideAsk.current)
+            return;
+        const task = guideAsk.current;
+        let steps = guideFound.current;
+        guideAsk.current = null;
+        guideFound.current = null;
+        // Other engines hand their steps back in a ```nou-steps block at the end of the reply: read it, and
+        // show the reply without it.
+        if (!steps?.length) {
+            const reply = [...entries].reverse().find((e) => e.kind === "assistant");
+            const found = reply && stepsFromReply(reply.text);
+            if (found) {
+                steps = found.steps;
+                setEntries((prev) => prev.map((e) => (e === reply ? { ...e, text: found.rest || "Here's how." } : e)));
+            }
+        }
+        // Asked not to, an engine that edited anyway (Codex can't be stopped before it does) is put back.
+        const edited = timeline.all.slice(guideMark.current).filter((c) => c.source === "nou" && !c.undone);
+        if (edited.length) {
+            undoCheckpoints([...edited].reverse());
+            info("It edited files anyway, so those changes were put back: you're the one typing them.");
+        }
+        if (!steps?.length)
+            return info("Nou didn't come back with steps to show. Try asking more specifically, e.g. /showme add a --verbose flag to the CLI", "error");
+        info(`Here's how, in ${steps.length} step${steps.length > 1 ? "s" : ""}. You type each one in the editor: the dim text ahead of the cursor is what goes next, and Tab fills in the rest of a line. /showme next skips a step, /showme stop ends it.`);
+        setGuide({ steps, at: 0, task });
+    }, [busy]);
+    // Each step: open its file in the editor where the code goes, and say what to type and why.
+    useEffect(() => {
+        if (!guide)
+            return;
+        const step = guide.steps[guide.at];
+        if (!existsSync(step.file)) {
+            // A step that starts a new file: it's created empty, for you to type into.
+            mkdirSync(path.dirname(path.resolve(step.file)), { recursive: true });
+            writeFileSync(step.file, "");
+            setTreeVersion((v) => v + 1);
+        }
+        info(`👉 Step ${guide.at + 1} of ${guide.steps.length}: ${step.file}:${step.line}\n${step.why}\n\n\`\`\`\n${step.code}\n\`\`\``);
+        openAt(step.file, step.line, true);
+    }, [guide?.at, guide?.steps]);
+    const guideStep = guide?.steps[guide.at] ?? null;
+    /** The step's code is all typed: save it, and go on to the next one. */
+    const onGuideDone = useEvent(() => {
+        if (!guide || !guideStep)
+            return;
+        if (draft.current?.path === guideStep.file)
+            saveFromEditor(draft.current.text, guideStep.file);
+        // Later steps in the same file further down move down by the lines just added.
+        const added = guideStep.code.split("\n").length;
+        const steps = guide.steps.map((s, i) => (i > guide.at && s.file === guideStep.file && s.line >= guideStep.line ? { ...s, line: s.line + added } : s));
+        if (guide.at + 1 < steps.length) {
+            info(`✓ Step ${guide.at + 1} done.`);
+            setGuide({ ...guide, steps, at: guide.at + 1 });
+        }
+        else {
+            info(`🎉 That's it: all ${steps.length} step${steps.length > 1 ? "s" : ""} done and saved. Ask Nou to check it over if you like.`);
+            setGuide(null);
+        }
+    });
+    /** /showme <what you want>: Nou finds where the change goes and walks you through typing it. */
+    const showMe = (arg) => {
+        const words = arg.trim();
+        if (words === "stop" || words === "end") {
+            setGuide(null);
+            return info(guide ? "Stopped the guide. What you typed so far stays." : "No guide is running.");
+        }
+        if (words === "next" || words === "skip") {
+            if (!guide)
+                return info("No guide is running.");
+            if (guide.at + 1 >= guide.steps.length) {
+                setGuide(null);
+                return info("That was the last step.");
+            }
+            return setGuide({ ...guide, at: guide.at + 1 });
+        }
+        if (!words) {
+            if (guide)
+                return info(`On step ${guide.at + 1} of ${guide.steps.length}: ${guideStep.file}:${guideStep.line}. /showme next skips it, /showme stop ends it.`);
+            return info("Tell Nou what you want to do and it shows you how, step by step, for you to type: /showme add a --verbose flag to the CLI");
+        }
+        if (busy)
+            return info("Wait for the current reply to finish (or press Esc) first.", "error");
+        setGuide(null);
+        guideAsk.current = words;
+        guideFound.current = null;
+        guideMark.current = timeline.all.length;
+        send(showMePrompt(words, agentRef.current.id === "nou"));
+    };
     useEffect(() => {
         if (busy)
             stopped.current = false;
     }, [busy]);
     /** From the chat: while Nou works, a message waits its turn, or (`now`) stops Nou and goes right away. */
     const submit = (text, now = false) => {
-        if (!busy)
+        if (!busy || (text.startsWith("/") && runsWhileBusy(text)))
             return send(text);
         if (now) {
             stop();
@@ -1657,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;
@@ -1700,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;
@@ -1768,13 +2096,17 @@ ${snippet}
     const treeWidth = paneWidths ? Math.max(MIN_TREE, Math.round(columns * paneWidths.tree)) : Math.max(24, Math.floor(columns * 0.2));
     const chatWidth = paneWidths ? Math.max(MIN_CHAT, Math.min(Math.round(columns * paneWidths.chat), columns - treeWidth - MIN_CODE)) : Math.max(34, Math.floor(columns * 0.3));
     const codeWidth = Math.max(MIN_CODE, columns - treeWidth - chatWidth);
-    const tabStrip = tabs.length && openFile ? _jsx(Tabs, { tabs: tabs, active: openFile, width: tabsWidth(codeWidth), dirty: showEditor && !!editorState?.dirty }) : undefined;
+    const tabKey = tabs.length && openFile ? `${tabs.join("\0")}|${openFile}|${tabsWidth(codeWidth)}|${showEditor && !!editorState?.dirty}` : "";
+    if (tabStripCache.current?.key !== tabKey) {
+        tabStripCache.current = { key: tabKey, strip: tabKey ? _jsx(Tabs, { tabs: tabs, active: openFile, width: tabsWidth(codeWidth), dirty: showEditor && !!editorState?.dirty }) : undefined };
+    }
+    const tabStrip = tabStripCache.current.strip;
     // The Games panel takes the bottom of its pane's column: up to 19 rows, and never more than half.
-    const gameHeight = gamesOpen ? Math.min(GAME_PANEL.height, Math.floor(height / 2)) : 0;
+    const gameHeight = gamesOpen ? Math.max(GAME_PANEL.minHeight, Math.min(gameSizeDrag ?? settings.gameRows ?? GAME_PANEL.height, height - 6)) : 0;
     const heights = { tree: height, code: height, chat: height };
     heights[gameDock] -= gameHeight;
     // The terminal takes the bottom third of the code's column (above the Games panel when that's there too).
-    const termHeight = termOpen ? Math.max(6, Math.min(Math.floor(height / 3), heights.code - 6)) : 0;
+    const termHeight = termOpen ? Math.max(4, Math.min(termDrag ?? settings.terminalRows ?? Math.floor(height / 3), heights.code - 4)) : 0;
     heights.code -= termHeight;
     const dockLeft = gameDock === "tree" ? 0 : gameDock === "code" ? treeWidth : treeWidth + codeWidth;
     const dockWidth = gameDock === "tree" ? treeWidth : gameDock === "code" ? codeWidth : chatWidth;
@@ -1792,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));
@@ -1804,6 +2141,12 @@ ${snippet}
         else if (focus === "terminal")
             setFocus(beforeTerm.current === "terminal" ? "code" : beforeTerm.current);
     }
+    /** Alt+↑/↓ in the terminal: taller or shorter by a couple of rows. */
+    function resizeTerminal(by) {
+        const now = layout.current.terminal?.height ?? 0;
+        if (now)
+            updateSettings({ terminalRows: Math.max(4, now + by) });
+    }
     function leaveTerminal() {
         setFocus(beforeTerm.current === "terminal" ? "code" : beforeTerm.current);
     }
@@ -1819,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);
@@ -1851,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() },
@@ -1958,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 }, `${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, 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 }) })), 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);