nou-cli 0.3.0 → 0.5.0

package/dist/src/ui/App.js

@@ -23,11 +23,16 @@ import { C } from "./theme.js";
 import { FileTree } from "./FileTree.js";
 import { CodeView } from "./CodeView.js";
 import { Editor } from "./Editor.js";
+import { WHEEL_STEP } from "./scroll.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
@@ -37,6 +42,8 @@ const HELP = `Commands:
   /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/
@@ -50,10 +57,24 @@ const HELP = `Commands:
   /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 / session)  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)
+  /  start a command from any pane
+  e  edit open file (or click in the code)  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`;
+Mouse: wheel scrolls (Shift+wheel sideways) · click/drag a scrollbar · click in the code to edit there, drag to select
+In the editor:
+  Shift+arrows / mouse drag select · Ctrl+A all · Ctrl+C/X/V copy/cut/paste · Esc clear selection or leave
+  Ctrl+←/→ word · Ctrl+Backspace or Ctrl+W delete word · Ctrl+Home/End file start/end
+  Ctrl+F find · Ctrl+L go to line · Ctrl+/ comment · Ctrl+D duplicate line · Alt+↑/↓ move line
+  Tab/Shift+Tab indent/outdent · Ctrl+S save · Ctrl+Z/Y undo/redo · Ctrl+K info · Ctrl+G go to definition`;
+/** A callback that keeps one identity across renders but always runs the latest code, so memoized panes don't re-render for it. */
+function useEvent(fn) {
+    const ref = useRef(fn);
+    ref.current = fn;
+    return useCallback((...args) => ref.current(...args), []);
+}
 function readText(filePath) {
     try {
         return readFileSync(path.resolve(process.cwd(), filePath), "utf-8");
@@ -109,11 +130,14 @@ export function App({ initialModel, permContext }) {
     const [plugins, setPlugins] = useState([]);
     const [starters, setStarters] = useState([]);
     const [viewport, setViewport] = 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);
+    const editorProblemsTimer = useRef(null);
     // Unsaved editor text survives switching to a diff and back.
     const draft = useRef(null);
     const [codePanel, setCodePanel] = useState("code");
-    const [, setDiagVersion] = useState(0);
+    const [diagnosticsVersion, setDiagVersion] = useState(0);
     const [syntaxVersion, setSyntaxVersion] = useState(0);
     const [focusLine, setFocusLine] = useState(null);
     const [editorStart, setEditorStart] = useState({ line: 1, nonce: 0 });
@@ -121,9 +145,20 @@ export function App({ initialModel, permContext }) {
     const [exitArmed, setExitArmed] = useState(false);
     const [update, setUpdate] = useState(null);
     const [wheel, setWheel] = useState(null);
+    const [scrollTo, setScrollTo] = useState(null);
+    const [editorMouse, setEditorMouse] = useState(null);
+    /** Wheel events waiting for the next frame, added up per pane. */
+    const pendingWheel = useRef({ pane: "chat", lines: 0, columns: 0, timer: null });
+    const [chatPrefill, setChatPrefill] = useState(null);
     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;
+    /** What a mouse drag is moving: a pane border, a pane's scrollbar, or the editor's selection. */
+    const dragging = useRef(null);
     const pullAbort = useRef(null);
     const diagnosticsRef = useRef(null);
     diagnosticsRef.current ??= new DiagnosticsManager();
@@ -132,6 +167,8 @@ export function App({ initialModel, permContext }) {
     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;
@@ -169,8 +206,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");
@@ -280,18 +317,19 @@ export function App({ initialModel, permContext }) {
         if (!isInstalled(target)) {
             const controller = new AbortController();
             pullAbort.current = controller;
-            info(`Installing ${target.label} (${target.package}) into ~/.nou/engines. Esc to stop.`);
-            setBusy(`Installing ${target.label}...`);
+            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 ${target.label}: ${line.slice(0, 80)}`), controller.signal);
+                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}.` : `Couldn't install ${target.label}: ${error.message}`, "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);
@@ -365,16 +403,45 @@ 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.");
+    };
+    // Derived values handed to the panes keep their identity until they really change, so a pane that
+    // didn't change skips re-rendering (memo) instead of redrawing on every keystroke elsewhere.
+    const edited = useMemo(() => new Set([...changes].filter(([, c]) => c.status === "applied").map(([p]) => p)), [changes]);
+    const problemCounts = useMemo(() => diagnostics.fileCounts(), [diagnosticsVersion]);
+    const fileProblems = useMemo(() => (openFile ? diagnostics.get(openFile) : []), [openFile, diagnosticsVersion]);
     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 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 ?? (diffMode === "git" ? gitChange
+    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;
+    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);
@@ -395,13 +462,6 @@ export function App({ initialModel, permContext }) {
             cancelled = true;
         };
     }, [pendingChange]);
-    // Live problems while you type (debounced).
-    useEffect(() => {
-        if (!showEditor || !openFile || !editorState)
-            return;
-        const timer = setTimeout(() => void diagnostics.checkFile(openFile, editorState.lines.join("\n")), 700);
-        return () => clearTimeout(timer);
-    }, [editorState?.lines]);
     /** Quit, saving the editor's unsaved text first if auto-save is on. */
     const quit = () => {
         if (draft.current && settings.autoSave !== "off")
@@ -415,17 +475,89 @@ export function App({ initialModel, permContext }) {
         setExitArmed(true);
         setTimeout(() => setExitArmed(false), 2000);
     };
-    // Mouse: the wheel scrolls whatever pane is under the pointer; a click focuses that pane
-    // (and in the file tree, opens the clicked file).
+    /** 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;
+    };
+    /** Adds a wheel event to its pane's total; the panes get one update per frame however many events arrive. */
+    const queueWheel = (pane, dir, horizontal) => {
+        const q = pendingWheel.current;
+        if (q.timer && q.pane !== pane)
+            flushWheel();
+        q.pane = pane;
+        if (horizontal)
+            q.columns += dir * WHEEL_STEP;
+        else
+            q.lines += dir * WHEEL_STEP;
+        q.timer ??= setTimeout(flushWheel, 16);
+    };
+    const flushWheel = () => {
+        const q = pendingWheel.current;
+        if (q.timer)
+            clearTimeout(q.timer);
+        q.timer = null;
+        if (!q.lines && !q.columns)
+            return;
+        const { pane, lines, columns } = q;
+        q.lines = 0;
+        q.columns = 0;
+        setWheel((w) => ({ pane, lines, columns, nonce: (w?.nonce ?? 0) + 1 }));
+    };
+    /** Scrolls a pane to where its scrollbar was clicked or dragged (rows start at y=3, under the border and title). */
+    const scrollPane = (pane, y) => {
+        const { paneHeight } = layout.current;
+        const fraction = (y - 3) / Math.max(1, paneHeight - 4);
+        setScrollTo((s) => ({ pane, fraction, nonce: (s?.nonce ?? 0) + 1 }));
+    };
+    // Mouse: the wheel scrolls whatever pane is under the pointer (Shift+wheel sideways); a click focuses
+    // that pane, opens the clicked file in the tree, and puts the cursor where you clicked in the code
+    // (starting the editor). Drag to select in the editor, drag a scrollbar to scroll, drag the border
+    // between panes to resize them.
     useMouse((event) => {
         if (view !== "main" || quickOpen)
             return;
         const { treeWidth, codeWidth, paneHeight } = layout.current;
+        const codeLeft = treeWidth;
+        const editorAt = (x, y, kind) => setEditorMouse((m) => ({ x: x - codeLeft - 1, y: y - 3, kind, nonce: (m?.nonce ?? 0) + 1 }));
+        if (event.kind === "drag") {
+            const drag = dragging.current;
+            if (drag === "tree" || drag === "chat")
+                moveBorder(drag, event.x);
+            else if (drag === "editor")
+                editorAt(event.x, event.y, "drag");
+            else if (drag)
+                scrollPane(drag.scroll, event.y);
+            return;
+        }
+        if (event.kind === "release") {
+            if (dragging.current === "tree" || dragging.current === "chat")
+                updateSettings({ paneWidths: paneWidthsRef.current });
+            if (dragging.current === "editor")
+                editorAt(event.x, event.y, "release");
+            dragging.current = null;
+            return;
+        }
         if (event.y < 1 || event.y > paneHeight)
             return; // header or status bar
         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 }));
+        if (event.kind === "wheel")
+            return queueWheel(pane, event.dir, event.horizontal);
+        // Each border is two columns: the left pane's edge and the right pane's.
+        if (Math.abs(event.x - (treeWidth - 0.5)) <= 1)
+            return void (dragging.current = "tree");
+        if (Math.abs(event.x - (treeWidth + codeWidth - 0.5)) <= 1)
+            return void (dragging.current = "chat");
+        // Each pane's scrollbar is the column inside its right border.
+        const scrollbarX = pane === "tree" ? treeWidth - 2 : pane === "code" ? treeWidth + codeWidth - 2 : columns - 2;
+        if (event.x === scrollbarX && event.y >= 3) {
+            dragging.current = { scroll: pane };
+            scrollPane(pane, event.y);
             return;
         }
         if (approval)
@@ -434,11 +566,26 @@ export function App({ initialModel, permContext }) {
         // Rows start under the pane's top border (y=1) and title (y=2).
         if (pane === "tree" && event.y >= 3)
             setTreeClick((c) => ({ row: event.y - 3, nonce: (c?.nonce ?? 0) + 1 }));
+        if (pane === "code" && event.y >= 3 && codePanel === "code") {
+            if (showEditor) {
+                dragging.current = "editor";
+                editorAt(event.x, event.y, "press");
+            }
+            else if (openFile && !diff && settleDraft(openFile)) {
+                // 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 }));
+                setDiffMode("off");
+                setEditing(true);
+            }
+        }
     }, settings.mouse);
     // Ctrl+C: stop Nou if it's working; otherwise press twice to quit.
     useInput((input, key) => {
         if (!(key.ctrl && input === "c"))
             return;
+        if (showEditor && focus === "code" && editorStateRef.current?.selection)
+            return; // the editor copies it
         if (busy || approval) {
             pullAbort.current?.abort();
             agentRef.current?.cancel();
@@ -611,16 +758,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);
@@ -628,9 +776,10 @@ 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) {
@@ -648,8 +797,17 @@ export function App({ initialModel, permContext }) {
         }
         if (focus === "chat")
             return; // letters belong to the text box
-        if (input === "f")
+        if (input === "/") {
+            // Commands work from anywhere: / jumps to the chat's command box.
+            setFocus("chat");
+            setChatPrefill((p) => ({ text: "/", nonce: (p?.nonce ?? 0) + 1 }));
+        }
+        else 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);
@@ -657,6 +815,16 @@ 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")
@@ -676,6 +844,7 @@ export function App({ initialModel, permContext }) {
     const editorContext = () => {
         if (!openFile)
             return null;
+        const editorState = editorStateRef.current;
         const unsaved = showEditor && editorState?.dirty;
         const lines = showEditor && editorState ? editorState.lines : content.replace(/\r\n/g, "\n").split("\n");
         let from;
@@ -774,13 +943,31 @@ ${snippet}
                 }
                 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) ? "" : " (installs on first use)"}`);
+                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": {
@@ -885,6 +1072,58 @@ ${snippet}
             setEntries((prev) => [...prev, { kind: "error", text: `Couldn't save ${file}: ${error.message}` }]);
         }
     }
+    // Stable callbacks for the memoized panes.
+    const onTreeOpen = useEvent((filePath) => {
+        open(filePath);
+        setFocus("code");
+    });
+    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 onSend = useEvent(send);
+    const onAnswer = useEvent(answer);
+    const onEditorHover = useEvent((text, line, col) => (lspEnabled && openFile ? lsp.hover(openFile, text, line, col) : Promise.resolve(null)));
+    const onEditorDefinition = useEvent((text, line, col) => {
+        if (!openFile)
+            return;
+        if (!lspEnabled)
+            return info("Go to definition needs a language server (see /settings → Plugins).", "error");
+        void lsp.definition(openFile, text, line, col).then((target) => {
+            if (!target)
+                return info("No definition found here.");
+            // Keep unsaved text when jumping within the same file.
+            if (target.file === openFile && draft.current)
+                draft.current = { ...draft.current, text };
+            openAt(target.file, target.line, true);
+        });
+    });
+    const onEditorSave = useEvent((text) => saveFromEditor(text));
+    const onEditorExit = useEvent(() => {
+        draft.current = null;
+        editorStateRef.current = null;
+        setEditing(false);
+    });
+    const onEditorState = useEvent((state) => {
+        if (!openFile)
+            return;
+        const prev = editorStateRef.current;
+        editorStateRef.current = state;
+        if (prev?.line !== state.line || prev?.dirty !== state.dirty || prev?.selection !== state.selection) {
+            setEditorState({ line: state.line, dirty: state.dirty, selection: state.selection });
+        }
+        draft.current = state.dirty
+            ? { path: openFile, text: state.lines.join("\n"), baseline: draft.current?.path === openFile ? draft.current.baseline : content }
+            : null;
+        // Live problems while you type (debounced).
+        if (prev && prev.lines !== state.lines) {
+            if (editorProblemsTimer.current)
+                clearTimeout(editorProblemsTimer.current);
+            const file = openFile;
+            editorProblemsTimer.current = setTimeout(() => void diagnostics.checkFile(file, state.lines.join("\n")), 700);
+        }
+    });
+    const lspEnabled = activePlugins.some((p) => p.id === "lsp");
     if (view === "settings") {
         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);
@@ -892,56 +1131,47 @@ ${snippet}
             } }));
     }
     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));
-    const fileProblems = openFile ? diagnostics.get(openFile) : [];
+    const scrollFor = (pane) => (scrollTo?.pane === pane ? scrollTo : null);
     const totals = diagnostics.counts();
     const checking = diagnostics.busy;
-    const lspEnabled = activePlugins.some((p) => p.id === "lsp");
     const mode = approval
         ? { label: "APPROVE", color: C.yellow }
         : showEditor ? { label: "EDIT", color: C.green }
             : 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`
+            ? editorState?.selection
+                ? [["Ctrl+C", "copy"], ["Ctrl+X", "cut"], ["Tab", "indent"], ["Ctrl+/", "comment"], ["Esc", "deselect"]]
+                : [["Esc", "done"], ["Ctrl+S", settings.autoSave === "off" ? "save" : "save (auto-save on)"], ["Ctrl+Z", "undo"], ["Shift+→", "select"], ["Ctrl+F", "find"], ["Ctrl+/", "comment"], ["/help", "all keys"]]
             : 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${diffMode === "session" ? " · [ ] prev/next file" : ""} · 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: 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" && !approval, 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) => {
-                            if (!lspEnabled)
-                                return info("Go to definition needs a language server (see /settings → Plugins).", "error");
-                            void lsp.definition(openFile, text, line, col).then((target) => {
-                                if (!target)
-                                    return info("No definition found here.");
-                                // Keep unsaved text when jumping within the same file.
-                                if (target.file === openFile && draft.current)
-                                    draft.current = { ...draft.current, text };
-                                openAt(target.file, target.line, true);
-                            });
-                        }, onSave: (text) => saveFromEditor(text), onExit: () => {
-                            draft.current = null;
-                            setEditing(false);
-                        }, onState: (state) => {
-                            setEditorState(state);
-                            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" : diffMode === "session" ? sessionView?.label ?? "this session" : "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
+                    ? [["Enter", "open"], ["e", "edit"], ["/", "command"], ["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"]]
+                        : [["click/e", "edit"], ["v", "diff"], ["u", "undo"], ["/", "command"], ["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: problemCounts, wheel: wheelFor("tree"), scrollTo: scrollFor("tree"), click: treeClick, onOpen: onTreeOpen, onHover: onTreeHover }), codePanel === "problems" && !pendingChange ? (_jsx(ProblemsView, { width: codeWidth, height: height, focused: focus === "code", problems: diagnostics.all(), checking: checking, wheel: wheelFor("code"), onJump: onJump, onClose: onCloseProblems })) : 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, ...(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, { 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"), scrollTo: scrollFor("code"), onViewport: onViewport })), _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"), scrollTo: scrollFor("chat"), prefill: chatPrefill, onSubmit: onSend, onAnswer: onAnswer })] }), _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);