dsh-neotui 0.0.1 → 0.0.3

package/README.md

@@ -10,14 +10,29 @@ dsh plugin --profile dsh-neotui add dsh-neotui-app   # 装 bundle，自动加入
 dsh --profile dsh-neotui                   # 启动
 ```
 
-## 运行
+## 本地开发（从源码跑）
+
+克隆后先自链核心包（app bundle 通过包名 `dsh-neotui` 引核心，Node 会从真实路径向上找 `node_modules`）：
+
+```bash
+ln -sfn .. node_modules/dsh-neotui        # 仓库根自链，让 app/src 能 import "dsh-neotui"
+```
+
+然后把 profile 的两条软链指到本仓库（`~/.dsh/profiles/node_modules/`）：
+
+```bash
+ln -sfn "$(pwd)"        ~/.dsh/profiles/node_modules/dsh-neotui
+ln -sfn "$(pwd)/app"    ~/.dsh/profiles/node_modules/dsh-neotui-app
+```
+
+启动（本地开发 profile `~/.dsh/profiles/dsh-neotui`）：
 
 ```bash
-dsh --profile dsh-neotui                   # 本地开发 profile（~/.dsh/profiles/dsh-neotui，软链到本仓库）
-dsh --profile dsh-neotui --session <id>    # 启动即打开某会话
-dsh --profile dsh-neotui --cwd ~/work      # 新建会话的默认目录
-dsh --profile dsh-neotui --port 3981       # 内嵌 API 指定端口（默认 0 = 系统分配）
-dsh --profile dsh-neotui --attach 3080     # 共存调试：连已运行的 web 宿主（存储自动隔离，不碰 $DSH_HOME）
+dsh --profile dsh-neotui
+dsh --profile dsh-neotui --session <id>
+dsh --profile dsh-neotui --cwd ~/work
+dsh --profile dsh-neotui --port 3981
+dsh --profile dsh-neotui --attach 3080     # 共存调试：连已运行的 web 宿主（存储隔离，不碰 $DSH_HOME）
 
 node bin/dsh-tui.js                        # 纯客户端模式：连接已运行的 web 宿主（默认 3080）
 node bin/dsh-tui.js --base http://host:port

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-neotui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Neo-TUI: mouse-driven terminal UI client for DeepSeek Harness (B-tier per dsh-tui-design.md)",
   "type": "module",
   "bin": { "dsh-neotui": "bin/dsh-tui.js" },

package/src/panels.js

@@ -393,10 +393,16 @@ export class WorkspacePanel extends Widget {
       };
       walk(this.tree);
       this.searchResults = results;
-      for (let i = 0; i < Math.min(this.h - 2, results.length); i++) {
-        const sel = i === this.searchSel;
+      const visH = Math.max(1, this.h - 2);
+      if (this.searchSel < (this.searchScroll ?? 0)) this.searchScroll = this.searchSel;
+      else if (this.searchSel >= (this.searchScroll ?? 0) + visH) this.searchScroll = this.searchSel - visH + 1;
+      this.searchScroll = Math.max(0, Math.min(Math.max(0, results.length - visH), this.searchScroll ?? 0));
+      for (let i = 0; i < visH; i++) {
+        const idx = this.searchScroll + i;
+        if (idx >= results.length) break;
+        const sel = idx === this.searchSel;
         screen.fillRect(this.x + 1, this.y + 2 + i, mid - 2, this.y + 2 + i, " ", { bg: sel ? K.MENUSEL : -1 });
-        screen.text(this.x + 2, this.y + 2 + i, truncate("⚲ " + basename(results[i]), mid - 6), { fg: sel ? K.BOLD : K.TXT, bg: sel ? K.MENUSEL : -1 });
+        screen.text(this.x + 2, this.y + 2 + i, truncate("⚲ " + basename(results[idx]), mid - 6), { fg: sel ? K.BOLD : K.TXT, bg: sel ? K.MENUSEL : -1 });
       }
       screen.text(this.x + 1, this.y + this.h - 1, ` 匹配 ${results.length} 个文件 · Esc 退出搜索`, { fg: K.FAINT });
       return;
@@ -496,6 +502,15 @@ export class TrajectoryPanel extends Widget {
     this.buildLines();
   }
   async load(sessionId) {
+    // Re-entry into the same session reuses the already-built steps — instant,
+    // like the web view (which keeps its timeline in memory). A fresh session
+    // or an explicit refresh (r) re-fetches the recent window.
+    if (this.sessionId === sessionId && this.steps.length > 0) {
+      this.loading = false;
+      this.buildLines();
+      this.app.redraw();
+      return;
+    }
     this.sessionId = sessionId;
     this.loading = true;
     this.steps = [];
@@ -506,8 +521,8 @@ export class TrajectoryPanel extends Widget {
     this.app.setStatus("加载轨迹…");
     try {
       // One bounded call for the recent steps (maxMessages = model messages =
-      // steps). Instant, and older steps load on demand via PgUp/click.
-      const h = await this.app.api.call("session.history", { sessionId, maxMessages: 40 });
+      // steps). Older steps load on demand via PgUp/click.
+      const h = await this.app.api.call("session.history", { sessionId, maxMessages: 20 });
       this.stats = h.projections?.values?.sessionStats ?? null;
       this.minSeq = h.events[0]?.event?.seq ?? null;
       this.hasMore = h.hasMore;
@@ -557,7 +572,7 @@ export class TrajectoryPanel extends Widget {
   buildLines() {
     const w = Math.max(40, this.w - 2);
     const lines = [];
-    lines.push([{ t: "轨迹 — 步骤时间轴（每行一个色块，点击查看详情）", fg: K.ACCENT, bold: true }]);
+    lines.push([{ t: "轨迹 — 步骤时间轴（每行一个色块，点击查看详情 · r 刷新）", fg: K.ACCENT, bold: true }]);
     if (this.hasMore) lines.push([{ t: "▲ 更早步骤（点击 / PgUp 加载）", fg: K.FAINT }]);
     else lines.push([{ t: "" }]);
     const st = this.stats;
@@ -609,6 +624,7 @@ export class TrajectoryPanel extends Widget {
       return true;
     }
     if (ev.name === "backspace") { this.query = this.query.slice(0, -1); this.buildLines(); this.app.redraw(); return true; }
+    if (ev.name === "char" && ev.key === "r" && !ev.ctrl) { this.steps = []; this.load(this.sessionId); return true; }
     if (ev.name === "pgup") { if (this.view.scrollY === 0 && this.hasMore) { this.loadOlder(); return true; } return this.view.scroll(-this.view.h); }
     if (ev.name === "pgdn" || ev.name === "up" || ev.name === "down") return this.view.onKey(ev);
     return false;
@@ -771,6 +787,7 @@ export class ControlPanel extends Widget {
     this.subPages = ["常规", "插件"];
     this.subPage = 0;
     this.sel = 0;
+    this.scroll = 0;
     this.commands = DEFAULT_COMMANDS;
     this.plugins = null;
     this.pluginError = null;
@@ -874,9 +891,15 @@ export class ControlPanel extends Widget {
     }
     const items = this.items();
     if (this.sel >= items.length) this.sel = Math.max(0, items.length - 1);
-    for (let i = 0; i < Math.min(this.h - 3, items.length); i++) {
-      const it = items[i];
-      const sel = i === this.sel;
+    const visible = Math.max(1, this.h - 3);
+    if (this.sel < this.scroll) this.scroll = this.sel;
+    else if (this.sel >= this.scroll + visible) this.scroll = this.sel - visible + 1;
+    this.scroll = Math.max(0, Math.min(Math.max(0, items.length - visible), this.scroll));
+    for (let i = 0; i < visible; i++) {
+      const idx = this.scroll + i;
+      const it = items[idx];
+      if (!it) { s.hline(this.x + 1, this.x + this.w - 2, this.y + 2 + i, " ", { bg: T.PANEL }); continue; }
+      const sel = idx === this.sel;
       s.fillRect(this.x + 1, this.y + 2 + i, this.x + this.w - 2, this.y + 2 + i, " ", { bg: sel ? T.MENUSEL : T.PANEL });
       const label = it[0];
       s.text(this.x + 2, this.y + 2 + i, truncate(label, this.w - 34), { fg: sel ? T.BOLD : (this.page === 0 ? T.ACCENT : T.TXT), bg: sel ? T.MENUSEL : T.PANEL, attrs: sel ? 1 : 0 });
@@ -937,9 +960,9 @@ export class ControlPanel extends Widget {
         }
         return true;
       }
-      const idx = ev.y - this.y - 2;
+      const idx = this.scroll + (ev.y - this.y - 2);
       const items = this.items();
-      if (idx >= 0 && idx < items.length && idx < this.h - 3) {
+      if (idx >= 0 && idx < items.length && (ev.y - this.y - 2) < this.h - 3) {
         this.sel = idx;
         const it = items[idx];
         if (it && it[2]) { it[2](); this.app.redraw(); }

package/src/term.js

@@ -44,7 +44,8 @@ export class Term {
     this.input.on("data", (chunk) => this.#feed(this.decoder.write(chunk)));
     const o = this.output;
     o.write("\x1b[?1049h"); // alt screen
-    o.write("\x1b[?25l");   // hide cursor
+    o.write("\x1b[?25l");   // hide cursor (shown only over the focused input)
+    o.write("\x1b[5 q");    // DECSCUSR: blinking vertical bar caret
     o.write("\x1b[?1000h"); // mouse: clicks
     o.write("\x1b[?1002h"); // mouse: drag
     o.write("\x1b[?1003h"); // mouse: all motion
@@ -128,7 +129,13 @@ export class Term {
           if (cp === 13) this.#emit({ type: "key", name: "enter", ctrl: false, alt: true, shift: false });
           else this.#emit({ type: "key", name: "char", key: next.toLowerCase(), text: next, ctrl: false, alt: true, shift: false });
           i += 2;
-        } else { i = buf.length; break; }
+        } else {
+          // Lone ESC at end of buffer = the standalone Escape key. Terminals
+          // deliver escape sequences atomically, so a bare \x1b is never the
+          // head of a sequence that will arrive in a later chunk.
+          this.#emit({ type: "key", name: "escape", ctrl: false, alt: false, shift: false });
+          i++;
+        }
       } else if (ch === "\r") {
         this.#emit({ type: "key", name: "enter", ctrl: false, alt: false, shift: false });
         i++;

package/src/views.js

@@ -528,6 +528,7 @@ export class ChatView extends Widget {
     this.collapsedBlocks = new Set(); // per-block COLLAPSE (default expanded): `${realIdx}:${bi}`
     this.thinkMode = "expanded";        // think blocks: expanded by default (t toggles)
     this.bashMode = "expanded";         // tool blocks: expanded | collapsed (b toggles)
+    this.todosVisible = true;           // todo block above the input (Shift+T toggles)
     this.running = false;
     this.hasMore = false;
     this.loadingOlder = false;
@@ -679,12 +680,20 @@ export class ChatView extends Widget {
     }
   }
 
+  /** Height of the collapsible todo block (0 when empty or collapsed). */
+  #todoHeight() {
+    const todos = this.app.todos;
+    if (!this.todosVisible || !todos || todos.length === 0) return 0;
+    return Math.min(todos.length, 6) + 1; // 1 header row + up to 6 todos
+  }
+
   #inputChanged() {
     // Multi-line input grew/shrunk → reflow view vs input, keep the tail visible.
     const ih = this.input.height();
     const prevIh = this.input.h;
     this.input.h = ih;
-    this.view.h = this.h - ih - 1;
+    const th = this.#todoHeight();
+    this.view.h = this.h - ih - th - 1;
     this.input.y = this.y + this.h - ih;
     if (ih !== prevIh) this.app.layout();
     this.app.redraw();
@@ -694,7 +703,8 @@ export class ChatView extends Widget {
     this.x = x; this.y = y; this.w = w; this.h = h;
     const ih = this.input.height();
     this.input.h = ih;
-    this.view.x = x; this.view.y = y; this.view.w = w; this.view.h = h - ih - 1;
+    const th = this.#todoHeight();
+    this.view.x = x; this.view.y = y; this.view.w = w; this.view.h = h - ih - th - 1;
     this.input.x = x; this.input.y = y + h - ih; this.input.w = w;
     this.cache.clear();
     this.#rebuild();
@@ -1107,10 +1117,27 @@ export class ChatView extends Widget {
         screen.invertRect(this.view.x, this.view.y + (y0 - this.view.scrollY), this.view.x + this.view.w - 2, this.view.y + (y1 - this.view.scrollY));
       }
     }
+    this.#renderTodos(screen);
     screen.hline(this.x, this.x + this.w - 1, this.input.y - 1, "─", { fg: T.BORDER2 });
     this.input.render(screen);
   }
 
+  /** Collapsible todo block between the view and the input (Shift+T toggles). */
+  #renderTodos(screen) {
+    const th = this.#todoHeight();
+    if (th === 0) return;
+    const todos = this.app.todos ?? [];
+    const y = this.input.y - th - 1;
+    screen.fillRect(this.x, y, this.x + this.w - 1, y + th - 1, " ", { bg: T.THINKBG });
+    screen.text(this.x, y, " ☐ 任务清单（Shift+T 折叠）", { fg: K.FAINT });
+    for (let i = 0; i < Math.min(todos.length, th - 1); i++) {
+      const t = todos[i];
+      const icon = t.status === "completed" ? "✓" : t.status === "in_progress" ? "◉" : "○";
+      const color = t.status === "completed" ? T.FAINT : t.status === "in_progress" ? T.WARN : T.DIM;
+      screen.text(this.x + 2, y + 1 + i, `${icon} ${truncate(t.content ?? String(t), this.w - 6)}`, { fg: color });
+    }
+  }
+
   onMouse(ev) {
     if (this.input.inside(ev.x, ev.y)) {
       // INSERT mode is keyboard-only; only position the cursor if already there.
@@ -1213,6 +1240,12 @@ export class ChatView extends Widget {
       return true;
     }
     if (ev.name === "char" && ev.key === "t" && !ev.ctrl) {
+      if (ev.shift) {
+        this.todosVisible = !this.todosVisible;
+        this.app.toast(this.todosVisible ? "任务块：显示（Shift+T 折叠）" : "任务块：折叠（Shift+T 展开）");
+        this.#inputChanged();
+        return true;
+      }
       this.thinkMode = this.thinkMode === "collapsed" ? "expanded" : "collapsed";
       this.expanded.clear();
       this.collapsedBlocks.clear();
@@ -1227,12 +1260,16 @@ export class ChatView extends Widget {
 function toolSummary(b) {
   // Prefer the human description of what the tool did (the agent's `description`
   // argument), then the host card title, then the raw command — mirrors the web.
+  // File tools get a path-based summary so read/edit collapse as concisely as bash.
   if (b.args) {
     try {
       const a = JSON.parse(b.args);
       if (typeof a === "object" && a !== null) {
-        const desc = a.description ?? a.summary ?? a.title ?? a.path ?? a.query ?? a.content ?? a.name;
+        const desc = a.description ?? a.summary ?? a.title ?? a.query ?? a.content ?? a.name;
         if (desc) return String(desc).slice(0, 120);
+        if (a.file_path) return `read ${String(a.file_path)}`.slice(0, 120);
+        if (a.path && a.command) return `${a.command} ${String(a.path)}`.slice(0, 120);
+        if (a.path) return String(a.path).slice(0, 120);
         return a.command ?? null;
       }
       return String(a).slice(0, 120);
@@ -1511,10 +1548,18 @@ export class App {
   setJobs(jobs) { this.jobs = jobs; this.layout(); this.redraw(); }
 
   #startPolling() {
-    this.pollTimer = setInterval(() => {
+    // Self-rescheduling so the interval actually tracks run state (a fixed
+    // setInterval would freeze at the idle 1500ms forever).
+    let ticks = 0;
+    const tick = () => {
       if (this.chat.sessionId) this.chat.pollTail();
-      this.refreshSessions();
-    }, this.chat.pollSlow ? 2000 : (this.chat.running ? 500 : 1500));
+      // session.list is expensive (~100ms); refresh the sidebar every ~5s, not
+      // on every streaming poll.
+      if (ticks++ % 10 === 0) this.refreshSessions();
+      const delay = this.chat.pollSlow ? 2000 : (this.chat.running ? 500 : 1500);
+      this.pollTimer = setTimeout(tick, delay);
+    };
+    this.pollTimer = setTimeout(tick, 500);
   }
 
   async init() {
@@ -2007,9 +2052,6 @@ export class App {
       tx += strWidth(seg);
     }
     if (this.currentSession == null) s.text(x + w - 16, 0, "未选会话", { fg: T.FAINT, bg: T.PANEL });
-    const modeLabel = this.focused === this.chat?.input ? " INSERT " : " NORMAL ";
-    const modeColor = this.focused === this.chat?.input ? T.OK : T.FAINT;
-    s.text(x + w - strWidth(modeLabel), 0, modeLabel, { fg: modeColor, bg: T.PANEL, attrs: 1 });
   }
 
   #clickTab(px) {
@@ -2135,6 +2177,19 @@ export class App {
     }
     // global keys
     if (ev.type === "key") {
+      // INSERT mode: Esc exits, everything else goes to the input for editing.
+      // Global shortcuts (Ctrl+P, Ctrl+B, F7, …) are disabled here so plain
+      // typing and Ctrl+J / Shift+Enter newlines behave like a normal editor.
+      if (this.focused === this.chat.input) {
+        if (ev.name === "escape") {
+          this.focus(this.chat);
+          this.toast("已退出输入（i 重新进入）");
+        } else {
+          this.chat.input.onKey(ev);
+        }
+        this.redraw();
+        return;
+      }
       if (this.searchActive && (ev.ctrl && ev.key === " " || ev.name === "f7")) {
         this.overlay = new ControlPanel(this, { startPage: 0 });
         this.redraw();
@@ -2174,11 +2229,13 @@ export class App {
       if (ev.name === "char" && ev.key === "/" && !ev.ctrl && this.focused !== this.chat.input) { this.startSearch(); this.redraw(); return; }
       if (ev.name === "char" && ev.key === "n" && !ev.ctrl && this.focused === this.sidebar) { this.newSession(); return; }
       if (ev.name === "escape") {
-        if (this.focused === this.chat.input) {
-          this.focus(this.chat);
-          this.toast("已退出输入（i 重新进入）");
-          this.redraw();
-        } else if (this.focused === this.sidebar) { this.focus(this.chat); this.redraw(); }
+        if (this.focused === this.sidebar) { this.focus(this.chat); this.redraw(); }
+        else {
+          // Esc in NORMAL mode interrupts a running turn (insert→normal→interrupt).
+          const cur = this.sessions.find((s) => s.sessionId === this.currentSession);
+          if (cur?.running) { this.cancelSession(cur); this.toast("已请求中断当前回合"); }
+          else if (this.mode !== "chat") this.setMode("chat");
+        }
         return;
       }
       if (ev.name === "char" && ev.key === "i" && this.focused === this.sidebar) { this.focus(this.chat.input); this.redraw(); return; }
@@ -2297,6 +2354,10 @@ export class App {
     const rows = [];
     // ── row 0: identity ──
     const row0 = { left: [], right: [] };
+    // Editing-mode badge first (near the input at the bottom): INSERT is loud,
+    // NORMAL is subtle — the user's eyes are at the input line, not the top.
+    const editing = this.focused === this.chat?.input;
+    row0.left.push({ t: editing ? " INSERT " : " NORMAL ", fg: editing ? T.OK : T.FAINT, bg: T.STATUSBG, bold: editing });
     // Left badge: the session's permission/mode (e.g. "工作区写入/创造模式"),
     // which is far more meaningful than a static "工作区" label.
     const perm = this.projections.permissions?.currentValue;
@@ -2372,11 +2433,14 @@ export class App {
     if (this.menu) this.menu.render(s);
     if (this.overlay) this.overlay.render(s);
     if (this.toastMsg) {
-      const w = strWidth(this.toastMsg) + 4;
-      const x0 = Math.max(0, Math.floor(s.w / 2 - w / 2));
-      const x1 = Math.min(s.w - 1, Math.floor(s.w / 2 + w / 2));
-      s.fillRect(x0, 0, x1, 0, " ", { bg: T.BORDER });
-      s.text(x0 + 2, 0, truncate(this.toastMsg, s.w - 4), { fg: T.BOLD, bg: T.BORDER });
+      // Toasts land in the LOWER half (just above the input/footer) where the
+      // user's attention is while pressing shortcuts — a solid color block,
+      // not a top-of-screen whisper.
+      const w = Math.min(s.w - 4, strWidth(this.toastMsg) + 6);
+      const x0 = Math.max(2, Math.floor((s.w - w) / 2));
+      const y = Math.max(1, s.h - this.footerHeight() - 2);
+      s.fillRect(x0 - 1, y - 1, x0 + w, y + 1, " ", { bg: T.ACCENT });
+      s.text(x0 + 1, y, truncate(this.toastMsg, w - 2), { fg: T.SELFG, bg: T.ACCENT, attrs: 1 });
     }
     if (this.renameInput && this.popup) this.renameInput.render(s);
 
@@ -2385,6 +2449,11 @@ export class App {
     if (this.overlay && typeof this.overlay.kittyTransmit === "function" && kittyCapable()) {
       tail = this.overlay.kittyTransmit();
     }
+    // Native terminal caret: a blinking vertical bar (text-editor style) at
+    // the focused input's cursor cell; hidden everywhere else.
+    const cell = this.focused?.cursorCell;
+    if (cell) tail = `\x1b[?25h\x1b[${cell.y + 1};${cell.x + 1}H` + tail;
+    else tail = "\x1b[?25l" + tail;
     this.term.output.write(out + tail);
   }
 

package/src/widgets.js

@@ -247,9 +247,59 @@ export class Input extends Widget {
     this.histIdx = -1;
   }
   #cps() { return Array.from(this.value); }            // code points
-  #lines() { return this.value.split("\n"); }
-  /** Rendered height: 1 line, or up to maxLines when multi-line. */
-  height() { return this.multi ? Math.max(1, Math.min(this.maxLines, this.#lines().length)) : 1; }
+  /** Visual rows for multi-line input: logical lines wrapped at the width. */
+  #visualRows() {
+    const inner0 = Math.max(1, this.w - strWidth(this.prompt) - 2);
+    const innerN = Math.max(1, this.w - 2);
+    const rows = [];
+    const cps = Array.from(this.value);
+    let text = "", width = 0, limit = inner0, start = 0;
+    for (let i = 0; i < cps.length; i++) {
+      const ch = cps[i];
+      if (ch === "\n") {
+        rows.push({ text, start, end: i, limit });
+        text = ""; width = 0; limit = innerN; start = i + 1;
+        continue;
+      }
+      const cw = strWidth(ch);
+      if (width + cw > limit && width > 0) {
+        rows.push({ text, start, end: i, limit });
+        text = ""; width = 0; limit = innerN; start = i;
+      }
+      text += ch; width += cw;
+    }
+    rows.push({ text, start, end: cps.length, limit });
+    return rows;
+  }
+  /** [visualRow, display-col] of the cursor in wrapped coordinates. */
+  #cursorVisual() {
+    const rows = this.#visualRows();
+    const cursor = Math.max(0, Math.min(this.cursor, Array.from(this.value).length));
+    for (let ri = 0; ri < rows.length; ri++) {
+      const r = rows[ri];
+      if (cursor >= r.start && cursor <= r.end) {
+        const before = Array.from(r.text).slice(0, cursor - r.start);
+        return { row: ri, col: before.reduce((w, ch) => w + strWidth(ch), 0) };
+      }
+    }
+    const last = rows[rows.length - 1];
+    return { row: rows.length - 1, col: strWidth(last.text) };
+  }
+  /** Code-point index of the nearest position at a visual [row, col]. */
+  #indexAtVisual(row, col) {
+    const rows = this.#visualRows();
+    const r = rows[Math.max(0, Math.min(row, rows.length - 1))];
+    const cps = Array.from(r.text);
+    let w = 0, j = 0;
+    for (; j < cps.length; j++) {
+      const cw = strWidth(cps[j]);
+      if (col < w + cw / 2) break;
+      w += cw;
+    }
+    return r.start + j;
+  }
+  /** Rendered height: 1, or wrapped rows capped at maxLines when multi. */
+  height() { return this.multi ? Math.max(1, Math.min(this.maxLines, this.#visualRows().length)) : 1; }
   setValue(v, opts = {}) {
     this.value = String(v);
     this.cursor = this.#cps().length;
@@ -270,75 +320,88 @@ export class Input extends Widget {
     cps.splice(idx, 1);
     this.value = cps.join("");
   }
-  /** [line, display-col] of the cursor. */
-  #cursorPos() {
-    const before = this.#cps().slice(0, this.cursor);
-    let line = 0, col = 0;
-    for (const ch of before) {
-      if (ch === "\n") { line++; col = 0; }
-      else col += strWidth(ch);
-    }
-    return [line, col];
-  }
-  /** Code-point index of the nearest position at [line, col]. */
-  #indexAtLineCol(line, col) {
-    const lines = this.#lines();
-    let idx = 0;
-    for (let i = 0; i < Math.min(line, lines.length); i++) idx += Array.from(lines[i]).length + 1;
-    const target = lines[Math.min(line, lines.length - 1)] ?? "";
-    const cps = Array.from(target);
-    let w = 0;
-    for (let j = 0; j < cps.length; j++) {
-      const cw = strWidth(cps[j]);
-      if (col < w + cw / 2) break;
-      w += cw;
-      idx++;
-    }
-    return idx;
+  /** Scroll offset that keeps the cursor's visual row inside the window. */
+  #scrollStart(h) {
+    const rows = this.#visualRows();
+    const { row } = this.#cursorVisual();
+    const maxStart = Math.max(0, rows.length - this.maxLines);
+    let start = this.scrollY ?? 0;
+    if (row < start) start = row;
+    else if (row >= start + h) start = row - h + 1;
+    start = Math.max(0, Math.min(maxStart, start));
+    this.scrollY = start;
+    return start;
   }
   render(screen) {
-    const n = this.height();
-    screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y + n - 1, " ", { bg: this.bg });
+    if (!this.multi) {
+      // single-line: horizontal scroll (search/rename/picker inputs)
+      screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y, " ", { bg: this.bg });
+      screen.hline(this.x, this.x + this.w - 1, this.y, "─", { fg: this.border, bg: this.bg });
+      const promptW = strWidth(this.prompt);
+      const inner = Math.max(0, this.w - promptW - 2);
+      screen.text(this.x, this.y, this.prompt, { fg: T.ACCENT, bg: this.bg });
+      if (this.value === "" && this.placeholder) {
+        screen.text(this.x + promptW, this.y, truncate(this.placeholder, inner), { fg: T.FAINT, bg: this.bg });
+        this.cursorCell = { x: this.x + promptW, y: this.y };
+        return;
+      }
+      const before = Array.from(this.value).slice(0, this.cursor).join("");
+      const cx = strWidth(before);
+      let start = 0;
+      while (cx - start >= inner) start += Math.max(1, Math.floor(inner / 2));
+      const visible = truncate(Array.from(this.value).slice(start).join(""), inner);
+      screen.text(this.x + promptW, this.y, visible, { fg: this.fg, bg: this.bg });
+      this.cursorCell = { x: this.x + promptW + Math.min(inner, Math.max(0, cx - start)), y: this.y };
+      return;
+    }
+    // multi-line: auto-wrap + scroll window that follows the cursor
+    const rows = this.#visualRows();
+    const h = Math.min(this.maxLines, rows.length);
+    screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y + h - 1, " ", { bg: this.bg });
     screen.hline(this.x, this.x + this.w - 1, this.y, "─", { fg: this.border, bg: this.bg });
-    const lines = this.#lines();
-    const [curLine, curCol] = this.#cursorPos();
-    const promptW = strWidth(this.prompt);
-    const inner0 = Math.max(0, this.w - promptW - 2);
-    const innerN = Math.max(0, this.w - 2);
     if (this.value === "" && this.placeholder) {
       screen.text(this.x, this.y, this.prompt, { fg: T.ACCENT, bg: this.bg });
-      screen.text(this.x + promptW, this.y, truncate(this.placeholder, inner0), { fg: T.FAINT, bg: this.bg });
+      screen.text(this.x + strWidth(this.prompt), this.y, truncate(this.placeholder, this.w - strWidth(this.prompt) - 2), { fg: T.FAINT, bg: this.bg });
+      this.cursorCell = { x: this.x + strWidth(this.prompt), y: this.y };
       return;
     }
-    for (let li = 0; li < n; li++) {
-      const y = this.y + li;
-      const line = lines[li] ?? "";
-      if (li === 0) {
+    const { row: curRow, col: curCol } = this.#cursorVisual();
+    const start = this.#scrollStart(h);
+    for (let ri = start; ri < Math.min(rows.length, start + h); ri++) {
+      const r = rows[ri];
+      const y = this.y + (ri - start);
+      if (ri === 0) {
         screen.text(this.x, y, this.prompt, { fg: T.ACCENT, bg: this.bg });
-        let start = 0;
-        if (curLine === 0) {
-          while (curCol - start >= inner0) start += Math.max(1, Math.floor(inner0 / 2));
-        }
-        const visible = truncate(Array.from(line).slice(start).join(""), inner0);
-        screen.text(this.x + promptW, y, visible, { fg: this.fg, bg: this.bg });
-        if (curLine === 0) {
-          const at = Math.min(inner0, Math.max(0, curCol - start));
-          screen.put(this.x + promptW + at, y, "█", { fg: T.FAINT, bg: this.bg });
-        }
+        screen.text(this.x + strWidth(this.prompt), y, r.text, { fg: this.fg, bg: this.bg });
       } else {
-        screen.text(this.x + 1, y, truncate(line, innerN), { fg: this.fg, bg: this.bg });
-        if (curLine === li) {
-          const at = Math.min(innerN, Math.max(0, curCol));
-          screen.put(this.x + 1 + at, y, "█", { fg: T.FAINT, bg: this.bg });
-        }
+        screen.text(this.x + 1, y, r.text, { fg: this.fg, bg: this.bg });
       }
     }
+    // Native terminal caret (blinking bar) is positioned by the app after the
+    // frame; store the cell it should occupy (the char at the cursor index).
+    const curY = this.y + (curRow - start);
+    const curX = curRow === 0 ? this.x + strWidth(this.prompt) + curCol : this.x + 1 + curCol;
+    this.cursorCell = { x: Math.min(this.x + this.w - 1, curX), y: Math.min(this.y + h - 1, curY) };
   }
   onMouse(ev) {
     if (ev.kind === "press" && ev.button === 0) {
-      const line = Math.max(0, Math.min(this.#lines().length - 1, ev.y - this.y));
-      const rx = ev.x - this.x - (line === 0 ? strWidth(this.prompt) : 1);
-      this.cursor = this.#indexAtLineCol(line, Math.max(0, rx));
+      if (this.multi) {
+        const h = this.height();
+        const start = this.scrollY ?? 0;
+        const row = start + Math.max(0, Math.min(h - 1, ev.y - this.y));
+        const rx = ev.x - this.x - (row === 0 ? strWidth(this.prompt) : 1);
+        this.cursor = this.#indexAtVisual(row, Math.max(0, rx));
+      } else {
+        const rx = ev.x - this.x - strWidth(this.prompt);
+        let w = 0, idx = 0;
+        for (const ch of Array.from(this.value)) {
+          const cw = strWidth(ch);
+          if (rx < w + cw / 2) break;
+          w += cw;
+          idx++;
+        }
+        this.cursor = idx;
+      }
       return true;
     }
     return false;
@@ -355,12 +418,21 @@ export class Input extends Widget {
         return true;
       case "left": this.selectAll = false; this.cursor = Math.max(0, this.cursor - 1); return true;
       case "right": this.selectAll = false; this.cursor = Math.min(this.#cps().length, this.cursor + 1); return true;
-      case "home": { const [l] = this.#cursorPos(); this.cursor = this.#indexAtLineCol(l, 0); return true; }
-      case "end": { const [l] = this.#cursorPos(); const line = this.#lines()[l] ?? ""; this.cursor = this.#indexAtLineCol(l, strWidth(line)); return true; }
+      case "home": {
+        if (this.multi) { const rows = this.#visualRows(); const { row } = this.#cursorVisual(); this.cursor = rows[row].start; }
+        else this.cursor = 0;
+        return true;
+      }
+      case "end": {
+        if (this.multi) { const rows = this.#visualRows(); const { row } = this.#cursorVisual(); this.cursor = rows[row].end; }
+        else this.cursor = this.#cps().length;
+        return true;
+      }
       case "up":
         if (this.multi) {
-          const [l, c] = this.#cursorPos();
-          if (l > 0) this.cursor = this.#indexAtLineCol(l - 1, c);
+          const rows = this.#visualRows();
+          const { row, col } = this.#cursorVisual();
+          if (row > 0) this.cursor = this.#indexAtVisual(row - 1, col);
         } else if (this.history.length) {
           this.histIdx = this.histIdx < 0 ? this.history.length - 1 : Math.max(0, this.histIdx - 1);
           this.setValue(this.history[this.histIdx] ?? "");
@@ -368,8 +440,9 @@ export class Input extends Widget {
         return true;
       case "down":
         if (this.multi) {
-          const [l, c] = this.#cursorPos();
-          if (l < this.#lines().length - 1) this.cursor = this.#indexAtLineCol(l + 1, c);
+          const rows = this.#visualRows();
+          const { row, col } = this.#cursorVisual();
+          if (row < rows.length - 1) this.cursor = this.#indexAtVisual(row + 1, col);
         } else if (this.histIdx >= 0) {
           this.histIdx++;
           if (this.histIdx >= this.history.length) { this.histIdx = -1; this.setValue(""); }
@@ -401,6 +474,7 @@ export class Input extends Widget {
         this.insert(ev.text);
         return true;
       case "enter":
+        if (ev.shift && this.multi) { this.insert("\n"); return true; }  // Shift+Enter = newline
         if (this.value.trim() === "" && !this.allowEmptyEnter) return false;
         const v = this.value;
         this.history.push(v);