@xingjisoft/neutrino 0.1.2 → 0.1.3

package/README.md

@@ -7,6 +7,9 @@ A CLI coding agent that lives in your terminal. Neutrino gives you an interactiv
 - **Interactive terminal UI** — logo screen, chat, model select, history, and settings screens.
 - **Full mouse support** — hover to highlight, click to select/open/position the cursor, wheel to scroll, right-click to go back (like OpenCode).
 - **Select & copy** — drag the mouse over any text (agent output, the input box, menus, …) to select it; releasing the button copies the selection to the clipboard (via OSC 52, with a native fallback).
+- **Paste-friendly input** — like OpenCode, a pasted block has its newlines turned into spaces so it stays one line, and only a manually typed `Enter` submits the message.
+- **Faithful log rendering** — text in the chat log keeps its indentation, blank lines and column alignment; when a long tool-output line wraps, continuation lines stay indented instead of snapping back to the left margin.
+- **Scrollable context log** — a vertical scrollbar is drawn on the right edge of the chat (and the agent-conversation viewer) whenever the conversation is taller than the view. Scroll with the wheel, `PgUp`/`PgDn` or `↑`/`↓`, or grab the scrollbar with the mouse and drag it like in a GUI.
 - **LLM providers** — ships with DeepSeek, OpenAI, and Anthropic presets; works with any OpenAI-compatible endpoint.
 - **Tool calling** — the agent can run shell commands, read files, write files, and list directories in your working directory.
 - **Streaming responses** — token-by-token output with pause/resume (`ESC ESC`).
@@ -48,7 +51,7 @@ Type a message on the start screen and press `Enter` to begin a new chat.
 
 | Keys | Action |
 | --- | --- |
-| `Enter` | Send message / confirm |
+| `Enter` | Send message / confirm (only a manually typed Enter sends) |
 | `←`/`→`, `↑`/`↓` | Move focus / navigate |
 | `Ctrl+E` | Open model config |
 | `Ctrl+B` | Back to menu (from chat) |
@@ -69,6 +72,7 @@ Type a message on the start screen and press `Enter` to begin a new chat.
 | Click and drag | Select text under the rectangle; releasing copies it to the clipboard |
 | Click the header (left of `ⓘ`) | Open the model selector |
 | Click `ⓘ` (chat header) | Toggle token usage stats |
+| Drag the scrollbar | Grab the thumb on the right edge of the chat/log and drag it to scroll |
 | Scroll wheel | Scroll the chat/log, or move through lists |
 | Right-click | Go back (like `Esc`) |
 
@@ -113,9 +117,13 @@ npm test         # build, then run every test below
 Individual tests:
 
 ```sh
+node scripts/test-paste.mjs      # verify pasted newlines are flattened to spaces
 node scripts/test-mouse.mjs      # verify mouse escape-sequence parsing
 node scripts/test-cursor.mjs     # verify click-to-position-cursor math
 node scripts/test-selection.mjs  # verify selection highlighting & text extraction
+node scripts/test-scrollbar.mjs  # verify the conversation scrollbar size/position and drag maths
+node scripts/test-markdown.mjs   # verify markdown/table rendering (incl. ragged rows)
+node scripts/test-wrap.mjs       # verify indentation & spacing are preserved when wrapping
 node scripts/test-render.mjs     # fuzz the diff renderer + render the chat screen,
                                  # asserting no stale/residual cells are left behind
 ```

package/dist/app.js

@@ -6,6 +6,7 @@ import { defaultState } from "./state.js";
 import { loadConfig, saveConfig } from "./config.js";
 import { C } from "./colors.js";
 import { applySelection, selectionText } from "./selection.js";
+import { offsetFromThumbTop, scrollbarGeometry } from "./ui.js";
 import { copyToClipboard } from "./clipboard.js";
 import { ChatScreen } from "./screens/chat.js";
 import { HistoryScreen } from "./screens/history.js";
@@ -37,6 +38,9 @@ export class App {
     // never moves, so it is forwarded to the screen and leaves no selection.
     pressed = false;
     pressStart = null;
+    // Active scrollbar drag: how many rows below the thumb's top the press
+    // landed, so the thumb stays under the pointer as it moves.
+    barDrag = null;
     resizeHandler = () => this.onResize();
     constructor() {
         this.width = process.stdout.columns || 80;
@@ -157,6 +161,14 @@ export class App {
         this.state.cursorOn = true;
     }
     handleEvent(ev) {
+        if (ev.type === "paste") {
+            // Pasted text arrives with its newlines already flattened to spaces, so
+            // it is inserted into the input instead of being submitted.
+            this.resetMouse();
+            this.wakeCursor();
+            this.top?.onPaste(ev.text);
+            return;
+        }
         if (ev.type === "key") {
             const k = ev.key;
             // Any keystroke ends a pending mouse gesture (in case a release was lost).
@@ -194,6 +206,28 @@ export class App {
     handleMouse(ev) {
         if (ev.type === "click") {
             this.wakeCursor();
+            // A left-press on the scrollbar starts a thumb drag rather than a text
+            // selection or a click on the screen behind it.
+            if (ev.button === 0) {
+                const bar = this.top?.scrollbar();
+                if (bar && ev.x >= bar.x && ev.y >= bar.top && ev.y <= bar.bottom) {
+                    const g = scrollbarGeometry(bar.top, bar.bottom, bar.total, bar.viewport, bar.offset);
+                    let grab = ev.y - bar.top - g.thumbTop;
+                    if (grab < 0 || grab >= g.thumbH) {
+                        // Pressed the groove: centre the thumb under the pointer.
+                        grab = Math.floor(g.thumbH / 2);
+                        const thumbTop = Math.max(0, Math.min(ev.y - bar.top - grab, g.maxThumbTop));
+                        bar.scrollTo(offsetFromThumbTop(g, thumbTop));
+                    }
+                    this.barDrag = { grab };
+                    this.pressed = false;
+                    this.pressStart = null;
+                    if (this.state.selection)
+                        this.state.selection = null;
+                    this.render();
+                    return;
+                }
+            }
             this.pressed = true;
             this.pressStart = { x: ev.x, y: ev.y };
             if (this.state.selection) {
@@ -206,6 +240,15 @@ export class App {
             return;
         }
         if (ev.type === "move") {
+            if (this.barDrag) {
+                const bar = this.top?.scrollbar();
+                if (bar) {
+                    const g = scrollbarGeometry(bar.top, bar.bottom, bar.total, bar.viewport, bar.offset);
+                    const thumbTop = Math.max(0, Math.min(ev.y - bar.top - this.barDrag.grab, g.maxThumbTop));
+                    bar.scrollTo(offsetFromThumbTop(g, thumbTop));
+                }
+                return;
+            }
             if (this.pressed && this.pressStart) {
                 const s = this.pressStart;
                 if (ev.x !== s.x || ev.y !== s.y) {
@@ -223,6 +266,7 @@ export class App {
             const sel = this.state.selection;
             this.pressed = false;
             this.pressStart = null;
+            this.barDrag = null;
             if (sel) {
                 if (this.lastBuffer) {
                     const text = selectionText(this.lastBuffer, sel);
@@ -245,6 +289,7 @@ export class App {
     resetMouse() {
         this.pressed = false;
         this.pressStart = null;
+        this.barDrag = null;
     }
     copySelection() {
         const sel = this.state.selection;

package/dist/colors.js

@@ -12,5 +12,7 @@ export const C = {
     red: [247, 118, 142],
     codeBg: [27, 35, 49], // dark blue-grey used behind code blocks
     selection: [56, 92, 138], // muted blue used to highlight selected text
+    scrollTrack: [45, 58, 62], // dim groove behind the scrollbar thumb
+    scrollThumb: [130, 142, 190], // draggable scrollbar thumb
 };
 export const EMPTY_STYLE = {};

package/dist/markdown.js

@@ -566,7 +566,7 @@ function renderTable(t, width) {
             for (let c = 0; c < nCols; c++) {
                 if (c === 0)
                     spans.push({ text: "│ ", style: borderStyle });
-                const cellLine = wrapped[c][li]?.spans ?? [];
+                const cellLine = wrapped[c]?.[li]?.spans ?? [];
                 for (const s of cellLine) {
                     spans.push(isHeader ? { ...s, style: { ...s.style, bold: true } } : s);
                 }

package/dist/screens/agentConversation.js

@@ -1,7 +1,7 @@
 import { Screen } from "../terminal/screen.js";
 import { C } from "../colors.js";
 import { drawHeader } from "../header.js";
-import { drawHint } from "../ui.js";
+import { drawHint, drawScrollbar } from "../ui.js";
 import { drawSpans, renderMarkdownText } from "../markdown.js";
 import { ellipsize } from "../width.js";
 export class AgentConversationScreen extends Screen {
@@ -9,6 +9,7 @@ export class AgentConversationScreen extends Screen {
     messages;
     scrollTop = 0;
     followBottom = true;
+    scrollbarGeom = null;
     constructor(title, messages) {
         super();
         this.title = title;
@@ -52,6 +53,25 @@ export class AgentConversationScreen extends Screen {
             this.app.popScreen();
         }
     }
+    scrollbar() {
+        const g = this.scrollbarGeom;
+        if (!g || g.total <= g.viewport)
+            return null;
+        return {
+            x: g.x,
+            top: g.top,
+            bottom: g.bottom,
+            total: g.total,
+            viewport: g.viewport,
+            offset: this.scrollTop,
+            scrollTo: (offset) => {
+                const maxScroll = Math.max(0, g.total - g.viewport);
+                this.scrollTop = Math.max(0, Math.min(offset, maxScroll));
+                this.followBottom = this.scrollTop >= maxScroll;
+                this.app.render();
+            },
+        };
+    }
     buildLines(width) {
         const lines = [];
         for (const m of this.messages) {
@@ -85,12 +105,19 @@ export class AgentConversationScreen extends Screen {
         }
         if (this.scrollTop < 0)
             this.scrollTop = 0;
+        // Expose the bar so the app can drag it (see the scrollbar() method).
+        this.scrollbarGeom =
+            lines.length > viewH
+                ? { x: w - 1, top: logTop, bottom: logBottom, total: lines.length, viewport: viewH }
+                : null;
         for (let y = logTop; y <= logBottom; y++) {
             const li = this.scrollTop + (y - logTop);
             if (li >= lines.length)
                 break;
             drawSpans(buf, 2, y, lines[li].spans, Math.max(4, w - 4));
         }
-        drawHint(buf, h - 1, "↑/↓ scroll  ·  wheel scroll  ·  right-click back  ·  Esc back");
+        // Scrollbar on the right edge, visible only when the log overflows.
+        drawScrollbar(buf, w - 1, logTop, logBottom, lines.length, viewH, this.scrollTop);
+        drawHint(buf, h - 1, "↑/↓ scroll  ·  wheel or drag the bar  ·  right-click back  ·  Esc back");
     }
 }

package/dist/screens/chat.js

@@ -2,7 +2,7 @@ import { Screen } from "../terminal/screen.js";
 import { C } from "../colors.js";
 import { loadPrompt, saveSession, } from "../config.js";
 import { drawHeader } from "../header.js";
-import { computeInputWindow, cursorFromColumn, drawInputBox, wrapText } from "../ui.js";
+import { computeInputWindow, cursorFromColumn, drawInputBox, drawScrollbar, wrapText } from "../ui.js";
 import { drawSpans, renderMarkdownText } from "../markdown.js";
 import { ellipsize, displayWidth } from "../width.js";
 import { LLMClient } from "../llm/client.js";
@@ -42,6 +42,7 @@ export class ChatScreen extends Screen {
     cursor = 0;
     scrollTop = 0;
     followBottom = true;
+    scrollbarGeom = null;
     lastEscTime = 0;
     initialized = false;
     constructor(initialMessage = "") {
@@ -82,6 +83,16 @@ export class ChatScreen extends Screen {
         // The chat input is always focused; a cursor is drawn when it holds text.
         return this.inputValue.length > 0;
     }
+    onPaste(text) {
+        if (!text)
+            return;
+        if (this.showInfo)
+            this.showInfo = false;
+        this.inputValue =
+            this.inputValue.slice(0, this.cursor) + text + this.inputValue.slice(this.cursor);
+        this.cursor += text.length;
+        this.app.render();
+    }
     onKey(key) {
         if (this.showInfo) {
             this.showInfo = false;
@@ -237,6 +248,26 @@ export class ChatScreen extends Screen {
             this.app.render();
         }
     }
+    scrollbar() {
+        const g = this.scrollbarGeom;
+        if (!g || g.total <= g.viewport)
+            return null;
+        return {
+            x: g.x,
+            top: g.top,
+            bottom: g.bottom,
+            total: g.total,
+            viewport: g.viewport,
+            offset: this.scrollTop,
+            scrollTo: (offset) => {
+                const maxScroll = Math.max(0, g.total - g.viewport);
+                this.scrollTop = Math.max(0, Math.min(offset, maxScroll));
+                // Dragging to the very bottom resumes auto-following new output.
+                this.followBottom = this.scrollTop >= maxScroll;
+                this.app.render();
+            },
+        };
+    }
     togglePause() {
         if (!this.busy && !this.queued)
             return;
@@ -463,12 +494,21 @@ export class ChatScreen extends Screen {
         }
         if (this.scrollTop < 0)
             this.scrollTop = 0;
+        // Remember the bar's geometry so a drag on the last column can scroll the
+        // log (see the scrollbar() method).
+        this.scrollbarGeom =
+            lines.length > viewH
+                ? { x: w - 1, top: logTop, bottom: logBottom, total: lines.length, viewport: viewH }
+                : null;
         for (let y = logTop; y <= logBottom; y++) {
             const li = this.scrollTop + (y - logTop);
             if (li >= lines.length)
                 break;
             drawSpans(buf, 2, y, lines[li].spans, Math.max(4, w - 4));
         }
+        // A scrollbar on the right edge of the log, shown only when the
+        // conversation overflows the visible area.
+        drawScrollbar(buf, w - 1, logTop, logBottom, lines.length, viewH, this.scrollTop);
         const inW = Math.max(12, w - 2);
         drawInputBox(buf, 1, inputY, inW, this.inputValue, this.cursor, {
             active: true,

package/dist/screens/start.js

@@ -22,6 +22,17 @@ export class StartScreen extends Screen {
         // The input cursor is only drawn for the focused, non-empty input box.
         return this.focusIdx === 0 && this.inputValue.length > 0;
     }
+    onPaste(text) {
+        if (!text)
+            return;
+        // A paste always targets the message box, so focus it first.
+        this.focusIdx = 0;
+        this.hoverIdx = -1;
+        this.inputValue =
+            this.inputValue.slice(0, this.cursor) + text + this.inputValue.slice(this.cursor);
+        this.cursor += text.length;
+        this.app.render();
+    }
     onKey(key) {
         // When the input box is focused and holds text, left/right move the text
         // cursor instead of switching between the input box and the tabs. When the

package/dist/terminal/input.js

@@ -1,11 +1,44 @@
 import process from "node:process";
 const ESC_TIMEOUT = 30;
+// Bracketed paste: once enabled, the terminal wraps pasted text in
+// ESC [ 2 0 0 ~ ... ESC [ 2 0 1 ~ so a paste can be told apart from typing.
+const PASTE_START = "\x1b[200~";
+const PASTE_END = "\x1b[201~";
+/** Flatten a pasted blob so its line breaks become ordinary spaces. */
+function flattenNewlines(s) {
+    return s.replace(/\r\n|\r|\n/g, " ");
+}
+/**
+ * Heuristic used when a terminal does not speak bracketed paste: a chunk of raw
+ * input counts as a paste when it carries a line break that is not merely the
+ * chunk's trailing one. A single line break at the very end is a manual Enter,
+ * and an all-whitespace chunk is just repeated Enter/space presses.
+ */
+function looksLikePaste(s) {
+    const body = s.replace(/(\r\n|\r|\n)$/, "");
+    if (!/\r|\n/.test(body))
+        return false;
+    if (/^\s*$/.test(s))
+        return false;
+    return true;
+}
+/** Length of the longest suffix of `s` that prefixes `marker` (0 if none). */
+function partialMarkerLength(s, marker) {
+    const max = Math.min(s.length, marker.length - 1);
+    for (let len = max; len > 0; len--) {
+        if (s.slice(s.length - len) === marker.slice(0, len))
+            return len;
+    }
+    return 0;
+}
 export class InputReader {
     decoder = new TextDecoder("utf-8");
     pending = "";
     state = "normal";
     csiBuf = "";
     escTimer = null;
+    inPaste = false;
+    pasteBuf = "";
     handler = null;
     dataHandler = (chunk) => this.onData(chunk);
     start(handler) {
@@ -31,8 +64,34 @@ export class InputReader {
     }
     process() {
         const s = this.pending;
+        // An unwrapped multi-line paste (terminals without bracketed-paste support
+        // deliver the raw text). Flatten it so the whole paste stays on one line
+        // and nothing gets submitted — only a manual Enter submits.
+        if (!this.inPaste && this.state === "normal" && !s.includes(PASTE_START) && looksLikePaste(s)) {
+            this.pending = "";
+            this.emitPaste(flattenNewlines(s));
+            return;
+        }
         let i = 0;
         while (i < s.length) {
+            if (this.inPaste) {
+                const end = s.indexOf(PASTE_END, i);
+                if (end === -1) {
+                    // No terminator yet: buffer what we have, holding back a possible
+                    // partial terminator so it can be matched with the next chunk.
+                    const rest = s.slice(i);
+                    const keep = partialMarkerLength(rest, PASTE_END);
+                    this.pasteBuf += rest.slice(0, rest.length - keep);
+                    this.pending = rest.slice(rest.length - keep);
+                    return;
+                }
+                this.pasteBuf += s.slice(i, end);
+                this.inPaste = false;
+                this.emitPaste(flattenNewlines(this.pasteBuf));
+                this.pasteBuf = "";
+                i = end + PASTE_END.length;
+                continue;
+            }
             const c = s[i];
             if (this.state === "normal") {
                 if (c === "\x1b") {
@@ -44,7 +103,8 @@ export class InputReader {
                 const code = c.charCodeAt(0);
                 if (c === "\r" || c === "\n") {
                     this.emitKey("return", false, false, false, c);
-                    i++;
+                    // A CRLF pair is one Return, not two.
+                    i += c === "\r" && s[i + 1] === "\n" ? 2 : 1;
                     continue;
                 }
                 if (c === "\t") {
@@ -153,6 +213,15 @@ export class InputReader {
                 this.emitKey("home", false, false, false, "\x1b[1~");
             else if (param === "4" || param === "8")
                 this.emitKey("end", false, false, false, "\x1b[4~");
+            else if (param === "200") {
+                // Start of a bracketed paste.
+                this.inPaste = true;
+                this.pasteBuf = "";
+            }
+            else if (param === "201") {
+                // End marker without a preceding start: ignore.
+                this.inPaste = false;
+            }
         }
     }
     /**
@@ -207,6 +276,11 @@ export class InputReader {
             },
         });
     }
+    emitPaste(text) {
+        if (!this.handler || !text)
+            return;
+        this.handler({ type: "paste", text });
+    }
     emitMouse(event) {
         if (!this.handler)
             return;

package/dist/terminal/renderer.js

@@ -50,8 +50,10 @@ export class Renderer {
         this.write("\x1b[?1049h"); // alternate screen
         this.write("\x1b[?25l"); // hide cursor
         this.write("\x1b[?1000h\x1b[?1002h\x1b[?1003h\x1b[?1006h\x1b[?1015h"); // mouse tracking (incl. any-event for hover)
+        this.write("\x1b[?2004h"); // bracketed paste (so pastes can be told apart from typing)
     }
     dispose() {
+        this.write("\x1b[?2004l");
         this.write("\x1b[?1000l\x1b[?1002l\x1b[?1003l\x1b[?1006l\x1b[?1015l");
         this.write("\x1b[?25h");
         this.write("\x1b[?1049l");

package/dist/terminal/screen.js

@@ -1,6 +1,20 @@
 export class Screen {
     app;
     onMouse(_ev) { }
+    /**
+     * Describe the on-screen scrollbar so the app can drag it, or null when this
+     * screen has none / its content fits. Geometry is only valid right after a
+     * render, which is exactly when the app needs it.
+     */
+    scrollbar() {
+        return null;
+    }
+    /**
+     * Handle a bracketed (or detected) paste. `text` already has its newlines
+     * flattened to spaces, so it can be inserted as a single line. Screens that
+     * have no text input can leave this as a no-op.
+     */
+    onPaste(_text) { }
     /** Whether this screen currently shows a blinking text cursor. Used by the
      *  app to run (or stop) the cursor blink timer. */
     showsCursor() {

package/dist/ui.js

@@ -23,52 +23,78 @@ function chunkByWidth(text, width) {
 export function wrapText(text, width) {
     if (width <= 0)
         width = 1;
-    const lines = [];
-    for (const para of text.split("\n")) {
+    const out = [];
+    const paragraphs = text.replace(/\r\n?/g, "\n").split("\n");
+    for (const para of paragraphs) {
         if (para.length === 0) {
-            lines.push("");
+            out.push("");
             continue;
         }
-        let line = "";
-        let lineW = 0;
-        for (const word of para.split(" ")) {
-            const wordW = displayWidth(word);
-            if (line.length === 0) {
-                if (wordW <= width) {
-                    line = word;
-                    lineW = wordW;
-                }
-                else {
-                    const chunks = chunkByWidth(word, width);
-                    for (let i = 0; i < chunks.length - 1; i++)
-                        lines.push(chunks[i]);
-                    line = chunks[chunks.length - 1];
-                    lineW = displayWidth(line);
-                }
-                continue;
+        // Preserve the original indentation. Continuation lines reuse it so
+        // wrapped command output / code keeps its nesting instead of being
+        // flattened to the left margin.
+        const leadMatch = para.match(/^[ \t]*/);
+        const leadRaw = leadMatch ? leadMatch[0] : "";
+        const indent = leadRaw.replace(/\t/g, "  ");
+        const indentW = displayWidth(indent);
+        const body = para.slice(leadRaw.length);
+        // Split into words and the whitespace runs between them so runs of spaces
+        // (alignment padding in command output) are kept verbatim rather than
+        // collapsed to a single space.
+        const parts = body.match(/\s+|\S+/g) ?? [];
+        let line = indent;
+        let lineW = indentW;
+        let hasContent = false;
+        // Whitespace seen since the last word. It is only emitted together with
+        // the next word, so a line break never leaves trailing blanks behind.
+        let pending = "";
+        const newLine = () => {
+            out.push(line);
+            line = " ".repeat(indentW);
+            lineW = indentW;
+            hasContent = false;
+        };
+        const placeWord = (word) => {
+            const gap = hasContent ? pending : "";
+            pending = "";
+            const gapW = displayWidth(gap);
+            const w = displayWidth(word);
+            if (lineW + gapW + w <= width) {
+                line += gap + word;
+                lineW += gapW + w;
+                hasContent = true;
+                return;
             }
-            if (lineW + 1 + wordW <= width) {
-                line += " " + word;
-                lineW += 1 + wordW;
+            // Does not fit: break the line and drop the gap that caused the break.
+            if (hasContent)
+                newLine();
+            if (lineW + w <= width) {
+                line += word;
+                lineW += w;
+                hasContent = true;
+                return;
             }
-            else {
-                lines.push(line);
-                if (wordW <= width) {
-                    line = word;
-                    lineW = wordW;
-                }
-                else {
-                    const chunks = chunkByWidth(word, width);
-                    for (let i = 0; i < chunks.length - 1; i++)
-                        lines.push(chunks[i]);
-                    line = chunks[chunks.length - 1];
-                    lineW = displayWidth(line);
-                }
+            // Word is wider than an entire line: hard-wrap it by columns.
+            const avail = Math.max(1, width - lineW);
+            const chunks = chunkByWidth(word, avail);
+            for (let i = 0; i < chunks.length - 1; i++) {
+                line += chunks[i];
+                newLine();
+            }
+            line += chunks[chunks.length - 1];
+            lineW += displayWidth(chunks[chunks.length - 1]);
+            hasContent = true;
+        };
+        for (const part of parts) {
+            if (/^\s+$/.test(part)) {
+                pending += part.replace(/\t/g, "  ");
+                continue;
             }
+            placeWord(part);
         }
-        lines.push(line);
+        out.push(line);
     }
-    return lines;
+    return out;
 }
 /**
  * Compute which part of the input value is visible inside the box, given the
@@ -137,6 +163,44 @@ export function drawHint(buf, y, text) {
     const t = displayWidth(text) <= max ? text : truncateByWidth(text, max - 1) + "…";
     buf.centerText(y, t, { fg: C.dim });
 }
+/**
+ * Geometry of a vertical scrollbar, shared by the drawing code and the app's
+ * hit-testing / dragging so the two can never disagree.
+ */
+export function scrollbarGeometry(top, bottom, total, viewport, offset) {
+    const trackH = Math.max(0, bottom - top + 1);
+    const thumbH = Math.max(1, Math.round((trackH * viewport) / total));
+    const maxThumbTop = Math.max(0, trackH - thumbH);
+    const maxOffset = Math.max(1, total - viewport);
+    const clamped = Math.max(0, Math.min(offset, maxOffset));
+    const thumbTop = maxThumbTop === 0 ? 0 : Math.round((maxThumbTop * clamped) / maxOffset);
+    return { trackH, thumbH, maxThumbTop, maxOffset, thumbTop };
+}
+/**
+ * Inverse of the thumb positioning above: the scroll offset that places the
+ * thumb's top at 'thumbTop'. Used while dragging the thumb; feeding the result
+ * back through scrollbarGeometry reproduces the same 'thumbTop'.
+ */
+export function offsetFromThumbTop(g, thumbTop) {
+    if (g.maxThumbTop === 0)
+        return 0;
+    const t = Math.max(0, Math.min(thumbTop, g.maxThumbTop));
+    return Math.round((g.maxOffset * t) / g.maxThumbTop);
+}
+export function drawScrollbar(buf, x, top, bottom, total, viewport, offset, opts = {}) {
+    const trackH = bottom - top + 1;
+    if (trackH <= 0 || x < 0 || x >= buf.width)
+        return;
+    if (total <= viewport || viewport <= 0)
+        return; // nothing to scroll: hide it
+    const trackColor = opts.track ?? C.scrollTrack;
+    const thumbColor = opts.thumb ?? C.scrollThumb;
+    const g = scrollbarGeometry(top, bottom, total, viewport, offset);
+    for (let i = 0; i < g.trackH; i++) {
+        const isThumb = i >= g.thumbTop && i < g.thumbTop + g.thumbH;
+        buf.set(x, top + i, isThumb ? "█" : "│", { fg: isThumb ? thumbColor : trackColor });
+    }
+}
 export function drawInputBox(buf, x, y, w, value, cursorPos, opts = {}) {
     const active = opts.active ?? true;
     const dimmed = opts.dimmed ?? false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingjisoft/neutrino",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "XINGJI Neutrino - a CLI coding agent in the terminal.",
   "type": "module",
   "license": "Apache-2.0",
@@ -17,7 +17,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "test": "npm run build && node scripts/test-mouse.mjs && node scripts/test-cursor.mjs && node scripts/test-selection.mjs && node scripts/test-render.mjs",
+    "test": "npm run build && node scripts/test-paste.mjs && node scripts/test-mouse.mjs && node scripts/test-cursor.mjs && node scripts/test-selection.mjs && node scripts/test-scrollbar.mjs && node scripts/test-render.mjs && node scripts/test-markdown.mjs && node scripts/test-wrap.mjs",
     "prepare": "npm run build"
   },
   "keywords": [