nou-cli 0.5.2 → 0.5.3

package/dist/src/ui/Chat.js

@@ -3,8 +3,9 @@ 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, renderMarkdown, wrap } from "./text.js";
 import { ChatInput, inputHeight } from "./ChatInput.js";
+import { copyToClipboard } from "./clipboard.js";
 import { C, SPINNER } from "./theme.js";
 import { Pane } from "./Pane.js";
 import { matchCommands } from "./commands.js";
@@ -70,7 +71,8 @@ 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 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, queued = [] }) {
     const [input, setInput] = useState("");
     useEffect(() => {
         if (prefill)
@@ -80,7 +82,7 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
     const { frame } = useAnimation({ interval: 80, 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 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);
@@ -166,6 +168,56 @@ export const Chat = memo(function Chat({ width, height, focused, entries, stream
         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))
@@ -210,12 +262,18 @@ 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" }), " Chat", 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) => {
+    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) => {
+                                        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));
+                                    }) })] })) }), _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" })] }));

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/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 } 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: 120, 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}  ⠿ drag to move` : " ✦ Games  ⠿ drag to move";
+    // 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/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] }));
 }

package/dist/src/ui/Terminal.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { C } from "./theme.js";
+const COLORS = { out: C.text, command: C.accent, info: C.dim, error: C.red };
+/**
+ * The terminal panel, under the code like VS Code's: type a command and Enter runs it. While one runs,
+ * what you type goes to it; Ctrl+C stops it. ↑↓ go through what you ran, Ctrl+L clears, Esc leaves.
+ */
+export const Terminal = memo(function Terminal({ shell, version, width, height, focused, wheel, onLeave }) {
+    const [input, setInput] = useState("");
+    const [history, setHistory] = useState([]);
+    const [back, setBack] = useState(-1);
+    const [scroll, setScroll] = useState(0);
+    const inner = width - 2;
+    const rows = Math.max(1, height - 3); // borders and the title
+    const lines = shell.view();
+    // Fit long lines by wrapping them, newest at the bottom.
+    const wrapped = [];
+    for (const line of lines.slice(-rows * 4)) {
+        const text = line.text || " ";
+        for (let i = 0; i < text.length; i += inner)
+            wrapped.push({ text: text.slice(i, i + inner), color: COLORS[line.kind] });
+    }
+    const promptText = shell.running ? "› " : shell.prompt();
+    const shownPrompt = `${promptText}${input}`;
+    const promptRows = Math.max(1, Math.ceil((shownPrompt.length + 1) / inner));
+    const outRows = Math.max(0, rows - promptRows);
+    const maxScroll = Math.max(0, wrapped.length - outRows);
+    const at = Math.min(scroll, maxScroll);
+    const shown = wrapped.slice(Math.max(0, wrapped.length - outRows - at), wrapped.length - at);
+    useEffect(() => setScroll(0), [version]); // new output: back to the bottom
+    useEffect(() => {
+        if (wheel?.lines)
+            setScroll((s) => Math.max(0, Math.min(maxScroll, s - wheel.lines)));
+    }, [wheel?.nonce]);
+    useInput((typed, key) => {
+        if (key.escape)
+            return onLeave();
+        if (key.ctrl && typed === "c") {
+            if (shell.running)
+                shell.interrupt();
+            else
+                setInput("");
+            return;
+        }
+        if (key.ctrl && typed === "l")
+            return shell.clear();
+        if (key.return) {
+            if (!shell.running && input.trim())
+                setHistory((h) => [...h.filter((c) => c !== input.trim()), input.trim()].slice(-100));
+            if (shell.running)
+                shell.input(input);
+            else
+                shell.run(input);
+            setInput("");
+            setBack(-1);
+            return;
+        }
+        if (key.upArrow || key.downArrow) {
+            if (!history.length)
+                return;
+            const next = key.upArrow ? Math.min(history.length - 1, back + 1) : back - 1;
+            setBack(next);
+            setInput(next < 0 ? "" : history[history.length - 1 - next]);
+            return;
+        }
+        if (key.pageUp)
+            return setScroll((s) => Math.min(maxScroll, s + outRows - 1));
+        if (key.pageDown)
+            return setScroll((s) => Math.max(0, s - outRows + 1));
+        if (key.backspace || key.delete)
+            return setInput((v) => v.slice(0, -1));
+        if (key.ctrl && typed === "u")
+            return setInput("");
+        if (key.ctrl || key.meta || key.tab)
+            return;
+        if (typed)
+            setInput((v) => v + typed.replace(/[\r\n]+/g, " "));
+    }, { isActive: focused });
+    const color = focused ? C.accent : C.dim;
+    const title = ` ▸ Terminal${shell.running ? "  ● running · Ctrl+C stops" : ""}${at ? `  ↑ ${at} lines` : ""}`;
+    return (_jsxs(Box, { width: width, height: height, flexDirection: "column", borderStyle: focused ? "round" : "single", borderColor: color, overflow: "hidden", children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: color, bold: true, children: title.slice(0, inner - 3).padEnd(inner - 3) }), _jsx(Text, { color: C.text, bold: true, children: " \u00D7 " })] }), _jsx(Box, { flexDirection: "column", height: outRows, flexShrink: 0, children: shown.map((l, i) => _jsx(Text, { color: l.color, wrap: "truncate-end", children: l.text }, i)) }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: shell.running ? C.yellow : C.green, children: promptText }), _jsx(Text, { color: C.text, children: input }), focused ? _jsx(Text, { inverse: true, children: " " }) : null] })] }));
+});

package/dist/src/ui/commands.js

@@ -6,6 +6,7 @@ export const SLASH_COMMANDS = [
     { name: "settings", description: "models, engine, preferences and plugins" },
     { name: "auto", args: "[ask|auto-edit|auto]", description: "how much Nou does without asking" },
     { name: "engine", args: "[name]", description: "which agent answers: nou, claude-code, codex or pi" },
+    { name: "cancel", description: "take back your last message (stops Nou; edit it and resend)" },
     { name: "undo", description: "undo Nou's last change" },
     { name: "rewind", description: "undo everything from Nou's last turn" },
     { name: "diff", args: "[file|n]", description: "everything changed this session (or session n)" },
@@ -15,6 +16,8 @@ export const SLASH_COMMANDS = [
     { name: "copy", args: "[code|file]", description: "copy the last reply, its last code block, or the open file" },
     { name: "compact", description: "summarize the conversation to free up context" },
     { name: "clear", description: "start a fresh conversation" },
+    { name: "terminal", description: "a terminal under the code, like VS Code's (or press `)" },
+    { name: "resume", args: "[number|last]", description: "pick up an earlier conversation in this folder (any engine)" },
     { name: "pull", args: "<model>", description: "download an Ollama model" },
     { name: "plugins", args: "[add|new <name>]", description: "your plugins and the starter ones" },
     { name: "mcp", args: "[add|remove|import]", description: "MCP servers: tools from other programs (/mcp add browser for a browser)" },

package/dist/src/ui/render-options.js

@@ -8,4 +8,8 @@ export const RENDER_OPTIONS = {
     incrementalRendering: true,
     // Up to 60 frames a second, so scrolling and typing keep up with the keyboard and mouse.
     maxFps: 60,
+    // Terminals that speak the kitty keyboard protocol (kitty, Ghostty, WezTerm, iTerm2, foot...) then tell
+    // Enter from Ctrl+Enter, Cmd+Enter and Shift+Enter, so those can add a line in the chat. Others just
+    // don't answer the query and keys work as before.
+    kittyKeyboard: { mode: "auto", flags: ["disambiguateEscapeCodes"] },
 };

package/dist/src/ui/text.js

@@ -369,3 +369,19 @@ export function markAnsi(line, from, to, open = "\x1b[7m", close = "\x1b[27m") {
     }
     return out;
 }
+/**
+ * A reply still streaming, with its open markdown closed for now (a code block, **bold**, `code`), so it
+ * renders the way it will once finished instead of reflowing when the closing marker arrives.
+ */
+export function closeOpenMarkdown(text) {
+    const fences = text.match(/^\s*(`{3,}|~{3,})/gm)?.length ?? 0;
+    if (fences % 2)
+        return `${text}\n\`\`\``;
+    const last = text.slice(text.lastIndexOf("\n") + 1);
+    let out = text;
+    if ((last.match(/`/g)?.length ?? 0) % 2)
+        out += "`";
+    else if ((last.match(/\*\*/g)?.length ?? 0) % 2)
+        out += "**";
+    return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nou-cli",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Nou: an IDE-style AI coding assistant for your terminal. Local (Ollama, LM Studio) and cloud (Claude, OpenAI, Gemini...) models, live diffs, git-aware, built-in editor.",
   "type": "module",
   "bin": {