nou-cli 0.2.1 → 0.4.0

package/dist/src/ui/App.js

@@ -3,18 +3,20 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { readFileSync, writeFileSync } from "fs";
 import path from "path";
 import { Box, Text, useApp, useInput, useWindowSize } from "ink";
-import { Agent, buildSystemPrompt } from "../agent/index.js";
+import { buildSystemPrompt } from "../agent/index.js";
+import { ENGINES, createEngine, engineInfo, installEngine, isEngineId, isInstalled } from "../engines/index.js";
+import { harness, problemsIntroduced } from "../agent/harness.js";
 import { describe, providers, resolveModel, saveModel } from "../providers/index.js";
+import { sameModel } from "../providers/ollama.js";
 import { loadSettings, saveSettings } from "../config/index.js";
-import { branch as gitBranch, diffAgainstHead, isRepo, status as gitStatus, summary as gitSummary } from "../git/index.js";
-import { gitTools } from "../git/tools.js";
-import { BUILTIN_PLUGINS, discoverPlugins, isEnabled, loadPlugin, trustPatch } from "../plugins/index.js";
+import { branch as gitBranch, diffAgainstHead, isRepo, sameStatus, status as gitStatus, statusAsync as gitStatusAsync } from "../git/index.js";
+import { BUILTIN_PLUGINS, addStarter, discoverPlugins, isEnabled, loadPlugin, scaffoldPlugin, starterPlugins, trustPatch, trustState } from "../plugins/index.js";
 import { DiagnosticsManager, formatDiagnostic, newProblems } from "../diagnostics/index.js";
 import { Timeline } from "../history/index.js";
 import { lsp } from "../lsp/index.js";
 import { onGrammarLoaded, preload } from "../syntax/index.js";
 import { checkForUpdate, currentVersion } from "../update/index.js";
-import { changedLines } from "./text.js";
+import { changedLines, lineCounts } from "./text.js";
 import { ProblemsView } from "./ProblemsView.js";
 import { useMouse } from "./mouse.js";
 import { C } from "./theme.js";
@@ -22,24 +24,41 @@ import { FileTree } from "./FileTree.js";
 import { CodeView } from "./CodeView.js";
 import { Editor } from "./Editor.js";
 import { Chat } from "./Chat.js";
+import { copyToClipboard } from "./clipboard.js";
 import { Header } from "./Header.js";
 import { QuickOpen, listAllFiles } from "./QuickOpen.js";
 import { Settings } from "./Settings.js";
 const FOCUS_ORDER = ["tree", "code", "chat"];
+const MIN_TREE = 14;
+const MIN_CODE = 20;
+const MIN_CHAT = 24;
 const NO_LINES = new Set();
 const HELP = `Commands:
   /settings            models, preferences and plugins
   /model               show providers and the current model
   /model <provider[:model]>  switch, e.g. /model anthropic  /model ollama:qwen3:8b
   /models [provider]   list models a provider offers
+  /connect <provider>  enter an API key (and URL), e.g. /connect fireworks  /connect litellm
+  /pull <model>        download an Ollama model
+  /engine [name]       which agent answers: nou, claude-code, codex or pi
+  /auto [ask|auto-edit|auto]  how much Nou does without asking (also: Shift+Tab)
+  /copy [code|file]    copy the last reply, its last code block, or the open file
+  /plugins             your plugins and the starter ones you can add
+  /plugins add <name>  add a starter plugin (copied to ~/.nou/plugins to edit)
+  /plugins new <name>  start your own plugin in .nou/plugins/
   /clear               start a fresh conversation
+  /compact             summarize the conversation so far, to free up context
   /undo                undo Nou's last change (also: u)
   /rewind              undo everything from Nou's last turn
   /history             recent changes
+  /diff [file]         everything changed this session ([ ] step through files)
+  /sessions            earlier sessions; /diff <n> shows one of them
   /version             which version of Nou this is
 Keys:
   Ctrl+P  find a file      Tab  switch pane      Esc  stop / back
-  e  edit open file        v    diff (git / Nou)  f   follow mode
+  Shift+Tab  ask / auto-edit / auto                < > resize pane  = reset
+  m  mouse on/off (off: select text to copy; Shift+drag also works in most terminals)
+  e  edit open file        v    diff (git / Nou / session)  f   follow mode
   p  problems              u    undo Nou's edit   s   settings
   c  (in files) show only changed files            Ctrl+C twice  quit
 In the editor: Ctrl+S save · Ctrl+Z/Y undo/redo · Ctrl+K info · Ctrl+G go to definition`;
@@ -56,11 +75,30 @@ export function App({ initialModel, permContext }) {
     const { columns, rows } = useWindowSize();
     const [settings, setSettings] = useState(loadSettings);
     const [view, setView] = useState("main");
+    const [connectTo, setConnectTo] = useState();
     const [quickOpen, setQuickOpen] = useState(false);
     const [focus, setFocus] = useState("chat");
     const [follow, setFollow] = useState(settings.followMode);
     const [entries, setEntries] = useState([]);
     const [streaming, setStreaming] = useState("");
+    // Streamed text arrives a token at a time; redrawing the whole screen for each one is wasted work.
+    const streamed = useRef({ text: "", timer: null });
+    const showStream = (text) => {
+        const s = streamed.current;
+        s.text = text;
+        if (!text) {
+            if (s.timer)
+                clearTimeout(s.timer);
+            s.timer = null;
+            setStreaming("");
+        }
+        else if (!s.timer) {
+            s.timer = setTimeout(() => {
+                s.timer = null;
+                setStreaming(s.text);
+            }, 33);
+        }
+    };
     const [busy, setBusy] = useState(null);
     const [choice, setChoice] = useState(initialModel);
     const [approval, setApproval] = useState(null);
@@ -71,9 +109,13 @@ export function App({ initialModel, permContext }) {
     // The last change Nou made per file, so we can flag edited lines and re-open the diff.
     const [changes, setChanges] = useState(new Map());
     const [diffMode, setDiffMode] = useState("off");
+    // Which session the "session" diff shows (null: this one), and a counter that bumps when history changes.
+    const [sessionView, setSessionView] = useState(null);
+    const [historyVersion, setHistoryVersion] = useState(0);
     const [editing, setEditing] = useState(false);
     const [git, setGit] = useState(() => gitStatus());
     const [plugins, setPlugins] = useState([]);
+    const [starters, setStarters] = useState([]);
     const [viewport, setViewport] = useState(null);
     const [editorState, setEditorState] = useState(null);
     // Unsaved editor text survives switching to a diff and back.
@@ -90,13 +132,21 @@ export function App({ initialModel, permContext }) {
     const [treeClick, setTreeClick] = useState(null);
     // Pane geometry from the last render, so mouse events can be mapped to the pane under the pointer.
     const layout = useRef({ treeWidth: 0, codeWidth: 0, paneHeight: 0 });
+    /** Pane widths while a border is dragged (saved on release); the saved ones otherwise. */
+    const [paneWidths, setPaneWidths] = useState(settings.paneWidths);
+    const paneWidthsRef = useRef(paneWidths);
+    paneWidthsRef.current = paneWidths;
+    const dragging = useRef(null);
+    const pullAbort = useRef(null);
     const diagnosticsRef = useRef(null);
     diagnosticsRef.current ??= new DiagnosticsManager();
     const diagnostics = diagnosticsRef.current;
     const timelineRef = useRef(null);
-    timelineRef.current ??= new Timeline();
+    timelineRef.current ??= new Timeline(() => setHistoryVersion((v) => v + 1));
     const timeline = timelineRef.current;
     const followRef = useRef(follow);
+    /** Whether the editor is open, for the agent hooks (which outlive renders). */
+    const draftActiveRef = useRef(false);
     followRef.current = follow;
     const settingsRef = useRef(settings);
     settingsRef.current = settings;
@@ -114,10 +164,13 @@ export function App({ initialModel, permContext }) {
         void diagnosticsRef.current.checkFile(filePath);
     }, []);
     const agentRef = useRef(null);
-    if (!agentRef.current) {
-        agentRef.current = new Agent(initialModel, buildSystemPrompt(permContext), {
+    const hooksRef = useRef(null);
+    /** What the engine was last configured with, to configure a new one the same way. */
+    const engineConfig = useRef({});
+    if (!hooksRef.current) {
+        hooksRef.current = {
             onEntry: (entry) => setEntries((prev) => [...prev, entry]),
-            onStream: setStreaming,
+            onStream: showStream,
             onBusy: setBusy,
             onRead: (filePath) => {
                 if (!followRef.current)
@@ -131,8 +184,8 @@ export function App({ initialModel, permContext }) {
                 }
                 const lines = status === "applied" ? changedLines(change.before, change.after) : NO_LINES;
                 setChanges((prev) => new Map(prev).set(change.path, { change, status, lines }));
-                // Diffs awaiting approval are always shown, follow mode or not.
-                if (status === "pending" || followRef.current) {
+                // 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) {
                     setOpenFile(change.path);
                     setContent(status === "applied" ? change.after : readText(change.path));
                     setDiffMode("off");
@@ -153,11 +206,12 @@ export function App({ initialModel, permContext }) {
                 }
                 return new Promise((resolve) => setApproval({ request, resolve }));
             },
-            checkChange: async (change) => {
-                const introduced = await diagnosticsRef.current.introducedBy(change.path, change.before, change.after);
-                return introduced.length ? introduced.slice(0, 15).map((d) => formatDiagnostic(d)).join("\n") : null;
-            },
-        });
+            checkChange: (change) => problemsIntroduced(diagnosticsRef.current, change),
+        };
+    }
+    if (!agentRef.current) {
+        const saved = loadSettings().engine;
+        agentRef.current = createEngine(isEngineId(saved) ? saved : "nou", initialModel, buildSystemPrompt(permContext), hooksRef.current);
     }
     useEffect(() => diagnostics.subscribe(() => setDiagVersion((v) => v + 1)), []);
     useEffect(() => onGrammarLoaded(() => setSyntaxVersion((v) => v + 1)), []);
@@ -170,9 +224,11 @@ export function App({ initialModel, permContext }) {
             const found = discoverPlugins();
             const saved = loadSettings();
             setPlugins(await Promise.all(found.map((p) => (isEnabled(p, saved) ? loadPlugin(p) : p))));
+            setStarters(await Promise.all(starterPlugins().map(loadPlugin)));
         })();
     }, []);
-    const allPlugins = useMemo(() => [...BUILTIN_PLUGINS, ...plugins], [plugins]);
+    // Starter plugins are listed until you add them (or have your own plugin with the same name).
+    const allPlugins = useMemo(() => [...BUILTIN_PLUGINS, ...plugins, ...starters.filter((s) => !plugins.some((p) => p.id === s.id))], [plugins, starters]);
     const activePlugins = useMemo(() => allPlugins.filter((p) => isEnabled(p, settings) && p.plugin), [allPlugins, settings.plugins, settings.trustedPlugins]);
     // Checkers come from enabled plugins (built-in ones included).
     const firstCheck = useRef(true);
@@ -185,53 +241,24 @@ export function App({ initialModel, permContext }) {
     }, [activePlugins]);
     // Keep the agent's system prompt and tools in sync with settings and plugins.
     useEffect(() => {
-        const extras = [];
-        const extraTools = [];
-        if (settings.gitContext && repo) {
-            const summary = gitSummary();
-            if (summary)
-                extras.push(summary);
-            extraTools.push(...gitTools());
-        }
-        for (const { plugin } of activePlugins) {
-            if (plugin.systemPrompt)
-                extras.push(`Plugin ${plugin.name}: ${plugin.systemPrompt}`);
-            for (const tool of plugin.tools ?? []) {
-                extraTools.push({
-                    definition: tool.definition,
-                    readOnly: !!tool.readOnly,
-                    source: plugin.name,
-                    run: (args) => tool.run(args, { cwd: process.cwd() }),
-                });
-            }
-        }
-        extraTools.push({
-            source: "problems",
-            readOnly: true,
-            definition: {
-                name: "get_diagnostics",
-                description: "Get errors and warnings from the project's linters, type checker and language servers, for one file or the whole project.",
-                parameters: { type: "object", properties: { path: { type: "string", description: "Optional file. Omit for the whole project." } }, required: [] },
-            },
-            run: async (args) => {
-                const file = typeof args.path === "string" ? args.path : null;
-                if (file)
-                    await diagnostics.checkFile(file);
-                else
-                    await diagnostics.checkProject();
-                const list = file ? diagnostics.get(file) : diagnostics.all();
-                return list.length ? list.slice(0, 100).map((d) => formatDiagnostic(d, true)).join("\n") : "No problems found.";
-            },
-        });
-        agentRef.current.configure({ system: buildSystemPrompt(permContext, extras), extraTools, effort: settings.effort });
+        const { extras, extraTools } = harness({ diagnostics, plugins: activePlugins.map((p) => p.plugin), git: settings.gitContext && repo });
+        engineConfig.current = { system: buildSystemPrompt(permContext, extras), extras: [...extras, permContext].filter(Boolean), extraTools, effort: settings.effort };
+        agentRef.current.configure(engineConfig.current);
     }, [settings.gitContext, settings.effort, activePlugins]);
     // Pick up changes made outside Nou (other editors, git commands).
+    const polling = useRef(false);
     useEffect(() => {
         if (!repo)
             return;
         const timer = setInterval(() => {
-            if (!busy)
-                setGit(gitStatus());
+            if (busy || polling.current)
+                return;
+            polling.current = true;
+            void gitStatusAsync().then((next) => {
+                polling.current = false;
+                // Only redraw when something changed.
+                setGit((prev) => (sameStatus(prev, next) ? prev : next));
+            });
         }, 4000);
         return () => clearInterval(timer);
     }, [repo, busy]);
@@ -253,13 +280,95 @@ export function App({ initialModel, permContext }) {
         setChoice(next);
         saveModel(next);
         setSettings(loadSettings());
-        setEntries((prev) => [...prev, { kind: "info", text: `Now using ${describe(next)}. The conversation carries over.` }]);
+        const engine = agentRef.current;
+        const carries = engine.id === "nou" || engine.id === "claude-code";
+        setEntries((prev) => [...prev, { kind: "info", text: `Now using ${engine.id === "nou" ? describe(next) : `${engineInfo(engine.id).label} with ${engineInfo(engine.id).model(next)}`}. ${carries ? "The conversation carries over." : "This starts a new conversation."}` }]);
         return true;
     };
+    /** Switches the agent engine, installing it first if needed (Esc stops the install). Starts a new conversation. */
+    const switchEngine = async (id) => {
+        if (busy)
+            return info("Wait for the current reply to finish (or press Esc) before switching engines.", "error");
+        const target = engineInfo(id);
+        if (agentRef.current.id === id)
+            return info(`Already using ${target.label}.`);
+        if (!isInstalled(target)) {
+            const controller = new AbortController();
+            pullAbort.current = controller;
+            info(`${target.label} isn't installed yet, so Nou is installing it now: npm install ${target.package} into ~/.nou/engines. This happens once and can take a minute. Esc to stop.`);
+            setBusy(`Installing the ${target.label} engine (npm)...`);
+            try {
+                await installEngine(target, (line) => setBusy(`Installing the ${target.label} engine (npm): ${line.slice(0, 70)}`), controller.signal);
+            }
+            catch (error) {
+                return info(controller.signal.aborted ? `Stopped installing ${target.label}. Nothing changed; you're still on ${engineInfo(agentRef.current.id).label}.` : `Couldn't install ${target.label}: ${error.message}`, "error");
+            }
+            finally {
+                pullAbort.current = null;
+                setBusy(null);
+            }
+            info(`Installed ${target.label} (${target.package}).`);
+        }
+        agentRef.current.dispose?.();
+        const engine = createEngine(id, choice, engineConfig.current.system ?? buildSystemPrompt(permContext), hooksRef.current);
+        engine.configure(engineConfig.current);
+        agentRef.current = engine;
+        updateSettings({ engine: id });
+        info(`Now using the ${target.label} engine (model: ${target.model(choice)}). This starts a new conversation.${target.approvals === "after" ? " It edits without asking first; review its changes in the diff view and press u to undo." : ""}`);
+    };
+    /** Downloads an Ollama model, showing progress in the status line. Esc stops it. */
+    const pullModel = async (model) => {
+        const ollama = providers.find((p) => p.id === "ollama");
+        const controller = new AbortController();
+        pullAbort.current = controller;
+        setBusy(`Downloading ${model}...`);
+        try {
+            await ollama.pull(model, (status, percent) => setBusy(`Downloading ${model}: ${percent === null ? status : `${percent}%`}`), controller.signal);
+            info(`Downloaded ${model}.`);
+            return true;
+        }
+        catch (error) {
+            info(controller.signal.aborted ? `Stopped downloading ${model}.` : `Couldn't download ${model}: ${error.message}`, "error");
+            return false;
+        }
+        finally {
+            pullAbort.current = null;
+            setBusy(null);
+        }
+    };
+    /** Switches model, downloading it first if it's an Ollama model that isn't installed yet. */
+    const chooseModel = async (next) => {
+        if (next.provider.pull) {
+            const installed = await next.provider.listModels().catch(() => null);
+            if (installed && !installed.some((m) => sameModel(m, next.model))) {
+                info(`${next.model} isn't downloaded yet; downloading it now (Esc to stop).`);
+                if (!(await pullModel(next.model)))
+                    return;
+            }
+        }
+        switchModel(next);
+    };
+    /** Copies a starter plugin into ~/.nou/plugins/, switches it on and loads it. */
+    const addStarterPlugin = async (starter) => {
+        const added = addStarter(starter);
+        updateSettings(trustPatch(added, true, settings));
+        const loaded = await loadPlugin(added);
+        setPlugins((prev) => [...prev.filter((p) => p.id !== added.id), loaded]);
+        return loaded;
+    };
+    const rescanPlugins = () => {
+        const found = discoverPlugins();
+        setPlugins((prev) => found.map((f) => prev.find((p) => p.id === f.id && p.plugin) ?? f));
+    };
     const togglePlugin = async (id, enabled) => {
         const entry = allPlugins.find((p) => p.id === id);
         if (!entry)
             return;
+        if (entry.scope === "starter") {
+            if (enabled)
+                await addStarterPlugin(entry);
+            return;
+        }
         updateSettings(trustPatch(entry, enabled, settings));
         if (!enabled)
             return;
@@ -272,11 +381,40 @@ export function App({ initialModel, permContext }) {
         approval?.resolve(ok);
         setApproval(null);
     };
+    /** Shows the edit waiting for approval in the code view. */
+    const openPending = () => {
+        const file = approval?.request.kind === "change" ? approval.request.change.path : null;
+        if (!file || !settleDraft(file))
+            return;
+        setEditing(false);
+        open(file);
+        setReveal(file);
+        setFocus("code");
+    };
+    /** Ask → Auto-edit (edits apply without asking) → Auto (commands too) → Ask. Undo and diffs work the same in each. */
+    const autoMode = settings.autoApproveCommands ? "auto" : settings.autoApproveEdits ? "auto-edit" : "ask";
+    const cycleAutoMode = (to) => {
+        const next = to ?? (autoMode === "ask" ? "auto-edit" : autoMode === "auto-edit" ? "auto" : "ask");
+        updateSettings({ autoApproveEdits: next !== "ask", autoApproveCommands: next === "auto" });
+        // Whatever is waiting now falls under the new mode too.
+        const kind = approval?.request.kind;
+        if (kind && (next === "auto" || (next === "auto-edit" && kind === "change")))
+            answer(true);
+        info(next === "ask" ? "Ask mode: Nou asks before every edit and command."
+            : next === "auto-edit" ? "Auto-edit mode: edits apply without asking; Nou still asks before commands. Review with the diff view, u to undo."
+                : "Auto mode: edits and commands run without asking. Review with the diff view, u to undo. Shift+Tab to change.");
+    };
     const record = openFile ? changes.get(openFile) : undefined;
     const pendingChange = approval?.request.kind === "change" ? approval.request.change : null;
     const gitChange = useMemo(() => (diffMode === "git" && openFile ? diffAgainstHead(openFile, content) : null), [diffMode, openFile, content]);
-    const diff = pendingChange ?? (diffMode === "git" ? gitChange : diffMode === "nou" && record ? record.change : null);
-    const showEditor = editing && !!openFile && !pendingChange;
+    const sessionId = sessionView?.id ?? agentRef.current.session;
+    const sessionFiles = useMemo(() => timeline.sessionChanges(sessionId), [sessionId, historyVersion]);
+    const sessionChange = openFile ? sessionFiles.find((c) => c.path === openFile) ?? null : null;
+    const diff = (pendingChange && pendingChange.path === openFile ? pendingChange : null) ?? (diffMode === "git" ? gitChange
+        : diffMode === "nou" && record ? record.change
+            : diffMode === "session" ? sessionChange : null);
+    const showEditor = editing && !!openFile && !(pendingChange && pendingChange.path === openFile);
+    draftActiveRef.current = showEditor;
     // Check Nou's proposed edit before you approve it: does it add problems?
     useEffect(() => {
         setPendingNote(null);
@@ -317,14 +455,37 @@ export function App({ initialModel, permContext }) {
         setExitArmed(true);
         setTimeout(() => setExitArmed(false), 2000);
     };
+    /** Moves a pane border to column `x` and keeps every pane usable. */
+    const moveBorder = (border, x) => {
+        const { treeWidth, codeWidth } = layout.current;
+        const chatWidth = columns - treeWidth - codeWidth;
+        const tree = border === "tree" ? Math.min(Math.max(x + 1, MIN_TREE), columns - chatWidth - MIN_CODE) : treeWidth;
+        const chat = border === "chat" ? Math.min(Math.max(columns - x, MIN_CHAT), columns - treeWidth - MIN_CODE) : chatWidth;
+        const next = { tree: tree / columns, chat: chat / columns };
+        setPaneWidths(next);
+        return next;
+    };
     // Mouse: the wheel scrolls whatever pane is under the pointer; a click focuses that pane
-    // (and in the file tree, opens the clicked file).
+    // (and in the file tree, opens the clicked file). Dragging a border between panes resizes them.
     useMouse((event) => {
         if (view !== "main" || quickOpen)
             return;
         const { treeWidth, codeWidth, paneHeight } = layout.current;
+        if (event.kind === "drag")
+            return void (dragging.current && moveBorder(dragging.current, event.x));
+        if (event.kind === "release") {
+            if (dragging.current)
+                updateSettings({ paneWidths: paneWidthsRef.current });
+            dragging.current = null;
+            return;
+        }
         if (event.y < 1 || event.y > paneHeight)
             return; // header or status bar
+        // Each border is two columns: the left pane's edge and the right pane's.
+        if (event.kind === "click" && Math.abs(event.x - (treeWidth - 0.5)) <= 1)
+            return void (dragging.current = "tree");
+        if (event.kind === "click" && Math.abs(event.x - (treeWidth + codeWidth - 0.5)) <= 1)
+            return void (dragging.current = "chat");
         const pane = event.x < treeWidth ? "tree" : event.x < treeWidth + codeWidth ? "code" : "chat";
         if (event.kind === "wheel") {
             setWheel((w) => ({ pane, dir: event.dir, nonce: (w?.nonce ?? 0) + 1 }));
@@ -342,6 +503,7 @@ export function App({ initialModel, permContext }) {
         if (!(key.ctrl && input === "c"))
             return;
         if (busy || approval) {
+            pullAbort.current?.abort();
             agentRef.current?.cancel();
             approval?.resolve(false);
             setApproval(null);
@@ -395,6 +557,65 @@ export function App({ initialModel, permContext }) {
             return `  ${time}  ${c.source === "nou" ? "Nou" : "you"}  ${c.before === null ? "created " : ""}${c.path}${c.undone ? "  (undone)" : ""}`;
         }).join("\n")}\nUndo with /undo (last) or /rewind (whole last turn).`);
     };
+    /** Opens a file showing its net change over the session being viewed. */
+    const openSessionDiff = (file) => {
+        if (!settleDraft(file))
+            return;
+        open(file);
+        setReveal(file);
+        setDiffMode("session");
+        setFocus("code");
+    };
+    /** [ and ]: previous / next file in the session diff. */
+    const stepSessionFile = (step) => {
+        if (!sessionFiles.length)
+            return;
+        const at = sessionFiles.findIndex((c) => c.path === openFile);
+        const next = at < 0 ? 0 : (at + step + sessionFiles.length) % sessionFiles.length;
+        openSessionDiff(sessionFiles[next].path);
+    };
+    const sessionLabel = (s) => new Date(s.start).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+    const showSessions = () => {
+        const list = timeline.sessions().slice(0, 15);
+        if (!list.length)
+            return info("No sessions with changes yet.");
+        info(`Sessions with changes (newest first):\n${list.map((s, i) => {
+            const current = s.id === agentRef.current.session ? "  (this session)" : "";
+            return `  ${String(i + 1).padStart(2)}. ${sessionLabel(s)}  ${s.files.length} file${s.files.length === 1 ? "" : "s"}${current}`;
+        }).join("\n")}\nShow one with /diff <number>.`);
+    };
+    /** /diff: this session; /diff <n>: the nth session from /sessions; /diff <file>: one file of the session being viewed. */
+    const showSessionDiff = (arg) => {
+        const current = agentRef.current.session;
+        let id = current;
+        let label = "this session";
+        let file = null;
+        if (/^\d+$/.test(arg)) {
+            const picked = timeline.sessions()[Number(arg) - 1];
+            if (!picked)
+                return info(`There's no session ${arg}. See /sessions.`, "error");
+            id = picked.id;
+            if (id !== current)
+                label = `session ${sessionLabel(picked)}`;
+        }
+        else if (arg) {
+            file = arg.replace(/\\/g, "/").replace(/^\.\//, "");
+            if (sessionView)
+                ({ id, label } = sessionView);
+        }
+        const files = timeline.sessionChanges(id);
+        setSessionView(id === current ? null : { id, label });
+        if (!files.length)
+            return info(`No changes in ${label}.`);
+        if (file && !files.some((c) => c.path === file))
+            return info(`${file} didn't change in ${label}.`, "error");
+        const lines = files.map((c) => {
+            const { added, removed } = lineCounts(c.before, c.after);
+            return `  ${c.isNew ? "A" : "M"} ${c.path}  +${added} -${removed}`;
+        });
+        info(`Changes in ${label} (yours and Nou's):\n${lines.join("\n")}\nShowing ${file ?? files[0].path}. [ ] previous/next file · v cycle diffs · Esc close.`);
+        openSessionDiff(file ?? files[0].path);
+    };
     /**
      * Before editing another file: an unsaved draft of a different file is saved (auto-save on) or kept and
      * the switch refused (auto-save off). Never silently dropped. Returns whether it's OK to continue.
@@ -443,6 +664,8 @@ export function App({ initialModel, permContext }) {
             order.push("git");
         if (record?.status === "applied")
             order.push("nou");
+        if (sessionChange)
+            order.push("session");
         if (order.length === 1) {
             setEntries((prev) => [...prev, { kind: "info", text: `${openFile} has no changes vs git HEAD.` }]);
             return;
@@ -451,16 +674,17 @@ export function App({ initialModel, permContext }) {
         setDiffMode((m) => order[(order.indexOf(m) + 1) % order.length]);
     };
     useInput((input, key) => {
-        if (approval) {
-            if (input === "y" || input === "Y")
-                answer(true);
-            else if (input === "n" || input === "N")
-                answer(false);
-            else if (key.escape) {
+        // A waiting approval doesn't freeze anything: y/n answer it from the tree or code view (the chat
+        // handles them itself when its input is empty), Esc stops the turn, and every other key works as usual.
+        if (approval && !(showEditor && focus === "code")) {
+            if (key.escape) {
                 agentRef.current?.cancel();
-                answer(false);
+                return answer(false);
             }
-            return;
+            if (focus !== "chat" && /^[yYnN]$/.test(input))
+                return answer(/[yY]/.test(input));
+            if (focus !== "chat" && input === "o" && pendingChange)
+                return openPending();
         }
         if (key.ctrl && input === "p") {
             setQuickOpen(true);
@@ -468,16 +692,21 @@ export function App({ initialModel, permContext }) {
         }
         if (showEditor && focus === "code")
             return; // the editor owns the keyboard
+        if (key.tab && key.shift)
+            return cycleAutoMode();
         if (key.tab) {
-            const step = key.shift ? -1 : 1;
-            setFocus((f) => FOCUS_ORDER[(FOCUS_ORDER.indexOf(f) + step + FOCUS_ORDER.length) % FOCUS_ORDER.length]);
+            setFocus((f) => FOCUS_ORDER[(FOCUS_ORDER.indexOf(f) + 1) % FOCUS_ORDER.length]);
             return;
         }
         if (key.escape) {
-            if (busy)
+            if (busy) {
+                pullAbort.current?.abort();
                 agentRef.current?.cancel();
-            else if (diffMode !== "off")
+            }
+            else if (diffMode !== "off") {
                 setDiffMode("off");
+                setSessionView(null);
+            }
             else
                 setFocus("chat");
             return;
@@ -486,6 +715,10 @@ export function App({ initialModel, permContext }) {
             return; // letters belong to the text box
         if (input === "f")
             setFollow((f) => !f);
+        else if (input === "m") {
+            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.");
+        }
         else if (input === "p") {
             setCodePanel((p) => (p === "problems" ? "code" : "problems"));
             setEditing(false);
@@ -493,8 +726,20 @@ export function App({ initialModel, permContext }) {
         }
         else if (input === "u")
             undoLast();
+        else if (input === "<" || input === ">") {
+            // Moves the focused pane's inner border: the tree's right edge, or the code view's edge with the chat.
+            const { treeWidth, codeWidth } = layout.current;
+            const step = input === ">" ? 2 : -2;
+            updateSettings({ paneWidths: moveBorder(focus === "tree" ? "tree" : "chat", (focus === "tree" ? treeWidth - 1 : treeWidth + codeWidth) + step) });
+        }
+        else if (input === "=") {
+            setPaneWidths(null);
+            updateSettings({ paneWidths: null });
+        }
         else if (input === "v")
             cycleDiff();
+        else if ((input === "]" || input === "[") && diffMode === "session")
+            stepSessionFile(input === "]" ? 1 : -1);
         else if (input === "e")
             startEditing();
         else if (input === "s" || input === ",")
@@ -534,6 +779,36 @@ ${snippet}
     const contextChip = openFile
         ? `${openFile}${showEditor && editorState ? `:${editorState.line}${editorState.dirty ? " ✎ unsaved" : ""}` : viewport ? `:${viewport.top}-${viewport.bottom}` : ""}`
         : null;
+    const pluginsCommand = async ([action, name]) => {
+        if (action === "add") {
+            const starter = starters.find((s) => s.id === name);
+            if (!starter)
+                return info(`No starter plugin "${name ?? ""}". Starters: ${starters.map((s) => s.id).join(", ")}`, "error");
+            if (plugins.some((p) => p.id === starter.id))
+                return info(`You already have a plugin called ${starter.id}; see /settings → Plugins.`, "error");
+            const added = await addStarterPlugin(starter);
+            return added.error
+                ? info(`Added ${added.file}, but it failed to load: ${added.error}`, "error")
+                : info(`Added and switched on ${added.plugin.name} (${added.file}). Edit that file to make it your own.`);
+        }
+        if (action === "new") {
+            try {
+                const file = scaffoldPlugin(name ?? "");
+                rescanPlugins();
+                return info(`Created ${path.relative(process.cwd(), file)}. Edit it, then switch it on in /settings → Plugins.`);
+            }
+            catch (error) {
+                return info(`/plugins new: ${error.message}`, "error");
+            }
+        }
+        if (action)
+            return info("Usage: /plugins, /plugins add <name>, /plugins new <name>", "error");
+        const mark = { on: "●", off: "○", changed: "⚠" };
+        const lines = allPlugins.map((p) => p.scope === "starter"
+            ? `  + ${p.id.padEnd(16)} ${p.plugin?.description ?? ""}`
+            : `  ${mark[trustState(p, settings)]} ${p.id.padEnd(16)} ${p.scope}${p.error ? ` · ✖ ${p.error}` : ""}`);
+        return info(`Plugins (● on, ○ off, + starter you can add with /plugins add <name>):\n${lines.join("\n")}\nWrite your own: /plugins new <name>`);
+    };
     const runCommand = async (input) => {
         const [command, ...rest] = input.slice(1).split(/\s+/);
         const arg = rest.join(" ").trim();
@@ -544,13 +819,29 @@ ${snippet}
                 return rewind();
             case "history":
                 return showHistory();
+            case "diff":
+                return showSessionDiff(arg);
+            case "sessions":
+                return showSessions();
             case "problems":
                 setCodePanel("problems");
                 setFocus("code");
                 return;
             case "settings":
+                setConnectTo(undefined);
+                setView("settings");
+                return;
+            case "connect": {
+                const provider = providers.find((p) => p.id === arg.toLowerCase());
+                const choices = providers.filter((p) => p.connect).map((p) => p.id).join(", ");
+                if (!provider)
+                    return info(arg ? `Unknown provider "${arg}". Choose one of: ${choices}` : `Usage: /connect <provider>, one of: ${choices}`, "error");
+                if (!provider.connect)
+                    return info(`${provider.label} needs nothing to connect.`);
+                setConnectTo(provider);
                 setView("settings");
                 return;
+            }
             case "model": {
                 if (!arg) {
                     const list = providers.map((p) => {
@@ -560,7 +851,41 @@ ${snippet}
                     info(`Current: ${describe(choice)}\n${list.join("\n")}\nSwitch with /model <provider[:model]> or open /settings`);
                     return;
                 }
-                switchModel(resolveModel(arg));
+                return chooseModel(resolveModel(arg));
+            }
+            case "copy": {
+                const reply = [...entries].reverse().find((e) => e.kind === "assistant")?.text;
+                const blocks = reply ? [...reply.matchAll(/```[^\n]*\n([\s\S]*?)```/g)].map((m) => m[1]) : [];
+                const what = arg === "file" ? (openFile ? readText(openFile) : null) : arg === "code" ? blocks[blocks.length - 1] ?? null : reply ?? null;
+                if (arg && arg !== "file" && arg !== "code")
+                    return info("Usage: /copy (the last reply) · /copy code (its last code block) · /copy file (the open file)", "error");
+                if (!what)
+                    return info(arg === "file" ? "No file is open." : arg === "code" ? "The last reply has no code block." : "Nothing to copy yet.", "error");
+                const ok = await copyToClipboard(what);
+                return info(ok ? `Copied ${arg === "file" ? openFile : arg === "code" ? "the code block" : "the last reply"} (${what.split("\n").length} lines).` : "Couldn't reach the clipboard. Press m to turn off the mouse and select the text yourself.", ok ? "info" : "error");
+            }
+            case "auto": {
+                if (!arg)
+                    return cycleAutoMode();
+                if (arg === "ask" || arg === "auto-edit" || arg === "auto")
+                    return cycleAutoMode(arg);
+                return info("Usage: /auto [ask|auto-edit|auto]", "error");
+            }
+            case "engine": {
+                if (arg && isEngineId(arg))
+                    return switchEngine(arg);
+                if (arg)
+                    return info(`Unknown engine ${arg}. Choose one of: ${ENGINES.map((e) => e.id).join(", ")}`, "error");
+                const current = agentRef.current.id;
+                const lines = ENGINES.map((e) => `  ${e.id === current ? "●" : "○"} ${e.id.padEnd(12)} ${e.description}${isInstalled(e) ? "" : ` (not installed: switching runs npm install ${e.package})`}`);
+                return info(`Engines (/engine <name> to switch, or /settings → Engine):\n${lines.join("\n")}`);
+            }
+            case "pull": {
+                if (!arg)
+                    return info("Usage: /pull <model>, e.g. /pull qwen3:8b. Browse models at https://ollama.com/library", "error");
+                const model = arg.replace(/^ollama:/, "");
+                if (await pullModel(model))
+                    info(`Use it with /model ollama:${model}`);
                 return;
             }
             case "models": {
@@ -580,10 +905,31 @@ ${snippet}
                 }
                 return;
             }
+            case "compact": {
+                const engine = agentRef.current;
+                if (!engine.compact)
+                    return info(`${engineInfo(engine.id).label} manages its own context.`);
+                if (busy)
+                    return info("Wait for the current reply to finish first.", "error");
+                setBusy("Summarizing the conversation...");
+                try {
+                    if (!(await engine.compact(true)))
+                        info("Nothing to compact yet.");
+                }
+                catch (error) {
+                    info(`Couldn't compact: ${error.message}`, "error");
+                }
+                finally {
+                    setBusy(null);
+                }
+                return;
+            }
             case "clear":
                 agentRef.current.clear();
                 setEntries([]);
                 return;
+            case "plugins":
+                return pluginsCommand(rest);
             case "version":
                 return info(`nou v${currentVersion()}${update ? ` · v${update} is available, run \`nou update\`` : " · up to date"}`);
             case "help":
@@ -637,15 +983,15 @@ ${snippet}
         }
     }
     if (view === "settings") {
-        return (_jsx(Settings, { width: columns, height: rows, settings: settings, choice: choice, plugins: allPlugins, onModel: (next) => switchModel(next), onChange: updateSettings, onTogglePlugin: (id, enabled) => void togglePlugin(id, enabled), onRescanPlugins: () => {
-                const found = discoverPlugins();
-                setPlugins((prev) => found.map((f) => prev.find((p) => p.id === f.id && p.plugin) ?? f));
-            }, onClose: () => setView("main") }));
+        return (_jsx(Settings, { width: columns, height: rows, settings: settings, choice: choice, plugins: allPlugins, ...(connectTo ? { connectTo } : {}), onModel: (next) => void chooseModel(next), onEngine: (id) => void switchEngine(id), onChange: updateSettings, onTogglePlugin: (id, enabled) => void togglePlugin(id, enabled), onRescanPlugins: rescanPlugins, onClose: () => {
+                setConnectTo(undefined);
+                setView("main");
+            } }));
     }
     const height = Math.max(10, rows - 2);
-    const treeWidth = Math.max(24, Math.floor(columns * 0.2));
-    const chatWidth = Math.max(34, Math.floor(columns * 0.3));
-    const codeWidth = Math.max(20, columns - treeWidth - chatWidth);
+    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);
     layout.current = { treeWidth, codeWidth, paneHeight: height };
     const wheelFor = (pane) => (wheel?.pane === pane ? wheel : null);
     const edited = new Set([...changes].filter(([, c]) => c.status === "applied").map(([p]) => p));
@@ -659,19 +1005,32 @@ ${snippet}
             : diff ? { label: "DIFF", color: C.accent2 }
                 : busy ? { label: "WORKING", color: C.accent2 }
                     : { label: focus.toUpperCase(), color: C.accent };
-    const hints = approval
-        ? "y accept · n reject · Esc stop"
+    // Shortcuts for the status bar, most useful first; the ones that don't fit are left out (all of them are in /help).
+    const hints = approval && !(showEditor && focus === "code")
+        ? [["y", "accept"], ["n", "reject"], ...(pendingChange && diff !== pendingChange ? [["o", "show the edit"]] : []), ["Esc", "stop"], ["Shift+Tab", "auto mode"]]
         : showEditor && focus === "code"
-            ? `Ctrl+S save${settings.autoSave === "off" ? "" : " (auto-save on)"} · Ctrl+Z/Y undo/redo · Ctrl+K info · Ctrl+G definition · Esc close`
+            ? [["Esc", "done"], ["Ctrl+S", settings.autoSave === "off" ? "save" : "save (auto-save on)"], ["Ctrl+Z", "undo"], ["Ctrl+Y", "redo"], ["Ctrl+K", "info"], ["Ctrl+G", "definition"]]
             : focus === "chat"
-                ? busy ? "Esc stop · Shift+↑↓ scroll chat · Tab switch pane" : "Enter send · Shift+↑↓ / PgUp scroll · / commands · Ctrl+P find file · Tab switch pane"
+                ? busy
+                    ? [["Esc", "stop"], ["Shift+↑↓", "scroll"], ["Tab", "next pane"]]
+                    : [["Enter", "send"], ["/", "commands"], ["Tab", "next pane"], ["Ctrl+P", "find file"], ["Shift+↑↓", "scroll"]]
                 : focus === "tree"
-                    ? "↑↓ move · Enter open · c changes · e edit · p problems · u undo · Ctrl+P find · s settings"
-                    : diff ? "n/N next/prev change · v cycle diff · Esc close diff" : "↑↓ scroll · e edit · v diff · p problems · u undo · s settings";
-    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Header, { width: columns, branch: branch, changes: git.size, model: describe(choice), local: choice.provider.local, busy: busy, update: update }), _jsxs(Box, { flexDirection: "row", height: height, children: [_jsx(FileTree, { width: treeWidth, height: height, focused: focus === "tree" && !approval, openFile: openFile, reveal: reveal, version: treeVersion, changed: edited, git: git, problemCounts: diagnostics.fileCounts(), wheel: wheelFor("tree"), click: treeClick, onOpen: (filePath) => {
+                    ? [["Enter", "open"], ["e", "edit"], ["c", "changes"], ["Ctrl+P", "find"], ["u", "undo"], ["p", "problems"], ["< >", "resize"], ["m", "select text"], ["s", "settings"]]
+                    : diff
+                        ? [["Esc", "close diff"], ["n/N", "next/prev change"], ...(diffMode === "session" ? [["[ ]", "prev/next file"]] : []), ["v", "cycle diff"]]
+                        : [["e", "edit"], ["v", "diff"], ["u", "undo"], ["p", "problems"], ["< >", "resize"], ["m", "select text"], ["s", "settings"]];
+    const statusUsed = mode.label.length + 2 + autoMode.length + 2 + 10 + ` ✖ ${totals.errors} ▲ ${totals.warnings} `.length + (checking.length ? 4 + checking.join(", ").length : 0) + 2;
+    const shownHints = [];
+    for (let used = statusUsed, i = 0; i < hints.length; i++) {
+        used += hints[i][0].length + hints[i][1].length + 4;
+        if (used > columns)
+            break;
+        shownHints.push(hints[i]);
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Header, { width: columns, branch: branch, changes: git.size, model: agentRef.current.id === "nou" ? describe(choice) : `${engineInfo(agentRef.current.id).label} · ${engineInfo(agentRef.current.id).model(choice)}`, local: choice.provider.local, busy: busy, update: update }), _jsxs(Box, { flexDirection: "row", height: height, children: [_jsx(FileTree, { width: treeWidth, height: height, focused: focus === "tree", openFile: openFile, reveal: reveal, version: treeVersion, changed: edited, git: git, problemCounts: diagnostics.fileCounts(), wheel: wheelFor("tree"), click: treeClick, onOpen: (filePath) => {
                             open(filePath);
                             setFocus("code");
-                        }, onHover: () => { } }), codePanel === "problems" && !pendingChange ? (_jsx(ProblemsView, { width: codeWidth, height: height, focused: focus === "code" && !approval, problems: diagnostics.all(), checking: checking, wheel: wheelFor("code"), onJump: (file, line) => openAt(file, line), onClose: () => setCodePanel("code") })) : showEditor ? (_jsx(Editor, { width: codeWidth, height: height, 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, problems: fileProblems, autoSave: settings.autoSave, syntaxVersion: syntaxVersion, wheel: wheelFor("code"), onHover: (text, line, col) => (lspEnabled ? lsp.hover(openFile, text, line, col) : Promise.resolve(null)), onDefinition: (text, line, col) => {
+                        }, onHover: () => { } }), codePanel === "problems" && !pendingChange ? (_jsx(ProblemsView, { width: codeWidth, height: height, focused: focus === "code", problems: diagnostics.all(), checking: checking, wheel: wheelFor("code"), onJump: (file, line) => openAt(file, line), onClose: () => setCodePanel("code") })) : showEditor ? (_jsx(Editor, { width: codeWidth, height: height, 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, problems: fileProblems, autoSave: settings.autoSave, syntaxVersion: syntaxVersion, wheel: wheelFor("code"), onHover: (text, line, col) => (lspEnabled ? lsp.hover(openFile, text, line, col) : Promise.resolve(null)), onDefinition: (text, line, col) => {
                             if (!lspEnabled)
                                 return info("Go to definition needs a language server (see /settings → Plugins).", "error");
                             void lsp.definition(openFile, text, line, col).then((target) => {
@@ -690,9 +1049,9 @@ ${snippet}
                             draft.current = state.dirty
                                 ? { path: openFile, text: state.lines.join("\n"), baseline: draft.current?.path === openFile ? draft.current.baseline : content }
                                 : null;
-                        } }, `${openFile}:${editorStart.nonce}`)) : (_jsx(CodeView, { width: codeWidth, height: height, focused: focus === "code" && !approval, filePath: openFile, content: content, diff: diff, diffLabel: diffMode === "git" ? "vs HEAD" : "Nou's edit", pending: !!pendingChange, marked: record?.lines ?? NO_LINES, problems: fileProblems, focusLine: focusLine, syntaxVersion: syntaxVersion, diffNote: pendingChange ? pendingNote?.short ?? (checking.length ? "checking…" : null) : null, wheel: wheelFor("code"), onViewport: (top, bottom) => setViewport((v) => (v?.top === top && v.bottom === bottom ? v : { top, bottom })) })), _jsx(Chat, { width: chatWidth, height: height, focused: focus === "chat", entries: entries, streaming: streaming, busy: busy, approval: approval?.request ?? null, approvalNote: pendingChange ? pendingNote?.detail ?? null : null, contextChip: contextChip, wheel: wheelFor("chat"), onSubmit: send })] }), _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: follow ? C.green : C.dim, children: follow ? " ◉ follow " : " ○ follow " }), _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
+                        } }, `${openFile}:${editorStart.nonce}`)) : (_jsx(CodeView, { width: codeWidth, height: height, 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"), onViewport: (top, bottom) => setViewport((v) => (v?.top === top && v.bottom === bottom ? v : { top, bottom })) })), _jsx(Chat, { width: chatWidth, height: height, focused: focus === "chat", entries: entries, streaming: streaming, busy: busy, approval: approval?.request ?? null, approvalNote: pendingChange ? pendingNote?.detail ?? null : null, contextChip: contextChip, wheel: wheelFor("chat"), onSubmit: send, onAnswer: answer })] }), _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: follow ? " ◉ follow " : " ○ follow " }), _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)` : ""] })
-                            : _jsxs(Text, { color: C.dim, children: ["  ", hints] })] }) }), quickOpen && (_jsx(QuickOpen, { width: columns, top: 3, files: allFiles, 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)))] }) }), quickOpen && (_jsx(QuickOpen, { width: columns, top: 3, files: allFiles, onPick: (file) => {
                     setQuickOpen(false);
                     open(file);
                     setReveal(file);