dsh-neotui 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-neotui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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

@@ -272,7 +272,7 @@ export class WorkspacePanel extends Widget {
       this.workspaces = items;
       const tree = [];
       for (const ws of items) {
-        tree.push({ depth: 0, name: `▣ ${ws.title}`, path: ws.path, isDir: true, open: false, ws: true });
+        tree.push({ depth: 0, name: `▣ ${ws.title}`, title: ws.title, path: ws.path, isDir: true, open: false, ws: true, workspaceId: ws.workspaceId });
       }
       this.tree = tree;
       this.rebuildTree();
@@ -319,6 +319,25 @@ export class WorkspacePanel extends Widget {
     } catch { node.children = []; }
   }
   onMouse(ev) {
+    if (ev.kind === "press" && ev.button === 2) {
+      // Right-click anywhere in the panel: workspace actions (add is the
+      // primary one; tree rows also offer move/rename).
+      const idx = this.treeScroll.scrollY + (ev.y - this.treeScroll.y);
+      const node = this.treeLinesNode(idx);
+      if (node?.ws) {
+        this.app.openMenu([
+          { label: "添加工作区…", action: () => this.app.addWorkspace() },
+          { label: "重命名工作区", action: () => this.app.renameWorkspace(node) },
+          { label: "上移工作区", action: () => this.app.moveWorkspace(node, -1) },
+          { label: "下移工作区", action: () => this.app.moveWorkspace(node, 1) },
+        ], ev);
+      } else {
+        this.app.openMenu([
+          { label: "添加工作区…", action: () => this.app.addWorkspace() },
+        ], ev);
+      }
+      return true;
+    }
     if (ev.x >= this.x + 1 && ev.x < this.x + Math.floor(this.w / 2)) {
       const idx = this.treeScroll.scrollY + (ev.y - this.treeScroll.y);
       const node = this.treeLinesNode(idx);
@@ -378,11 +397,11 @@ export class WorkspacePanel extends Widget {
     }
   }
   render(screen) {
-    screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y + this.h - 1, " ", {});
+    screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y + this.h - 1, " ", { bg: T.BG2 });
     const mid = this.x + Math.floor(this.w / 2);
-    screen.put(mid, this.y, "┬", { fg: T.BORDER });
+    screen.put(mid, this.y, "┬", { fg: T.BORDER, bg: T.BG2 });
     screen.vline(mid, this.y + 1, this.y + this.h - 1);
-    screen.text(this.x + 1, this.y, ` 工作区 (${this.workspaces.length}) — 点击目录展开，/ 搜索文件`, { fg: K.DIM });
+    screen.text(this.x + 1, this.y, ` 工作区 (${this.workspaces.length}) — 点击目录展开，/ 搜索文件，右键添加工作区`, { fg: K.DIM, bg: T.BG2 });
     if (this.query) {
       const results = [];
       const walk = (nodes) => {
@@ -393,10 +412,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;
@@ -421,6 +446,99 @@ export class WorkspacePanel extends Widget {
   }
 }
 
+// ---- DirPicker: yazi-style folder selection buffer ----
+
+export class DirPicker extends Widget {
+  constructor(app, { startPath, onPick, onCancel }) {
+    const w = Math.min(60, app.screen.w - 4), h = Math.min(20, app.screen.h - 4);
+    super({ x: Math.floor((app.screen.w - w) / 2), y: Math.floor((app.screen.h - h) / 2), w, h });
+    this.app = app;
+    this.path = startPath ?? process.cwd();
+    this.onPick = onPick;
+    this.onCancel = onCancel;
+    this.entries = [];
+    this.sel = 0;
+    this.scroll = 0;
+    this.load();
+  }
+  load() {
+    try {
+      this.entries = readdirSync(this.path, { withFileTypes: true })
+        .filter((d) => d.isDirectory() && !d.name.startsWith("."))
+        .map((d) => d.name)
+        .sort((a, b) => a.localeCompare(b));
+    } catch { this.entries = []; }
+    this.sel = 0;
+    this.scroll = 0;
+  }
+  #items() { return ["✓ 选择此目录", "..", ...this.entries]; }
+  render(screen) {
+    screen.fillRect(this.x, this.y, this.x + this.w - 1, this.y + this.h - 1, " ", { bg: T.BG2 });
+    screen.box(this.x, this.y, this.x + this.w - 1, this.y + this.h - 1, { fg: K.ACCENT, bg: T.BG2 }, "选择文件夹");
+    screen.text(this.x + 2, this.y + 1, truncate("📁 " + this.path, this.w - 4), { fg: K.TXT, bg: T.BG2 });
+    const items = this.#items();
+    const lh = Math.max(1, this.h - 3);
+    if (this.sel < this.scroll) this.scroll = this.sel;
+    else if (this.sel >= this.scroll + lh) this.scroll = this.sel - lh + 1;
+    this.scroll = Math.max(0, Math.min(Math.max(0, items.length - lh), this.scroll));
+    for (let i = 0; i < lh; i++) {
+      const idx = this.scroll + i;
+      const it = items[idx];
+      const y = this.y + 2 + i;
+      if (it === undefined) { screen.hline(this.x + 1, this.x + this.w - 2, y, " ", { bg: T.BG2 }); continue; }
+      const sel = idx === this.sel;
+      const label = it === "✓ 选择此目录" ? it : it === ".." ? ".. （上级目录）" : "▸ " + it + "/";
+      const fg = it === "✓ 选择此目录" ? K.OK : it === ".." ? K.DIM : K.TXT;
+      screen.fillRect(this.x + 1, y, this.x + this.w - 2, y, " ", { bg: sel ? T.MENUSEL : T.BG2 });
+      screen.text(this.x + 2, y, truncate(label, this.w - 4), { fg: sel ? 0xffffff : fg, bg: sel ? T.MENUSEL : T.BG2, attrs: sel ? 1 : 0 });
+    }
+    screen.text(this.x + 2, this.y + this.h - 1, "↑↓/jk 移动 · Enter 进入/选择 · h/Backspace 上级 · Esc 取消", { fg: K.FAINT, bg: T.BG2 });
+  }
+  onKey(ev) {
+    if (ev.type !== "key") return false;
+    const items = this.#items();
+    switch (ev.name) {
+      case "up": this.sel = Math.max(0, this.sel - 1); return true;
+      case "down": this.sel = Math.min(items.length - 1, this.sel + 1); return true;
+      case "enter": {
+        const it = items[this.sel];
+        if (it === "✓ 选择此目录") { this.onPick?.(this.path); return true; }
+        if (it === "..") { this.path = dirname(this.path); this.load(); return true; }
+        this.path = join(this.path, it); this.load(); return true;
+      }
+      case "backspace": this.path = dirname(this.path); this.load(); return true;
+      case "char":
+        if (ev.key === "j" && !ev.ctrl) { this.sel = Math.min(items.length - 1, this.sel + 1); return true; }
+        if (ev.key === "k" && !ev.ctrl) { this.sel = Math.max(0, this.sel - 1); return true; }
+        if (ev.key === "h" && !ev.ctrl) { this.path = dirname(this.path); this.load(); return true; }
+        if (ev.key === "l" && !ev.ctrl) {
+          const it = items[this.sel];
+          if (it && it !== "✓ 选择此目录" && it !== "..") { this.path = join(this.path, it); this.load(); }
+          return true;
+        }
+        return false;
+      case "escape": this.onCancel?.(); return true;
+    }
+    return false;
+  }
+  onMouse(ev) {
+    if (ev.kind === "press" && ev.button === 0) {
+      const idx = this.scroll + (ev.y - this.y - 2);
+      const items = this.#items();
+      if (idx >= 0 && idx < items.length) {
+        const it = items[idx];
+        if (it === "✓ 选择此目录") { this.onPick?.(this.path); return true; }
+        if (it === "..") { this.path = dirname(this.path); this.load(); return true; }
+        this.path = join(this.path, it); this.load(); return true;
+      }
+      return true;
+    }
+    if (ev.kind === "wheel-up") { this.sel = Math.max(0, this.sel - 1); return true; }
+    if (ev.kind === "wheel-down") { this.sel = Math.min(this.#items().length - 1, this.sel + 1); return true; }
+    return true;
+  }
+}
+
 // ---- Trajectory view ----
 
 export class TrajectoryPanel extends Widget {
@@ -781,6 +899,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;
@@ -884,9 +1003,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 });
@@ -947,9 +1072,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

package/src/views.js

@@ -6,7 +6,7 @@ import { readFileSync } from "node:fs";
 import { Widget, List, ScrollView, Input, Popup, Menu, StatusBar } from "./widgets.js";
 import {
   Picker, buildCommandPalette, buildModelPicker, buildModePicker, buildPermissionPicker,
-  modeName, permName, WorkspacePanel, TrajectoryPanel,
+  modeName, permName, WorkspacePanel, TrajectoryPanel, DirPicker,
   ImagePopup, kittyCapable, buildJobsPopup, buildGoalPopup, SettingsPanel, SubagentPanel,
   SkillsPanel, ControlPanel,
 } from "./panels.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;
@@ -540,9 +541,10 @@ export class ChatView extends Widget {
     this.input = new Input({
       x: this.x, y: this.y + this.h - 2, w: this.w, h: 1,
       multi: true, maxLines: 6,
+      bg: T.BG2, border: T.BORDER2,
       placeholder: "输入消息…（Ctrl+J 换行，Enter 发送）",
       onEnter: (v) => this.send(v),
-      onChange: () => this.#inputChanged(),
+      onChange: () => this.inputChanged(),
     });
     this.contextNode = null;
     this.rebuildQueued = false;
@@ -679,12 +681,20 @@ export class ChatView extends Widget {
     }
   }
 
-  #inputChanged() {
+  /** 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 +704,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();
@@ -955,6 +966,7 @@ export class ChatView extends Widget {
                 { t: open ? "▾ " : "▸ ", fg: K.ACCENT },
                 { t: ` ${b.name ?? "tool"}`, fg: K.TXT, bold: true },
                 { t: ` ${glyph}`, fg: status === "TOOLOK" ? K.OK : status === "TOOLERR" ? K.ERR : K.WARN },
+                { t: open ? " [b 折叠]" : " [b 展开]", fg: K.FAINT },
               ]);
               mark(realIdx, bi);
               if (!open) {
@@ -1107,10 +1119,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 +1242,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 +1262,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);
@@ -1532,6 +1571,12 @@ export class App {
       this.model = host.model ?? "";
     } catch (e) { this.log(`[app] host.describe: ${e.message}`); }
     await this.refreshSessions();
+    // Open on a blank session at the launch directory (reusing an existing
+    // draft when available) so the blank-session homepage shows immediately
+    // instead of a fully empty chat area.
+    if (!this.currentSession) {
+      await this.newSessionIn(null);
+    }
     this.api.connectMux();
     this.api.connectHost();
     this.api.onFrame = (frame) => this.#onFrame(frame);
@@ -1584,6 +1629,8 @@ export class App {
       case "session/projection":
         this.projections[frame.key] = frame.value;
         if (frame.key === "tokenUsage") this.tokenUsage = frame.value;
+        // the todo block's height depends on the todos projection → reflow
+        if (frame.key === "todos") this.chat.inputChanged();
         break;
       case "approval/resolved":
       case "question/resolved":
@@ -1638,6 +1685,43 @@ export class App {
     } catch (e) { this.toast(`移动失败: ${e.message}`); }
   }
 
+  /** Move a workspace up/down in the durable display order. */
+  async moveWorkspace(node, delta) {
+    const ws = this.workspaceItems?.find((w) => w.workspaceId === node.workspaceId);
+    if (!ws || !this.workspaceItems) { this.toast("找不到工作区"); return; }
+    const ids = this.workspaceItems.map((w) => w.workspaceId);
+    const idx = ids.indexOf(ws.workspaceId);
+    if (idx < 0) return;
+    const target = idx + delta;
+    if (target < 0 || target >= ids.length) return;
+    const beforeWorkspaceId = delta === -1 ? ids[target] : (target + 1 < ids.length ? ids[target + 1] : undefined);
+    try {
+      await this.api.call("workspace.insertBefore", {
+        workspaceId: ws.workspaceId,
+        ...(beforeWorkspaceId !== undefined ? { beforeWorkspaceId } : {}),
+      });
+      await this.refreshSessions();
+    } catch (e) { this.toast(`移动工作区失败: ${e.message}`); }
+  }
+
+  /** Yazi-style folder picker → workspace.create. */
+  addWorkspace() {
+    this.overlay = new DirPicker(this, {
+      startPath: process.cwd(),
+      onPick: async (path) => {
+        this.overlay = null;
+        try {
+          await this.api.call("workspace.create", { path });
+          await this.refreshSessions();
+          this.toast(`已添加工作区: ${path}`);
+        } catch (e) { this.toast(`添加失败: ${e.message}`); }
+        this.redraw();
+      },
+      onCancel: () => { this.overlay = null; this.redraw(); },
+    });
+    this.redraw();
+  }
+
   renameSession(s) {
     this.closeOverlay();
     const input = new Input({ x: 2, y: this.screen.h - 3, w: this.screen.w - 4, h: 1, prompt: "标题: ", allowEmptyEnter: true, onEnter: () => this.#commitRename(s, input) });
@@ -1780,8 +1864,10 @@ export class App {
 
   async newSessionIn(group = null) {
     // Reuse an existing empty draft instead of minting a fresh blank session on
-    // every "new session" click (this is how the meaningless blank sessions pile up).
-    const blank = this.sessions.find((s) => s.blank && !s.running && s.sessionId !== this.currentSession);
+    // every "new session" click (this is how the meaningless blank sessions pile
+    // up). Prefer a draft at the same directory (e.g. the launch cwd on open).
+    const blanks = this.sessions.filter((s) => s.blank && !s.running && s.sessionId !== this.currentSession);
+    const blank = blanks.find((s) => s.cwd === process.cwd()) ?? blanks[0];
     if (blank && (group?.workspaceId == null || this.#sessionInWorkspace(blank.sessionId, group.workspaceId))) {
       await this.refreshSessions();
       this.openSession(blank.sessionId);
@@ -2396,11 +2482,13 @@ 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.
+      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, this.chat.input.y - this.chat.todoHeight() - 2);
+      s.fillRect(x0, y, x0 + w - 1, y, " ", { 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);
 
@@ -2409,6 +2497,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(""); }