nou-cli 0.1.0 → 0.2.1

package/dist/src/ui/ChatInput.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Text, useInput, usePaste } from "ink";
+import { C } from "./theme.js";
+/** Word-wraps `text` into segments of at most `width` characters, honoring newlines. */
+export function layout(text, width) {
+    const w = Math.max(1, width);
+    const segments = [];
+    let pos = 0;
+    while (pos <= text.length) {
+        const newline = text.indexOf("\n", pos);
+        const lineEnd = newline === -1 ? text.length : newline;
+        if (lineEnd - pos <= w) {
+            segments.push({ start: pos, end: lineEnd });
+            if (newline === -1)
+                break;
+            pos = newline + 1;
+            continue;
+        }
+        // Break after the last space that fits, or hard-break a long word.
+        const space = text.lastIndexOf(" ", pos + w - 1);
+        const end = space >= pos ? space + 1 : pos + w;
+        segments.push({ start: pos, end });
+        pos = end;
+    }
+    return segments;
+}
+/** The segment the cursor sits in; a cursor at a wrap boundary belongs to the next line. */
+function cursorLine(segments, cursor) {
+    for (let i = 0; i < segments.length; i++) {
+        const s = segments[i];
+        const next = segments[i + 1];
+        if (cursor >= s.start && (cursor < s.end || (cursor === s.end && (!next || next.start > s.end))))
+            return i;
+    }
+    return segments.length - 1;
+}
+export function ChatInput({ value, onChange, onSubmit, focus, width, placeholder, history, maxLines = 6 }) {
+    const [cursor, setCursor] = useState(value.length);
+    const [recall, setRecall] = useState(null);
+    const stash = useRef("");
+    const textWidth = Math.max(4, width - 2);
+    const pos = Math.min(cursor, value.length);
+    const segments = layout(value, textWidth);
+    const line = cursorLine(segments, pos);
+    const set = (next, nextCursor) => {
+        onChange(next);
+        setCursor(Math.max(0, Math.min(next.length, nextCursor)));
+    };
+    const insert = (text) => set(value.slice(0, pos) + text + value.slice(pos), pos + text.length);
+    const recallHistory = (step) => {
+        if (!history.length)
+            return false;
+        const current = recall ?? history.length;
+        const next = current + step;
+        if (next < 0 || next > history.length)
+            return false;
+        if (recall === null)
+            stash.current = value;
+        const text = next === history.length ? stash.current : history[next];
+        setRecall(next === history.length ? null : next);
+        set(text, text.length);
+        return true;
+    };
+    usePaste((text) => insert(text.replace(/\r\n?/g, "\n")), { isActive: focus });
+    useInput((input, key) => {
+        if (key.tab || key.escape || key.pageUp || key.pageDown || (key.shift && (key.upArrow || key.downArrow)))
+            return;
+        if (key.return) {
+            setRecall(null);
+            onSubmit(value);
+            return;
+        }
+        if (key.backspace)
+            return pos > 0 && set(value.slice(0, pos - 1) + value.slice(pos), pos - 1);
+        if (key.delete)
+            return pos < value.length && set(value.slice(0, pos) + value.slice(pos + 1), pos);
+        if (key.leftArrow)
+            return setCursor(key.ctrl || key.meta ? value.lastIndexOf(" ", pos - 2) + 1 : pos - 1 < 0 ? 0 : pos - 1);
+        if (key.rightArrow) {
+            if (key.ctrl || key.meta) {
+                const next = value.indexOf(" ", pos + 1);
+                return setCursor(next === -1 ? value.length : next);
+            }
+            return setCursor(Math.min(value.length, pos + 1));
+        }
+        if (key.home || (key.ctrl && input === "a"))
+            return setCursor(segments[line].start);
+        if (key.end || (key.ctrl && input === "e"))
+            return setCursor(segments[line].end);
+        if (key.ctrl && input === "u")
+            return set("", 0);
+        if (key.upArrow || key.downArrow) {
+            const target = line + (key.upArrow ? -1 : 1);
+            if (target >= 0 && target < segments.length) {
+                // Move between wrapped lines, keeping the column.
+                const col = pos - segments[line].start;
+                const s = segments[target];
+                return setCursor(Math.min(s.start + col, s.end));
+            }
+            recallHistory(key.upArrow ? -1 : 1);
+            return;
+        }
+        if (key.ctrl || key.meta || !input)
+            return;
+        insert(input.replace(/\r\n?/g, "\n"));
+    }, { isActive: focus });
+    // Show a window of lines around the cursor once the message gets long.
+    const first = Math.max(0, Math.min(line - maxLines + 1, segments.length - maxLines));
+    const shown = segments.slice(first, first + maxLines);
+    const prompt = (i) => (_jsx(Text, { color: focus ? C.accent2 : C.dim, bold: true, children: first + i === 0 ? "❯ " : first > 0 && i === 0 ? "↑ " : "  " }));
+    if (!value) {
+        return (_jsxs(Box, { children: [prompt(0), focus ? _jsx(Text, { inverse: true, children: " " }) : null, _jsx(Text, { color: C.dim, wrap: "truncate-end", children: placeholder })] }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: shown.map((s, i) => {
+            const text = value.slice(s.start, s.end).replace(/\n/g, "");
+            const isCursor = focus && first + i === line;
+            if (!isCursor) {
+                return _jsxs(Text, { children: [prompt(i), _jsx(Text, { color: C.text, children: text || " " })] }, first + i);
+            }
+            const at = pos - s.start;
+            return (_jsxs(Text, { children: [prompt(i), _jsx(Text, { color: C.text, children: text.slice(0, at) }), _jsx(Text, { inverse: true, children: text[at] ?? " " }), _jsx(Text, { color: C.text, children: text.slice(at + 1) })] }, first + i));
+        }) }));
+}
+/** How many rows the input will take, so the chat can size its history above it. */
+export function inputHeight(value, width, maxLines = 6) {
+    return value ? Math.min(maxLines, layout(value, Math.max(4, width - 2)).length) : 1;
+}

package/dist/src/ui/CodeView.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Box, Text, useInput } from "ink";
+import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { artWork } from "../util/index.js";
 import { highlightLines, sideBySide } from "./text.js";
 import { C, fileIcon, gradient } from "./theme.js";
 import { Pane } from "./Pane.js";
-export function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, onViewport }) {
+export function CodeView({ width, height, focused, filePath, content, diff, diffLabel, pending, marked, problems, focusLine, syntaxVersion, diffNote, wheel, onViewport }) {
     const [top, setTop] = useState(0);
     const rows = Math.max(1, height - 3);
     const inner = width - 2;
-    const lines = useMemo(() => (filePath ? highlightLines(filePath, content) : []), [filePath, content]);
+    const lines = useMemo(() => (filePath ? highlightLines(filePath, content) : []), [filePath, content, syntaxVersion]);
+    const problemsByLine = useMemo(() => {
+        const map = new Map();
+        for (const d of problems)
+            map.set(d.line, [...(map.get(d.line) ?? []), d]);
+        return map;
+    }, [problems]);
     const diffRows = useMemo(() => (diff ? sideBySide(diff.before, diff.after) : []), [diff]);
     const total = diff ? diffRows.length : lines.length;
     // Jump to the first change whenever a new file or diff is shown.
@@ -19,8 +26,16 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
             : marked.size ? Math.min(...marked) - 1 : 0;
         setTop(Math.max(0, first - 3));
     }, [filePath, diff, diffRows, marked]);
+    useEffect(() => {
+        if (focusLine && !diff)
+            setTop(Math.max(0, focusLine.line - Math.floor(rows / 3)));
+    }, [focusLine]);
     const maxTop = Math.max(0, total - rows);
     const start = Math.min(top, maxTop);
+    useEffect(() => {
+        if (wheel)
+            setTop((t) => Math.max(0, Math.min(maxTop, Math.min(t, maxTop) + wheel.dir * 3)));
+    }, [wheel?.nonce]);
     useEffect(() => {
         if (filePath && !diff)
             onViewport(start + 1, Math.min(total, start + rows));
@@ -60,7 +75,7 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
             return (_jsx(Box, { width: w, children: _jsxs(Text, { wrap: "truncate-end", ...(color ? { color } : { color: C.dim }), children: [String(c.n).padStart(gutter - 1), changed ? side : " ", c.text || " "] }) }));
         };
         const { icon, color } = fileIcon(diff.path);
-        const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", diff.path, "  ", _jsx(Text, { backgroundColor: pending ? C.yellow : C.accent2, color: "black", children: pending ? (diff.isNew ? " NEW FILE " : " PROPOSED ") : ` ${diffLabel.toUpperCase()} ` }), "  ", _jsxs(Text, { color: C.green, children: ["+", added] }), " ", _jsxs(Text, { color: C.red, children: ["-", removed] }), _jsxs(Text, { color: C.dim, children: [pending ? "   y accept · n reject" : "   n/N next/prev change", scroll] })] }));
+        const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", diff.path, "  ", _jsx(Text, { backgroundColor: pending ? C.yellow : C.accent2, color: "black", children: pending ? (diff.isNew ? " NEW FILE " : " PROPOSED ") : ` ${diffLabel.toUpperCase()} ` }), "  ", _jsxs(Text, { color: C.green, children: ["+", added] }), " ", _jsxs(Text, { color: C.red, children: ["-", removed] }), diffNote ? _jsxs(Text, { color: diffNote.startsWith("✓") ? C.green : C.red, children: ["  ", diffNote] }) : null, _jsxs(Text, { color: C.dim, children: [pending ? "   y accept · n reject" : "   n/N next/prev change", scroll] })] }));
         return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, ...(pending ? { accent: C.yellow } : {}), children: _jsx(Box, { flexDirection: "column", children: diffRows.slice(start, start + rows).map((row, i) => (_jsxs(Box, { flexDirection: "row", children: [cell(row.left, "-", row.changed, half), _jsx(Text, { color: C.dim, children: "\u2502" }), cell(row.right, "+", row.changed, inner - half - 1)] }, start + i))) }) }));
     }
     if (!filePath) {
@@ -75,10 +90,15 @@ export function CodeView({ width, height, focused, filePath, content, diff, diff
     }
     const gutter = String(lines.length).length;
     const { icon, color } = fileIcon(filePath);
-    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused ? "   e edit · v diff" : ""] })] }));
+    const errorCount = problems.filter((d) => d.severity === "error").length;
+    const warningCount = problems.filter((d) => d.severity === "warning").length;
+    const title = (_jsxs(_Fragment, { children: [" ", _jsx(Text, { color: color, children: icon }), " ", filePath, errorCount > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", errorCount] }), warningCount > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", warningCount] }), _jsxs(Text, { color: C.dim, children: [scroll, total > rows ? ` (${percent}%)` : "", focused ? "   e edit · v diff" : ""] })] }));
     return (_jsx(Pane, { title: title, width: width, height: height, focused: focused, children: _jsx(Box, { flexDirection: "column", children: lines.slice(start, start + rows).map((line, i) => {
                 const n = start + i + 1;
                 const isMarked = marked.has(n);
-                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: isMarked ? C.green : C.dim, children: String(n).padStart(gutter) }), _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), line || " "] }, n));
+                const here = problemsByLine.get(n);
+                const worst = here?.[0];
+                const style = worst ? SEVERITY_STYLE[worst.severity] : null;
+                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: style?.color ?? (isMarked ? C.green : C.dim), children: String(n).padStart(gutter) }), style ? _jsx(Text, { color: style.color, children: style.icon }) : _jsx(Text, { color: isMarked ? C.green : C.dim, children: isMarked ? "▎" : " " }), line || " ", worst && style ? _jsxs(Text, { color: style.color, dimColor: true, children: ["   ", style.icon, " ", worst.message, here.length > 1 ? ` (+${here.length - 1})` : ""] }) : null] }, n));
             }) }) }));
 }

package/dist/src/ui/Editor.js

@@ -3,17 +3,26 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useInput, usePaste } from "ink";
 import { highlightLines } from "./text.js";
 import { C, fileIcon } from "./theme.js";
+import { SEVERITY_STYLE } from "./ProblemsView.js";
 import { Pane } from "./Pane.js";
 const expand = (s) => s.replace(/\t/g, "  ");
 /** A small modal text editor: arrows to move, type to insert, Ctrl+S save, Ctrl+Z undo, Esc leave. */
-export function Editor({ width, height, focused, filePath, initial, baseline, onSave, onExit, onState }) {
+export function Editor({ width, height, focused, filePath, initial, baseline, startLine, problems, autoSave, syntaxVersion, wheel, onSave, onExit, onState, onHover, onDefinition }) {
     const eol = useMemo(() => (baseline.includes("\r\n") ? "\r\n" : "\n"), [baseline]);
     const indentUnit = useMemo(() => (/^\t/m.test(initial) ? "\t" : "  "), [initial]);
-    const [buf, setBuf] = useState(() => ({ lines: initial.replace(/\r\n/g, "\n").split("\n"), row: 0, col: 0 }));
+    const [buf, setBuf] = useState(() => {
+        const lines = initial.replace(/\r\n/g, "\n").split("\n");
+        const row = Math.max(0, Math.min(lines.length - 1, (startLine ?? 1) - 1));
+        return { lines, row, col: lines[row].match(/^\s*/)[0].length };
+    });
+    const [hover, setHover] = useState(null);
     const [saved, setSaved] = useState(() => baseline.replace(/\r\n/g, "\n"));
     const [confirmExit, setConfirmExit] = useState(false);
     const [flash, setFlash] = useState(null);
     const undo = useRef([]);
+    const redo = useRef([]);
+    // Consecutive typing within a word is one undo step, like VS Code.
+    const lastEdit = useRef({ kind: "", time: 0 });
     const view = useRef({ top: 0, left: 0 });
     const dirty = useMemo(() => buf.lines.join("\n") !== saved, [buf.lines, saved]);
     useEffect(() => onState({ line: buf.row + 1, col: buf.col + 1, dirty, lines: buf.lines }), [buf, dirty]);
@@ -23,13 +32,27 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
         const t = setTimeout(() => setFlash(null), 1500);
         return () => clearTimeout(t);
     }, [flash]);
-    const edit = (fn) => setBuf((b) => {
-        undo.current.push(b);
-        if (undo.current.length > 300)
-            undo.current.shift();
+    const edit = (fn, kind = "other") => setBuf((b) => {
+        const now = Date.now();
+        const grouped = kind !== "other" && kind === lastEdit.current.kind && now - lastEdit.current.time < 1000;
+        if (!grouped) {
+            undo.current.push(b);
+            if (undo.current.length > 500)
+                undo.current.shift();
+        }
+        redo.current = [];
+        lastEdit.current = { kind, time: now };
         return fn(b);
     });
-    const insert = (text) => edit((b) => {
+    const step = (from, to) => setBuf((b) => {
+        const target = from.current.pop();
+        if (!target)
+            return b;
+        to.current.push(b);
+        lastEdit.current = { kind: "", time: 0 };
+        return target;
+    });
+    const insert = (text, kind = "other") => edit((b) => {
         const pieces = text.replace(/\r\n?/g, "\n").split("\n");
         const line = b.lines[b.row];
         const before = line.slice(0, b.col);
@@ -42,20 +65,36 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
         const last = pieces[pieces.length - 1];
         lines.splice(b.row, 1, before + pieces[0], ...pieces.slice(1, -1), last + after);
         return { lines, row: b.row + pieces.length - 1, col: last.length };
-    });
+    }, kind);
     const move = (fn) => setBuf((b) => {
         const next = { ...b, ...fn(b) };
         next.row = Math.max(0, Math.min(next.lines.length - 1, next.row));
         next.col = Math.max(0, Math.min(next.lines[next.row].length, next.col));
         return next;
     });
-    const save = () => {
+    const save = (auto = false) => {
         const text = buf.lines.join("\n");
         onSave(text.replace(/\n/g, eol));
         setSaved(text);
-        setFlash("Saved ✓");
+        setFlash(auto ? "Auto-saved ✓" : "Saved ✓");
     };
+    // Auto-save: a second after you stop typing, or when you leave the editor.
+    useEffect(() => {
+        if (autoSave !== "delay" || !dirty)
+            return;
+        const timer = setTimeout(() => save(true), 1000);
+        return () => clearTimeout(timer);
+    }, [buf.lines, dirty, autoSave]);
+    useEffect(() => {
+        if (autoSave !== "off" && !focused && dirty)
+            save(true);
+    }, [focused]);
+    const position = () => ({ text: buf.lines.join("\n"), line: buf.row + 1, col: buf.col + 1 });
     const rows = Math.max(1, height - 4);
+    useEffect(() => {
+        if (wheel)
+            move((b) => ({ row: b.row + wheel.dir * 3 }));
+    }, [wheel?.nonce]);
     usePaste((text) => insert(text), { isActive: focused });
     useInput((input, key) => {
         if (confirmExit) {
@@ -69,16 +108,36 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
                 setConfirmExit(false);
             return;
         }
+        if (hover)
+            setHover(null);
+        if (key.ctrl && input === "c")
+            return; // the app handles Ctrl+C (press twice to quit)
         if (key.ctrl && input === "s")
             return save();
-        if (key.ctrl && input === "z") {
-            const prev = undo.current.pop();
-            if (prev)
-                setBuf(prev);
+        if (key.ctrl && input === "z")
+            return step(undo, redo);
+        if (key.ctrl && input === "y")
+            return step(redo, undo);
+        if (key.ctrl && input === "k") {
+            const { text, line, col } = position();
+            setFlash("…");
+            void onHover(text, line, col).then((info) => {
+                setFlash(null);
+                setHover(info ?? "No info here (needs a language server for this file type).");
+            });
             return;
         }
-        if (key.escape)
+        if (key.ctrl && input === "g") {
+            const { text, line, col } = position();
+            return onDefinition(text, line, col);
+        }
+        if (key.escape) {
+            if (dirty && autoSave !== "off") {
+                save(true);
+                return onExit();
+            }
             return dirty ? setConfirmExit(true) : onExit();
+        }
         if (key.upArrow)
             return move((b) => ({ row: b.row - 1 }));
         if (key.downArrow)
@@ -116,7 +175,7 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
                 const prev = lines[b.row - 1];
                 lines.splice(b.row - 1, 2, prev + lines[b.row]);
                 return { lines, row: b.row - 1, col: prev.length };
-            });
+            }, "delete");
         }
         if (key.delete) {
             return edit((b) => {
@@ -129,8 +188,9 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
                 return { ...b, lines };
             });
         }
+        // Letters/digits group into one undo step per word; spaces and punctuation start a new one.
         if (input && !key.ctrl && !key.meta)
-            insert(input);
+            insert(input, /^\w+$/.test(input) ? "type" : "other");
     }, { isActive: focused });
     // Keep the cursor on screen.
     const gutter = String(buf.lines.length).length + 2;
@@ -146,20 +206,33 @@ export function Editor({ width, height, focused, filePath, initial, baseline, on
     if (cursorX >= v.left + textWidth)
         v.left = cursorX - textWidth + 8;
     const visible = buf.lines.slice(v.top, v.top + rows);
-    const colored = useMemo(() => (v.left === 0 ? highlightLines(filePath, visible.join("\n")) : visible.map(expand)), [filePath, visible.join("\n"), v.left]);
+    const colored = useMemo(
+    // Scrolled sideways: every line shifts by the same amount as the cursor line (plain text, since
+    // slicing highlighted text could cut a color code in half).
+    () => (v.left === 0 ? highlightLines(filePath, visible.join("\n")) : visible.map((l) => expand(l).slice(v.left, v.left + textWidth))), [filePath, visible.join("\n"), v.left, textWidth, syntaxVersion]);
     const { icon, color } = fileIcon(filePath);
+    const byLine = new Map();
+    for (const d of problems)
+        byLine.set(d.line, [...(byLine.get(d.line) ?? []), d]);
+    const cursorProblem = byLine.get(buf.row + 1)?.[0];
     const status = confirmExit
         ? "Unsaved changes! Ctrl+S save & close · Esc discard · any key keep editing"
-        : flash ?? `Ln ${buf.row + 1}, Col ${buf.col + 1}${dirty ? "  ● modified" : ""}`;
+        : flash ?? (cursorProblem
+            ? `${SEVERITY_STYLE[cursorProblem.severity].icon} ${cursorProblem.message} (${cursorProblem.source})`
+            : `Ln ${buf.row + 1}, Col ${buf.col + 1}${dirty ? "  ● modified" : ""}`);
+    const statusColor = confirmExit ? C.red : flash ? C.green : cursorProblem ? SEVERITY_STYLE[cursorProblem.severity].color : C.dim;
+    const hoverLines = hover ? hover.split("\n").filter((l) => l.trim()).slice(0, 6) : [];
     return (_jsxs(Pane, { title: _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 " })] }), width: width, height: height, focused: focused, accent: C.green, children: [_jsx(Box, { flexDirection: "column", height: rows, children: visible.map((line, i) => {
                     const n = v.top + i;
                     const isCursorLine = n === buf.row;
-                    const num = _jsxs(Text, { color: isCursorLine ? C.green : C.dim, children: [String(n + 1).padStart(gutter - 2), isCursorLine ? " ▸" : "  "] });
+                    const problem = byLine.get(n + 1)?.[0];
+                    const mark = problem ? SEVERITY_STYLE[problem.severity] : null;
+                    const num = (_jsxs(Text, { color: mark?.color ?? (isCursorLine ? C.green : C.dim), children: [String(n + 1).padStart(gutter - 2), mark ? ` ${mark.icon}` : isCursorLine ? " ▸" : "  "] }));
                     if (!isCursorLine) {
                         return _jsxs(Text, { wrap: "truncate-end", children: [num, colored[i] || " "] }, n);
                     }
                     const shown = expand(line).slice(v.left, v.left + textWidth);
                     const at = cursorX - v.left;
                     return (_jsxs(Text, { wrap: "truncate-end", children: [num, _jsx(Text, { color: C.text, children: shown.slice(0, at) }), _jsx(Text, { inverse: true, color: C.green, children: shown[at] ?? " " }), _jsx(Text, { color: C.text, children: shown.slice(at + 1) })] }, n));
-                }) }), _jsxs(Text, { wrap: "truncate-end", color: confirmExit ? C.red : flash ? C.green : C.dim, children: [` ${status}`, _jsx(Text, { color: C.dim, children: confirmExit ? "" : "   Ctrl+S save · Ctrl+Z undo · Esc close" })] })] }));
+                }) }), 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)) })), _jsxs(Text, { wrap: "truncate-end", color: statusColor, children: [` ${status}`, _jsx(Text, { color: C.dim, children: confirmExit ? "" : `   Ctrl+S save${autoSave === "off" ? "" : " (auto)"} · Ctrl+Z/Y undo/redo · Ctrl+K info · Ctrl+G definition · Esc close` })] })] }));
 }

package/dist/src/ui/FileTree.js

@@ -30,7 +30,7 @@ function flatten(expanded) {
     walk(".", 0);
     return nodes;
 }
-export function FileTree({ width, height, focused, openFile, reveal, version, changed, git, onOpen, onHover }) {
+export function FileTree({ width, height, focused, openFile, reveal, version, changed, git, problemCounts, wheel, click, onOpen, onHover }) {
     const [expanded, setExpanded] = useState(() => new Set(["src"]));
     const [cursor, setCursor] = useState(0);
     const [changesOnly, setChangesOnly] = useState(false);
@@ -118,6 +118,23 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
     }, { isActive: focused });
     const start = Math.max(0, Math.min(cursor - Math.floor(rows / 2), nodes.length - rows));
     const visible = nodes.slice(start, start + rows);
+    useEffect(() => {
+        if (wheel)
+            setCursor((c) => Math.max(0, Math.min(nodes.length - 1, c + wheel.dir * 3)));
+    }, [wheel?.nonce]);
+    // Clicking a row selects it; a file opens, a folder expands or collapses.
+    useEffect(() => {
+        if (!click)
+            return;
+        const node = visible[click.row];
+        if (!node)
+            return;
+        setCursor(start + click.row);
+        if (node.isDir)
+            toggle(node.path);
+        else
+            onOpen(node.path);
+    }, [click?.nonce]);
     const inner = width - 2;
     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"] })] })
@@ -129,10 +146,12 @@ export function FileTree({ width, height, focused, openFile, reveal, version, ch
                     const { icon, color } = node.isDir
                         ? { icon: expanded.has(node.path) ? "▾" : "▸", color: C.accent }
                         : fileIcon(node.path);
-                    const marker = code ?? (changed.has(node.path) ? "●" : dirtyDirs.has(node.path) ? "•" : "");
-                    const markerColor = code ? GIT_COLORS[code] ?? C.yellow : changed.has(node.path) ? C.green : C.yellow;
+                    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 : code ? GIT_COLORS[code] : node.isDir ? C.text : undefined;
+                    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);

package/dist/src/ui/Header.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import path from "path";
 import { Box, Text, useAnimation } from "ink";
 import { C, SPINNER, gradient } from "./theme.js";
-export function Header({ width, branch, changes, model, local, busy }) {
+import { currentVersion } from "../update/index.js";
+const VERSION = `v${currentVersion()}`;
+export 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)), _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: [_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} ` }), " "] })] }));
+    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

@@ -0,0 +1,75 @@
+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 { Pane } from "./Pane.js";
+export const SEVERITY_STYLE = {
+    error: { icon: "✖", color: C.red },
+    warning: { icon: "▲", color: C.yellow },
+    info: { icon: "ℹ", color: C.accent },
+};
+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 rows = useMemo(() => {
+        const list = onlyErrors ? problems.filter((d) => d.severity === "error") : problems;
+        const out = [];
+        let current = "";
+        for (const d of list) {
+            if (d.file !== current) {
+                current = d.file;
+                const inFile = list.filter((x) => x.file === d.file);
+                out.push({
+                    kind: "file",
+                    file: d.file,
+                    errors: inFile.filter((x) => x.severity === "error").length,
+                    warnings: inFile.filter((x) => x.severity === "warning").length,
+                });
+            }
+            out.push({ kind: "problem", d });
+        }
+        return out;
+    }, [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)));
+    }, [wheel?.nonce]);
+    const visibleRows = Math.max(1, height - 4);
+    useInput((input, key) => {
+        if (key.upArrow || input === "k")
+            setCursor((c) => Math.max(0, c - 1));
+        else if (key.downArrow || input === "j")
+            setCursor((c) => Math.min(rows.length - 1, c + 1));
+        else if (key.pageUp)
+            setCursor((c) => Math.max(0, c - visibleRows));
+        else if (key.pageDown)
+            setCursor((c) => Math.min(rows.length - 1, c + visibleRows));
+        else if (input === "e")
+            setOnlyErrors((v) => !v);
+        else if (input === "p" || key.escape)
+            onClose();
+        else if (key.return) {
+            const row = rows[cursor];
+            if (row?.kind === "problem")
+                onJump(row.d.file, row.d.line);
+            else if (row?.kind === "file")
+                onJump(row.file, problems.find((d) => d.file === row.file)?.line ?? 1);
+        }
+    }, { isActive: focused });
+    const errors = problems.filter((d) => d.severity === "error").length;
+    const warnings = problems.filter((d) => d.severity === "warning").length;
+    const start = Math.max(0, Math.min(cursor - Math.floor(visibleRows / 2), rows.length - visibleRows));
+    const title = (_jsxs(_Fragment, { children: [" ", _jsxs(Text, { color: C.red, children: ["\u2716 ", errors] }), "  ", _jsxs(Text, { color: C.yellow, children: ["\u25B2 ", warnings] }), "  Problems", checking.length > 0 && _jsxs(Text, { color: C.accent2, children: ["  ", SPINNER[frame % SPINNER.length], " checking ", checking.join(", ")] }), _jsx(Text, { color: C.dim, children: onlyErrors ? "  (errors only)" : "" })] }));
+    return (_jsxs(Pane, { title: title, width: width, height: height, focused: focused, ...(focused ? { accent: C.red } : {}), children: [_jsxs(Box, { flexDirection: "column", height: visibleRows, children: [rows.length === 0 && (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: C.green, children: checking.length ? "Checking…" : "✓ No problems found" }), _jsx(Text, { color: C.dim, children: "Checked by the syntax parser, plus ESLint, TypeScript, Ruff and language servers when your project has them." })] })), rows.slice(start, start + visibleRows).map((row, i) => {
+                        const selected = focused && start + i === cursor;
+                        const bg = selected ? { backgroundColor: C.panel } : {};
+                        if (row.kind === "file") {
+                            const { icon, color } = fileIcon(row.file);
+                            return (_jsxs(Text, { wrap: "truncate-end", ...bg, children: [_jsx(Text, { color: color, children: icon }), " ", _jsx(Text, { bold: true, color: C.text, children: row.file }), row.errors > 0 && _jsxs(Text, { color: C.red, children: ["  \u2716 ", row.errors] }), row.warnings > 0 && _jsxs(Text, { color: C.yellow, children: ["  \u25B2 ", row.warnings] })] }, `f${row.file}`));
+                        }
+                        const style = SEVERITY_STYLE[row.d.severity];
+                        return (_jsxs(Text, { wrap: "truncate-end", ...bg, children: ["  ", _jsx(Text, { color: style.color, children: style.icon }), _jsxs(Text, { color: C.dim, children: [" ", String(row.d.line).padStart(4), ":", String(row.d.col).padEnd(3), " "] }), _jsx(Text, { ...(selected ? { color: C.text } : {}), children: row.d.message }), _jsxs(Text, { color: C.dim, children: ["  ", row.d.source, row.d.code ? ` ${row.d.code}` : ""] })] }, `${row.d.file}:${row.d.line}:${row.d.col}:${i}`));
+                    })] }), _jsx(Text, { color: C.dim, wrap: "truncate-end", children: " \u2191\u2193 move \u00B7 Enter go to line \u00B7 e errors only \u00B7 p/Esc close" })] }));
+}