nou-cli 0.5.2 → 0.5.4

package/dist/src/ui/Chat.js

@@ -3,12 +3,23 @@ import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useAnimation, useInput } from "ink";
 import { statSync } from "fs";
 import path from "path";
-import { linkAt, linkFileRefs, renderMarkdown, wrap } from "./text.js";
+import { closeOpenMarkdown, linkAt, linkFileRefs, linkUrls, renderMarkdown, wrap } from "./text.js";
 import { ChatInput, inputHeight } from "./ChatInput.js";
-import { C, SPINNER } from "./theme.js";
+import { copyToClipboard } from "./clipboard.js";
+import { C, SPINNER, ANIMATION_MS } from "./theme.js";
 import { Pane } from "./Pane.js";
 import { matchCommands } from "./commands.js";
 import { Scrollbar, topFor } from "./scroll.js";
+/**
+ * What the agent did between replies (files read, commands run...) folds into one line, like Claude's
+ * "▸ 5 steps": click it (or Ctrl+O for all of them) to see each step. `open` holds the runs shown open.
+ */
+function stepLines(steps, open, live, inner) {
+    const last = steps[steps.length - 1].text.replace(/\s+/g, " ");
+    const summary = `${open ? "▾" : "▸"} ${steps.length} steps${open ? "" : ` · ${live ? "now: " : "last: "}${last}`}`;
+    const head = { text: ` ${summary.length > inner - 4 ? `${summary.slice(0, inner - 5)}…` : summary}`, color: open ? C.accent2 : C.dim, lead: " ⚙", leadColor: C.dim, toggle: steps[0] };
+    return open ? [head, ...steps.flatMap((e) => cachedLines(e, inner).map((l) => (l.lead === " ⚙" ? { ...l, lead: "  " } : l)))] : [head];
+}
 const BAR = "▌ ";
 // Whether a path in a message is a file in the project, remembered so each one is checked once.
 const knownFiles = new Map();
@@ -53,7 +64,7 @@ function entryLines(entry, inner, links = true) {
             ? { icon: "⚙", color: C.dim }
             : entry.kind === "error" ? { icon: "✖", color: C.red } : { icon: "ℹ", color: C.accent };
         wrap(entry.text, inner - 4).forEach((line, i) => {
-            const spans = links && entry.kind !== "user" ? linkFileRefs([{ text: ` ${line}` }], isProjectFile) : [];
+            const spans = links && entry.kind !== "user" ? linkFileRefs(linkUrls([{ text: ` ${line}` }]), isProjectFile) : [];
             out.push({ text: ` ${line}`, color: style.color, lead: i === 0 ? ` ${style.icon}` : "  ", leadColor: style.color, ...(spans.some((sp) => sp.link) ? { spans } : {}) });
         });
     }
@@ -70,17 +81,68 @@ function cachedLines(entry, inner) {
     laidOut.set(entry, { inner, lines });
     return lines;
 }
-export const Chat = memo(function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, scrollTo, prefill, extraCommands, onMenu, onSubmit, onAnswer, click, onOpenRef, queued = [] }) {
-    const [input, setInput] = useState("");
+/**
+ * Where each tab sits in the chat's title row (columns from the pane's inner left edge), and the "+"
+ * that opens a new one: shared by the drawing and the clicks.
+ */
+export function chatTabZones(tabs) {
+    // One tab: just "Chat +", to leave the title row its room.
+    if (tabs.length === 1)
+        return { zones: [{ id: tabs[0].id, from: 3, to: 7 }], plus: 8, width: 9 };
+    let x = 3; // " ◆ "
+    const zones = tabs.map((t) => {
+        const w = tabText(t).length;
+        const zone = { id: t.id, from: x, to: x + w };
+        x += w + 1;
+        return zone;
+    });
+    return { zones, plus: x + 1, width: x + 3 };
+}
+const tabText = (t) => ` ${t.state === "busy" ? "● " : t.state === "waiting" ? "! " : ""}${t.label} `;
+const lineText = (line) => (line.spans ? line.spans.map((s) => s.text).join("") : line.text ?? "");
+export const Chat = memo(function Chat({ width, height, focused, entries, streaming, busy, approval, approvalNote, contextChip, wheel, scrollTo, prefill, extraCommands, onMenu, onSubmit, onAnswer, click, onOpenRef, select, tabs, queued = [] }) {
+    const [input, setInputText] = useState("");
+    // Whether the chat has the keyboard right now: a key handler from a render before focus moved away can
+    // still be attached for a moment (on a busy machine), and its keys belong to the pane that has focus.
+    const focusedNow = useRef(focused);
+    focusedNow.current = focused;
+    const [menuRow, setMenuRow] = useState(0);
+    /** A new input also puts the command menu back on its first row, in the same render. */
+    const setInput = (text) => {
+        setInputText(text);
+        setMenuRow(0);
+    };
     useEffect(() => {
         if (prefill)
             setInput(prefill.text);
     }, [prefill?.nonce]);
     const [scrollBack, setScrollBack] = useState(0);
-    const { frame } = useAnimation({ interval: 80, isActive: !!busy });
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy });
     const inner = width - 3; // minus the borders and the scrollbar
-    const history = useMemo(() => entries.flatMap((e) => cachedLines(e, inner)), [entries, inner]);
-    const lines = useMemo(() => (streaming ? [...history, ...entryLines({ kind: "assistant", text: streaming }, inner, false)] : history), [history, streaming, inner]);
+    const [openSteps, setOpenSteps] = useState(new Set());
+    const [allOpen, setAllOpen] = useState(false);
+    const history = useMemo(() => {
+        const out = [];
+        for (let i = 0; i < entries.length;) {
+            if (entries[i].kind !== "tool") {
+                out.push(...cachedLines(entries[i], inner));
+                i++;
+                continue;
+            }
+            // A run of steps: one alone is shown as is, two or more fold into a line.
+            let j = i;
+            while (j < entries.length && entries[j].kind === "tool")
+                j++;
+            const steps = entries.slice(i, j);
+            if (steps.length === 1)
+                out.push(...cachedLines(steps[0], inner));
+            else
+                out.push(...stepLines(steps, allOpen || openSteps.has(steps[0]), !!busy && j === entries.length, inner));
+            i = j;
+        }
+        return out;
+    }, [entries, inner, openSteps, allOpen, !!busy]);
+    const lines = useMemo(() => (streaming ? [...history, ...entryLines({ kind: "assistant", text: closeOpenMarkdown(streaming) }, inner, false)] : history), [history, streaming, inner]);
     // At the bottom, new output scrolls into view. Scrolled up to read, the view stays where it is
     // (counted from the bottom, so it moves up by however many lines arrived) until you scroll back down.
     const lastCount = useRef(lines.length);
@@ -133,8 +195,6 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
     // Typing "/" opens a menu of commands with what each does; ↑↓ pick one, Tab completes, Enter runs it.
     const menuOpen = focused && !approval && input.startsWith("/") && !input.includes(" ") && !input.includes("\n");
     const matches = useMemo(() => (menuOpen ? matchCommands(input, extraCommands) : []), [menuOpen, input, extraCommands]);
-    const [menuRow, setMenuRow] = useState(0);
-    useEffect(() => setMenuRow(0), [input]);
     const showMenu = matches.length > 0;
     useEffect(() => onMenu?.(showMenu), [showMenu]);
     const menuRows = Math.min(matches.length, Math.max(1, Math.min(7, height - 12)));
@@ -162,10 +222,74 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         if (!click)
             return;
         const line = visible[click.row];
+        const run = line?.toggle;
+        if (run) {
+            setOpenSteps((open) => {
+                const next = new Set(open);
+                if (next.has(run) || allOpen)
+                    next.delete(run);
+                else
+                    next.add(run);
+                return next;
+            });
+            if (allOpen)
+                setAllOpen(false);
+            return;
+        }
         const ref = line?.spans ? linkAt(line.spans, click.col) : null;
         if (ref)
             onOpenRef?.(ref);
     }, [click?.nonce]);
+    // Drag over the messages to select them (in lines of the conversation, so it holds while it scrolls);
+    // letting go copies them. Dragging past the top or bottom scrolls.
+    const [selection, setSelection] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const anchor = useRef(null);
+    useEffect(() => {
+        if (!select)
+            return;
+        const at = { line: Math.max(0, Math.min(lines.length - 1, firstShown + select.row)), col: Math.max(0, select.col) };
+        if (select.kind === "press") {
+            anchor.current = at;
+            setSelection(null);
+            return;
+        }
+        if (!anchor.current)
+            return;
+        if (select.kind === "drag") {
+            if (select.row < 0)
+                setScrollBack((b) => Math.min(maxBack, b + 1));
+            else if (select.row >= rows)
+                setScrollBack((b) => Math.max(0, b - 1));
+        }
+        const moved = at.line !== anchor.current.line || at.col !== anchor.current.col;
+        const range = moved ? (at.line < anchor.current.line || (at.line === anchor.current.line && at.col < anchor.current.col) ? { from: at, to: anchor.current } : { from: anchor.current, to: at }) : null;
+        setSelection(range);
+        if (select.kind !== "release")
+            return;
+        anchor.current = null;
+        if (!range)
+            return;
+        const text = lines.slice(range.from.line, range.to.line + 1).map((line, i, all) => {
+            const t = lineText(line);
+            return t.slice(i === 0 ? range.from.col : 0, i === all.length - 1 ? range.to.col + 1 : undefined).trimEnd();
+        }).join("\n");
+        void copyToClipboard(text).then((ok) => {
+            setFlash(ok ? `Copied ${text.split("\n").length > 1 ? `${text.split("\n").length} lines` : "it"} ✓` : "Can't copy: press m, then select");
+            setTimeout(() => setFlash(null), 2000);
+        });
+    }, [select?.nonce]);
+    // Typing or new messages leave the selection be; a new conversation clears it.
+    useEffect(() => {
+        if (!entries.length)
+            setSelection(null);
+    }, [entries.length]);
+    /** The selected columns of a line, if any. */
+    const selectedIn = (index) => {
+        if (!selection || index < selection.from.line || index > selection.to.line)
+            return null;
+        return [index === selection.from.line ? selection.from.col : 0, index === selection.to.line ? selection.to.col + 1 : Infinity];
+    };
     // While something waits for approval, y/n into an empty input answer it; any other key starts a message.
     useInput((typed) => {
         if (/^[yYnN]$/.test(typed))
@@ -173,13 +297,19 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         else if (typed && typed >= " ")
             setInput(typed); // printable, not a control key
     }, { isActive: focused && !!approval && !input });
-    useInput((_input, key) => {
+    useInput((input, key) => {
         if (key.pageUp || (key.upArrow && key.shift))
             setScrollBack((b) => Math.min(maxBack, Math.min(b, maxBack) + Math.max(1, rows - 2)));
         else if (key.pageDown || (key.downArrow && key.shift))
             setScrollBack((b) => Math.max(0, Math.min(b, maxBack) - Math.max(1, rows - 2)));
         else if (key.ctrl && key.home)
             setScrollBack(maxBack);
+        else if (key.ctrl && input === "o") {
+            // Open every run of steps, or fold them all (the ones opened by a click too).
+            setAllOpen(!allOpen);
+            if (allOpen)
+                setOpenSteps(new Set());
+        }
         else if (key.ctrl && key.end)
             setScrollBack(0);
     }, { isActive: focused });
@@ -210,13 +340,22 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
                 ? line.spans.map((span, i) => (_jsx(Text, { bold: !!span.bold || !!line.bold, italic: !!span.italic, dimColor: !!span.dim && !span.link, underline: !!span.link, ...(span.link ? { color: C.cyan } : span.code ? { color: C.yellow } : line.color ? { color: line.color } : { color: C.text }), children: span.text }, i)))
                 : _jsx(Text, { bold: !!line.bold, dimColor: !!line.dim, ...(line.color ? { color: line.color } : {}), children: line.text || " " })] }, key));
     const empty = entries.length === 0 && !streaming;
-    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u25C6" }), " Chat", back
+    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u25C6" }), " ", tabs && tabs.items.length > 1 ? (_jsxs(_Fragment, { children: [tabs.items.map((t) => (_jsxs(Text, { children: [_jsx(Text, { ...(t.id === tabs.active ? { backgroundColor: C.panel, color: C.text, bold: true } : { color: t.state === "waiting" ? C.yellow : C.dim }), children: tabText(t) }), " "] }, t.id))), _jsx(Text, { color: C.accent2, bold: true, children: " + " })] })) : _jsxs(_Fragment, { children: ["Chat", tabs ? _jsx(Text, { color: C.accent2, bold: true, children: " +" }) : null] }), flash ? _jsxs(Text, { color: C.green, bold: true, children: ["  ", flash] }) : back
                 ? unread
                     ? _jsxs(Text, { color: C.green, bold: true, children: ["  \u2193 ", unread, " new lines below", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
                     : _jsxs(Text, { color: C.yellow, children: ["  \u2191 scrolled ", back, " lines", _jsx(Text, { color: C.dim, children: " \u00B7 PgDn / wheel / Ctrl+End" })] })
                 : maxBack > 0 ? _jsx(Text, { color: C.dim, children: "  PgUp / wheel to scroll" }) : null] }));
-    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { children: visible.map((line, i) => _jsx(Text, { color: line.leadColor ?? C.dim, children: `${line.lead ?? "  "}${i < visible.length - 1 ? "\n" : ""}` }, i)) }) }), _jsx(Box, { flexDirection: "column", width: inner - 2, flexShrink: 0, children: visible.map((line, i) => render(line, firstShown + i, false)) })] })) }), _jsx(Scrollbar, { total: lines.length, top: firstShown, rows: rows, focused: focused })] }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), showMenu ? (_jsx(Box, { flexDirection: "column", children: matches.slice(menuStart, menuStart + menuRows).map((c, i) => {
+    // The messages, rebuilt only when they or the scroll position change: typing, the context chip and the
+    // spinner re-render the chat without touching its (often hundreds of) lines.
+    const messages = useMemo(() => (_jsx(_Fragment, { children: empty ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.dim, children: "Try:" }), _jsx(Text, { color: C.text, children: "  \u201Cexplain this file\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cwhat changed since my last commit?\u201D" }), _jsx(Text, { color: C.text, children: "  \u201Cadd error handling here\u201D" }), _jsx(Text, { children: " " }), _jsx(Text, { color: C.dim, children: "I can see the file you have open." })] })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { children: visible.map((line, i) => _jsx(Text, { color: line.leadColor ?? C.dim, children: `${line.lead ?? "  "}${i < visible.length - 1 ? "\n" : ""}` }, i)) }) }), _jsx(Box, { flexDirection: "column", width: inner - 2, flexShrink: 0, children: visible.map((line, i) => {
+                        const range = selectedIn(firstShown + i);
+                        if (!range)
+                            return render(line, firstShown + i, false);
+                        const t = lineText(line) || " ";
+                        return (_jsxs(Text, { wrap: "truncate-end", color: C.text, children: [t.slice(0, range[0]), _jsx(Text, { inverse: true, children: t.slice(range[0], range[1]) || " " }), t.slice(range[1])] }, firstShown + i));
+                    }) })] })) })), [lines, firstShown, visible.length, selection, inner, empty]);
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: messages }), _jsx(Scrollbar, { total: lines.length, top: firstShown, rows: rows, focused: focused })] }), _jsx(Box, { flexDirection: "column", children: footer.map((line, i) => render(line, `f${i}`)) }), showMenu ? (_jsx(Box, { flexDirection: "column", children: matches.slice(menuStart, menuStart + menuRows).map((c, i) => {
                     const selected = menuStart + i === menuRow;
                     return (_jsxs(Text, { wrap: "truncate-end", ...(selected ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { color: selected ? C.accent2 : C.dim, children: selected ? "▸" : " " }), _jsxs(Text, { color: selected ? C.accent : C.text, bold: selected, children: ["/", c.name] }), c.args && inner >= 56 ? _jsxs(Text, { color: C.dim, children: [" ", c.args] }) : null /* narrow: the description matters more */, _jsxs(Text, { color: C.dim, children: ["  ", c.description] })] }, c.name));
-                }) })) : (_jsx(Text, { wrap: "truncate-end", color: C.dim, children: contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " })), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner + 1)) }), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: submit, focus: focused && !(approval && !input), width: inner + 1, history: sent, arrowsTaken: showMenu, placeholder: busy ? (inner >= 44 ? "Enter queues · Alt+Enter sends now · Esc stops" : "Enter queues · Esc stops") : showMenu ? "↑↓ choose · Tab complete · Enter run" : inner >= 44 ? "Ask anything · / for commands · ↑ history" : "Ask anything · / commands" })] }));
+                }) })) : (_jsx(Text, { wrap: "truncate-end", color: C.dim, children: contextChip ? _jsxs(_Fragment, { children: [_jsx(Text, { color: C.cyan, children: "@" }), " ", contextChip] }) : " " })), _jsx(Text, { color: focused ? C.accent : C.dim, children: "─".repeat(Math.max(0, inner + 1)) }), _jsx(ChatInput, { value: input, onChange: (text) => focusedNow.current && setInput(text), onSubmit: submit, focus: focused && !(approval && !input), width: inner + 1, history: sent, arrowsTaken: showMenu, placeholder: busy ? (inner >= 44 ? "Enter queues · Alt+Enter sends now · Esc stops" : "Enter queues · Esc stops") : showMenu ? "↑↓ choose · Tab complete · Enter run" : inner >= 44 ? "Ask anything · / for commands · ↑ history" : "Ask anything · / commands" })] }));
 });

package/dist/src/ui/ChatInput.js

@@ -78,6 +78,11 @@ export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder
         if (arrowsTaken && (key.upArrow || key.downArrow))
             return;
         if (key.return) {
+            // Ctrl/Cmd/Shift+Enter add a line (in terminals that report them); so does \ then Enter, everywhere.
+            if (key.ctrl || key.super || key.shift)
+                return insert("\n");
+            if (value[pos - 1] === "\\")
+                return set(`${value.slice(0, pos - 1)}\n${value.slice(pos)}`, pos);
             setRecall(null);
             onSubmit(value, key.meta);
             return;

package/dist/src/ui/CodeView.js

@@ -181,7 +181,7 @@ export const CodeView = memo(function CodeView({ width, height, focused, filePat
             ["drag", "a pane's border to resize it"],
             ["s", "settings: models, keys, plugins"],
         ];
-        return (_jsx(Pane, { title: _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u2726" }), " Welcome"] }), width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [inner > 62 && artWork.split("\n").filter((l) => l.trim()).map((line, i) => (_jsx(Text, { children: gradient(line, i).map((g, j) => _jsx(Text, { color: g.color, children: g.ch }, j)) }, i))), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: C.text, children: "Hello, I am Nou! \uD83C\uDF1E  Your terminal coding companion." }), _jsx(Text, { color: C.dim, children: "Ask in the chat on the right. Files I read or edit open here as I work." }), _jsx(Text, { children: " " }), tips.map(([k, d]) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: C.accent, bold: true, children: k.padEnd(10) }), _jsx(Text, { color: C.dim, children: d })] }, k)))] }) }));
+        return (_jsx(Pane, { title: _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent2, children: "\u2726" }), " Welcome"] }), width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, flexShrink: 0, children: [inner > 62 && artWork.split("\n").filter((l) => l.trim()).map((line, i) => (_jsx(Text, { children: gradient(line, i).map((g, j) => _jsx(Text, { color: g.color, children: g.ch }, j)) }, i))), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: C.text, children: "Hello, I am Nou! \uD83C\uDF1E  Your terminal coding companion." }), _jsx(Text, { color: C.dim, children: "Ask in the chat on the right. Files I read or edit open here as I work." }), _jsx(Text, { children: " " }), tips.map(([k, d]) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: C.accent, bold: true, children: k.padEnd(10) }), _jsx(Text, { color: C.dim, children: d })] }, k)))] }) }));
     }
     const gutter = String(lines.length).length;
     const { icon, color } = fileIcon(filePath);

package/dist/src/ui/Editor.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import path from "path";
 import { Box, Text, useInput, usePaste } from "ink";
@@ -8,6 +8,7 @@ import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { Pane } from "./Pane.js";
 import { Scrollbar, topFor } from "./scroll.js";
 import { copyToClipboard, readClipboard } from "./clipboard.js";
+import { guideProgress } from "../guide/index.js";
 const TAB = "  ";
 const expand = (s) => s.replace(/\t/g, TAB);
 /** Screen column of buffer column `col` on `line` (tabs take two cells). */
@@ -87,13 +88,24 @@ const LINE_COMMENTS = {
     ".toml": "#", ".r": "#", ".pl": "#", ".ex": "#", ".exs": "#", ".dockerfile": "#", ".sql": "--", ".lua": "--", ".hs": "--",
 };
 const commentFor = (file) => LINE_COMMENTS[path.extname(file).toLowerCase()] ?? (path.basename(file).toLowerCase() === "dockerfile" ? "#" : null);
+/** A line without the cursor or a selection: kept as is while you type on other lines. */
+const PlainRow = memo(function PlainRow({ num, numColor, text }) {
+    return _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: numColor, children: num }), text || " "] });
+});
 /** A text editor: arrows and the mouse to move, Shift to select, Ctrl+C/X/V clipboard, Ctrl+S save, Ctrl+Z undo, Esc leave. */
-export const Editor = memo(function Editor({ width, height, focused, filePath, initial, baseline, startLine, startCol, problems, autoSave, syntaxVersion, wheel, scrollTo, mouse, onSave, onExit, onState, onHover, onDefinition, tabs }) {
+export const Editor = memo(function Editor({ width, height, focused, filePath, initial, baseline, startLine, startCol, problems, autoSave, syntaxVersion, wheel, scrollTo, mouse, onSave, onExit, onState, onHover, onDefinition, tabs, guide, onGuideDone }) {
     const eol = useMemo(() => (baseline.includes("\r\n") ? "\r\n" : "\n"), [baseline]);
     const indentUnit = useMemo(() => (/^\t/m.test(initial) ? "\t" : "  "), [initial]);
     const comment = useMemo(() => commentFor(filePath), [filePath]);
     const [buf, setBuf] = useState(() => {
         const lines = initial.replace(/\r\n/g, "\n").split("\n");
+        if (guide) {
+            // A fresh line for the guided code, indented like its first line.
+            const row = Math.max(0, Math.min(lines.length, guide.row));
+            const indent = guide.code.match(/^[ \t]*/)[0];
+            lines.splice(row, 0, indent);
+            return { lines, row, col: indent.length, anchor: null };
+        }
         const row = Math.max(0, Math.min(lines.length - 1, (startLine ?? 1) - 1));
         const col = startCol ? Math.min(lines[row].length, startCol - 1) : lines[row].match(/^\s*/)[0].length;
         return { lines, row, col, anchor: null };
@@ -517,6 +529,12 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
             }
             return insert(`\n${indent}${opens ? indentUnit : ""}`);
         }
+        if (key.tab && !key.shift && !hasSelection && guide && ghost) {
+            // Guided: Tab types the rest of the line for you (and the next line's indentation).
+            const end = ghost.indexOf("\n");
+            const chunk = end < 0 ? ghost : ghost.slice(0, end + 1) + ghost.slice(end + 1).match(/^[ \t]*/)[0];
+            return insert(chunk);
+        }
         if (key.tab) {
             // With a selection, or Shift+Tab: indent or outdent whole lines.
             if (key.shift)
@@ -589,16 +607,32 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
         return map;
     }, [problems]);
     const sel = selection(buf);
+    // Guided typing: how much of the step's code is typed (from its line's start to the cursor).
+    const guideRow = guide ? Math.max(0, Math.min(buf.lines.length - 1, guide.row)) : -1;
+    const typed = guide && (buf.row > guideRow || (buf.row === guideRow)) ? [...buf.lines.slice(guideRow, buf.row), buf.lines[buf.row].slice(0, buf.col)].join("\n") : null;
+    const progress = guide && typed !== null ? guideProgress(typed, guide.code) : -1;
+    const ghost = guide && progress >= 0 ? guide.code.slice(progress) : "";
+    const guideDone = useRef(false);
+    useEffect(() => {
+        if (guide && progress === guide.code.length && !guideDone.current) {
+            guideDone.current = true;
+            onGuideDone?.();
+        }
+    }, [progress]);
     const cursorProblem = byLine.get(buf.row + 1)?.[0];
     const selectedCount = sel ? selectedText(buf).length : 0;
-    const status = confirmExit
+    const guideStatus = !guide ? null
+        : progress < 0 ? "Not quite: that doesn't match the step's code. Backspace and try again (the dim text shows what goes here)."
+            : ghost ? `Type the dim text${ghost.includes("\n") ? ` (${ghost.split("\n").length} lines to go)` : ""} · Tab fills in the rest of the line · Esc stop`
+                : "✓ Step done";
+    const status = guideStatus && !confirmExit && !prompt ? guideStatus : confirmExit
         ? "Unsaved changes! Ctrl+S save & close · Esc discard · any key keep editing"
         : prompt
             ? prompt.kind === "find" ? `Find: ${prompt.text}▏  Enter/↓ next · Shift+Enter/↑ previous · Esc close` : `Go to line: ${prompt.text}▏  Enter go · Esc cancel`
             : flash ?? (cursorProblem
                 ? `${SEVERITY_STYLE[cursorProblem.severity].icon} ${cursorProblem.message} (${cursorProblem.source})`
                 : `Ln ${buf.row + 1}, Col ${buf.col + 1}${sel ? `  (${selectedCount} selected · Ctrl+C copy · Ctrl+X cut)` : ""}${dirty ? "  ● modified" : ""}   Ctrl+F find · Ctrl+/ comment · Esc done`);
-    const statusColor = confirmExit ? C.red : prompt ? C.accent : flash ? C.green : cursorProblem ? SEVERITY_STYLE[cursorProblem.severity].color : C.dim;
+    const statusColor = guideStatus && !confirmExit && !prompt ? (progress < 0 ? C.red : C.accent2) : confirmExit ? C.red : prompt ? C.accent : flash ? C.green : cursorProblem ? SEVERITY_STYLE[cursorProblem.severity].color : C.dim;
     const hoverLines = hover ? hover.split("\n").filter((l) => l.trim()).slice(0, 6) : [];
     const cursorVisible = buf.row >= v.top && buf.row < v.top + rows;
     return (_jsxs(Pane, { title: _jsxs(_Fragment, { children: [tabs ?? _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, dirty ? _jsx(Text, { color: C.yellow, children: " \u25CF" }) : ""] }), "  ", _jsx(Text, { backgroundColor: C.green, color: "black", children: " \u270E EDITING " }), !cursorVisible ? _jsxs(Text, { color: C.dim, children: ["  cursor on line ", buf.row + 1, " \u00B7 \u2191\u2193 to go back"] }) : null] }), width: width, height: height, focused: focused, accent: C.green, children: [_jsxs(Box, { flexDirection: "row", height: rows, children: [_jsx(Box, { flexDirection: "column", width: width - 3, flexShrink: 0, children: visible.map((line, i) => {
@@ -609,7 +643,7 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
                             const num = (_jsxs(Text, { color: mark?.color ?? (isCursorLine ? C.green : C.dim), children: [String(n + 1).padStart(gutter - 2), mark ? ` ${mark.icon}` : isCursorLine ? " ▸" : "  "] }));
                             const inSelection = sel && n >= sel.start.row && n <= sel.end.row;
                             if (!isCursorLine && !inSelection) {
-                                return _jsxs(Text, { wrap: "truncate-end", children: [num, colored[i] || " "] }, n);
+                                return _jsx(PlainRow, { num: `${String(n + 1).padStart(gutter - 2)}${mark ? ` ${mark.icon}` : "  "}`, numColor: mark?.color ?? C.dim, text: colored[i] ?? "" }, n);
                             }
                             // Lines with the cursor or a selection show plain text, so both can be drawn exactly.
                             const shown = expand(line).slice(v.left, v.left + textWidth);
@@ -626,8 +660,11 @@ export const Editor = memo(function Editor({ width, height, focused, filePath, i
                                 else
                                     cells.push(cell);
                             }
+                            // The code still to type, dim, from the cursor to the end of its line (only past the line's text).
+                            const ghostLine = isCursorLine && ghost && buf.col >= line.length ? ghost.split("\n")[0] : "";
+                            const ghostMore = isCursorLine && ghost && buf.col >= line.length ? ghost.split("\n").length - 1 : 0;
                             return (_jsxs(Text, { wrap: "truncate-end", children: [num, cells.map((c, j) => c.cursor
-                                        ? _jsx(Text, { inverse: true, color: C.green, children: c.text }, j)
-                                        : _jsx(Text, { color: C.text, ...(c.selected ? { backgroundColor: "#364a82" } : {}), children: c.text }, j))] }, n));
+                                        ? _jsx(Text, { inverse: true, color: C.green, children: ghostLine ? ghostLine[0] : c.text }, j)
+                                        : _jsx(Text, { color: C.text, ...(c.selected ? { backgroundColor: "#364a82" } : {}), children: c.text }, j)), ghostLine.length > 1 ? _jsx(Text, { color: C.dim, italic: true, children: expand(ghostLine.slice(1)) }) : null, ghostMore ? _jsxs(Text, { color: C.accent2, children: [ghostLine ? "  " : "", "\u23CE", ghostMore > 1 ? ` +${ghostMore - 1} line${ghostMore > 2 ? "s" : ""}` : ""] }) : null] }, n));
                         }) }), _jsx(Scrollbar, { total: buf.lines.length, top: v.top, rows: rows, focused: focused })] }), hoverLines.length > 0 && (_jsx(Box, { position: "absolute", top: Math.max(1, rows - hoverLines.length - 1), left: gutter + 1, flexDirection: "column", borderStyle: "round", borderColor: C.accent2, width: Math.min(width - gutter - 3, 2 + Math.max(...hoverLines.map((l) => l.length))), children: hoverLines.map((l, i) => _jsx(Text, { color: C.text, wrap: "truncate-end", children: l.padEnd(width) }, i)) })), _jsx(Text, { wrap: "truncate-end", color: statusColor, children: ` ${status}` })] }));
 });

package/dist/src/ui/FileTree.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { readdirSync } from "fs";
 import path from "path";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useAnimation, useInput } from "ink";
 import { IGNORED } from "../commands/index.js";
-import { C, GIT_COLORS, fileIcon } from "./theme.js";
+import { C, GIT_COLORS, fileIcon, gradient, ANIMATION_MS } from "./theme.js";
 import { Pane } from "./Pane.js";
 import { Scrollbar, topFor } from "./scroll.js";
 function listDir(dir) {
@@ -31,7 +31,7 @@ function flatten(expanded) {
     walk(".", 0);
     return nodes;
 }
-export const FileTree = memo(function FileTree({ width, height, focused, openFile, reveal, version, changed, git, problemCounts, wheel, scrollTo, click, onOpen, onHover }) {
+export const FileTree = memo(function FileTree({ width, height, focused, openFile, reveal, version, changed, working, git, problemCounts, wheel, scrollTo, click, onOpen, onHover }) {
     const [expanded, setExpanded] = useState(() => new Set(["src"]));
     const [cursor, setCursor] = useState(0);
     // The first row shown. The wheel moves it on its own; the keyboard moves the cursor and the view follows.
@@ -167,6 +167,7 @@ export const FileTree = memo(function FileTree({ width, height, focused, openFil
         else
             onOpen(node.path);
     }, [click?.nonce]);
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!working?.size });
     const inner = width - 3; // minus the borders and the scrollbar
     const title = changesOnly
         ? _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.yellow, children: "\u00B1" }), " Changes ", _jsxs(Text, { color: C.dim, children: ["(", nodes.length, ")  c: all files"] })] })
@@ -187,6 +188,6 @@ export const FileTree = memo(function FileTree({ width, height, focused, openFil
                             const room = Math.max(1, inner - marker.length - 1);
                             const shown = label.length > room ? `${label.slice(0, room - 1)}…` : label.padEnd(room);
                             const iconAt = shown.indexOf(icon);
-                            return (_jsxs(Text, { wrap: "truncate-end", ...(selected && focused ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, children: shown.slice(0, iconAt) }), _jsx(Text, { color: color, children: shown.slice(iconAt, iconAt + icon.length) }), _jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, inverse: selected && focused, children: shown.slice(iconAt + icon.length) }), _jsxs(Text, { color: markerColor, children: [" ", marker] })] }, node.path));
+                            return (_jsxs(Text, { wrap: "truncate-end", ...(selected && focused ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, children: shown.slice(0, iconAt) }), _jsx(Text, { color: color, children: shown.slice(iconAt, iconAt + icon.length) }), working?.has(node.path) ? (_jsx(Text, { bold: true, inverse: selected && focused, children: gradient(shown.slice(iconAt + icon.length), frame).map((g, j) => _jsx(Text, { color: g.color, children: g.ch }, j)) })) : (_jsx(Text, { ...(nameColor ? { color: nameColor } : {}), bold: isOpen, inverse: selected && focused, children: shown.slice(iconAt + icon.length) })), _jsxs(Text, { color: markerColor, children: [" ", marker] })] }, node.path));
                         })] }), _jsx(Scrollbar, { total: nodes.length, top: start, rows: rows, focused: focused })] }) }));
 });

package/dist/src/ui/GamePanel.js

@@ -3,9 +3,8 @@ import { memo, useEffect, useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { GAMES, gameById } from "../games/index.js";
 import { C } from "./theme.js";
-/** The panel's size on screen, borders included. */
-export const GAME_PANEL = { width: 40, height: 19 };
-const FIELD = { width: GAME_PANEL.width - 4, height: GAME_PANEL.height - 6 };
+/** The panel's tallest height (borders included) when docked under a pane, and the least it needs. */
+export const GAME_PANEL = { height: 19, minWidth: 26, minHeight: 10 };
 const KEYS = { w: "up", s: "down", a: "left", d: "right", k: "up", j: "down", h: "left", l: "right" };
 /** A row of the playfield, colored per character in runs so it stays a handful of Text nodes. */
 function Row({ line, colors }) {
@@ -21,10 +20,11 @@ function Row({ line, colors }) {
     return _jsx(Text, { children: runs.map((r, i) => _jsx(Text, { ...(r.color ? { color: r.color } : {}), children: r.text }, i)) });
 }
 /**
- * A floating panel for little games. The app places it (it can be dragged by its title bar) and gives it
+ * A panel for little games, docked under a pane (drag its title to another pane; × closes it). The app gives it
  * the keyboard while it's focused; a game only runs while it has the keyboard, so it pauses as you leave.
  */
-export const GamePanel = memo(function GamePanel({ x, y, focused, installed, onLeave, onOpenSettings }) {
+export const GamePanel = memo(function GamePanel({ width, height, focused, moving, installed, onLeave, onOpenSettings }) {
+    const FIELD = { width: Math.max(10, width - 4), height: Math.max(3, height - 6) };
     const games = installed.map(gameById).filter((g) => !!g);
     const [row, setRow] = useState(0);
     const [playing, setPlaying] = useState(null);
@@ -42,6 +42,11 @@ export const GamePanel = memo(function GamePanel({ x, y, focused, installed, onL
         }, playing.game.tickMs);
         return () => clearInterval(timer);
     }, [running, playing?.game]);
+    // A different size (moved to another pane, or the window changed) starts the game over at that size.
+    useEffect(() => {
+        if (playing)
+            setPlaying({ game: playing.game, state: playing.game.create(FIELD.width, FIELD.height) });
+    }, [FIELD.width, FIELD.height]);
     const start = (game) => {
         inputs.current = [];
         setPaused(false);
@@ -74,12 +79,14 @@ export const GamePanel = memo(function GamePanel({ x, y, focused, installed, onL
         if (pressed)
             inputs.current.push(pressed);
     }, { isActive: focused });
-    const color = focused ? C.accent2 : C.dim;
-    const inner = GAME_PANEL.width - 2;
-    const pad = (s) => (s.length >= inner ? s.slice(0, inner) : s + " ".repeat(inner - s.length));
-    const title = playing ? ` ✦ ${playing.game.title}` : " ✦ Games";
-    const hint = !focused ? "click to play · drag the title to move" : playing ? (view?.over ? "Enter again · q games · Esc leave" : `${paused ? "PAUSED · " : ""}Space pause · q games · Esc leave`) : "↑↓ choose · Enter play · Esc leave";
-    return (_jsxs(Box, { position: "absolute", top: y, left: x, width: GAME_PANEL.width, height: GAME_PANEL.height, flexDirection: "column", borderStyle: "round", borderColor: color, children: [_jsx(Text, { backgroundColor: C.panel, color: color, bold: true, wrap: "truncate-end", children: pad(`${title}  ⠿ drag`) }), playing && view ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: FIELD.height + 2, children: [view.lines.map((line, i) => {
+    const color = focused || moving ? C.accent2 : C.dim;
+    const inner = width - 2;
+    const title = moving ? " ✦ Drop it on a pane: files, code or chat" : `${playing ? ` ✦ ${playing.game.title}` : " ✦ Games"}  ⠿ drag to move · top edge resizes`;
+    // The title row: the name and the drag handle, and × (close) at the right.
+    const head = title.length > inner - 3 ? `${title.slice(0, inner - 4)}…` : title.padEnd(inner - 3);
+    const hint = !focused ? "click to play" : playing ? (view?.over ? "Enter again · q games · Esc leave" : `${paused ? "PAUSED · " : ""}Space pause · q games · Esc leave`) : "↑↓ choose · Enter play · Esc leave";
+    const small = width < GAME_PANEL.minWidth || height < GAME_PANEL.minHeight;
+    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", borderStyle: "round", borderColor: color, overflow: "hidden", children: [_jsxs(Text, { backgroundColor: C.panel, wrap: "truncate-end", children: [_jsx(Text, { color: color, bold: true, children: head }), _jsx(Text, { color: C.text, bold: true, children: " \u00D7 " })] }), small ? (_jsx(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: _jsx(Text, { color: C.dim, wrap: "wrap", children: "Too small here: drag me to a bigger pane, or make this one wider." }) })) : null, small ? null : playing && view ? (_jsxs(Box, { flexDirection: "column", paddingX: 1, height: FIELD.height + 2, children: [view.lines.map((line, i) => {
                         // The end-of-game message goes over the middle of the field.
                         if (view.over && i === Math.floor(FIELD.height / 2)) {
                             const msg = ` ${view.over} `;

package/dist/src/ui/Header.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { memo } from "react";
 import path from "path";
 import { Box, Text, useAnimation } from "ink";
-import { C, SPINNER, gradient } from "./theme.js";
+import { C, SPINNER, gradient, ANIMATION_MS } from "./theme.js";
 import { currentVersion } from "../update/index.js";
 const VERSION = `v${currentVersion()}`;
 export const Header = memo(function Header({ width, branch, changes, model, local, busy, update }) {
-    const { frame } = useAnimation({ interval: 120, isActive: !!busy });
+    const { frame } = useAnimation({ interval: ANIMATION_MS, isActive: !!busy });
     const project = path.basename(process.cwd());
     return (_jsxs(Box, { width: width, justifyContent: "space-between", children: [_jsx(Box, { flexShrink: 1, flexGrow: 1, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate-end", children: [" ", gradient("◆ NOU", busy ? frame : 0).map((g, i) => _jsx(Text, { bold: true, color: g.color, children: g.ch }, i)), _jsxs(Text, { color: C.dim, children: [" ", VERSION] }), _jsx(Text, { color: C.dim, children: "  \u2502  " }), _jsx(Text, { color: C.text, children: project }), branch && (_jsxs(_Fragment, { children: [_jsx(Text, { color: C.dim, children: "  \u2502  " }), _jsxs(Text, { color: C.accent2, children: ["\u2387 ", branch] }), changes > 0 && _jsxs(Text, { color: C.yellow, children: [" \u00B1", changes] })] })), busy && _jsxs(Text, { color: C.accent2, children: ["  ", SPINNER[frame % SPINNER.length], " ", busy] })] }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { wrap: "truncate-end", children: [update && width >= 110 && _jsxs(Text, { color: C.green, bold: true, children: ["\u2B06 v", update, " available \u00B7 run `nou update`  "] }), _jsx(Text, { backgroundColor: local ? C.green : C.accent2, color: "black", bold: true, children: ` ${local ? "⌂ LOCAL" : "☁ CLOUD"} ` }), _jsx(Text, { backgroundColor: C.panel, color: C.text, children: ` ${model} ` }), " "] }) })] }));
 });

package/dist/src/ui/ProblemsView.js

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

package/dist/src/ui/Settings.js

@@ -11,7 +11,7 @@ import { PLUGIN_DIRS, isEnabled, trustState } from "../plugins/index.js";
 import { currentVersion } from "../update/index.js";
 import { describe, providers, rejectedKey } from "../providers/index.js";
 import { ENGINES, isInstalled } from "../engines/index.js";
-import { C, SPINNER } from "./theme.js";
+import { C, SPINNER, ANIMATION_MS } from "./theme.js";
 /** A few lines of code to show what a code theme looks like. */
 const THEME_PREVIEW = `// Greets someone, politely
 export function greet(name: string, times = 2): string {
@@ -40,7 +40,7 @@ export function Settings({ width, height, settings, choice, plugins, connectTo,
     const [models, setModels] = useState({});
     const [connecting, setConnecting] = useState(connectTo?.connect ? { step: 0, values: {} } : null);
     const [field, setField] = useState(() => (connectTo?.connect ? initialValue(connectTo.connect[0]) : ""));
-    const { frame } = useAnimation({ interval: 80 });
+    const { frame } = useAnimation({ interval: ANIMATION_MS });
     const provider = providers[row] ?? providers[0];
     const listed = models[provider.id];
     // Load the model list for the highlighted provider.

package/dist/src/ui/Tabs.js

@@ -16,8 +16,8 @@ function labels(tabs) {
  * are left out at the ends, marked with ‹ ›.
  */
 export function layoutTabs(tabs, active, width) {
-    const all = labels(tabs).map((label, i) => ({ file: tabs[i], label }));
-    const size = (t) => t.label.length + 4 + (t.file === active ? 2 : 0) + 1; // " ◆ name × " and "│"
+    const all = labels(tabs).map((label, i) => ({ file: tabs[i], label: label.length > 24 ? `${label.slice(0, 23)}…` : label }));
+    const size = (t) => t.label.length + 6 + 1; // " ◆ name × " and "│"
     const at = Math.max(0, all.findIndex((t) => t.file === active));
     let from = at;
     let to = at + 1;
@@ -39,10 +39,11 @@ export function layoutTabs(tabs, active, width) {
     let x = from > 0 ? 1 : 0;
     for (const t of shown) {
         const w = size(t) - 1;
-        zones.push({ file: t.file, from: x, to: x + w, close: t.file === active ? x + w - 2 : null });
+        zones.push({ file: t.file, from: x, to: x + w, close: x + w - 2 });
         x += w + 1;
     }
-    return { shown, before: from > 0, after: to < all.length, zones };
+    // ‹ and › (tabs that don't fit) are clickable too: they go to the previous / next tab.
+    return { shown, before: from > 0, after: to < all.length, zones, prev: from > 0 ? 0 : null, next: to < all.length ? x : null };
 }
 /** The open files as tabs, for a pane's title row: the active one highlighted, with × to close it. */
 export function Tabs({ tabs, active, width, dirty }) {
@@ -50,6 +51,6 @@ export function Tabs({ tabs, active, width, dirty }) {
     return (_jsxs(_Fragment, { children: [before ? _jsx(Text, { color: C.dim, children: "\u2039" }) : null, shown.map((t) => {
                 const on = t.file === active;
                 const { icon, color } = fileIcon(t.file);
-                return (_jsxs(Fragment, { children: [_jsxs(Text, { ...(on ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { children: " " }), _jsx(Text, { color: color, children: icon }), _jsxs(Text, { color: on ? C.text : C.dim, bold: on, children: [" ", t.label] }), on ? _jsxs(Text, { color: dirty ? C.yellow : C.dim, children: [" ", dirty ? "●" : "×"] }) : null, _jsx(Text, { children: " " })] }), _jsx(Text, { color: C.dim, children: "\u2502" })] }, t.file));
+                return (_jsxs(Fragment, { children: [_jsxs(Text, { ...(on ? { backgroundColor: C.panel } : {}), children: [_jsx(Text, { children: " " }), _jsx(Text, { color: color, children: icon }), _jsxs(Text, { color: on ? C.text : C.dim, bold: on, children: [" ", t.label] }), _jsxs(Text, { color: on && dirty ? C.yellow : on ? C.text : C.dim, children: [" ", on && dirty ? "●" : "×"] }), _jsx(Text, { children: " " })] }), _jsx(Text, { color: C.dim, children: "\u2502" })] }, t.file));
             }), after ? _jsx(Text, { color: C.dim, children: "\u203A" }) : null] }));
 }