dsh-retrace 0.4.1 → 0.4.2

package/lib/client.js

@@ -85,6 +85,7 @@ const zh = {
   'timeline.open': '时间线',
   'timeline.openAria': '打开会话时间线',
   'timeline.title': '版本时间线',
+  'view.retrace': '版本',
   'timeline.refresh': '刷新',
   'timeline.close': '关闭',
   'timeline.empty': '还没有版本。撤回 / 编辑 / 重新生成会在此记录版本。',
@@ -117,6 +118,7 @@ const zh = {
   'timeline.cancel': '取消',
   'timeline.busy': '回退中…',
   'timeline.detail': '详情',
+  'timeline.trajectory': '轨迹台账',
   'timeline.jump': '跳转',
   'timeline.jumpFailed': '该版本在较远的过去（超出自动加载预算），无法直接定位。请向上滚动加载更早消息后重试；或用「详情」查看该版本当时的事件原文。',
   'timeline.gitRepo': 'git 仓库',
@@ -159,6 +161,7 @@ const 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.',
@@ -191,6 +194,7 @@ const en = {
   'timeline.cancel': 'Cancel',
   'timeline.busy': 'Rolling back…',
   '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',
@@ -884,17 +888,13 @@ const 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)}
@@ -983,12 +983,16 @@ function fileCountLabel(counts, t) {
 }
 
 /**
- * The header action + floating timeline panel (PLAN §5.1). Rendered inside
- * `conversation.session.header.actions`; the panel is absolutely positioned
- * under the trigger so the chat stays mounted (jump-to-conversation needs it).
+ * P1 — Version timeline as an official conversation view tab (PLAN §5.1,
+ * 0.4.2 trajectory-leverage): rendered in the `conversation.view` slot (a tab
+ * next to 对话/轨迹). The versions data channel stays plugin-owned — the live
+ * `session/projection` push frames arrive through
+ * `useProjection('retrace/versions')` when present (zero polling), with the
+ * HTTP `/versions` route as fallback — because versions are DERIVED data the
+ * official event stream does not carry. The view shell, view switching,
+ * paging and the trajectory handoff reuse the official mechanisms.
  */
-function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, ctx }) {
-  const [open, setOpen] = useState(false)
+function RetraceView({ sessionId, useProjection, t, actions, store }) {
   const [versions, setVersions] = useState(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
@@ -997,49 +1001,15 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
   const [preview, setPreview] = useState(null)
   const [previewScope, setPreviewScope] = useState('both')
   const [rollbackBusy, setRollbackBusy] = useState(false)
-  const [detail, setDetail] = useState(null)
-  const [jumpTarget, setJumpTarget] = useState(null)
-  const [jumpNotice, setJumpNotice] = useState(null)
   const [scrollTop, setScrollTop] = useState(0)
-  const [panelPos, setPanelPos] = useState(null)
-  const rootRef = { current: null }
-  const triggerRef = { current: null }
-  const snapRef = { current: null }
 
   // Live push-frame path (projection standard kit) — falls back to HTTP.
   const projected = typeof useProjection === 'function' ? useProjection('retrace/versions') : undefined
-  useSession((snapshot) => {
-    snapRef.current = snapshot
-    return snapshot.chat.nodes.size
-  })
 
   useEffect(() => {
     if (projected && Array.isArray(projected.versions)) setVersions(projected.versions)
   }, [projected])
 
-  /** Anchor the panel to the trigger's live viewport rect (fixed positioning). */
-  const anchorPanel = () => {
-    const rect = triggerRef.current?.getBoundingClientRect?.()
-    if (!rect) return
-    setPanelPos({
-      top: rect.bottom + 6,
-      right: Math.max(8, window.innerWidth - rect.right),
-    })
-  }
-
-  // Re-anchor on open and while open (scroll/resize keep it under the trigger).
-  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)
@@ -1059,91 +1029,82 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
       .catch(() => setGit(null))
   }
 
-  const toggle = () => {
-    const next = !open
-    setOpen(next)
-    if (next) {
-      if (projected === undefined) refresh()
-      refreshGit()
-    }
-  }
-
-  // Dismiss on outside pointer (matching the jobs menu pattern).
+  // Mount-time load: projection push frames arrive live when the host mounts
+  // the registry; HTTP is the on-demand fallback for minimal compositions.
   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])
-
-  // Jump: page up via the session store until the anchor is loaded, then the
-  // reactive effect below scrolls once the node appears. The store has no
-  // seek-to-seq API — only `loadOlder` (50/page) — so far-away targets are
-  // unreachable without thousands of pages; cap the budget and fall back to a
-  // clear notice (details drawer shows the version's event text instead).
+    if (projected === undefined) refresh()
+    refreshGit()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Jump: switch to the chat view, then page up via the session store until
+  // the anchor seq is loaded, then scroll the chat row into view once it
+  // renders (the view switch unmounts this view, so the whole flow runs here).
+  // The store has no seek-to-seq API — only `loadOlder` (50/page) — so
+  // far-away targets are unreachable without thousands of pages; cap the budget.
   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 // page returned nothing
+      key = keyOfSeq(boundarySeq)
     }
-    // Budget exhausted without the anchor appearing → tell the user honestly.
-    // Give the last prepend a tick to propagate into the snapshot first.
-    await new Promise((resolve) => setTimeout(resolve, 60))
-    if (!nodePresent(boundarySeq)) {
-      setJumpNotice(t('timeline.jumpFailed'))
-      setJumpTarget(null)
+    if (key === null) {
+      // Give the last prepend a tick to propagate into the snapshot first.
+      await new Promise((resolve) => setTimeout(resolve, 60))
+      key = keyOfSeq(boundarySeq)
     }
-  }
-
-  /** Whether any loaded chat node anchors at `seq`. */
-  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
+    if (key === null) {
+      console.warn(`[dsh-retrace] jump target seq ${boundarySeq} not reached within ${JUMP_PAGE_BUDGET} pages`)
+      return
     }
-    return false
+    // The chat view is now mounted (setView above); poll for its rendered row.
+    const el = await waitForElement(`[data-chat-anchor-key=${JSON.stringify(key)}]`, 90)
+    if (el === null) return
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    flashKey(key)
   }
 
-  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
-  })
+  /** rAF poll for an element that appears after a view switch + render pass. */
+  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)
+    })
+  }
 
-  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)
-      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])
+  /** One-shot highlight for the jumped-to row (removes itself). */
+  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')
@@ -1170,16 +1131,6 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
     })
   }
 
-  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)
@@ -1192,100 +1143,71 @@ function TimelinePanel({ sessionId, useSession, useProjection, useSessions, t, c
   // ---- windowed list (uniform rows, zero-dep) ----
   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))
+  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 createElement('div', { className: 'dsh-rt-view' }, [
+    createElement('div', { key: 'head', className: 'dsh-rt-timeline-head' }, [
+      createElement('span', { key: 'title', className: 'dsh-rt-timeline-title' }, t('timeline.title')),
+      createElement('button', {
+        key: 'refresh',
+        type: 'button',
+        className: 'dsh-rt-chip',
+        onClick: refresh,
+      }, t('timeline.refresh')),
+    ]),
 
-  return createElement('div', { className: 'dsh-rt-timeline', ref: rootRef }, [
-    createElement('button', {
-      key: 'trigger',
-      ref: triggerRef,
-      type: 'button',
-      className: 'dsh-rt-timeline-trigger',
-      title: t('timeline.open'),
-      'aria-label': t('timeline.openAria'),
-      onClick: toggle,
-    }, [
-      createElement('span', { key: 'i', className: 'dsh-rt-timeline-icon' }, '⧉'),
-      createElement('span', { key: 'label', className: 'dsh-rt-timeline-label' }, t('timeline.open')),
+    git !== null && git !== undefined && createElement('div', { key: 'git', className: 'dsh-rt-timeline-git' }, [
+      git.headHash
+        ? [
+            createElement('span', { key: 'r', className: 'dsh-rt-timeline-git-text' }, `${t('timeline.gitRepo')} · ${t('timeline.gitHead', { hash: git.headHash.slice(0, 8) })}${git.dirty ? ` · ${t('timeline.gitDirty')}` : ''}`),
+          ]
+        : createElement('button', {
+            key: 'init',
+            type: 'button',
+            className: 'dsh-rt-chip',
+            disabled: gitBusy,
+            onClick: initGit,
+            title: t('timeline.gitInitDesc'),
+          }, t('timeline.gitInit')),
     ]),
 
-    open && createElement('div', {
-      key: 'panel',
-      className: 'dsh-rt-timeline-panel',
-      style: panelPos ? { top: `${panelPos.top}px`, right: `${panelPos.right}px` } : undefined,
-    }, [
-      createElement('div', { key: 'head', className: 'dsh-rt-timeline-head' }, [
-        createElement('span', { key: 'title', className: 'dsh-rt-timeline-title' }, t('timeline.title')),
-        createElement('button', {
-          key: 'refresh',
-          type: 'button',
-          className: 'dsh-rt-chip',
-          onClick: refresh,
-        }, t('timeline.refresh')),
-        createElement('button', {
-          key: 'close',
-          type: 'button',
-          className: 'dsh-rt-chip',
-          onClick: () => setOpen(false),
-        }, t('timeline.close')),
-      ]),
+    error !== null && createElement('div', { key: 'error', className: 'dsh-rt-error' }, error),
+    loading && createElement('div', { key: 'loading', className: 'dsh-rt-timeline-empty' }, t('timeline.loading')),
+    !loading && list.length === 0 && createElement('div', { key: 'empty', className: 'dsh-rt-timeline-empty' }, t('timeline.empty')),
 
-      git !== null && git !== undefined && createElement('div', { key: 'git', className: 'dsh-rt-timeline-git' }, [
-        git.headHash
-          ? [
-              createElement('span', { key: 'r', className: 'dsh-rt-timeline-git-text' }, `${t('timeline.gitRepo')} · ${t('timeline.gitHead', { hash: git.headHash.slice(0, 8) })}${git.dirty ? ` · ${t('timeline.gitDirty')}` : ''}`),
-            ]
-          : createElement('button', {
-              key: 'init',
-              type: 'button',
-              className: 'dsh-rt-chip',
-              disabled: gitBusy,
-              onClick: initGit,
-              title: t('timeline.gitInitDesc'),
-            }, t('timeline.gitInit')),
-      ]),
-
-      error !== null && createElement('div', { key: 'error', className: 'dsh-rt-error' }, error),
-      loading && createElement('div', { key: 'loading', className: 'dsh-rt-timeline-empty' }, t('timeline.loading')),
-      !loading && list.length === 0 && createElement('div', { key: 'empty', className: 'dsh-rt-timeline-empty' }, t('timeline.empty')),
-
-      list.length > 0 && 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),
-      }, [
-        createElement('div', { key: 'spacer', style: { height: `${list.length * ROW_H}px`, position: 'relative' } }, [
-          visible.map((record) => createElement(VersionRow, {
-            key: record.versionId,
-            record,
-            t,
-            top: list.indexOf(record) * ROW_H,
-            onPreview: () => requestPreview(record),
-            onDetail: () => openDetail(record),
-            onJump: () => jump(record.boundarySeq),
-          })),
-        ]),
+    list.length > 0 && createElement('div', {
+      key: 'list',
+      className: 'dsh-rt-timeline-list',
+      onScroll: (event) => setScrollTop(event.target.scrollTop),
+    }, [
+      createElement('div', { key: 'spacer', style: { height: `${list.length * ROW_H}px`, position: 'relative' } }, [
+        visible.map((record) => 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 && createElement(PreviewBox, {
-        key: 'preview',
-        preview,
-        scope: previewScope,
-        setScope: setPreviewScope,
-        busy: rollbackBusy,
-        t,
-        onConfirm: confirmRollback,
-        onCancel: () => setPreview(null),
-      }),
-
-      detail && createElement(DetailBox, { key: 'detail', detail, t, onClose: () => setDetail(null) }),
-      jumpNotice !== null && createElement('div', { key: 'jump', className: 'dsh-rt-error' }, jumpNotice),
     ]),
+
+    preview && createElement(PreviewBox, {
+      key: 'preview',
+      preview,
+      scope: previewScope,
+      setScope: setPreviewScope,
+      busy: rollbackBusy,
+      t,
+      onConfirm: confirmRollback,
+      onCancel: () => setPreview(null),
+    }),
   ])
 }
 
 /** One version row (uniform height for the windowed list). */
-function VersionRow({ record, top, t, onPreview, onDetail, onJump }) {
+function VersionRow({ record, top, t, onPreview, onTrajectory, onJump }) {
   return createElement('div', { className: 'dsh-rt-version', style: { top: `${top}px` } }, [
     createElement('span', { key: 'kind', className: `dsh-rt-version-kind dsh-rt-version-kind-${record.kind}`, title: kindLabel(record.kind, t) }, KIND_ICONS[record.kind] ?? '•'),
     createElement('div', { key: 'body', className: 'dsh-rt-version-body' }, [
@@ -1300,8 +1222,8 @@ function VersionRow({ record, top, t, onPreview, onDetail, onJump }) {
         : null,
     ]),
     createElement('span', { key: 'actions', className: 'dsh-rt-version-actions' }, [
-      createElement('button', { key: 'detail', type: 'button', className: 'dsh-rt-chip', onClick: onDetail }, t('timeline.detail')),
       createElement('button', { key: 'jump', type: 'button', className: 'dsh-rt-chip', onClick: onJump }, t('timeline.jump')),
+      createElement('button', { key: 'trajectory', type: 'button', className: 'dsh-rt-chip', onClick: onTrajectory, title: t('timeline.trajectory') }, t('timeline.trajectory')),
       createElement('button', { key: 'preview', type: 'button', className: 'dsh-rt-chip dsh-rt-chip-danger', onClick: onPreview }, t('timeline.preview')),
     ]),
   ])
@@ -1351,19 +1273,6 @@ function PreviewBox({ preview, scope, setScope, busy, t, onConfirm, onCancel })
   ])
 }
 
-/** Lazy event viewer (GET /event). */
-function DetailBox({ detail, t, onClose }) {
-  return createElement('div', { className: 'dsh-rt-modal' }, [
-    createElement('div', { key: 'title', className: 'dsh-rt-modal-title' }, [
-      `${t('timeline.detail')} · seq ${detail.seq}`,
-      createElement('button', { key: 'close', type: 'button', className: 'dsh-rt-chip', onClick: onClose }, t('timeline.close')),
-    ]),
-    detail.error && createElement('div', { key: 'err', className: 'dsh-rt-error' }, detail.error),
-    detail.data === null && !detail.error && createElement('div', { key: 'wait', className: 'dsh-rt-timeline-empty' }, t('timeline.loading')),
-    detail.data && createElement('pre', { key: 'json', className: 'dsh-rt-modal-json' }, JSON.stringify(detail.data, null, 2)),
-  ])
-}
-
 // ---------------------------------------------------------------------------
 // Plugin
 // ---------------------------------------------------------------------------
@@ -1371,6 +1280,7 @@ export 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) {
@@ -1404,13 +1314,21 @@ export function apply(ctx) {
     locale: NS,
   }, RecallMarkerRow))
 
-  // P1 — timeline entry in the session header (order ≈30, after the session crumb).
-  ctx.slots.inject('conversation.session.header.actions', () => ctx.slots.register({
-    name: 'conversation.session.header.actions',
-    id: 'retrace-timeline',
-    order: 30,
+  // P0 (0.4.2, trajectory-leverage) — the version timeline as an official
+  // conversation view tab (next to 对话/轨迹). The view shell + switching are
+  // the official mechanisms; the versions data channel stays plugin-owned
+  // (projection push frames → HTTP /versions fallback).
+  ctx.slots.inject('conversation.view', () => ctx.slots.register({
+    name: 'conversation.view',
+    id: 'retrace',
+    order: 20,
     locale: NS,
-  }, (props) => TimelinePanel({ ...props, ctx })))
+    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',