dsh-neotui 0.0.8 → 0.0.10

package/README.md

@@ -59,7 +59,11 @@ tui/app/            dsh-neotui-app bundle：cordis.patch.yml + tui-startup/tui-r
 | 设置次级页 | 在「设置」页内 **Shift+Tab** 翻次级页（常规 / 插件） |
 | 主页切换 | **Shift+Tab** 在对话 ↔ 轨迹之间切换；顶部标签页（对话/轨迹/工作区/设置/技能/子代理）可点击直达 |
 | 输入模式 | `i` 或点击进入，**Esc 退出**（nvim normal/insert）；未聚焦时字母=快捷键，多字粘贴直接输入 |
-| 思考/工具折叠 | `t` 思考块展开折叠，`b` 工具块（bash 等）展开折叠 |
+| 思考/工具折叠 | `t` 思考块展开折叠，`b` 工具块（bash 等）展开折叠；右键消息 →「展开 / 折叠」折叠单个输出块 |
+| 对话 ↔ 轨迹转跳 | 对话里右键消息 →「转跳轨迹」定位到对应 step（自动展开+高亮）；轨迹里右键 step →「转跳对话」回到该消息 |
+| 步骤快速转跳 | **Ctrl+E**：fzf 式过滤 step 列表（编号/耗时/工具/消息预览），回车定位到该 step 的轨迹窗口 |
+| 轨迹窗口导航 | 转跳后只显示 `step±20` 窗口；**PgUp/PgDn** 上下各加载 10 步，**Home/End** 跳到最早/最新 20 步，`r` 回最新 |
+| 后台任务 | **Ctrl+J** 后台任务面板（Enter/→/l 展开详情，←/h 折叠，q 关闭）；状态栏只显示「N 个任务正在后台运行 · M已完成 (Ctrl+J 查看详情)」 |
 | 右键文件夹 → 新建会话（归属该工作区） | `n` |
 | 滚轮翻页 / 拖拽 | PgUp / PgDn / gg / G |
 | 点击展开思考块/工具卡 | — |
@@ -94,12 +98,17 @@ tui/app/            dsh-neotui-app bundle：cordis.patch.yml + tui-startup/tui-r
 - footer（powerline 风格，2–3 行）：第 1 行身份（工作区/会话/运行态/🎯目标/✎计划/模型），第 2 行用量（ctx 条+%、入/出/缓存/共 token、⚙步/回合/首响），第 3 行任务（有 job 时）
 - 折叠块预览：bash 折叠后显示命令概要（view.title 或 command），思考折叠后显示前 3 行
 - 会话内搜索：**Ctrl+F** 模糊搜本会话消息/工具名，回车跳转
-- 轨迹详情：点击回合行弹窗（工具调用 + 耗时），`/` 过滤回合；**增量加载**（每页 20 回合逐页渲染，最近回合秒开，600 回合封顶，不再阻塞等待全量历史）
+- 轨迹详情：点击回合行弹窗（工具调用 + 耗时），`/` 过滤回合；**增量加载**（每页 20 回合逐页渲染，最近回合秒开，历史步骤按需翻页，不再阻塞等待全量历史）
+- 轨迹 详细/简略：每个 step 左键单击（▸/▾）或右键菜单第一项 →「展开（详细）/ 折叠（简略）」内联展开事件列表（仿对话页）；跳转定位的 step 自动展开 + 高亮闪烁
+- 轨迹窗口模型：转跳只显示 `step±20`；PgUp/PgDn 按 10 步扩展窗口（按需向后翻页加载），Home 加载到 step 1–20，End 回到最新 20 步，窗口指示行显示「窗口 step A–B · 共 N 步」
 - 工作区文件搜索：工作区面板内直接打字（`/`）模糊搜文件名，回车预览
 - 消息反馈：助手消息右键 👍/👎（`messageFeedback/put` Typert RPC），已评状态回显、可删除
 - 图片画廊：多图时 ←/→ 切换，标题显示 (N/M) + 尺寸
 - 会话内搜索高亮：Ctrl+F 跳转后匹配词高亮（黄底），Esc 清除
 - 轨迹逐事件详情：点击回合 → 事件列表 → 选事件看全文
+- 用户消息前缀：自己发的消息第一行直接显示内容并带 `用户名 > ` 前缀（默认取系统登录名）；**设置页新增「TUI 界面」命名空间**，编辑 `userPrefix` 并 Ctrl+S 即时生效（持久化到 `$DSH_HOME/tui-config.json`）；环境变量 `DSH_TUI_USER_PREFIX` 亦可覆盖
+- 块计时：流式块实时显示 `已经过 X秒/分/小时`，完成后冻结为 `已完成,耗时 X`（工具失败显示 `失败,耗时 X`）；缺失 block-end 也不会出现永远走动的计时器
+- 块编号：think/tool/text 块头部标注所属 `(step N)`，与轨迹页的 step 编号对应，Ctrl+E 可据此快速转跳
 - 主题持久化：切主题写入 `$DSH_HOME/tui-theme.txt`（或 XDG config），重启保留
 - 输入模式标识：标签栏右侧 NORMAL/INSERT 指示，Esc 退出输入
 - 实时流：merge 修复（新回合不再覆盖旧回合）、活跃时 500ms 轮询、流式思考/工具自动展开

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-neotui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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/config.js

@@ -0,0 +1,64 @@
+// config.js — TUI-local config (display name/prefix etc.), persisted as JSON
+// next to the theme file: $DSH_HOME/tui-config.json (or XDG config dir).
+import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { userInfo } from "node:os";
+
+export function tuiConfigFile() {
+  const base = process.env.DSH_HOME ?? (process.env.XDG_CONFIG_HOME ?? join(process.env.HOME ?? ".", ".config"));
+  return join(base, "tui-config.json");
+}
+
+let cache = { file: null, data: null, at: 0 };
+
+/** Read the TUI config ({} when absent); cached for 1s per file path. */
+export function loadTuiConfig() {
+  const now = Date.now();
+  const file = tuiConfigFile();
+  if (cache.file === file && cache.data && now - cache.at < 1000) return cache.data;
+  let data;
+  try {
+    data = JSON.parse(readFileSync(file, "utf8"));
+  } catch {
+    data = {};
+  }
+  cache = { file, data, at: now };
+  return data;
+}
+
+/** Merge a patch into the TUI config and write it back. Returns success. */
+export function saveTuiConfig(patch) {
+  const file = tuiConfigFile();
+  const cfg = { ...loadTuiConfig(), ...patch };
+  try {
+    mkdirSync(dirname(file), { recursive: true });
+    writeFileSync(file, JSON.stringify(cfg, null, 2) + "\n");
+    cache = { file, data: cfg, at: Date.now() };
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+let OS_USERNAME = null;
+function osUsername() {
+  if (OS_USERNAME !== null) return OS_USERNAME;
+  try { OS_USERNAME = userInfo().username; } catch { OS_USERNAME = ""; }
+  return OS_USERNAME;
+}
+
+/** Effective display name: config → env → OS login → fallback. */
+export function userName() {
+  const cfg = loadTuiConfig();
+  return cfg.userPrefix
+    || process.env.DSH_TUI_USER_PREFIX
+    || osUsername()
+    || process.env.USER
+    || process.env.LOGNAME
+    || "user";
+}
+
+/** "edabchann > " style prefix for the user's own messages. */
+export function userPrefix() {
+  return `${userName()} > `;
+}

package/src/panels.js

@@ -10,6 +10,7 @@ import { join, basename, extname } from "node:path";
 import { spawn, execFileSync } from "node:child_process";
 
 import { T, cycleTheme, themeName } from "./theme.js";
+import { loadTuiConfig, saveTuiConfig, userPrefix, userName } from "./config.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]; } });
 
@@ -554,30 +555,52 @@ export class TrajectoryPanel extends Widget {
     this.minSeq = null;
     this.allEvents = [];
     this.sessionId = null;
+    this.expandedSteps = new Set(); // step identity keys rendered 详细 (expanded)
+    this.flashStep = null;          // step NUMBER just jumped to (brief highlight)
+    this.flashUntil = 0;
+    this.loadPromise = null;        // dedupes concurrent load(currentSession)
+    this.loadTarget = null;
+    this.winLo = null;              // visible step-number window [winLo, winHi]; null = follow the tail
+    this.winHi = null;
+    // LEFT click toggles a step's 详细/简略 expansion (the ▸/▾ triangle).
     this.view = new ScrollView({ x: this.x, y: this.y, w: this.w, h: this.h, showScrollbar: true, onClick: (y) => this.#clickLine(y) });
     this.stepLines = [];
     this.query = "";
   }
-  #clickLine(lineIdx) {
-    if (this.hasMore && lineIdx === 1) { this.loadOlder(); return true; }
-    const si = this.stepLines[lineIdx];
-    if (si === undefined) return false;
+
+  /** Total step count from the session stats (falls back to the newest loaded). */
+  totalSteps() {
+    return this.stats?.steps ?? (this.steps[this.steps.length - 1]?.step ?? this.steps.length);
+  }
+
+  /** LEFT click: toggle the step under the cursor; the "▲ 更早步骤" row loads
+   *  one more window-width upward. */
+  #clickLine(y) {
+    if (this.hasMore && y === 1) { this.extendUp(); return true; }
+    const si = this.stepLines[y];
+    if (si !== undefined) { this.#toggleStep(si); return true; }
+    return false;
+  }
+
+  #eventSummary(e) {
+    const d = e.data ?? {};
+    if (e.type === "user/message") return `❯ ${String(d.content?.[0]?.text ?? "").slice(0, 40)}`;
+    if (e.type === "tool/call") return `⚙ ${d.name ?? "tool"} ${String(d.arguments ?? "").slice(0, 30)}`;
+    if (e.type === "tool/result") return "↳ 结果";
+    if (e.type === "assistant/message") return `◉ ${String(d.message?.content?.find((c) => c.type === "text")?.text ?? "").slice(0, 40)}`;
+    if (e.type === "assistant/chunk") {
+      const ch = d.chunk ?? {};
+      return ch.type === "text-delta" ? String(ch.delta ?? "").slice(0, 40) : `[${ch.blockType ?? ch.type}]`;
+    }
+    return e.type;
+  }
+
+  /** Right-click menu entry: the old event-detail picker for one step. */
+  #showDetail(si) {
     const step = this.steps[si];
-    if (!step) return false;
+    if (!step) return;
     const t0 = step.events[0]?.time, t1 = step.events[step.events.length - 1]?.time;
-    const items = step.events.map((e, i) => {
-      const d = e.data ?? {};
-      let summary = e.type;
-      if (e.type === "user/message") summary = `❯ ${String(d.content?.[0]?.text ?? "").slice(0, 40)}`;
-      else if (e.type === "tool/call") summary = `⚙ ${d.name ?? "tool"} ${String(d.arguments ?? "").slice(0, 30)}`;
-      else if (e.type === "tool/result") summary = "↳ 结果";
-      else if (e.type === "assistant/message") summary = `◉ ${String(d.message?.content?.find((c) => c.type === "text")?.text ?? "").slice(0, 40)}`;
-      else if (e.type === "assistant/chunk") {
-        const ch = d.chunk ?? {};
-        summary = ch.type === "text-delta" ? String(ch.delta ?? "").slice(0, 40) : `[${ch.blockType ?? ch.type}]`;
-      }
-      return { label: truncate(summary, 60), hint: `#${e.seq}`, idx: i, event: e };
-    });
+    const items = step.events.map((e, i) => ({ label: truncate(this.#eventSummary(e), 60), hint: `#${e.seq}`, idx: i, event: e }));
     if (t0 && t1) items.unshift({ label: `⏱ 步骤 ${step.step} · ${step.events.length} 事件 · ${fmtMs(t1 - t0)}`, hint: "", idx: -1, event: null });
     const w = Math.min(78, this.app.screen.w - 8), h = Math.min(22, this.app.screen.h - 4);
     this.app.overlay = new Picker({
@@ -594,7 +617,6 @@ export class TrajectoryPanel extends Widget {
         else if (e.type === "assistant/message") body = String(d.message?.content?.map((c) => c.text ?? "").join("\n") ?? "");
         else body = JSON.stringify(d, null, 2);
         const lines = body.split("\n").slice(0, 40).map((l) => [{ t: truncate(l, w - 6), fg: K.TXT }]);
-        // centered detail popup (never the stale top-left corner)
         const pw = Math.min(80, this.app.screen.w - 4);
         const ph = Math.min(lines.length + 5, 24);
         this.app.overlay = new Popup({
@@ -607,7 +629,161 @@ export class TrajectoryPanel extends Widget {
       },
     });
     this.app.redraw();
-    return true;
+  }
+
+  #toggleStep(si) {
+    const step = this.steps[si];
+    if (!step) return;
+    const key = this.stepKey(step);
+    // Anchor: keep the step header at its current viewport row across the
+    // expand/collapse layout change (rows are added/removed BELOW it).
+    const headerLine = this.stepLines.indexOf(si);
+    const topRow = headerLine >= 0 ? headerLine - this.view.scrollY : null;
+    if (this.expandedSteps.has(key)) this.expandedSteps.delete(key);
+    else this.expandedSteps.add(key);
+    this.buildLines();
+    if (topRow !== null) {
+      const li2 = this.stepLines.indexOf(si);
+      if (li2 >= 0) this.view.scrollY = Math.max(0, Math.min(li2 - topRow, this.view.maxScroll()));
+    }
+    this.app.redraw();
+  }
+
+  /** Stable identity of a step across loadOlder re-segmentation: the seq of
+   *  its first event (step indexes shift when older steps are prepended). */
+  stepKey(step) { return step.events[0]?.seq ?? `step-${step.step}`; }
+
+  /** Step index whose events carry the given message id (-1 when absent). */
+  indexOfMessage(messageId) {
+    if (!messageId) return -1;
+    for (let si = this.steps.length - 1; si >= 0; si--) {
+      if (this.steps[si].events.some((e) => {
+        const d = e.data ?? {};
+        return (d.id ?? d.message?.id) === messageId;
+      })) return si;
+    }
+    return -1;
+  }
+
+  /** Load older pages until step `loStep` is covered (or the session's first
+   *  step is reached). Used by jumps and Home — many pages when going far. */
+  async ensureLoaded(loStep, maxPages = 80) {
+    for (let i = 0; i < maxPages; i++) {
+      if (!this.hasMore) break;
+      if (this.steps.length && this.steps[0].step <= loStep) break;
+      this.app.setStatus(`加载更早轨迹…（当前最早 step ${this.steps[0]?.step ?? "?"}）`);
+      await this.loadOlder();
+    }
+    this.app.setStatus("");
+  }
+
+  /** Set the visible step-number window and re-render. */
+  setWindow(lo, hi) {
+    this.winLo = lo;
+    this.winHi = hi;
+    this.buildLines();
+  }
+
+  /** Step number at the top of the viewport (for anchoring after growth). */
+  #topVisibleStep() {
+    const si = this.stepLines[this.view.scrollY];
+    return si !== undefined ? this.steps[si]?.step : null;
+  }
+
+  /** Scroll so the given step number sits at the top of the viewport. */
+  #anchorScroll(stepNum) {
+    const li = this.stepLines.findIndex((si) => this.steps[si]?.step === stepNum);
+    if (li >= 0) this.view.scrollY = Math.max(0, li);
+  }
+
+  /** Scroll to a step: open a ±20 window around it (loading older pages on
+   *  demand), auto-expand and highlight the step. */
+  async jumpToStep(si) {
+    if (si < 0 || si >= this.steps.length) return;
+    const S = this.steps[si].step;
+    this.expandedSteps.add(this.stepKey(this.steps[si]));
+    this.flashStep = S;
+    this.flashUntil = Date.now() + 3000;
+    await this.ensureLoaded(Math.max(1, S - 20));
+    // ensureLoaded re-segments → re-find the step index by its number
+    const si2 = this.steps.findIndex((s) => s.step === S);
+    this.setWindow(Math.max(1, S - 20), Math.min(this.totalSteps(), S + 20));
+    const li = si2 >= 0 ? this.stepLines.indexOf(si2) : -1;
+    this.view.scrollY = li >= 0 ? Math.max(0, li - 2) : 0;
+    this.app.redraw();
+  }
+
+  /** PgUp: extend the window 10 steps upward (loading older if needed),
+   *  keeping the view anchored on the step that was at the top. */
+  async extendUp() {
+    const N = this.totalSteps();
+    if (this.winLo == null) { this.winLo = Math.max(1, N - 19); this.winHi = N; }
+    if (this.winLo <= 1 && this.steps.length && this.steps[0].step <= 1) {
+      this.app.toast("已到最早步骤");
+      return;
+    }
+    const anchor = this.#topVisibleStep() ?? this.winLo;
+    this.winLo = Math.max(1, this.winLo - 10);
+    if (!this.steps.length || this.steps[0].step > this.winLo) await this.ensureLoaded(this.winLo);
+    this.buildLines();
+    this.#anchorScroll(anchor);
+    this.app.redraw();
+  }
+
+  /** PgDn: extend the window 10 steps downward (the newer steps are already
+   *  loaded — the tail is always kept). */
+  extendDown() {
+    const N = this.totalSteps();
+    if (this.winLo == null) { this.winLo = Math.max(1, N - 19); this.winHi = N; }
+    if (this.winHi >= N) { this.app.toast("已到最新步骤"); return; }
+    this.winHi = Math.min(N, this.winHi + 10);
+    this.buildLines();
+    this.app.redraw();
+  }
+
+  /** Home: jump to the very first steps (loading all the way back). */
+  async gotoHome() {
+    await this.ensureLoaded(1);
+    this.setWindow(1, 20);
+    const li = this.stepLines.findIndex((si) => this.steps[si]?.step === 1);
+    this.view.scrollY = li >= 0 ? li : 0;
+    this.app.toast("已跳到最早步骤（step 1–20）");
+    this.app.redraw();
+  }
+
+  /** End: jump to the newest steps. */
+  gotoEnd() {
+    const N = this.totalSteps();
+    this.setWindow(Math.max(1, N - 19), N);
+    this.view.scrollY = this.view.maxScroll();
+    this.app.toast(`已跳到最新步骤（step ${Math.max(1, N - 19)}–${N}）`);
+    this.app.redraw();
+  }
+
+  /** Chat → trajectory jump target: load the current session's steps (if not
+   *  already), page back until the message's step is loaded, then jump. */
+  async focusMessage(messageId) {
+    if (this.sessionId !== this.app.currentSession || this.steps.length === 0) {
+      await this.load(this.app.currentSession);
+    }
+    let si = this.indexOfMessage(messageId);
+    for (let i = 0; si < 0 && this.hasMore && i < 10; i++) {
+      await this.loadOlder();
+      si = this.indexOfMessage(messageId);
+    }
+    if (si < 0 && messageId) {
+      // still not found — the message is far back; scan everything (bounded)
+      await this.ensureLoaded(1, 60);
+      si = this.indexOfMessage(messageId);
+    }
+    if (si >= 0) {
+      const S = this.steps[si].step;
+      await this.jumpToStep(si);
+      this.app.toast(`已定位到 step ${S}`);
+    } else if (this.steps.length) {
+      await this.jumpToStep(this.steps.length - 1);
+      this.app.toast(messageId ? "对应步骤不在已加载窗口" : "消息未关联步骤，已到最新步骤");
+    }
   }
   relayout(x, y, w, h) {
     this.x = x; this.y = y; this.w = w; this.h = h;
@@ -624,6 +800,14 @@ export class TrajectoryPanel extends Widget {
       this.app.redraw();
       return;
     }
+    // Dedupe concurrent loads of the same session (setMode + focusMessage).
+    if (this.loadPromise && this.loadTarget === sessionId) return this.loadPromise;
+    this.loadTarget = sessionId;
+    this.loadPromise = this.#doLoad(sessionId);
+    try { await this.loadPromise; }
+    finally { this.loadPromise = null; this.loadTarget = null; }
+  }
+  async #doLoad(sessionId) {
     this.sessionId = sessionId;
     this.loading = true;
     this.steps = [];
@@ -680,19 +864,24 @@ export class TrajectoryPanel extends Widget {
       if (cur) cur.events.push(event);
     }
     if (cur && cur.events.length) steps.push(cur);
-    this.steps = steps.slice(-600);
+    // Keep every loaded step: Home/End navigation pages across the whole
+    // session, so older steps must survive until `r` re-fetches fresh.
+    this.steps = steps;
   }
   buildLines() {
     const w = Math.max(40, this.w - 2);
+    const N = this.totalSteps();
+    const lo = this.winLo ?? Math.max(1, N - 19);
+    const hi = this.winHi ?? N;
     const lines = [];
-    lines.push([{ t: "轨迹 — 步骤时间轴（每行一个色块，点击查看详情 · r 刷新）", fg: K.ACCENT, bold: true }]);
-    if (this.hasMore) lines.push([{ t: "▲ 更早步骤（点击 / PgUp 加载）", fg: K.FAINT }]);
+    lines.push([{ t: "轨迹 — 步骤时间轴（左键展开/折叠 · PgUp/PgDn 上下加载 · Home/End 首尾 · Ctrl+E 转跳 · r 刷新）", fg: K.ACCENT, bold: true }]);
+    if (this.hasMore) lines.push([{ t: "▲ 更早步骤（点击 / PgUp 向上加载 10 步）", fg: K.FAINT }]);
     else lines.push([{ t: "" }]);
     const st = this.stats;
     if (st) {
       lines.push([{ t: `回合 ${st.turns} · 步骤 ${st.steps} · LLM ${fmtMs(st.llmMs)} · 工具 ${fmtMs(st.toolMs)}`, fg: K.DIM }]);
     }
-    lines.push([{ t: `步骤（已加载 ${this.steps.length}${this.hasMore ? "+" : ""}）：`, fg: K.DIM, underline: true }]);
+    lines.push([{ t: `窗口 step ${lo}–${hi} · 共 ${N} 步${this.winLo == null ? "（跟随最新）" : ""}：`, fg: K.DIM, underline: true }]);
     this.stepLines = [];
     const list = this.query
       ? this.steps.filter((t) => t.events.some((e) => {
@@ -700,8 +889,8 @@ export class TrajectoryPanel extends Widget {
         const hay = `${e.type} ${d.name ?? ""} ${typeof d.content === "string" ? d.content : ""}`.toLowerCase();
         return hay.includes(this.query.toLowerCase());
       }))
-      : this.steps;
-    for (const step of list.slice(-40).reverse()) {
+      : this.steps.filter((s) => s.step >= lo && s.step <= hi);
+    for (const step of list.reverse()) {
       const si = this.steps.indexOf(step);
       const tools = [...new Set(step.events.filter((e) => e.type === "tool/call").map((e) => e.data?.name))];
       const hasResult = step.events.some((e) => e.type === "tool/result");
@@ -710,12 +899,27 @@ export class TrajectoryPanel extends Widget {
       const dur = 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 label = ` step ${String(step.step).padStart(3)}  ${pad(dur, 8)}  ${summary}`;
-      const segs = [{ t: label, fg: K.TXT, bg, bold: true }];
+      const open = this.expandedSteps.has(this.stepKey(step));       // 详细
+      const flash = this.flashStep === step.step && Date.now() < this.flashUntil;
+      const rowBg = flash ? T.ACCENT : bg;
+      const label = `${open ? "▾" : "▸"} step ${String(step.step).padStart(3)}  ${pad(dur, 8)}  ${summary}  ${open ? "[折叠]" : "[展开]"}`;
+      const segs = [{ t: label, fg: flash ? T.SELFG : K.TXT, bg: rowBg, bold: true }];
       const fill = w - strWidth(label);
-      if (fill > 0) segs.push({ t: " ".repeat(fill), bg });
+      if (fill > 0) segs.push({ t: " ".repeat(fill), bg: rowBg });
       lines.push(segs);
       this.stepLines[lines.length - 1] = si;
+      if (open) {
+        // 详细 mode: the step's events inline under its color block.
+        const evs = step.events.slice(0, 12);
+        for (const e of evs) {
+          lines.push([{ t: `    #${String(e.seq).padStart(4)} ${truncate(this.#eventSummary(e), w - 12)}`, fg: K.DIM, bg }]);
+          this.stepLines[lines.length - 1] = si;
+        }
+        if (step.events.length > evs.length) {
+          lines.push([{ t: `    …共 ${step.events.length} 个事件（右键 → 查看详情）`, fg: K.FAINT, bg }]);
+          this.stepLines[lines.length - 1] = si;
+        }
+      }
     }
     this.view.setLines(lines);
   }
@@ -727,7 +931,36 @@ export class TrajectoryPanel extends Widget {
     }
     this.view.render(screen);
   }
-  onMouse(ev) { return this.view.onMouse(ev); }
+  onMouse(ev) {
+    // RIGHT click on a step: context menu (expand/collapse · jump · detail).
+    if (ev.kind === "press" && ev.button === 2) {
+      const y = ev.y - this.view.y + this.view.scrollY;
+      const si = this.stepLines[y];
+      const step = si !== undefined ? this.steps[si] : null;
+      if (step) {
+        const open = this.expandedSteps.has(this.stepKey(step));
+        this.app.openMenu([
+          { label: open ? "折叠（简略）" : "展开（详细）", action: () => this.#toggleStep(si) },
+          { label: "转跳对话", action: () => this.app.jumpToChatStep(si) },
+          { label: "查看详情", action: () => this.#showDetail(si) },
+        ], ev);
+        return true;
+      }
+      if (this.hasMore && y === 1) {
+        this.app.openMenu([{ label: "加载更早步骤", action: () => this.loadOlder() }], ev);
+        return true;
+      }
+      // swallow right-clicks on non-step rows (header/stats) so they cannot
+      // leak into the chat view's context menu underneath.
+      return this.view.inside(ev.x, ev.y);
+    }
+    // wheel / scrollbar / LEFT-click toggle keep working (view.onClick)
+    if (this.view.onMouse(ev)) return true;
+    // swallow left-clicks on non-step rows (header/stats) so they cannot
+    // leak through to the chat view underneath (which shares this rectangle).
+    if (ev.kind === "press" && ev.button === 0 && this.view.inside(ev.x, ev.y)) return true;
+    return false;
+  }
   onKey(ev) {
     if (ev.type === "text") { this.query += ev.text; this.buildLines(); this.app.redraw(); return true; }
     if (ev.type !== "key") return false;
@@ -737,14 +970,22 @@ 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);
+    if (ev.name === "char" && ev.key === "r" && !ev.ctrl) {
+      this.winLo = this.winHi = null;
+      this.steps = [];
+      this.load(this.sessionId);
+      return true;
+    }
+    if (ev.name === "pgup") { this.extendUp(); return true; }
+    if (ev.name === "pgdn") { this.extendDown(); return true; }
+    if (ev.name === "home") { this.gotoHome(); return true; }
+    if (ev.name === "end") { this.gotoEnd(); return true; }
+    if (ev.name === "up" || ev.name === "down") return this.view.onKey(ev);
     return false;
   }
 }
 
-function fmtMs(ms) {
+export function fmtMs(ms) {
   if (ms == null || isNaN(ms)) return "—";
   if (ms < 1000) return `${Math.round(ms)}ms`;
   if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
@@ -943,7 +1184,8 @@ export class ControlPanel extends Widget {
       ["Ctrl+A", "子代理", () => { this.app.closeOverlay(); this.app.setMode("subagent"); }],
       ["Ctrl+K", "技能", () => { this.app.closeOverlay(); this.app.setMode("skills"); }],
       ["Ctrl+G", "目标", () => this.app.showGoal()],
-      ["Ctrl+J", "任务", () => this.app.showJobs()],
+      ["Ctrl+J", "后台任务", () => this.app.showJobs()],
+      ["Ctrl+E", "步骤转跳（fzf 式）", () => this.app.quickJumpStep()],
       ["Ctrl+B", "侧栏 显示/隐藏", () => this.app.toggleSidebar()],
       ["Ctrl+Q", "退出", () => this.app.stop()],
     ];
@@ -1091,21 +1333,98 @@ export class ControlPanel extends Widget {
 
 // ---- Jobs & goal popups ----
 
-export function buildJobsPopup(app) {
-  const jobs = app.jobs ?? [];
-  const lines = jobs.length === 0
-    ? [[{ t: "（当前没有任务帧）", fg: K.FAINT }]]
-    : jobs.map((j) => {
+/** Background-job list (Ctrl+J) with per-job expand/collapse: Enter/→/l 展开,
+ *  ←/h 折叠, ↑↓/j k 选择, q/Esc 关闭, click toggles too. */
+export class JobsPanel extends Popup {
+  constructor(app) {
+    const jobs = app.jobs ?? [];
+    super({
+      x: 5, y: 3, w: Math.min(84, app.screen.w - 8), h: Math.min(Math.max(jobs.length + 5, 7), 24),
+      title: "后台任务（Ctrl+J 查看详情）", lines: [],
+      buttons: [{ label: "关闭(q)", action: "close" }],
+      onAction: () => app.closeOverlay(),
+    });
+    this.app = app;
+    this.jobs = jobs;
+    this.expanded = new Set(); // job indexes rendered expanded
+    this.sel = 0;
+    this.rowOf = [];           // rendered line → job index (-1 = chrome/detail)
+    this.rebuild();
+  }
+  #detailLines(j) {
+    const lines = [];
+    for (const [k, v] of Object.entries(j)) {
+      if (["status", "kind", "label"].includes(k)) continue;
+      const s = v !== null && typeof v === "object" ? JSON.stringify(v) : String(v ?? "");
+      if (s === "") continue;
+      lines.push([{ t: `      ${k}: ${truncate(s, this.w - 14)}`, fg: K.DIM }]);
+      if (lines.length > 8) break;
+    }
+    return lines;
+  }
+  rebuild() {
+    let lines = [[{ t: "  这些任务在后台运行,不阻塞会话 — Enter/→/l 展开,←/h 折叠,q 关闭", fg: K.DIM }]];
+    const rowOf = [-1];
+    const jobs = this.jobs;
+    if (jobs.length === 0) {
+      lines.push([{ t: "  （当前没有任务帧）", fg: K.FAINT }]);
+      rowOf.push(-1);
+    }
+    for (let i = 0; i < jobs.length; i++) {
+      const j = jobs[i];
       const icon = j.status === "running" ? "⚙" : j.status === "completed" ? "✓" : j.status === "failed" ? "✗" : "·";
       const color = j.status === "running" ? K.WARN : j.status === "completed" ? K.OK : j.status === "failed" ? K.ERR : K.DIM;
-      return [{ t: ` ${icon} ${truncate(j.kind, 14)}`, fg: color, bold: true }, { t: ` ${truncate(j.label, 44)}`, fg: K.TXT }, { t: ` ${j.status}`, fg: K.DIM }];
-    });
-  return new Popup({
-    x: 6, y: 3, w: Math.min(80, app.screen.w - 12), h: Math.min(jobs.length + 4, 20), title: "任务",
-    lines: [[{ t: "" }], ...lines],
-    buttons: [{ label: "关闭", action: "close" }],
-    onAction: () => app.closeOverlay(),
-  });
+      const open = this.expanded.has(i);
+      const bg = i === this.sel ? T.MENUSEL : T.BG2;
+      lines.push([
+        { t: ` ${open ? "▾" : "▸"} ${icon} ${truncate(j.kind, 14)}`, fg: color, bold: true, bg },
+        { t: ` ${truncate(j.label, 36)}`, fg: K.TXT, bg },
+        { t: ` ${j.status}`, fg: K.DIM, bg },
+      ]);
+      rowOf.push(i);
+      if (open) for (const fl of this.#detailLines(j)) { lines.push(fl); rowOf.push(-1); }
+    }
+    if (lines.length > this.h - 3) {
+      lines = [...lines.slice(0, this.h - 4), [{ t: `  …共 ${jobs.length} 个任务`, fg: K.FAINT }]];
+    }
+    this.lines = lines;
+    this.rowOf = rowOf;
+  }
+  #toggle(i) {
+    if (this.expanded.has(i)) this.expanded.delete(i);
+    else this.expanded.add(i);
+    this.rebuild();
+    this.app.redraw();
+  }
+  onKey(ev) {
+    if (ev.type === "key") {
+      if (ev.name === "escape" || (ev.name === "char" && ev.key === "q" && !ev.ctrl)) { this.app.closeOverlay(); return true; }
+      if (this.jobs.length === 0) return super.onKey(ev);
+      if (ev.name === "up" || (ev.name === "char" && ev.key === "k" && !ev.ctrl)) {
+        this.sel = Math.max(0, this.sel - 1); this.rebuild(); return true;
+      }
+      if (ev.name === "down" || (ev.name === "char" && ev.key === "j" && !ev.ctrl)) {
+        this.sel = Math.min(this.jobs.length - 1, this.sel + 1); this.rebuild(); return true;
+      }
+      if (ev.name === "right" || ev.name === "enter" || (ev.name === "char" && ev.key === "l" && !ev.ctrl)) {
+        if (this.jobs[this.sel]) { this.expanded.add(this.sel); this.rebuild(); } return true;
+      }
+      if (ev.name === "left" || (ev.name === "char" && ev.key === "h" && !ev.ctrl)) {
+        this.expanded.delete(this.sel); this.rebuild(); return true;
+      }
+    }
+    return super.onKey(ev);
+  }
+  onMouse(ev) {
+    if (super.onMouse(ev)) return true; // buttons
+    if (ev.kind === "press" && ev.button === 0) {
+      const i = ev.y - this.y - 1;
+      const jIdx = this.rowOf[i];
+      if (jIdx >= 0) { this.sel = jIdx; this.#toggle(jIdx); return true; }
+      return true;
+    }
+    return false;
+  }
 }
 
 export function buildGoalPopup(app) {
@@ -1172,11 +1491,19 @@ export class SettingsPanel extends Widget {
       const d = await this.app.api.call("settings.describe");
       this.namespaces = d.namespaces ?? [];
       this.writable = d.writable;
-      this.selectNs(0);
     } catch (e) {
       this.app.toast(`设置加载失败: ${e.message}`);
       this.app.setMode("chat");
+      return;
     }
+    // TUI-local settings ride the same tree editor, but persist to the TUI
+    // config file instead of the host settings (settings.mutate knows nothing
+    // about them). userPrefix = the chat's "edabchann > " display name.
+    this.namespaces.unshift({
+      ns: "TUI 界面", applies: "live", local: true,
+      value: { userPrefix: userName() },
+    });
+    this.selectNs(0);
   }
   selectNs(i) {
     this.nsIdx = Math.max(0, Math.min(this.namespaces.length - 1, i));
@@ -1228,9 +1555,10 @@ export class SettingsPanel extends Widget {
     this.nsList.render(screen);
     const ns = this.currentNs();
     if (ns) {
-      screen.text(this.x + 28, this.y, ` ${ns.ns}  rev${ns.revision}  ${this.writable === false ? "(只读)" : ""}`, { fg: K.ACCENT, bold: true });
+      const revTag = ns.local ? "" : ` rev${ns.revision}`;
+      screen.text(this.x + 28, this.y, ` ${ns.ns}${revTag}  ${this.writable === false && !ns.local ? "(只读)" : ""}`, { fg: K.ACCENT, bold: true });
       const pend = this.pendingOps.length ? `  ⚠ ${this.pendingOps.length} 项待保存` : "";
-      if (pend) screen.text(this.x + 28 + strWidth(` ${ns.ns}  rev${ns.revision}  `), this.y, pend, { fg: K.WARN });
+      if (pend) screen.text(this.x + 28 + strWidth(` ${ns.ns}${revTag}  `), this.y, pend, { fg: K.WARN });
     }
     this.tree.render(screen);
     if (this.editing) {
@@ -1300,6 +1628,21 @@ export class SettingsPanel extends Widget {
   async save() {
     const ns = this.currentNs();
     if (!ns || this.pendingOps.length === 0) { this.app.toast("没有待保存的修改"); return; }
+    if (ns.local) {
+      // TUI-local config: write the config file, apply instantly.
+      const v = applyOps(ns.value, this.pendingOps);
+      const name = String(v.userPrefix ?? "").trim();
+      if (saveTuiConfig({ userPrefix: name })) {
+        this.pendingOps = [];
+        this.app.toast(name ? `已保存显示名 “${name}”（即时生效）` : "已清除自定义显示名（回到系统用户名）");
+        this.app.chat.cache.clear();
+        this.app.chat.queueRebuild();
+        await this.load();
+      } else {
+        this.app.toast("保存失败：无法写入 TUI 配置文件");
+      }
+      return;
+    }
     try {
       await this.app.api.call("settings.mutate", { ns: ns.ns, ops: this.pendingOps, expectedRevision: ns.revision });
       this.pendingOps = [];

package/src/text.js

@@ -53,6 +53,16 @@ export function pad(s, w, align = "left") {
   return align === "right" ? sp + s : s + sp;
 }
 
+/** Chinese-unit duration: 12秒 / 3分05秒 / 1小时02分03秒. */
+export function fmtDuration(ms) {
+  if (ms == null || isNaN(ms) || ms < 0) return "—";
+  const s = Math.floor(ms / 1000);
+  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+  if (h > 0) return `${h}小时${String(m).padStart(2, "0")}分${String(sec).padStart(2, "0")}秒`;
+  if (m > 0) return `${m}分${String(sec).padStart(2, "0")}秒`;
+  return `${sec}秒`;
+}
+
 export function hexRgb(hex) {
   const m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
   if (!m) return null;

package/src/views.js

@@ -1,14 +1,16 @@
 // views.js — App composition: session list + chat timeline + approvals + status.
 import { Screen } from "./screen.js";
 import { renderMd, C } from "./md.js";
-import { truncate, strWidth, bars } from "./text.js";
+import { truncate, strWidth, bars, fmtDuration } from "./text.js";
 import { readFileSync } from "node:fs";
 import { Widget, List, ScrollView, Input, Popup, Menu, StatusBar } from "./widgets.js";
+import { userPrefix, saveTuiConfig, loadTuiConfig, userName } from "./config.js";
+export { userPrefix, saveTuiConfig, loadTuiConfig, userName } from "./config.js";
 import {
   Picker, buildCommandPalette, buildModelPicker, buildModePicker, buildPermissionPicker,
   modeName, permName, WorkspacePanel, TrajectoryPanel, DirPicker,
-  ImagePopup, kittyCapable, buildJobsPopup, buildGoalPopup, SettingsPanel, SubagentPanel,
-  SkillsPanel, ControlPanel,
+  ImagePopup, kittyCapable, buildGoalPopup, SettingsPanel, SubagentPanel,
+  SkillsPanel, ControlPanel, JobsPanel, fmtMs,
 } from "./panels.js";
 
 import { T, themeName } from "./theme.js";
@@ -112,17 +114,23 @@ function diffText(oldText, newText, width) {
 // ---- Chat node model ----
 
 /** Apply ONE event onto a mutable nodes array (shared by full-window
- *  derivation and the incremental mux merge — the two paths must agree). */
-function applyEvent(nodes, event, view, log) {
+ *  derivation and the incremental mux merge — the two paths must agree).
+ *  `state` carries the current step number across calls ({ step: number }). */
+function applyEvent(nodes, event, view, log, state = null) {
+  const st = state ?? { step: null };
   const cur = () => nodes[nodes.length - 1];
   const d = event.data ?? {};
   switch (event.type) {
+      case "step/start": {
+        st.step = d.step ?? (st.step ?? 0) + 1;
+        break;
+      }
       case "user/message": {
         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 });
-        else if (images) nodes.push({ kind: "user", text: "", images, id });
+        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 });
         break;
       }
       case "assistant/message": {
@@ -137,6 +145,10 @@ function applyEvent(nodes, event, view, log) {
           else if (p.type === "tool-call") { /* handled by tool/call event */ }
           else blocks.push({ kind: "other", text: JSON.stringify(p).slice(0, 500) });
         }
+        // Finalization stamps: endedAt marks when the message completed. The
+        // block start time is left untouched so syncTail's inheritStarts can
+        // carry the ORIGINAL block start across re-derivations.
+        for (const b of blocks) b.endedAt = event.time ?? Date.now();
         const images = partsToImages(d.message?.content);
         const id = d.message?.id ?? null;
         const last = cur();
@@ -146,7 +158,7 @@ function applyEvent(nodes, event, view, log) {
           last.id = id ?? last.id;
           last.streaming = false;
         } else {
-          nodes.push({ kind: "assistant", blocks, images, id, streaming: false });
+          nodes.push({ kind: "assistant", blocks, images, id, streaming: false, step: st.step });
         }
         break;
       }
@@ -154,7 +166,7 @@ function applyEvent(nodes, event, view, log) {
         const ch = d.chunk ?? {};
         let node = cur();
         if (!node || node.kind !== "assistant" || node.finalized) {
-          node = { kind: "assistant", blocks: [], streaming: true, finalized: false };
+          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step };
           nodes.push(node);
         }
         node.streaming = true;
@@ -176,7 +188,7 @@ function applyEvent(nodes, event, view, log) {
           }
         } else if (ch.type === "block-end") {
           const b = node.blocks[ch.index ?? 0];
-          if (b) b.streaming = false;
+          if (b) { b.streaming = false; b.endedAt = event.time ?? b.endedAt; }
         }
         break;
       }
@@ -196,14 +208,15 @@ function applyEvent(nodes, event, view, log) {
           if (d.arguments !== undefined) block.args = d.arguments;
           if (view?.view !== undefined) block.view = view.view;
           block.result = null;
+          if (block.startedAt === undefined) block.startedAt = event.time ?? Date.now();
           break;
         }
         let node = cur();
         if (!node || node.kind !== "assistant") {
-          node = { kind: "assistant", blocks: [], streaming: true, finalized: false };
+          node = { kind: "assistant", blocks: [], streaming: true, finalized: false, step: st.step };
           nodes.push(node);
         }
-        node.blocks.push({ kind: "tool", name: d.name, args: d.arguments, callId, view: view?.view, result: null });
+        node.blocks.push({ kind: "tool", name: d.name, args: d.arguments, callId, view: view?.view, result: null, startedAt: event.time ?? Date.now() });
         break;
       }
       case "tool/result": {
@@ -211,12 +224,23 @@ function applyEvent(nodes, event, view, log) {
         const text = partsToText(d.message?.content);
         const node = nodes.findLast((nd) => nd.kind === "assistant" && nd.blocks.some((b) => b.kind === "tool" && b.callId === callId));
         const block = node?.blocks.find((b) => b.kind === "tool" && b.callId === callId);
-        if (block) block.result = text ?? JSON.stringify(d).slice(0, 400);
+        if (block) {
+          block.result = text ?? JSON.stringify(d).slice(0, 400);
+          block.endedAt = event.time ?? Date.now();
+        }
         break;
       }
       case "step/end": {
         const node = cur();
-        if (node && node.kind === "assistant") { node.streaming = false; node.finalized = true; }
+        if (node && node.kind === "assistant") {
+          node.streaming = false;
+          node.finalized = true;
+          // a missed block-end must not leave a forever-running timer
+          for (const b of node.blocks ?? []) {
+            b.streaming = false;
+            if (b.endedAt === undefined) b.endedAt = event.time ?? Date.now();
+          }
+        }
         break;
       }
       case "session/title": {
@@ -229,7 +253,7 @@ function applyEvent(nodes, event, view, log) {
       }
       default: {
         // known benign control events: silently ignored
-        const KNOWN = new Set(["turn/start", "turn/end", "step/start", "step/end", "todo/write",
+        const KNOWN = new Set(["turn/start", "turn/end", "todo/write",
           "agent/inbox/spliced", "request/header", "request/context", "permission/preset",
           "sandbox/mode", "approval/policy", "session/title-llm-request", "command/done", "command/failed"]);
         if (!KNOWN.has(event.type) && !SEEN_TYPES.has(event.type)) {
@@ -243,7 +267,8 @@ function applyEvent(nodes, event, view, log) {
 /** Re-derive the whole node list from a complete event window (open/poll). */
 function nodeForEvents(events, log) {
   const nodes = [];
-  for (const { event, view } of events) applyEvent(nodes, event, view, log);
+  const state = { step: null };
+  for (const { event, view } of events) applyEvent(nodes, event, view, log, state);
   return nodes;
 }
 
@@ -567,6 +592,7 @@ export class ChatView extends Widget {
     this.pressY = null;
     this.selStart = null;
     this.selEnd = null;
+    this.stepState = { step: null }; // step/start tracking for the mux merge path
   }
 
   /** Queue a rebuild; flushed on the next frame render (throttles streaming). */
@@ -576,7 +602,7 @@ export class ChatView extends Widget {
    *  existing block instead of wiping it (the old "shows then deleted" bug). */
   mergeEvents(entries) {
     for (const { event, view } of entries) {
-      applyEvent(this.nodes, event, view, this.app.log);
+      applyEvent(this.nodes, event, view, this.app.log, this.stepState);
     }
     this.running = this.nodes.some((n) => n.kind === "assistant" && n.streaming);
     this.queueRebuild();
@@ -666,14 +692,16 @@ export class ChatView extends Widget {
   }
 
   jumpToNode(idx) {
-    if (idx < 0 || idx >= this.nodes.length) return;
+    this.flushRebuild(); // lineMap must reflect the current nodes array
+    if (idx < 0 || idx >= this.nodes.length) return false;
     for (let li = 0; li < this.lineMap.length; li++) {
       if (this.lineMap[li]?.nodeIdx === idx) {
         this.view.scrollY = Math.max(0, li - 2);
         this.app.redraw();
-        return;
+        return true;
       }
     }
+    return false; // node exists but is outside the rendered tail window
   }
 
   queueRebuild() { this.rebuildQueued = true; }
@@ -808,6 +836,9 @@ export class ChatView extends Widget {
   }
 
   #clickLine(y, ev) {
+    // A queued (deferred) rebuild would leave lineMap one frame behind the
+    // nodes array; flush first so the click maps to the CURRENT node/block.
+    this.flushRebuild();
     // map rendered line back to node via cached line→node map
     const info = this.lineMap?.[y];
     if (info) {
@@ -853,7 +884,7 @@ export class ChatView extends Widget {
     const markImg = (nodeIdx, imgIdx) => lineMap.push({ nodeIdx, imgIdx });
     // render only the tail of very long sessions; earlier nodes load via pagination
     const MAX_NODES = 150;
-    const skipCount = this.nodes.length - MAX_NODES;
+    const skipCount = Math.max(0, this.nodes.length - MAX_NODES);
     const nodes = skipCount > 0 ? this.nodes.slice(skipCount) : this.nodes;
     lines.push([{ t: truncate(this.title || this.sessionId?.slice(0, 8) || "", w - 2), fg: K.DIM }]);
     mark(-1);
@@ -874,7 +905,7 @@ export class ChatView extends Widget {
           return ".";
         }).join("")
         : "";
-      const ckey = `${realIdx}|${w}|${expKey}|${blockKeys}|${this.thinkMode}|${this.bashMode}|${node.streaming ? "s" : "f"}|${themeName()}`;
+      const ckey = `${realIdx}|${w}|${expKey}|${blockKeys}|${this.thinkMode}|${this.bashMode}|${node.streaming ? "s" : "f"}|${themeName()}|${node.step ?? "-"}|${userPrefix()}`;
       // 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);
@@ -916,9 +947,19 @@ export class ChatView extends Widget {
           const text = node.text ?? "";
           const shown = isExp ? text : text.slice(0, 2000);
           beginCard("USERBG");
-          lines.push([{ t: "▎ ", fg: K.OK }]);
-          mark(realIdx);
-          for (const ln of renderMd(shown, w - 4)) { lines.push([{ t: "  " }, ...ln]); mark(realIdx); }
+          // First line carries the customizable "name > " marker and the
+          // message text starts on that same line (no blank first row).
+          const prefix = userPrefix();
+          const pw = strWidth(prefix);
+          const md = renderMd(shown, Math.max(10, w - 4 - pw));
+          if (md.length === 0) {
+            lines.push([{ t: "  " + prefix, fg: K.OK, bold: true }]);
+            mark(realIdx);
+          } else {
+            lines.push([{ t: "  " + prefix, fg: K.OK, bold: true }, ...md[0]]);
+            mark(realIdx);
+            for (const ln of md.slice(1)) { lines.push([{ t: "  " + " ".repeat(pw) }, ...ln]); mark(realIdx); }
+          }
           if (!isExp && text.length > 2000) lines.push([{ t: "  …", fg: K.FAINT }]);
           if (node.images) {
             for (let ii = 0; ii < node.images.length; ii++) {
@@ -939,15 +980,22 @@ export class ChatView extends Widget {
           if (blocks.length === 0) { lines.push([{ t: "  …", fg: K.FAINT }]); mark(realIdx); break; }
           for (let bi = 0; bi < blocks.length; bi++) {
             const b = blocks[bi];
+            const stepTag = node.step != null ? ` (step ${node.step})` : "";
             if (b.kind === "reasoning") {
               const key = `${realIdx}:${bi}`;
               const manuallyCollapsed = this.collapsedBlocks.has(key);
               const manuallyExpanded = this.expanded.has(key);
               const open = manuallyExpanded || (!manuallyCollapsed && this.thinkMode === "expanded");
               beginCard("THINKBG");
-              const thinkMeta = b.streaming
-                ? ` · ${fmtElapsed(Date.now() - (b.startedAt ?? Date.now()))}`
-                : `（${b.text?.length ?? 0} 字）`;
+              // Live blocks tick (已经过…); finished blocks freeze at their
+              // total (已完成,耗时…). No timestamps → no bogus timer shown.
+              let timing = "";
+              if (b.streaming) {
+                timing = ` 已经过 ${fmtDuration(Date.now() - (b.startedAt ?? Date.now()))}`;
+              } else if (b.startedAt !== undefined && b.endedAt !== undefined) {
+                timing = ` 已完成,耗时 ${fmtDuration(b.endedAt - b.startedAt)}`;
+              }
+              const thinkMeta = `${stepTag}（${b.text?.length ?? 0} 字）${timing}`;
               lines.push([{ t: "💭 思考" + (b.streaming ? "…" : "") + thinkMeta + (open ? " [t 折叠]" : " [t 展开]"), fg: K.FAINT }]);
               mark(realIdx, bi);
               if (open) {
@@ -968,10 +1016,18 @@ export class ChatView extends Widget {
               const glyph = b.result == null && !b.done ? "⏳" : exitCode !== undefined && exitCode !== 0 ? "✗" : "✓";
               const card = b.view ? renderToolCard(b.view, w, open) : [];
               beginCard(status);
+              let timing = "";
+              if (b.result == null && !b.done) {
+                timing = ` 已经过 ${fmtDuration(Date.now() - (b.startedAt ?? Date.now()))}`;
+              } else if (b.startedAt !== undefined && b.endedAt !== undefined) {
+                const failed = exitCode !== undefined && exitCode !== 0;
+                timing = ` ${failed ? "失败" : "已完成"},耗时 ${fmtDuration(b.endedAt - b.startedAt)}`;
+              }
               lines.push([
                 { 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: stepTag + timing, fg: K.DIM },
                 { t: open ? " [b 折叠]" : " [b 展开]", fg: K.FAINT },
               ]);
               mark(realIdx, bi);
@@ -998,14 +1054,25 @@ export class ChatView extends Widget {
               sep();
             } else if (b.kind === "other") {
               beginCard("THINKBG");
-              lines.push([{ t: "  " + truncate(b.text, w - 4), fg: K.DIM }]);
+              lines.push([{ t: "  " + stepTag + truncate(b.text, w - 4 - strWidth(stepTag)), fg: K.DIM }]);
               mark(realIdx, bi);
               sep();
             } else {
               beginCard("CARD");
               const text = b.text ?? "";
-              for (const ln of renderMd(text, w - 4)) { lines.push([{ t: "  " }, ...ln]); mark(realIdx); }
-              mark(realIdx, bi);
+              const md = renderMd(text, w - 4 - strWidth(stepTag));
+              if (md.length > 0) {
+                lines.push([{ t: "  " }, { t: stepTag, fg: K.FAINT }, ...md[0]]);
+                mark(realIdx);
+                for (const ln of md.slice(1)) { lines.push([{ t: "  " }, ...ln]); mark(realIdx); }
+                // Label the block's LAST line with its blockIdx IN PLACE. A
+                // pushed mark without a line would desync lineMap from lines
+                // and shift every later click mapping (the off-by-one bug).
+                lineMap[lineMap.length - 1] = { nodeIdx: realIdx, blockIdx: bi };
+              } else {
+                lines.push([{ t: "  " + stepTag, fg: K.FAINT }]);
+                mark(realIdx, bi);
+              }
               sep();
             }
           }
@@ -1187,6 +1254,7 @@ export class ChatView extends Widget {
         return true;
       }
       if (ev.kind === "press" && ev.button === 2) {
+        this.flushRebuild(); // keep lineMap current with the nodes array
         const y = ev.y - this.view.y + this.view.scrollY;
         const info = this.lineMap?.[y];
         if (info) {
@@ -1195,6 +1263,9 @@ export class ChatView extends Widget {
             { label: "复制消息", action: () => this.app.copyNode(info.nodeIdx) },
             { label: "展开 / 折叠", action: () => this.#clickLine(y, ev) },
           ];
+          if (node?.id) {
+            items.push({ label: "转跳轨迹", action: () => this.app.jumpToTrajectoryNode(info.nodeIdx) });
+          }
           if (node?.kind === "assistant" && node.id) {
             const fb = this.app.feedbackMap.get(node.id);
             const cur = fb?.rating === "positive" ? " ✓已好评" : fb?.rating === "negative" ? " ✓已差评" : "";
@@ -1287,13 +1358,6 @@ function toolSummary(b) {
   return null;
 }
 
-function fmtElapsed(ms) {
-  if (ms == null || isNaN(ms) || ms < 0) return "0.0s";
-  if (ms < 1000) return `${(ms / 1000).toFixed(1)}s`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(0)}s`;
-  return `${Math.floor(ms / 60000)}m${Math.floor((ms % 60000) / 1000)}s`;
-}
-
 function fmtTokens(n) {
   if (n == null || isNaN(n)) return "0";
   if (n >= 1e6) return (n / 1e6).toFixed(1) + "M";
@@ -1518,6 +1582,38 @@ export class App {
     this.setMode(this.mode === "trajectory" ? "chat" : "trajectory");
   }
 
+  /** Chat → trajectory: open the trajectory panel at the step containing a
+   *  chat node (right-click menu), loading older steps on demand. */
+  async jumpToTrajectoryNode(nodeIdx) {
+    if (!this.currentSession) { this.toast("先打开一个会话"); return; }
+    const node = this.chat.nodes[nodeIdx];
+    if (!node) { this.toast("消息不存在"); return; }
+    if (!this.trajectoryPanel) this.trajectoryPanel = new TrajectoryPanel(this);
+    this.setMode("trajectory"); // also kicks load(currentSession)
+    await this.trajectoryPanel.focusMessage(node.id ?? null);
+  }
+
+  /** Trajectory → chat: switch back to the chat view scrolled at the message
+   *  the step belongs to (right-click menu). */
+  jumpToChatStep(si) {
+    const step = this.trajectoryPanel?.steps?.[si];
+    if (!step) { this.toast("该步骤不可用"); return; }
+    let messageId = null;
+    for (const e of step.events) {
+      const d = e.data ?? {};
+      const id = d.id ?? d.message?.id;
+      if (id) { messageId = id; break; }
+    }
+    if (!messageId) { this.toast("该步骤没有关联消息 ID"); return; }
+    this.setMode("chat");
+    const idx = this.chat.nodes.findIndex((n) => n.id === messageId);
+    if (idx >= 0 && this.chat.jumpToNode(idx)) {
+      this.toast(`已转跳到消息 ${messageId.slice(0, 8)}`);
+    } else {
+      this.toast(idx >= 0 ? "该消息在更早的记录中（PgUp 加载后再试）" : "对应消息不在已加载的对话窗口");
+    }
+  }
+
   toggleSidebar() {
     this.sidebarVisible = !this.sidebarVisible;
     this.layout();
@@ -1992,11 +2088,51 @@ export class App {
     else this.toast("先打开一个会话");
   }
 
-  showJobs() { this.overlay = buildJobsPopup(this); this.redraw(); }
+  showJobs() { this.overlay = new JobsPanel(this); this.redraw(); }
   showGoal() { this.overlay = buildGoalPopup(this); this.redraw(); }
   showModePicker() { this.overlay = buildModePicker(this); this.redraw(); }
   showPermissionPicker() { this.overlay = buildPermissionPicker(this); this.redraw(); }
 
+  /** Ctrl+E: fzf-style quick jump to a step — type to fuzzy-filter the step
+   *  list, Enter opens the trajectory window around the picked step. */
+  async quickJumpStep() {
+    if (!this.currentSession) { this.toast("先打开一个会话"); return; }
+    if (!this.trajectoryPanel) this.trajectoryPanel = new TrajectoryPanel(this);
+    const tp = this.trajectoryPanel;
+    if (tp.sessionId !== this.currentSession || tp.steps.length === 0) {
+      this.setStatus("加载步骤列表…");
+      await tp.load(this.currentSession);
+      this.setStatus("");
+    }
+    const total = tp.stats?.steps ?? (tp.steps[tp.steps.length - 1]?.step ?? tp.steps.length);
+    const items = [...tp.steps].reverse().map((st) => {
+      const si = tp.steps.indexOf(st);
+      const tools = [...new Set(st.events.filter((e) => e.type === "tool/call").map((e) => e.data?.name))];
+      const t0 = st.events[0]?.time, t1 = st.events[st.events.length - 1]?.time;
+      const dur = t0 && t1 ? fmtMs(t1 - t0) : "—";
+      const userMsg = st.events.find((e) => e.type === "user/message")?.data?.content?.[0]?.text ?? "";
+      return {
+        label: `step ${st.step}  ${dur}  ${tools.slice(0, 3).join(",") || "纯文本"}  ${truncate(String(userMsg), 24)}`,
+        hint: `${st.events.length} 事件`,
+        keywords: `step ${st.step} ${tools.join(" ")} ${userMsg}`,
+        stepIdx: si,
+      };
+    });
+    const w = Math.min(76, this.screen.w - 8), h = Math.min(20, this.screen.h - 4);
+    this.overlay = new Picker({
+      x: Math.floor((this.screen.w - w) / 2), y: Math.floor((this.screen.h - h) / 2),
+      w, h, title: `步骤转跳（step 1–${total} · Ctrl+E）— 输入过滤,回车定位`,
+      items,
+      onCancel: () => this.closeOverlay(),
+      onPick: (it) => {
+        this.closeOverlay();
+        this.setMode("trajectory");
+        this.trajectoryPanel.jumpToStep(it.stepIdx);
+      },
+    });
+    this.redraw();
+  }
+
   /** Select one of the four agent presets (modes). */
   async selectPreset(id) {
     if (!this.currentSession) { this.toast("先打开一个会话"); return; }
@@ -2276,6 +2412,7 @@ export class App {
         this.setMode("workspace"); return;
       }
       if (ev.ctrl && ev.key === "t") { this.setMode("trajectory"); return; }
+      if (ev.ctrl && ev.key === "e") { this.quickJumpStep(); return; }
       if (ev.ctrl && ev.key === "j") { this.showJobs(); return; }
       if (ev.ctrl && ev.key === "g") { this.showGoal(); return; }
       if (ev.ctrl && ev.key === "f") { this.findInConversation(); return; }
@@ -2470,16 +2607,18 @@ export class App {
       if (stats.ttftMs) row1.right.push({ t: ` 首响${Math.round(stats.ttftMs / stats.ttftSteps)}ms `, fg: T.FAINT, bg: T.STATUSBG });
     }
     rows.push(row1);
-    // ── row 2: jobs (only when present) ──
+    // ── row 2: background jobs — one summary line, never per-job noise ──
     if (this.jobs?.length) {
-      const running = this.jobs.filter((j) => j.status === "running");
+      const running = this.jobs.filter((j) => j.status === "running").length;
+      const done = this.jobs.filter((j) => j.status === "completed").length;
+      const failed = this.jobs.filter((j) => j.status === "failed").length;
       const row2 = { left: [], right: [] };
-      for (const j of this.jobs.slice(0, 4)) {
-        const icon = j.status === "running" ? "⚙" : j.status === "completed" ? "✓" : j.status === "failed" ? "✗" : "·";
-        const fg = j.status === "running" ? T.WARN : j.status === "completed" ? T.OK : j.status === "failed" ? T.ERR : T.DIM;
-        row2.left.push({ t: ` ${icon} ${truncate(j.label ?? j.kind, 22)} `, fg, bg: T.STATUSBG });
-      }
-      if (running.length) row2.right.push({ t: ` ${running.length} 运行中 `, fg: T.WARN, bg: T.STATUSBG });
+      row2.left.push({
+        t: ` ${running > 0 ? `${running} 个任务正在后台运行` : "没有任务正在后台运行"} `,
+        fg: running > 0 ? T.WARN : T.FAINT, bg: T.STATUSBG,
+      });
+      row2.left.push({ t: ` ${done}已完成${failed > 0 ? ` ${failed}失败` : ""} `, fg: done > 0 ? T.OK : T.FAINT, bg: T.STATUSBG });
+      row2.right.push({ t: " Ctrl+J 查看详情 ", fg: T.DIM, bg: T.STATUSBG });
       rows.push(row2);
     }
     this.status.rows = rows;