nou-cli 0.4.0 → 0.5.1

package/dist/src/ui/FileTree.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { readdirSync } from "fs";
 import path from "path";
 import { Box, Text, useInput } from "ink";
 import { IGNORED } from "../commands/index.js";
 import { C, GIT_COLORS, fileIcon } from "./theme.js";
 import { Pane } from "./Pane.js";
+import { Scrollbar, topFor } from "./scroll.js";
 function listDir(dir) {
     try {
         return readdirSync(path.resolve(process.cwd(), dir), { withFileTypes: true })
@@ -30,16 +31,28 @@ function flatten(expanded) {
     walk(".", 0);
     return nodes;
 }
-export function FileTree({ width, height, focused, openFile, reveal, version, changed, git, problemCounts, wheel, click, onOpen, onHover }) {
+export const FileTree = memo(function FileTree({ width, height, focused, openFile, reveal, version, changed, 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.
+    const [top, setTop] = useState(0);
     const [changesOnly, setChangesOnly] = useState(false);
-    const nodes = useMemo(() => {
-        if (!changesOnly)
-            return flatten(expanded);
-        return [...new Set([...git.keys(), ...changed])].sort().map((p) => ({ path: p, name: p, depth: 0, isDir: false }));
-    }, [expanded, version, changesOnly, git, changed]);
+    // Reading folders hits the disk, so only redo it when something that changes the list changes.
+    const all = useMemo(() => (changesOnly ? null : flatten(expanded)), [expanded, version, changesOnly]);
+    const nodes = useMemo(() => all ?? [...new Set([...git.keys(), ...changed])].sort().map((p) => ({ path: p, name: p, depth: 0, isDir: false })), [all, changesOnly ? git : null, changesOnly ? changed : null]);
     const rows = Math.max(1, height - 3);
+    const maxTop = Math.max(0, nodes.length - rows);
+    // Keep the cursor in view when it moves (keyboard, reveal, click), not when the wheel scrolls.
+    const follow = useRef(true);
+    useEffect(() => {
+        if (!follow.current)
+            return;
+        setTop((t) => (cursor < t ? Math.max(0, cursor - 2) : cursor >= t + rows ? Math.min(maxTop, cursor - rows + 3) : Math.min(t, maxTop)));
+    }, [cursor, rows, maxTop]);
+    const moveCursor = (fn) => {
+        follow.current = true;
+        setCursor(fn);
+    };
     // Folders that contain git changes get a dot.
     const dirtyDirs = useMemo(() => {
         const dirs = new Set();
@@ -71,7 +84,7 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
         const index = nodes.findIndex((n) => n.path === pendingReveal.current);
         if (index < 0)
             return;
-        setCursor(index);
+        moveCursor(() => index);
         pendingReveal.current = null;
     }, [nodes]);
     useEffect(() => {
@@ -92,16 +105,20 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
         const node = nodes[cursor];
         if (input === "c") {
             setChangesOnly((v) => !v);
-            setCursor(0);
+            moveCursor(() => 0);
         }
         else if (key.upArrow || input === "k")
-            setCursor((c) => Math.max(0, c - 1));
+            moveCursor((c) => Math.max(0, c - 1));
         else if (key.downArrow || input === "j")
-            setCursor((c) => Math.min(nodes.length - 1, c + 1));
+            moveCursor((c) => Math.min(nodes.length - 1, c + 1));
         else if (key.pageUp)
-            setCursor((c) => Math.max(0, c - rows));
+            moveCursor((c) => Math.max(0, c - rows));
         else if (key.pageDown)
-            setCursor((c) => Math.min(nodes.length - 1, c + rows));
+            moveCursor((c) => Math.min(nodes.length - 1, c + rows));
+        else if (key.home || input === "g")
+            moveCursor(() => 0);
+        else if (key.end || input === "G")
+            moveCursor(() => Math.max(0, nodes.length - 1));
         else if (!node)
             return;
         else if (key.return || key.rightArrow || input === "l") {
@@ -117,16 +134,25 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
                 const parent = node.path.split("/").slice(0, -1).join("/");
                 const index = nodes.findIndex((n) => n.path === parent);
                 if (index >= 0)
-                    setCursor(index);
+                    moveCursor(() => index);
             }
         }
     }, { isActive: focused });
-    const start = Math.max(0, Math.min(cursor - Math.floor(rows / 2), nodes.length - rows));
+    const start = Math.min(top, maxTop);
     const visible = nodes.slice(start, start + rows);
+    // The wheel scrolls the list; the selection stays where it is.
     useEffect(() => {
-        if (wheel)
-            setCursor((c) => Math.max(0, Math.min(nodes.length - 1, c + wheel.dir * 3)));
+        if (!wheel?.lines)
+            return;
+        follow.current = false;
+        setTop((t) => Math.max(0, Math.min(maxTop, Math.min(t, maxTop) + wheel.lines)));
     }, [wheel?.nonce]);
+    useEffect(() => {
+        if (!scrollTo)
+            return;
+        follow.current = false;
+        setTop(topFor(scrollTo.fraction, nodes.length, rows));
+    }, [scrollTo?.nonce]);
     // Clicking a row selects it; a file opens, a folder expands or collapses.
     useEffect(() => {
         if (!click)
@@ -134,32 +160,33 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
         const node = visible[click.row];
         if (!node)
             return;
+        follow.current = false; // already on screen: don't jump the view
         setCursor(start + click.row);
         if (node.isDir)
             toggle(node.path);
         else
             onOpen(node.path);
     }, [click?.nonce]);
-    const inner = width - 2;
+    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"] })] })
         : _jsxs(_Fragment, { children: [" ", _jsx(Text, { color: C.accent, children: "\u25A4" }), " Explorer", git.size ? _jsxs(Text, { color: C.dim, children: ["  c: changes (", git.size, ")"] }) : null] });
-    return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "column", children: [visible.length === 0 && _jsxs(Text, { color: C.dim, children: ["  ", changesOnly ? "No changes ✓" : "(empty)"] }), visible.map((node, i) => {
-                    const selected = start + i === cursor;
-                    const code = git.get(node.path);
-                    const isOpen = node.path === openFile;
-                    const { icon, color } = node.isDir
-                        ? { icon: expanded.has(node.path) ? "▾" : "▸", color: C.accent }
-                        : fileIcon(node.path);
-                    const counts = problemCounts.get(node.path);
-                    const problemMark = counts?.errors ? "✖" : counts?.warnings ? "▲" : "";
-                    const marker = problemMark || code || (changed.has(node.path) ? "●" : dirtyDirs.has(node.path) ? "•" : "");
-                    const markerColor = counts?.errors ? C.red : counts?.warnings ? C.yellow : code ? GIT_COLORS[code] ?? C.yellow : changed.has(node.path) ? C.green : C.yellow;
-                    const label = `${"  ".repeat(node.depth)}${icon} ${node.name}`;
-                    const nameColor = isOpen ? C.cyan : counts?.errors ? C.red : code ? GIT_COLORS[code] : node.isDir ? C.text : undefined;
-                    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 (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsxs(Box, { flexDirection: "row", height: rows, children: [_jsxs(Box, { flexDirection: "column", width: inner, flexShrink: 0, children: [visible.length === 0 && _jsxs(Text, { color: C.dim, children: ["  ", changesOnly ? "No changes ✓" : "(empty)"] }), visible.map((node, i) => {
+                            const selected = start + i === cursor;
+                            const code = git.get(node.path);
+                            const isOpen = node.path === openFile;
+                            const { icon, color } = node.isDir
+                                ? { icon: expanded.has(node.path) ? "▾" : "▸", color: C.accent }
+                                : fileIcon(node.path);
+                            const counts = problemCounts.get(node.path);
+                            const problemMark = counts?.errors ? "✖" : counts?.warnings ? "▲" : "";
+                            const marker = problemMark || code || (changed.has(node.path) ? "●" : dirtyDirs.has(node.path) ? "•" : "");
+                            const markerColor = counts?.errors ? C.red : counts?.warnings ? C.yellow : code ? GIT_COLORS[code] ?? C.yellow : changed.has(node.path) ? C.green : C.yellow;
+                            const label = `${"  ".repeat(node.depth)}${icon} ${node.name}`;
+                            const nameColor = isOpen ? C.cyan : counts?.errors ? C.red : code ? GIT_COLORS[code] : node.isDir ? C.text : undefined;
+                            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));
+                        })] }), _jsx(Scrollbar, { total: nodes.length, top: start, rows: rows, focused: focused })] }) }));
+});

package/dist/src/ui/Header.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from "react";
 import path from "path";
 import { Box, Text, useAnimation } from "ink";
 import { C, SPINNER, gradient } from "./theme.js";
 import { currentVersion } from "../update/index.js";
 const VERSION = `v${currentVersion()}`;
-export function Header({ width, branch, changes, model, local, busy, update }) {
+export const Header = memo(function Header({ width, branch, changes, model, local, busy, update }) {
     const { frame } = useAnimation({ interval: 120, isActive: !!busy });
     const project = path.basename(process.cwd());
     return (_jsxs(Box, { width: width, justifyContent: "space-between", 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] })] }), _jsxs(Text, { children: [update && _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

@@ -33,8 +33,8 @@ export function ProblemsView({ width, height, focused, problems, checking, wheel
     }, [problems, onlyErrors]);
     useEffect(() => setCursor((c) => Math.min(c, Math.max(0, rows.length - 1))), [rows.length]);
     useEffect(() => {
-        if (wheel)
-            setCursor((c) => Math.max(0, Math.min(rows.length - 1, c + wheel.dir * 3)));
+        if (wheel?.lines)
+            setCursor((c) => Math.max(0, Math.min(rows.length - 1, c + wheel.lines)));
     }, [wheel?.nonce]);
     const visibleRows = Math.max(1, height - 4);
     useInput((input, key) => {

package/dist/src/ui/clipboard.js

@@ -27,3 +27,33 @@ export async function copyToClipboard(text) {
             return true;
     return process.stdout.isTTY === true;
 }
+/** Commands that print the clipboard, in order, for this platform. */
+function readCommands() {
+    if (process.platform === "win32")
+        return [["powershell", ["-NoProfile", "-Command", "Get-Clipboard -Raw"]]];
+    if (process.platform === "darwin")
+        return [["pbpaste", []]];
+    return [["wl-paste", ["--no-newline"]], ["xclip", ["-selection", "clipboard", "-o"]], ["xsel", ["--clipboard", "--output"]]];
+}
+function capture(cmd, args) {
+    return new Promise((resolve) => {
+        let out = "";
+        const child = spawn(cmd, args, { stdio: ["ignore", "pipe", "ignore"] });
+        child.stdout.setEncoding("utf-8");
+        child.stdout.on("data", (chunk) => (out += chunk));
+        child.on("error", () => resolve(null));
+        child.on("close", (code) => resolve(code === 0 ? out : null));
+    });
+}
+/**
+ * The system clipboard's text, or null if no clipboard tool is available (e.g. over SSH; there the
+ * terminal's own paste, Ctrl+Shift+V or Cmd+V, still works).
+ */
+export async function readClipboard() {
+    for (const [cmd, args] of readCommands()) {
+        const text = await capture(cmd, args);
+        if (text !== null)
+            return process.platform === "win32" ? text.replace(/\r?\n$/, "") : text;
+    }
+    return null;
+}

package/dist/src/ui/fast-output.js

@@ -0,0 +1,250 @@
+/**
+ * A faster final stage for Ink's renderer. Every frame Ink lays the whole screen out as a grid of styled
+ * cells and turns it back into a string. Ink 8 does that from scratch each time: a fresh cache per frame
+ * (so every line of text on screen is re-tokenized), and a style diff between every pair of neighbouring
+ * cells that builds three Sets each, about 30,000 throwaway objects for a 200x50 terminal. That was most of
+ * the CPU time of every keystroke, scroll and streamed token.
+ *
+ * This installs a drop-in version of Ink's `Output` methods that produces exactly the same string (the
+ * unit tests compare the two) but keeps its caches across frames and shares one array per distinct style,
+ * so most neighbouring cells compare by reference and each style change is computed once. It only patches
+ * the Ink version it was written against; anything else keeps Ink's own code.
+ */
+import { existsSync, readFileSync } from "fs";
+import path from "path";
+import { fileURLToPath, pathToFileURL } from "url";
+const PATCHED_VERSIONS = /^8\.0\./;
+/** Plenty for every line on screen plus scrollback; cleared rather than evicted one by one. */
+const MAX_CACHED = 20_000;
+const IGNORABLE = /^\p{Default_Ignorable_Code_Point}+$/u;
+/** Builds the patched methods against Ink's own tokenizer and string-width. Exported for tests. */
+export function makeFastOutput(tok, stringWidth) {
+    // One shared array per distinct style, so "same style" is a reference check.
+    const interned = new Map();
+    const NONE = [];
+    interned.set("", NONE);
+    const intern = (styles) => {
+        if (styles.length === 0)
+            return NONE;
+        const key = styles.map((c) => `${c.code}\u0000${c.endCode}`).join("\u0001");
+        let shared = interned.get(key);
+        if (!shared) {
+            shared = styles;
+            interned.set(key, shared);
+        }
+        return shared;
+    };
+    // The escape codes to get from one style to another, computed once per pair.
+    const transitions = new Map();
+    const transition = (from, to) => {
+        if (from === to)
+            return "";
+        let row = transitions.get(from);
+        if (!row)
+            transitions.set(from, (row = new Map()));
+        let codes = row.get(to);
+        if (codes === undefined) {
+            codes = from === NONE ? tok.ansiCodesToString(to) : tok.ansiCodesToString(tok.diffAnsiCodes(from, to));
+            row.set(to, codes);
+        }
+        return codes;
+    };
+    /** Same result as ansi-tokenize's styledCharsToString, for interned styles. */
+    const toString = (chars) => {
+        let out = "";
+        let prev = NONE;
+        for (const char of chars) {
+            if (char.styles !== prev)
+                out += transition(prev, char.styles);
+            out += char.value;
+            prev = char.styles;
+        }
+        return out + transition(prev, NONE);
+    };
+    const styledChars = new Map();
+    const getStyledChars = (line) => {
+        let cached = styledChars.get(line);
+        if (cached === undefined) {
+            if (styledChars.size > MAX_CACHED)
+                styledChars.clear();
+            cached = tok.styledCharsFromTokens(tok.tokenize(line))
+                .filter((c) => !IGNORABLE.test(c.value))
+                .map((c) => ({ ...c, styles: intern(c.styles) }));
+            styledChars.set(line, cached);
+        }
+        return cached;
+    };
+    // A write's text split at newlines and re-serialized per line, as Ink does before clipping.
+    const splitLines = new Map();
+    const linesOf = (text) => {
+        let cached = splitLines.get(text);
+        if (cached === undefined) {
+            if (splitLines.size > MAX_CACHED)
+                splitLines.clear();
+            const rows = [[]];
+            for (const c of getStyledChars(text)) {
+                if (c.value === "\n")
+                    rows.push([]);
+                else
+                    rows[rows.length - 1].push(c);
+            }
+            cached = rows.map(toString);
+            splitLines.set(text, cached);
+        }
+        return cached;
+    };
+    const widths = new Map();
+    const width = (text) => {
+        let cached = widths.get(text);
+        if (cached === undefined) {
+            if (widths.size > MAX_CACHED)
+                widths.clear();
+            cached = stringWidth(text);
+            widths.set(text, cached);
+        }
+        return cached;
+    };
+    const widest = (text) => {
+        let max = 0;
+        for (const line of text.split("\n"))
+            max = Math.max(max, width(line));
+        return max;
+    };
+    const blank = (cell) => ({ ...cell, value: " ", fullWidth: false });
+    const EMPTY_CELL = { type: "char", value: " ", fullWidth: false, styles: NONE };
+    const slice = (line, from, to) => {
+        if (from >= to)
+            return "";
+        const result = [];
+        let column = 0;
+        for (const c of getStyledChars(line)) {
+            const w = width(c.value);
+            const start = column;
+            column += w;
+            if (column <= from)
+                continue;
+            if (start >= to)
+                break;
+            result.push(w > 1 && (start < from || column > to) ? blank(c) : c);
+        }
+        return toString(result);
+    };
+    const isClipEmpty = (clip) => (clip.x1 !== undefined && clip.x2 !== undefined && clip.x1 >= clip.x2) || (clip.y1 !== undefined && clip.y2 !== undefined && clip.y1 >= clip.y2);
+    const bound = (a, b, tighter) => a === undefined ? b : b === undefined ? a : tighter(a, b);
+    const intersect = (outer, inner) => outer
+        ? { x1: bound(outer.x1, inner.x1, Math.max), x2: bound(outer.x2, inner.x2, Math.min), y1: bound(outer.y1, inner.y1, Math.max), y2: bound(outer.y2, inner.y2, Math.min) }
+        : inner;
+    /** Ink's applyWriteOperation, with shared caches. */
+    const apply = (output, operation, clip) => {
+        const { text, transformers } = operation;
+        let { x, y } = operation;
+        let lines = linesOf(text);
+        if (clip) {
+            if (isClipEmpty(clip))
+                return;
+            const clipX = typeof clip.x1 === "number" && typeof clip.x2 === "number";
+            const clipY = typeof clip.y1 === "number" && typeof clip.y2 === "number";
+            if (clipX && (x + widest(text) < clip.x1 || x > clip.x2))
+                return;
+            if (clipY && (y + lines.length < clip.y1 || y > clip.y2))
+                return;
+            if (clipX) {
+                lines = lines.map((line) => {
+                    const from = x < clip.x1 ? clip.x1 - x : 0;
+                    const w = width(line);
+                    return slice(line, from, x + w > clip.x2 ? clip.x2 - x : w);
+                });
+                if (x < clip.x1)
+                    x = clip.x1;
+            }
+            if (clipY) {
+                const from = y < clip.y1 ? clip.y1 - y : 0;
+                const to = y + lines.length > clip.y2 ? clip.y2 - y : lines.length;
+                lines = lines.slice(from, to);
+                if (y < clip.y1)
+                    y = clip.y1;
+            }
+        }
+        for (let index = 0; index < lines.length; index++) {
+            let line = lines[index];
+            const row = output[y + index];
+            if (!row)
+                continue;
+            for (const transformer of transformers)
+                line = transformer(line, index + y - operation.y);
+            const chars = getStyledChars(line);
+            if (chars.length === 0)
+                continue;
+            let offsetX = x;
+            if (row[offsetX]?.value === "" && offsetX > 0 && width(row[offsetX - 1]?.value ?? "") > 1)
+                row[offsetX - 1] = blank(row[offsetX - 1]);
+            for (const c of chars) {
+                row[offsetX] = c;
+                const w = Math.max(1, width(c.value));
+                for (let offset = 1; offset < w; offset++) {
+                    row[offsetX + offset] = { type: "char", value: offsetX < 0 ? " " : "", fullWidth: false, styles: c.styles };
+                }
+                offsetX += w;
+            }
+            if (row[offsetX]?.value === "")
+                row[offsetX] = blank(row[offsetX]);
+        }
+    };
+    function get() {
+        const output = [];
+        for (let y = 0; y < this.height; y++)
+            output.push(new Array(this.width).fill(EMPTY_CELL));
+        const clips = [];
+        for (const operation of this.operations) {
+            if (operation.type === "clip")
+                clips.push(intersect(clips[clips.length - 1], operation.clip));
+            else if (operation.type === "unclip")
+                clips.pop();
+            else
+                apply(output, operation, clips[clips.length - 1]);
+        }
+        return {
+            output: output.map((row) => toString(row.filter((c) => c !== undefined)).trimEnd()).join("\n"),
+            height: output.length,
+        };
+    }
+    return { get };
+}
+let installed = null;
+/** Finds a package the way Node would from `fromDir` (nested node_modules first) and returns its ESM entry. */
+function resolveFrom(fromDir, name) {
+    for (let dir = fromDir;; dir = path.dirname(dir)) {
+        const pkgDir = path.join(dir, "node_modules", name);
+        if (existsSync(path.join(pkgDir, "package.json"))) {
+            const pkg = JSON.parse(readFileSync(path.join(pkgDir, "package.json"), "utf-8"));
+            const root = typeof pkg.exports === "object" && pkg.exports !== null ? pkg.exports["."] ?? pkg.exports : pkg.exports;
+            const entry = typeof root === "string" ? root : root?.import ?? root?.default ?? pkg.module ?? pkg.main ?? "index.js";
+            return pathToFileURL(path.join(pkgDir, typeof entry === "string" ? entry : entry.default)).href;
+        }
+        if (path.dirname(dir) === dir)
+            throw new Error(`can't find ${name}`);
+    }
+}
+/** Loads the modules Ink itself uses (they may be nested under Ink, so resolve from there). */
+async function inkModules() {
+    const inkUrl = import.meta.resolve("ink");
+    const inkDir = path.dirname(path.dirname(fileURLToPath(inkUrl)));
+    const version = JSON.parse(readFileSync(path.join(inkDir, "package.json"), "utf-8")).version;
+    const load = (name) => import(resolveFrom(inkDir, name));
+    const [output, tokenizer, stringWidth] = await Promise.all([import(new URL("./output.js", inkUrl).href), load("@alcalzone/ansi-tokenize"), load("string-width")]);
+    return { version, Output: output.default, tokenizer: tokenizer, stringWidth: stringWidth.default };
+}
+/** Swaps in the faster output stage. Returns whether it did (false: an Ink version it doesn't know). */
+export function installFastOutput() {
+    installed ??= inkModules()
+        .then(({ version, Output, tokenizer, stringWidth }) => {
+        if (!PATCHED_VERSIONS.test(version) || typeof Output?.prototype?.get !== "function")
+            return false;
+        Output.prototype.get = makeFastOutput(tokenizer, stringWidth).get;
+        return true;
+    })
+        .catch(() => false);
+    return installed;
+}
+/** Ink's Output class and the modules it uses, for tests that compare both versions. */
+export const loadInkOutput = inkModules;

package/dist/src/ui/mouse.js

@@ -1,8 +1,10 @@
 import { useEffect, useRef } from "react";
 import { useStdin } from "ink";
-// Report clicks and wheel (1000) using SGR coordinates (1006), which work past column 223.
-const ENABLE = "\x1b[?1000h\x1b[?1006h";
-const DISABLE = "\x1b[?1000l\x1b[?1006l";
+// Report clicks and wheel (1000), and movement while a button is held (1002, without it terminals never
+// send drags: no resizing panes, dragging scrollbars or selecting), using SGR coordinates (1006), which
+// work past column 223.
+export const ENABLE = "\x1b[?1000h\x1b[?1002h\x1b[?1006h";
+const DISABLE = "\x1b[?1006l\x1b[?1002l\x1b[?1000l";
 /** Mouse events in a chunk of terminal input (SGR format: ESC [ < button ; x ; y M|m). */
 export function parseMouse(chunk) {
     const events = [];
@@ -12,8 +14,11 @@ export function parseMouse(chunk) {
         const x = Number(m[2]) - 1;
         const y = Number(m[3]) - 1;
         const button = code & 0b11000011; // drop the shift/alt/ctrl bits
+        const shift = (code & 4) !== 0;
         if (button === 64 || button === 65)
-            events.push({ kind: "wheel", dir: button === 64 ? -1 : 1, x, y });
+            events.push({ kind: "wheel", dir: button === 64 ? -1 : 1, x, y, horizontal: shift });
+        else if (button === 66 || button === 67)
+            events.push({ kind: "wheel", dir: button === 66 ? -1 : 1, x, y, horizontal: true });
         else if (button === 0 && code & 32)
             events.push({ kind: "drag", x, y }); // 32: moved with the left button held
         else if (button === 0)

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

@@ -0,0 +1,11 @@
+/** How Nou renders to the terminal (shared by the app and the rendering benchmark). */
+export const RENDER_OPTIONS = {
+    alternateScreen: true,
+    // Ctrl+C is handled inside the app: press it twice to quit, so a stray press doesn't lose work.
+    exitOnCtrlC: false,
+    // Rewrite only the lines that changed, not the whole screen: far less to send to the terminal per
+    // keystroke or scroll, which matters most over SSH and in slower terminals (e.g. on Windows).
+    incrementalRendering: true,
+    // Up to 60 frames a second, so scrolling and typing keep up with the keyboard and mouse.
+    maxFps: 60,
+};

package/dist/src/ui/scroll.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { C } from "./theme.js";
+/** Lines a single wheel notch moves. */
+export const WHEEL_STEP = 3;
+/** Where to scroll to for a scrollbar click at `fraction` of the track. */
+export const topFor = (fraction, total, rows) => Math.round(Math.max(0, Math.min(1, fraction)) * Math.max(0, total - rows));
+/** The scrollbar thumb's first row and size for `rows` visible out of `total`, starting at `top`. */
+export function thumb(total, top, rows) {
+    if (total <= rows)
+        return { start: 0, size: rows };
+    const size = Math.max(1, Math.round((rows / total) * rows));
+    const maxTop = total - rows;
+    const start = Math.round((Math.min(top, maxTop) / maxTop) * (rows - size));
+    return { start, size };
+}
+/**
+ * A one-column scrollbar beside a pane's content. Drawn only when there's more than fits; it keeps its
+ * column either way so the content doesn't shift when it appears. One Text node for the whole column.
+ */
+export function Scrollbar({ total, top, rows, focused }) {
+    if (total <= rows)
+        return _jsx(Box, { width: 1, flexShrink: 0 });
+    const { start, size } = thumb(total, top, rows);
+    // Only the thumb is drawn: a track beside the pane's border would read as a double line.
+    const track = (n) => Array.from({ length: n }, () => " ").join("\n");
+    const before = track(start);
+    const after = track(rows - start - size);
+    return (_jsx(Box, { width: 1, flexShrink: 0, children: _jsxs(Text, { children: [_jsxs(Text, { color: C.dim, children: [before, before ? "\n" : ""] }), _jsx(Text, { color: focused ? C.accent : C.text, children: Array.from({ length: size }, () => "┃").join("\n") }), _jsxs(Text, { color: C.dim, children: [after ? "\n" : "", after] })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nou-cli",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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": {
@@ -24,7 +24,8 @@
     "eval": "tsx evals/run.ts",
     "prepublishOnly": "npm run build",
     "screenshot": "node -e \"process.env.FORCE_COLOR='3';require('child_process').execSync('npx tsx scripts/screenshot.tsx',{stdio:'inherit'})\"",
-    "test": "tsx tests/unit.ts && tsx tests/e2e.tsx"
+    "test": "tsx tests/unit.ts && tsx tests/e2e.tsx",
+    "bench": "tsx scripts/bench.tsx"
   },
   "repository": {
     "type": "git",