dsh-retrace 0.4.1 → 0.4.2

package/README.md

@@ -51,7 +51,7 @@ in the conversation — all **inside the same session**, no session-switching.
 
 **Versioning & rollback (live in 0.4.x)** — every rewind is also recorded as a **version**:
 
-- 🕘 **Timeline** — the conversation header gains a **时间线 / Timeline** entry: a floating panel of every version (type, time, message count, file-change badges, summary), pushed live via `session/projection` (no polling), windowed for long histories.
+- 🕘 **Timeline** — a **Versions** tab in the conversation view (on par with the official 对话/轨迹 tabs, since 0.4.2): every version (type, time, message count, file-change badges, summary), pushed live via `session/projection` (no polling), windowed for long histories; event inspection reuses the official Trajectory ledger.
 - ↩️ **Artifact rollback** — each version offers **context-only / artifacts-only / both** rollback with a dry-run preview; git-first (commit-free checkout of the listed paths) with content-addressed snapshot fallback. The rollback itself is recorded as a new version (`restore`) — rollback of a rollback.
 - 🧭 **Jump-to-conversation** — one click from a version to that point in the conversation (auto-loads earlier history, anchor highlight).
 - 🧹 **Bounded storage** — file snapshots keep the most recent N versions (default 50); a throttled background sweep prunes snapshots of truncated versions, keeping long sessions bounded.

package/README.zh.md

@@ -43,7 +43,7 @@ DeepSeek Harness 的对话是「只追加（append-only）」的事件日志，
 
 **版本化与回退（0.4.x 已上线）** —— 每次回退都会被记录为一个**版本**：
 
-- 🕘 **时间线** —— 会话头部新增「时间线」入口：浮层面板展示每个版本（类型/时间/消息数/文件变更徽标/摘要），经 `session/projection` 推送帧实时更新（零轮询），大列表窗口化渲染。
+- 🕘 **时间线** —— 会话视图新增「版本」Tab（与官方「对话/轨迹」平级，0.4.2 起）：展示每个版本（类型/时间/消息数/文件变更徽标/摘要），经 `session/projection` 推送帧实时更新（零轮询），大列表窗口化渲染；事件原文查看复用官方「轨迹」台账。
 - ↩️ **产物回退** —— 每个版本支持 仅对话 / 仅产物 / 两者 三种回退范围，先干跑预览再执行；git 优先（commit-free checkout 清单路径）+ 内容寻址快照兜底。回退本身记录为新版本（`restore`），可以再回退。
 - 🧭 **跳转对话** —— 从时间线一键跳转到对话对应位置（自动翻页加载更早历史 + 锚点高亮）。
 - 🧹 **存储有界** —— 文件快照只保留最近 N 个版本（默认 50）；节流后台扫掠回收被截断版本的快照，长会话不膨胀。

package/lib/client.bundle.js

@@ -77,6 +77,7 @@ var zh = {
   "timeline.open": "\u65F6\u95F4\u7EBF",
   "timeline.openAria": "\u6253\u5F00\u4F1A\u8BDD\u65F6\u95F4\u7EBF",
   "timeline.title": "\u7248\u672C\u65F6\u95F4\u7EBF",
+  "view.retrace": "\u7248\u672C",
   "timeline.refresh": "\u5237\u65B0",
   "timeline.close": "\u5173\u95ED",
   "timeline.empty": "\u8FD8\u6CA1\u6709\u7248\u672C\u3002\u64A4\u56DE / \u7F16\u8F91 / \u91CD\u65B0\u751F\u6210\u4F1A\u5728\u6B64\u8BB0\u5F55\u7248\u672C\u3002",
@@ -109,6 +110,7 @@ var zh = {
   "timeline.cancel": "\u53D6\u6D88",
   "timeline.busy": "\u56DE\u9000\u4E2D\u2026",
   "timeline.detail": "\u8BE6\u60C5",
+  "timeline.trajectory": "\u8F68\u8FF9\u53F0\u8D26",
   "timeline.jump": "\u8DF3\u8F6C",
   "timeline.jumpFailed": "\u8BE5\u7248\u672C\u5728\u8F83\u8FDC\u7684\u8FC7\u53BB\uFF08\u8D85\u51FA\u81EA\u52A8\u52A0\u8F7D\u9884\u7B97\uFF09\uFF0C\u65E0\u6CD5\u76F4\u63A5\u5B9A\u4F4D\u3002\u8BF7\u5411\u4E0A\u6EDA\u52A8\u52A0\u8F7D\u66F4\u65E9\u6D88\u606F\u540E\u91CD\u8BD5\uFF1B\u6216\u7528\u300C\u8BE6\u60C5\u300D\u67E5\u770B\u8BE5\u7248\u672C\u5F53\u65F6\u7684\u4E8B\u4EF6\u539F\u6587\u3002",
   "timeline.gitRepo": "git \u4ED3\u5E93",
@@ -150,6 +152,7 @@ var en = {
   "timeline.open": "Timeline",
   "timeline.openAria": "Open the session timeline",
   "timeline.title": "Version timeline",
+  "view.retrace": "Versions",
   "timeline.refresh": "Refresh",
   "timeline.close": "Close",
   "timeline.empty": "No versions yet. Recall / edit / regenerate record a version here.",
@@ -182,6 +185,7 @@ var en = {
   "timeline.cancel": "Cancel",
   "timeline.busy": "Rolling back\u2026",
   "timeline.detail": "Details",
+  "timeline.trajectory": "Trajectory",
   "timeline.jump": "Jump",
   "timeline.jumpFailed": "This version lies too far back (beyond the auto-load budget) to locate directly. Scroll up to load earlier messages, or use Details to read the original event text of this version.",
   "timeline.gitRepo": "git repository",
@@ -725,17 +729,13 @@ var CSS = `
 .dsh-rt-retention-input{width:64px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-elevated);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:2px 6px;font:inherit;font-size:13px;outline:none;margin-top:1px}
 .dsh-rt-retention-input:focus{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary)}
 .dsh-rt-option input{accent-color:var(--dsw-alias-state-business-primary)}
-/* ---- P1 timeline ---- */
-.dsh-rt-timeline{position:relative}
-.dsh-rt-timeline-trigger{min-height:28px;color:var(--dsw-alias-label-tertiary);cursor:pointer;background:transparent;border:none;border-radius:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 6px;font-size:12px;line-height:18px}
-.dsh-rt-timeline-trigger:hover,.dsh-rt-timeline-trigger:focus-visible{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}
-.dsh-rt-timeline-icon{font-size:13px}
-.dsh-rt-timeline-panel{position:fixed;top:calc(100% + 6px);right:8px;z-index:2147483000;width:min(520px,calc(100vw - 32px));max-height:min(70vh,640px);box-sizing:border-box;display:flex;flex-direction:column;gap:6px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-specific-menu);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;padding:8px;overflow:hidden}
+/* ---- P1 timeline (conversation view tab) ---- */
+.dsh-rt-view{box-sizing:border-box;display:flex;flex-direction:column;gap:6px;height:100%;min-height:0;padding:12px 16px 0}
 .dsh-rt-timeline-head{display:flex;align-items:center;gap:8px;flex:none}
 .dsh-rt-timeline-title{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:20px;flex:1}
 .dsh-rt-timeline-git{display:flex;align-items:center;gap:6px;flex:none;border:1px dashed var(--dsw-alias-border-l2);border-radius:8px;padding:4px 8px}
 .dsh-rt-timeline-git-text{color:var(--dsw-alias-label-caption);font-size:11px;line-height:16px}
-.dsh-rt-timeline-list{overflow-y:auto;flex:none;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2)}
+.dsh-rt-timeline-list{overflow-y:auto;flex:1;min-height:0;position:relative;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2)}
 .dsh-rt-timeline-empty{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;padding:12px 4px;text-align:center}
 .dsh-rt-version{position:absolute;left:0;right:0;height:60px;box-sizing:border-box;display:flex;align-items:flex-start;gap:8px;border:1px solid transparent;border-radius:10px;padding:6px 8px}
 .dsh-rt-version:hover{background:var(--dsw-alias-interactive-bg-hover);border-color:var(--dsw-alias-border-l2)}
@@ -805,8 +805,7 @@ function fileCountLabel(counts, t) {
     deleted: counts.deleted ?? 0
   });
 }
-function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, ctx }) {
-  const [open, setOpen] = (0, import_react.useState)(false);
+function RetraceView({ sessionId, useProjection, t, actions, store }) {
   const [versions, setVersions] = (0, import_react.useState)(null);
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
@@ -815,41 +814,11 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
   const [preview, setPreview] = (0, import_react.useState)(null);
   const [previewScope, setPreviewScope] = (0, import_react.useState)("both");
   const [rollbackBusy, setRollbackBusy] = (0, import_react.useState)(false);
-  const [detail, setDetail] = (0, import_react.useState)(null);
-  const [jumpTarget, setJumpTarget] = (0, import_react.useState)(null);
-  const [jumpNotice, setJumpNotice] = (0, import_react.useState)(null);
   const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
-  const [panelPos, setPanelPos] = (0, import_react.useState)(null);
-  const rootRef = { current: null };
-  const triggerRef = { current: null };
-  const snapRef = { current: null };
   const projected = typeof useProjection === "function" ? useProjection("retrace/versions") : void 0;
-  useSession((snapshot) => {
-    snapRef.current = snapshot;
-    return snapshot.chat.nodes.size;
-  });
   (0, import_react.useEffect)(() => {
     if (projected && Array.isArray(projected.versions)) setVersions(projected.versions);
   }, [projected]);
-  const anchorPanel = () => {
-    const rect = triggerRef.current?.getBoundingClientRect?.();
-    if (!rect) return;
-    setPanelPos({
-      top: rect.bottom + 6,
-      right: Math.max(8, window.innerWidth - rect.right)
-    });
-  };
-  (0, import_react.useEffect)(() => {
-    if (!open) return;
-    anchorPanel();
-    const onViewportChange = () => anchorPanel();
-    window.addEventListener("resize", onViewportChange);
-    window.addEventListener("scroll", onViewportChange, true);
-    return () => {
-      window.removeEventListener("resize", onViewportChange);
-      window.removeEventListener("scroll", onViewportChange, true);
-    };
-  }, [open]);
   const refresh = () => {
     setLoading(true);
     setError(null);
@@ -862,77 +831,67 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
     if (getConfig().git !== true) return;
     timelineGet(`/git/status?sessionId=${encodeURIComponent(sessionId)}`).then((result) => setGit(result?.ok === true ? result.value : null)).catch(() => setGit(null));
   };
-  const toggle = () => {
-    const next = !open;
-    setOpen(next);
-    if (next) {
-      if (projected === void 0) refresh();
-      refreshGit();
-    }
-  };
   (0, import_react.useEffect)(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [open]);
+    if (projected === void 0) refresh();
+    refreshGit();
+  }, []);
   const JUMP_PAGE_BUDGET = 24;
   const jump = async (boundarySeq) => {
-    setJumpNotice(null);
-    setJumpTarget(boundarySeq);
-    const binding = ctx?.get?.("sessions")?.binding?.(sessionId);
-    const store = binding?.session;
-    if (!store || typeof store.loadOlder !== "function") return;
+    actions?.setView?.("chat");
+    const target = store;
+    if (!target || typeof target.loadOlder !== "function" || typeof target.getSnapshot !== "function") return;
+    const keyOfSeq = (seq) => {
+      const nodes = target.getSnapshot()?.chat?.nodes;
+      if (!nodes) return null;
+      for (const node of nodes.values()) {
+        if (typeof node.anchorSeq === "number" && node.anchorSeq === seq) return node.key;
+      }
+      return null;
+    };
+    let key = keyOfSeq(boundarySeq);
     let pages = 0;
-    while (pages < JUMP_PAGE_BUDGET && store.hasMore) {
-      const before = snapRef.current?.chat?.nodes?.size ?? 0;
-      await store.loadOlder();
-      const after = snapRef.current?.chat?.nodes?.size ?? 0;
+    while (key === null && pages < JUMP_PAGE_BUDGET && target.hasMore) {
+      const before = target.getSnapshot()?.chat?.nodes?.size ?? 0;
+      await target.loadOlder();
+      const after = target.getSnapshot()?.chat?.nodes?.size ?? 0;
       pages += 1;
       if (after === before) break;
+      key = keyOfSeq(boundarySeq);
     }
-    await new Promise((resolve) => setTimeout(resolve, 60));
-    if (!nodePresent(boundarySeq)) {
-      setJumpNotice(t("timeline.jumpFailed"));
-      setJumpTarget(null);
+    if (key === null) {
+      await new Promise((resolve) => setTimeout(resolve, 60));
+      key = keyOfSeq(boundarySeq);
     }
-  };
-  function nodePresent(seq) {
-    const nodes = snapRef.current?.chat?.nodes;
-    if (!nodes) return false;
-    for (const node of nodes.values()) {
-      if (typeof node.anchorSeq === "number" && node.anchorSeq === seq) return true;
-    }
-    return false;
-  }
-  const foundKey = useSession((snapshot) => {
-    if (jumpTarget === null) return null;
-    for (const node of snapshot.chat.nodes.values()) {
-      if (typeof node.anchorSeq === "number" && node.anchorSeq === jumpTarget) return node.key;
-    }
-    return null;
-  });
-  (0, import_react.useEffect)(() => {
-    if (foundKey === null || jumpTarget === null) return;
-    const el = document.querySelector(`[data-chat-anchor-key=${JSON.stringify(foundKey)}]`);
-    if (!el) {
-      setJumpNotice(t("timeline.jumpFailed"));
-      setJumpTarget(null);
+    if (key === null) {
+      console.warn(`[dsh-retrace] jump target seq ${boundarySeq} not reached within ${JUMP_PAGE_BUDGET} pages`);
       return;
     }
+    const el = await waitForElement(`[data-chat-anchor-key=${JSON.stringify(key)}]`, 90);
+    if (el === null) return;
     el.scrollIntoView({ behavior: "smooth", block: "center" });
-    const id = `dsh-rt-jump-${foundKey.replace(/[^a-z0-9]/gi, "-")}`;
-    if (!document.querySelector(`style[data-plugin-css="${id}"]`)) {
-      const tag = document.createElement("style");
-      tag.dataset.pluginCss = id;
-      tag.textContent = `[data-chat-anchor-key=${JSON.stringify(foundKey)}]{animation:dsh-rt-flash 1.6s ease-out 2}@keyframes dsh-rt-flash{0%,100%{background:transparent}30%,70%{background:var(--dsw-alias-state-business-primary)}55%{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 30%,transparent)}}`;
-      document.head.appendChild(tag);
-      setTimeout(() => tag.remove(), 3400);
-    }
-    setJumpTarget(null);
-  }, [foundKey, jumpTarget]);
+    flashKey(key);
+  };
+  function waitForElement(selector, frames) {
+    return new Promise((resolve) => {
+      let remaining = frames;
+      const probe = () => {
+        const el = document.querySelector(selector);
+        if (el !== null) return resolve(el);
+        if (remaining-- <= 0) return resolve(null);
+        requestAnimationFrame(probe);
+      };
+      requestAnimationFrame(probe);
+    });
+  }
+  function flashKey(key) {
+    const id = `dsh-rt-jump-${key.replace(/[^a-z0-9]/gi, "-")}`;
+    if (document.querySelector(`style[data-plugin-css="${id}"]`)) return;
+    const tag = document.createElement("style");
+    tag.dataset.pluginCss = id;
+    tag.textContent = `[data-chat-anchor-key=${JSON.stringify(key)}]{animation:dsh-rt-flash 1.6s ease-out 2}@keyframes dsh-rt-flash{0%,100%{background:transparent}30%,70%{background:var(--dsw-alias-state-business-primary)}55%{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 30%,transparent)}}`;
+    document.head.appendChild(tag);
+    setTimeout(() => tag.remove(), 3400);
+  }
   const requestPreview = (record) => {
     setPreviewScope("both");
     setPreview({ versionId: record.versionId, kind: record.kind, boundarySeq: record.boundarySeq, data: null, error: null });
@@ -954,12 +913,6 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
       refreshGit();
     });
   };
-  const openDetail = (record) => {
-    setDetail({ seq: record.boundarySeq, data: null, error: null });
-    timelineGet(`/event?sessionId=${encodeURIComponent(sessionId)}&seq=${record.boundarySeq}&before=2&after=2`).then((result) => {
-      setDetail((prev) => prev && prev.seq === record.boundarySeq ? { ...prev, data: result?.ok === true ? result.value : null, error: result?.ok === true ? null : result?.error?.message ?? null } : prev);
-    });
-  };
   const initGit = () => {
     if (!window.confirm(t("timeline.gitInitConfirm"))) return;
     setGitBusy(true);
@@ -970,89 +923,62 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
   };
   const ROW_H = 64;
   const list = versions ?? [];
-  const visible = list.slice(Math.max(0, Math.floor(scrollTop / ROW_H) - 2), Math.min(list.length, Math.ceil(scrollTop / ROW_H) + Math.ceil(420 / ROW_H) + 2));
-  return (0, import_react.createElement)("div", { className: "dsh-rt-timeline", ref: rootRef }, [
-    (0, import_react.createElement)("button", {
-      key: "trigger",
-      ref: triggerRef,
-      type: "button",
-      className: "dsh-rt-timeline-trigger",
-      title: t("timeline.open"),
-      "aria-label": t("timeline.openAria"),
-      onClick: toggle
-    }, [
-      (0, import_react.createElement)("span", { key: "i", className: "dsh-rt-timeline-icon" }, "\u29C9"),
-      (0, import_react.createElement)("span", { key: "label", className: "dsh-rt-timeline-label" }, t("timeline.open"))
+  const visible = list.slice(Math.max(0, Math.floor(scrollTop / ROW_H) - 2), Math.min(list.length, Math.ceil(scrollTop / ROW_H) + Math.ceil(640 / ROW_H) + 2));
+  return (0, import_react.createElement)("div", { className: "dsh-rt-view" }, [
+    (0, import_react.createElement)("div", { key: "head", className: "dsh-rt-timeline-head" }, [
+      (0, import_react.createElement)("span", { key: "title", className: "dsh-rt-timeline-title" }, t("timeline.title")),
+      (0, import_react.createElement)("button", {
+        key: "refresh",
+        type: "button",
+        className: "dsh-rt-chip",
+        onClick: refresh
+      }, t("timeline.refresh"))
     ]),
-    open && (0, import_react.createElement)("div", {
-      key: "panel",
-      className: "dsh-rt-timeline-panel",
-      style: panelPos ? { top: `${panelPos.top}px`, right: `${panelPos.right}px` } : void 0
+    git !== null && git !== void 0 && (0, import_react.createElement)("div", { key: "git", className: "dsh-rt-timeline-git" }, [
+      git.headHash ? [
+        (0, import_react.createElement)("span", { key: "r", className: "dsh-rt-timeline-git-text" }, `${t("timeline.gitRepo")} \xB7 ${t("timeline.gitHead", { hash: git.headHash.slice(0, 8) })}${git.dirty ? ` \xB7 ${t("timeline.gitDirty")}` : ""}`)
+      ] : (0, import_react.createElement)("button", {
+        key: "init",
+        type: "button",
+        className: "dsh-rt-chip",
+        disabled: gitBusy,
+        onClick: initGit,
+        title: t("timeline.gitInitDesc")
+      }, t("timeline.gitInit"))
+    ]),
+    error !== null && (0, import_react.createElement)("div", { key: "error", className: "dsh-rt-error" }, error),
+    loading && (0, import_react.createElement)("div", { key: "loading", className: "dsh-rt-timeline-empty" }, t("timeline.loading")),
+    !loading && list.length === 0 && (0, import_react.createElement)("div", { key: "empty", className: "dsh-rt-timeline-empty" }, t("timeline.empty")),
+    list.length > 0 && (0, import_react.createElement)("div", {
+      key: "list",
+      className: "dsh-rt-timeline-list",
+      onScroll: (event) => setScrollTop(event.target.scrollTop)
     }, [
-      (0, import_react.createElement)("div", { key: "head", className: "dsh-rt-timeline-head" }, [
-        (0, import_react.createElement)("span", { key: "title", className: "dsh-rt-timeline-title" }, t("timeline.title")),
-        (0, import_react.createElement)("button", {
-          key: "refresh",
-          type: "button",
-          className: "dsh-rt-chip",
-          onClick: refresh
-        }, t("timeline.refresh")),
-        (0, import_react.createElement)("button", {
-          key: "close",
-          type: "button",
-          className: "dsh-rt-chip",
-          onClick: () => setOpen(false)
-        }, t("timeline.close"))
-      ]),
-      git !== null && git !== void 0 && (0, import_react.createElement)("div", { key: "git", className: "dsh-rt-timeline-git" }, [
-        git.headHash ? [
-          (0, import_react.createElement)("span", { key: "r", className: "dsh-rt-timeline-git-text" }, `${t("timeline.gitRepo")} \xB7 ${t("timeline.gitHead", { hash: git.headHash.slice(0, 8) })}${git.dirty ? ` \xB7 ${t("timeline.gitDirty")}` : ""}`)
-        ] : (0, import_react.createElement)("button", {
-          key: "init",
-          type: "button",
-          className: "dsh-rt-chip",
-          disabled: gitBusy,
-          onClick: initGit,
-          title: t("timeline.gitInitDesc")
-        }, t("timeline.gitInit"))
-      ]),
-      error !== null && (0, import_react.createElement)("div", { key: "error", className: "dsh-rt-error" }, error),
-      loading && (0, import_react.createElement)("div", { key: "loading", className: "dsh-rt-timeline-empty" }, t("timeline.loading")),
-      !loading && list.length === 0 && (0, import_react.createElement)("div", { key: "empty", className: "dsh-rt-timeline-empty" }, t("timeline.empty")),
-      list.length > 0 && (0, import_react.createElement)("div", {
-        key: "list",
-        className: "dsh-rt-timeline-list",
-        style: { height: `${Math.min(420, list.length * ROW_H)}px` },
-        onScroll: (event) => setScrollTop(event.target.scrollTop)
-      }, [
-        (0, import_react.createElement)("div", { key: "spacer", style: { height: `${list.length * ROW_H}px`, position: "relative" } }, [
-          visible.map((record) => (0, import_react.createElement)(VersionRow, {
-            key: record.versionId,
-            record,
-            t,
-            top: list.indexOf(record) * ROW_H,
-            onPreview: () => requestPreview(record),
-            onDetail: () => openDetail(record),
-            onJump: () => jump(record.boundarySeq)
-          }))
-        ])
-      ]),
-      preview && (0, import_react.createElement)(PreviewBox, {
-        key: "preview",
-        preview,
-        scope: previewScope,
-        setScope: setPreviewScope,
-        busy: rollbackBusy,
-        t,
-        onConfirm: confirmRollback,
-        onCancel: () => setPreview(null)
-      }),
-      detail && (0, import_react.createElement)(DetailBox, { key: "detail", detail, t, onClose: () => setDetail(null) }),
-      jumpNotice !== null && (0, import_react.createElement)("div", { key: "jump", className: "dsh-rt-error" }, jumpNotice)
-    ])
+      (0, import_react.createElement)("div", { key: "spacer", style: { height: `${list.length * ROW_H}px`, position: "relative" } }, [
+        visible.map((record) => (0, import_react.createElement)(VersionRow, {
+          key: record.versionId,
+          record,
+          t,
+          top: list.indexOf(record) * ROW_H,
+          onPreview: () => requestPreview(record),
+          onTrajectory: () => actions?.setView?.("trajectory"),
+          onJump: () => jump(record.boundarySeq)
+        }))
+      ])
+    ]),
+    preview && (0, import_react.createElement)(PreviewBox, {
+      key: "preview",
+      preview,
+      scope: previewScope,
+      setScope: setPreviewScope,
+      busy: rollbackBusy,
+      t,
+      onConfirm: confirmRollback,
+      onCancel: () => setPreview(null)
+    })
   ]);
 }
-function VersionRow({ record, top, t, onPreview, onDetail, onJump }) {
+function VersionRow({ record, top, t, onPreview, onTrajectory, onJump }) {
   return (0, import_react.createElement)("div", { className: "dsh-rt-version", style: { top: `${top}px` } }, [
     (0, import_react.createElement)("span", { key: "kind", className: `dsh-rt-version-kind dsh-rt-version-kind-${record.kind}`, title: kindLabel(record.kind, t) }, KIND_ICONS[record.kind] ?? "\u2022"),
     (0, import_react.createElement)("div", { key: "body", className: "dsh-rt-version-body" }, [
@@ -1065,8 +991,8 @@ function VersionRow({ record, top, t, onPreview, onDetail, onJump }) {
       record.markerText ? (0, import_react.createElement)("div", { key: "text", className: "dsh-rt-version-text" }, record.markerText.length > 120 ? `${record.markerText.slice(0, 120)}\u2026` : record.markerText) : null
     ]),
     (0, import_react.createElement)("span", { key: "actions", className: "dsh-rt-version-actions" }, [
-      (0, import_react.createElement)("button", { key: "detail", type: "button", className: "dsh-rt-chip", onClick: onDetail }, t("timeline.detail")),
       (0, import_react.createElement)("button", { key: "jump", type: "button", className: "dsh-rt-chip", onClick: onJump }, t("timeline.jump")),
+      (0, import_react.createElement)("button", { key: "trajectory", type: "button", className: "dsh-rt-chip", onClick: onTrajectory, title: t("timeline.trajectory") }, t("timeline.trajectory")),
       (0, import_react.createElement)("button", { key: "preview", type: "button", className: "dsh-rt-chip dsh-rt-chip-danger", onClick: onPreview }, t("timeline.preview"))
     ])
   ]);
@@ -1118,21 +1044,11 @@ function PreviewBox({ preview, scope, setScope, busy, t, onConfirm, onCancel })
     ])
   ]);
 }
-function DetailBox({ detail, t, onClose }) {
-  return (0, import_react.createElement)("div", { className: "dsh-rt-modal" }, [
-    (0, import_react.createElement)("div", { key: "title", className: "dsh-rt-modal-title" }, [
-      `${t("timeline.detail")} \xB7 seq ${detail.seq}`,
-      (0, import_react.createElement)("button", { key: "close", type: "button", className: "dsh-rt-chip", onClick: onClose }, t("timeline.close"))
-    ]),
-    detail.error && (0, import_react.createElement)("div", { key: "err", className: "dsh-rt-error" }, detail.error),
-    detail.data === null && !detail.error && (0, import_react.createElement)("div", { key: "wait", className: "dsh-rt-timeline-empty" }, t("timeline.loading")),
-    detail.data && (0, import_react.createElement)("pre", { key: "json", className: "dsh-rt-modal-json" }, JSON.stringify(detail.data, null, 2))
-  ]);
-}
 function apply(ctx) {
   const disposeStyle = ensureStyle();
   ctx.effect(() => () => disposeStyle(), "dsh-retrace: styles");
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-retrace: dictionaries");
+  const t = ctx.locale.bind(NS);
   const conversationEvents = ctx.get("conversationEvents");
   if (conversationEvents) {
     conversationEvents.register(userActionsDefinition);
@@ -1160,12 +1076,17 @@ function apply(ctx) {
     key: "recall-marker",
     locale: NS
   }, RecallMarkerRow));
-  ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
-    name: "conversation.session.header.actions",
-    id: "retrace-timeline",
-    order: 30,
-    locale: NS
-  }, (props) => TimelinePanel({ ...props, ctx })));
+  ctx.slots.inject("conversation.view", () => ctx.slots.register({
+    name: "conversation.view",
+    id: "retrace",
+    order: 20,
+    locale: NS,
+    label: () => t("view.retrace"),
+    inject: (sessionId, actions) => ({
+      actions,
+      store: ctx.get?.("sessions")?.binding?.(sessionId)?.session
+    })
+  }, RetraceView));
   ctx.slots.inject("settings.general.item", () => ctx.slots.register({
     name: "settings.general.item",
     id: "retrace",