dsh-neotui 0.1.18 → 0.1.20

package/package.json

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

package/src/panels.js

@@ -560,6 +560,9 @@ export class TrajectoryPanel extends Widget {
     this.flashUntil = 0;
     this.loadPromise = null;        // dedupes concurrent load(currentSession)
     this.loadTarget = null;
+    this.liveTickAt = 0;     // ⏱ live timer re-render throttle
+    this.tailFetchAt = 0;    // tail-window auto-refresh throttle
+    this.refreshing = false;
     this.winSeqLo = null;           // visible window = first-event SEQ range; null = follow the tail
     this.winSeqHi = null;
     // LEFT click toggles a step's 详细/简略 expansion (the ▸/▾ triangle).
@@ -937,7 +940,9 @@ export class TrajectoryPanel extends Widget {
       const hasResult = step.events.some((e) => e.type === "tool/result");
       const hasReasoning = step.events.some((e) => e.type === "assistant/chunk" && e.data?.chunk?.blockType === "reasoning");
       const t0 = step.events[0]?.time, t1 = step.events[step.events.length - 1]?.time;
-      const dur = t0 && t1 ? fmtMs(t1 - t0) : "—";
+      // deep-dive style live timer: the newest step ticks while the turn runs
+      const isLiveTail = this.app.chat?.running && this.winSeqLo == null && si === this.steps.length - 1;
+      const dur = isLiveTail ? `⏱${fmtMs(Date.now() - (t0 ?? Date.now()))}` : (t0 && t1 ? fmtMs(t1 - t0) : "—");
       const bg = tools.length ? (hasResult ? T.TOOLOK : T.TOOLBG) : hasReasoning ? T.THINKBG : T.CARD;
       const summary = tools.slice(0, 3).join(",") || (hasReasoning ? "模型推理" : "纯文本");
       const open = this.expandedSteps.has(this.stepKey(step));       // 详细
@@ -975,8 +980,37 @@ export class TrajectoryPanel extends Widget {
       screen.text(this.x + 2, this.y + 1, "加载轨迹…", { fg: K.FAINT });
       return;
     }
+    // the live step's ⏱ timer re-renders once per second while the turn runs,
+    // and the tail window refreshes periodically so a NEW turn's step (and
+    // its timer) appears without pressing r
+    if (this.app.chat?.running && this.winSeqLo == null) {
+      if (Date.now() - (this.liveTickAt ?? 0) > 1000) {
+        this.liveTickAt = Date.now();
+        this.buildLines();
+      }
+      if (!this.refreshing && Date.now() - (this.tailFetchAt ?? 0) > 4000) {
+        this.tailFetchAt = Date.now();
+        this.#refreshTail();
+      }
+    }
     this.view.render(screen);
   }
+  /** Re-fetch the tail window while following the live turn. */
+  async #refreshTail() {
+    if (!this.sessionId) return;
+    this.refreshing = true;
+    try {
+      const h = await this.app.api.call("session.history", { sessionId: this.sessionId, maxMessages: 20 });
+      this.allEvents = h.events;
+      this.minSeq = h.events[0]?.event?.seq ?? this.minSeq;
+      this.hasMore = h.hasMore;
+      this.stats = h.projections?.values?.sessionStats ?? this.stats;
+      this.build();
+      this.buildLines();
+      this.app.redraw();
+    } catch { /* next tick retries */ }
+    this.refreshing = false;
+  }
   onMouse(ev) {
     // RIGHT click on a step: context menu (expand/collapse · jump · detail).
     if (ev.kind === "press" && ev.button === 2) {

package/src/views.js

@@ -14,7 +14,7 @@ import {
   SkillsPanel, ControlPanel, JobsPanel, fmtMs,
 } from "./panels.js";
 
-import { T, themeName } from "./theme.js";
+import { T, themeName, cycleTheme } from "./theme.js";
 // Live theme accessor: K.K.DIM etc. resolve against the active palette at render time.
 const K = new Proxy({}, { get(_k, key) { return T[key]; } });
 
@@ -130,8 +130,11 @@ function applyEvent(nodes, event, view, log, state = null) {
         const text = partsToText(d.content ?? d.message?.content);
         const images = partsToImages(d.content ?? d.message?.content);
         const id = d.id ?? null;
-        if (text !== null) nodes.push({ kind: "user", text, images, id, step: st.step });
-        else if (images) nodes.push({ kind: "user", text: "", images, id, step: st.step });
+        // the turn timer starts HERE: the user message carries the turn start
+        // so the 🕐 ticker shows even before the first assistant chunk lands
+        const turnStartAt = st.turnStart ?? event.time ?? Date.now();
+        if (text !== null) nodes.push({ kind: "user", text, images, id, step: st.step, turnStartAt });
+        else if (images) nodes.push({ kind: "user", text: "", images, id, step: st.step, turnStartAt });
         break;
       }
       case "assistant/message": {
@@ -172,7 +175,7 @@ function applyEvent(nodes, event, view, log, state = null) {
         const ch = d.chunk ?? {};
         let node = cur();
         if (!node || node.kind !== "assistant" || node.finalized) {
-          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step };
+          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step, turnStartAt: st.turnStart ?? undefined };
           nodes.push(node);
         }
         node.streaming = true;
@@ -219,7 +222,7 @@ function applyEvent(nodes, event, view, log, state = null) {
         }
         let node = cur();
         if (!node || node.kind !== "assistant") {
-          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step };
+          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step, turnStartAt: st.turnStart ?? undefined };
           nodes.push(node);
         }
         node.blocks.push({ kind: "tool", name: d.name, args: d.arguments, callId, view: view?.view, result: null, startedAt: event.time ?? Date.now() });
@@ -584,6 +587,16 @@ class SidebarTree extends Widget {
 
 // ---- ChatView ----
 
+/** Slash commands offered by the input's candidate bar (Tab completes). */
+const SLASH_COMMANDS = [
+  { name: "/reload", desc: "重新载入界面（不重启进程）" },
+  { name: "/restart", desc: "重启 TUI 加载新版本" },
+  { name: "/model", desc: "切换模型" },
+  { name: "/theme", desc: "切换配色主题" },
+  { name: "/permission", desc: "修改权限模式" },
+  { name: "/goal", desc: "查看当前目标" },
+];
+
 export class ChatView extends Widget {
   constructor(opts) {
     super(opts);
@@ -612,9 +625,9 @@ 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, app: this.app,
+      multi: true, maxLines: 6, app: this.app, commands: SLASH_COMMANDS,
       bg: T.PANEL,
-      placeholder: "输入消息…（Shift+Enter/Ctrl+J 换行，Ctrl+L 展开，Enter 发送）",
+      placeholder: "输入消息…（Shift+Enter/Ctrl+J 换行，Ctrl+L 展开，↑/↓ 历史，Tab 补全 / 命令，Enter 发送）",
       onEnter: (v) => this.send(v),
       onChange: () => this.inputChanged(),
     });
@@ -923,6 +936,10 @@ export class ChatView extends Widget {
     const trimmed = text.trim();
     if (trimmed === "/reload") { this.app.softReload(); return; }
     if (trimmed === "/restart") { this.app.restartApp(); return; }
+    if (trimmed === "/model") { this.app.showModePicker(); return; }
+    if (trimmed === "/theme") { cycleTheme(); this.queueRebuild(); this.app.toast(`主题已切换: ${themeName()}`); return; }
+    if (trimmed === "/permission") { this.app.showPermissionPicker(); return; }
+    if (trimmed === "/goal") { this.app.showGoal(); return; }
     if (!trimmed) return;
     const { parts, images, errors } = buildPromptParts(trimmed, {
       readFile: (p) => {
@@ -1187,7 +1204,9 @@ export class ChatView extends Widget {
       const ckey = `${realIdx}|${w}|${expKey}|${blockKeys}|${this.thinkMode}|${this.bashMode}|${node.streaming ? "s" : "f"}|${themeName()}|${node.step ?? "-"}|${userPrefix()}|${node.turnMs ?? "-"}`;
       // Streaming nodes re-render every frame: their text grows without any
       // change to the cache key, so caching them freezes the live think/tool/text.
-      const hit = node.streaming ? undefined : this.cache.get(ckey);
+      // The LAST node re-renders too while a turn runs — its ticking 🕐 timer
+      // must not be baked into a cached entry.
+      const hit = (node.streaming || (this.running && realIdx === this.nodes.length - 1)) ? undefined : this.cache.get(ckey);
       if (hit) {
         for (const [rs, re, bg] of hit.cards ?? []) {
           this.cardRanges.push([lines.length + rs, lines.length + re, bg]);
@@ -1249,6 +1268,13 @@ export class ChatView extends Widget {
               markImg(realIdx, ii);
             }
           }
+          // the turn timer starts at the QUESTION: while the reply is still
+          // in the request/queue phase (no assistant node yet), the ticker
+          // lives under the user message — web-style deep-dive from t=0.
+          if (this.running && realIdx === this.nodes.length - 1 && node.turnStartAt != null) {
+            lines.push([{ t: `  🕐 本轮进行中…已经过 ${fmtDuration(Date.now() - node.turnStartAt)}`, fg: T.WARN, bold: true }]);
+            mark(realIdx);
+          }
           sep();
           break;
         }
@@ -1412,6 +1438,10 @@ export class ChatView extends Widget {
           if (node.turnMs != null) {
             lines.push([{ t: `  🕐 本轮回答总耗时 ${fmtDuration(node.turnMs)}`, fg: T.WARN, bold: true }]);
             mark(realIdx);
+          } else if (node.streaming && node.turnStartAt != null && realIdx === this.nodes.length - 1) {
+            // deep-dive style live timer: the running turn ticks in real time
+            lines.push([{ t: `  🕐 本轮进行中…已经过 ${fmtDuration(Date.now() - node.turnStartAt)}`, fg: T.WARN, bold: true }]);
+            mark(realIdx);
           }
           break;
         }
@@ -1524,6 +1554,23 @@ export class ChatView extends Widget {
     }
     this.#renderTodos(screen);
     this.input.render(screen);
+    this.#renderCmdBar(screen);
+  }
+
+  /** / command candidate bar above the input (↑/↓ cycle, Tab completes). */
+  #renderCmdBar(screen) {
+    const inp = this.input;
+    if (!inp.cmdOpen || inp.cmds.length === 0) return;
+    const n = Math.min(inp.cmds.length, 6);
+    const w = Math.min(this.view.w, 44);
+    const y0 = Math.max(this.view.y, inp.y - n - 1);
+    screen.fillRect(this.x, y0, this.x + w - 1, y0 + n - 1, " ", { bg: T.BG2 });
+    for (let i = 0; i < n; i++) {
+      const c = inp.cmds[i];
+      const sel = i === inp.cmdIdx;
+      screen.text(this.x + 1, y0 + i, `${sel ? "▸" : " "} ${c.name}`, { fg: sel ? T.SELFG : T.TXT, bg: sel ? T.MENUSEL : T.BG2, attrs: sel ? 1 : 0 });
+      screen.text(this.x + 2 + strWidth(c.name) + 2, y0 + i, truncate(c.desc ?? "", w - strWidth(c.name) - 6), { fg: T.FAINT, bg: sel ? T.MENUSEL : T.BG2 });
+    }
   }
 
   /** Collapsible todo block between the view and the input (Shift+T toggles). */
@@ -1549,7 +1596,8 @@ export class ChatView extends Widget {
       return true;
     }
     if (this.view.inside(ev.x, ev.y)) {
-      this.app.focus(this);
+      // clicks act, but never exit INSERT mode — Esc is the only way out
+      if (this.app.focused !== this.app.chat?.input) this.app.focus(this);
       // Welcome-screen mode click: select the preset under the cursor.
       if (this.nodes.length === 0 && ev.kind === "press" && ev.button === 0) {
         const id = this.welcomeModes[ev.y];
@@ -2823,7 +2871,7 @@ export class App {
     // mouse routes by position (click = focus + dispatch)
     if (this.mode !== "chat") {
       if (ev.type === "mouse" && this.sidebarVisible && this.sidebar.inside(ev.x, ev.y)) {
-        this.focus(this.sidebar);
+        if (this.focused !== this.chat.input) this.focus(this.sidebar); // INSERT exits only via Esc
         if (this.sidebar.onMouse(ev)) this.redraw();
         return;
       }
@@ -2870,7 +2918,7 @@ export class App {
         return;
       }
       if (this.sidebarVisible && this.sidebar.inside(ev.x, ev.y)) {
-        this.focus(this.sidebar);
+        if (this.focused !== this.chat.input) this.focus(this.sidebar); // INSERT exits only via Esc
         if (this.sidebar.onMouse(ev)) this.redraw();
       } else if (this.chat.input.inside(ev.x, ev.y)) {
         // mouse SELECTION in the input works regardless of mode; typing stays
@@ -2887,7 +2935,7 @@ export class App {
           this.toast("按 i 进入输入（vim 式）");
         }
       } else if (this.chat.inside(ev.x, ev.y)) {
-        this.focus(this.chat);
+        if (this.focused !== this.chat.input) this.focus(this.chat); // INSERT exits only via Esc
         if (this.chat.onMouse(ev)) this.redraw();
       } else if (this.focused?.onMouse(ev)) {
         this.redraw();
@@ -2901,6 +2949,9 @@ export class App {
       // typing and Ctrl+J / Shift+Enter newlines behave like a normal editor.
       if (this.focused === this.chat.input) {
         if (ev.name === "escape") {
+          // Esc closes the open / command candidate bar first, then exits
+          // insert — Esc is the ONLY way out of insert mode.
+          if (this.chat.input.cmdOpen) { this.chat.input.cmdOpen = false; this.redraw(); return; }
           // one ESC press: interrupt a running turn AND leave insert —
           // otherwise the key just exits insert (vim muscle memory).
           const interrupted = this.#interruptIfRunning();
@@ -3056,9 +3107,14 @@ export class App {
           this.renderFrame();
         }
         if (this.toastMsg && Date.now() > this.toastUntil) { this.toastMsg = null; this.dirty = true; }
-        // the status-bar clock ticks once per second
+        // the status-bar clock ticks once per second; while a turn runs the
+        // chat's live timers (已经过 / 🕐) tick with it
         const sec = Math.floor(Date.now() / 1000);
-        if (sec !== this.lastSec) { this.lastSec = sec; this.dirty = true; }
+        if (sec !== this.lastSec) {
+          this.lastSec = sec;
+          if (this.chat.running) this.chat.queueRebuild();
+          this.dirty = true;
+        }
       } catch (e) {
         this.log("render error (kept running):", e);
         // stderr is invisible under the alt screen — record the stack where

package/src/widgets.js

@@ -260,6 +260,10 @@ export class Input extends Widget {
     this.pasteMark = null;             // code-point span of the immutable "[已复制…]" token
     this.selStart = null;              // drag-selection [start, end) code-point span
     this.selEnd = null;
+    this.commands = opts.commands ?? []; // / command candidates: [{name, desc}]
+    this.cmdOpen = false;              // the candidate bar is showing
+    this.cmdIdx = 0;                   // highlighted candidate
+    this.cmds = [];                    // filtered candidates
     this.onChange = opts.onChange ?? null;
     this.allowEmptyEnter = opts.allowEmptyEnter ?? false;
     this.history = [];
@@ -324,6 +328,7 @@ export class Input extends Widget {
     this.value = String(v);
     this.cursor = this.#cps().length;
     this.selectAll = Boolean(opts.select);  // first insert/text replaces the whole value
+    this.#updateCmds();
     this.onChange?.();
   }
   insert(text) {
@@ -336,6 +341,21 @@ export class Input extends Widget {
     }
     this.#edit(at, at, text);
   }
+  /** The / command candidate bar opens while the value is a bare "/…" prefix. */
+  #updateCmds() {
+    const v = this.value;
+    if (v.startsWith("/") && !v.includes(" ") && !v.includes("\n")) {
+      this.cmds = this.commands.filter((c) => c.name.startsWith(v));
+      if (this.cmds.length > 0) {
+        this.cmdOpen = true;
+        if (this.cmdIdx >= this.cmds.length) this.cmdIdx = 0;
+        return;
+      }
+    }
+    this.cmdOpen = false;
+    this.cmdIdx = 0;
+    this.cmds = [];
+  }
   /** EVERY edit goes through here so the immutable paste token behaves as
    *  one unit: deleting any part of it removes it whole, typing inside it
    *  replaces it, edits elsewhere just shift it. Always notifies onChange —
@@ -354,6 +374,7 @@ export class Input extends Widget {
       this.pasteMark = null;
       this.pendingPaste = null;
       this.value = cps.join("");
+      this.#updateCmds();
       this.onChange?.();
       return;
     }
@@ -364,6 +385,7 @@ export class Input extends Widget {
     cps.splice(from, to - from, ...t);
     this.cursor = from + t.length;
     this.value = cps.join("");
+    this.#updateCmds();
     this.onChange?.();
   }
   #deleteAt(idx) {
@@ -568,29 +590,54 @@ export class Input extends Widget {
         this.#snapCursor();
         return true;
       }
-      case "up":
+      case "up": {
         this.selStart = this.selEnd = null;
+        if (this.cmdOpen && this.cmds.length) {
+          this.cmdIdx = (this.cmdIdx - 1 + this.cmds.length) % this.cmds.length;
+          this.onChange?.();
+          return true;
+        }
         if (this.multi) {
           const rows = this.#visualRows();
           const { row, col } = this.#cursorVisual();
-          if (row > 0) { this.cursor = this.#indexAtVisual(row - 1, col); this.#snapCursor(); }
-        } else if (this.history.length) {
+          if (row > 0) { this.cursor = this.#indexAtVisual(row - 1, col); this.#snapCursor(); return true; }
+          // at the first visual row: ↑ walks the history like other clients
+        }
+        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] ?? "");
         }
         return true;
-      case "down":
+      }
+      case "down": {
         this.selStart = this.selEnd = null;
+        if (this.cmdOpen && this.cmds.length) {
+          this.cmdIdx = (this.cmdIdx + 1) % this.cmds.length;
+          this.onChange?.();
+          return true;
+        }
         if (this.multi) {
           const rows = this.#visualRows();
           const { row, col } = this.#cursorVisual();
-          if (row < rows.length - 1) { this.cursor = this.#indexAtVisual(row + 1, col); this.#snapCursor(); }
-        } else if (this.histIdx >= 0) {
+          if (row < rows.length - 1) { this.cursor = this.#indexAtVisual(row + 1, col); this.#snapCursor(); return true; }
+          // at the last visual row: ↓ walks the history forward
+        }
+        if (this.histIdx >= 0) {
           this.histIdx++;
           if (this.histIdx >= this.history.length) { this.histIdx = -1; this.setValue(""); }
           else this.setValue(this.history[this.histIdx]);
         }
         return true;
+      }
+      case "tab":
+        if (this.cmdOpen && this.cmds.length) {
+          // Tab completes the highlighted / command candidate
+          const c = this.cmds[this.cmdIdx];
+          this.setValue(c.name + " ");
+          this.cmdOpen = false;
+          return true;
+        }
+        return false;
       case "char":
         if (ev.ctrl) {
           switch (ev.key) {