@mingozhou/dsh-replay 0.3.3 → 0.4.2

package/src/client/components/OverviewView.tsx

@@ -1,9 +1,16 @@
 import React, { useMemo, useRef, useState } from 'react'
 import type { AuditReport } from '../../core/audit.js'
-import { estimateCost, formatUsd } from '../../core/cost.js'
+import {
+  DEFAULT_PRICING,
+  estimateCostDetailed,
+  formatMoney,
+  type PricingEntry,
+  type PricingRate,
+} from '../../core/cost.js'
 import type { TimelineModel } from '../../core/timeline.js'
 import { formatClock, formatDuration, formatTokens } from '../api.js'
 import { useI18n } from '../i18n.js'
+import { resetPricing, setRate, usePricing } from '../pricing.js'
 
 /** Cumulative token samples for the line chart. */
 interface Point {
@@ -37,13 +44,13 @@ function CumulativeTokensChart({ model }: { model: TimelineModel }): React.React
   const points = useMemo<Point[]>(() => {
     let cumInput = 0
     let cumOutput = 0
-    const seqTime = new Map(model.items.map(i => [i.seq, i.time]))
-    return model.usageSamples.map(s => {
-      cumInput += s.usage.inputTokens + (s.usage.cacheReadTokens ?? 0) + (s.usage.cacheWriteTokens ?? 0)
-      cumOutput += s.usage.outputTokens
+    const seqTime = new Map(model.items.map(item => [item.seq, item.time]))
+    return model.usageSamples.map(sample => {
+      cumInput += sample.usage.inputTokens + (sample.usage.cacheReadTokens ?? 0) + (sample.usage.cacheWriteTokens ?? 0)
+      cumOutput += sample.usage.outputTokens
       return {
-        x: seqTime.get(s.seq) ?? model.startTime,
-        seq: s.seq, turn: s.turn, step: s.step,
+        x: seqTime.get(sample.seq) ?? model.startTime,
+        seq: sample.seq, turn: sample.turn, step: sample.step,
         cumInput, cumOutput,
       }
     })
@@ -60,7 +67,7 @@ function CumulativeTokensChart({ model }: { model: TimelineModel }): React.React
   const sy = (y: number): number => PAD.top + plotH - (y / yMax) * plotH
 
   const path = (key: 'cumInput' | 'cumOutput'): string =>
-    points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${sx(p.x).toFixed(1)} ${sy(p[key]).toFixed(1)}`).join(' ')
+    points.map((point, index) => `${index === 0 ? 'M' : 'L'} ${sx(point.x).toFixed(1)} ${sy(point[key]).toFixed(1)}`).join(' ')
   const area = (key: 'cumInput' | 'cumOutput'): string =>
     `${path(key)} L ${sx(points.at(-1)!.x).toFixed(1)} ${sy(0)} L ${sx(points[0].x).toFixed(1)} ${sy(0)} Z`
 
@@ -71,16 +78,18 @@ function CumulativeTokensChart({ model }: { model: TimelineModel }): React.React
     const rect = svgRef.current?.getBoundingClientRect()
     if (!rect) return
     const mx = ((event.clientX - rect.left) / rect.width) * W
-    let best = 0
-    let bestDist = Number.POSITIVE_INFINITY
-    points.forEach((p, i) => {
-      const d = Math.abs(sx(p.x) - mx)
-      if (d < bestDist) {
-        bestDist = d
-        best = i
-      }
-    })
-    setHover(best)
+    // Binary search the nearest point by x; mousemove should be O(log n).
+    let low = 0
+    let high = points.length - 1
+    while (low < high) {
+      const mid = (low + high) >> 1
+      if (sx(points[mid].x) < mx) low = mid + 1
+      else high = mid
+    }
+    const candidate = low > 0 && Math.abs(sx(points[low - 1].x) - mx) <= Math.abs(sx(points[low].x) - mx)
+      ? low - 1
+      : low
+    setHover(candidate)
   }
 
   return (
@@ -108,11 +117,11 @@ function CumulativeTokensChart({ model }: { model: TimelineModel }): React.React
           onMouseMove={onMove}
           onMouseLeave={() => setHover(undefined)}
         >
-          {ticks.map(v => (
-            <g key={v}>
-              <line className="dshr-grid" x1={PAD.left} x2={W - PAD.right} y1={sy(v)} y2={sy(v)} />
-              <text className="dshr-axis-label" x={PAD.left - 8} y={sy(v) + 3} textAnchor="end">
-                {formatTokens(v)}
+          {ticks.map(value => (
+            <g key={value}>
+              <line className="dshr-grid" x1={PAD.left} x2={W - PAD.right} y1={sy(value)} y2={sy(value)} />
+              <text className="dshr-axis-label" x={PAD.left - 8} y={sy(value) + 3} textAnchor="end">
+                {formatTokens(value)}
               </text>
             </g>
           ))}
@@ -125,7 +134,6 @@ function CumulativeTokensChart({ model }: { model: TimelineModel }): React.React
           <path d={area('cumInput')} fill="var(--dshr-s-assistant)" opacity={0.1} />
           <path d={path('cumInput')} className="dshr-line" stroke="var(--dshr-s-assistant)" />
           <path d={path('cumOutput')} className="dshr-line" stroke="var(--dshr-s-tool)" />
-          {/* end markers + end labels */}
           <circle cx={sx(points.at(-1)!.x)} cy={sy(points.at(-1)!.cumInput)} r={4}
             fill="var(--dshr-s-assistant)" stroke="var(--dshr-bg)" strokeWidth={2} />
           <circle cx={sx(points.at(-1)!.x)} cy={sy(points.at(-1)!.cumOutput)} r={4}
@@ -177,13 +185,13 @@ function ToolTimeBars({ model }: { model: TimelineModel }): React.ReactElement |
       byTool.set(call.name, entry)
     }
     return [...byTool.entries()]
-      .map(([name, v]) => ({ name, ...v }))
+      .map(([name, value]) => ({ name, ...value }))
       .sort((a, b) => b.ms - a.ms)
       .slice(0, 8)
   }, [model])
 
   if (rows.length === 0) return null
-  const max = Math.max(...rows.map(r => r.ms), 1)
+  const max = Math.max(...rows.map(row => row.ms), 1)
 
   return (
     <div className="dshr-panel">
@@ -207,6 +215,64 @@ function ToolTimeBars({ model }: { model: TimelineModel }): React.ReactElement |
   )
 }
 
+function PricingEditor({ pricing, onClose }: { pricing: PricingEntry[]; onClose: () => void }): React.ReactElement {
+  const { t } = useI18n()
+  const [draft, setDraft] = useState<Record<string, PricingRate>>(() =>
+    Object.fromEntries(pricing.map(entry => [entry.label, { ...entry.rate }])),
+  )
+  const update = (label: string, key: 'input' | 'cacheRead' | 'output', value: string): void => {
+    const number = Number(value)
+    if (!Number.isFinite(number) || number < 0) return
+    setDraft(current => ({ ...current, [label]: { ...current[label], [key]: number } }))
+  }
+  const save = (): void => {
+    for (const entry of DEFAULT_PRICING) setRate(entry.label, draft[entry.label])
+    onClose()
+  }
+  return (
+    <div className="dshr-price-editor">
+      <table className="dshr-table dshr-price-table">
+        <thead>
+          <tr>
+            <th>{t('ov.perModel')}</th>
+            <th>{t('ov.inputTokens')}</th>
+            <th>{t('detail.cacheRead')}</th>
+            <th>{t('ov.outputTokens')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {DEFAULT_PRICING.map(entry => (
+            <tr key={entry.label}>
+              <td>{entry.label}</td>
+              {(['input', 'cacheRead', 'output'] as const).map(key => (
+                <td key={key}>
+                  <input
+                    className="dshr-price-input"
+                    type="number"
+                    min={0}
+                    step={0.01}
+                    value={draft[entry.label][key]}
+                    onChange={event => update(entry.label, key, event.target.value)}
+                    aria-label={`${entry.label} ${key}`}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="dshr-price-actions">
+        <button className="dshr-btn" onClick={() => { resetPricing(); onClose() }}>
+          {t('ov.priceReset')}
+        </button>
+        <span className="dshr-spacer" />
+        <button className="dshr-btn" onClick={onClose}>{t('exp.cancel')}</button>
+        <button className="dshr-btn dshr-btn-primary" onClick={save}>{t('exp.confirm')}</button>
+      </div>
+    </div>
+  )
+}
+
 export function OverviewView({
   model,
   report,
@@ -217,9 +283,12 @@ export function OverviewView({
   onOpenAudit: () => void
 }): React.ReactElement {
   const { t } = useI18n()
-  const steps = model.turns.reduce((n, turn) => n + turn.steps.length, 0)
-  const alerts = report.counts.critical + report.counts.serious
-  const cost = estimateCost(model.totals, model.models)
+  const pricing = usePricing()
+  const [currency, setCurrency] = useState<'USD' | 'CNY'>('USD')
+  const [editing, setEditing] = useState(false)
+  const steps = model.turns.reduce((count, turn) => count + turn.steps.length, 0)
+  const risk = report.counts.critical + report.counts.serious
+  const cost = estimateCostDetailed(model.modelTotals, pricing)
   const tiles: { value: string; label: string; alert?: boolean; onClick?: () => void }[] = [
     { value: formatDuration(model.durationMs), label: t('cmp.duration') },
     { value: String(model.turns.length), label: t('cmp.turns') },
@@ -227,11 +296,13 @@ export function OverviewView({
     { value: String(model.toolCalls.length), label: t('cmp.toolCalls') },
     { value: formatTokens(model.totals.billedInput), label: t('ov.inputTokens') },
     { value: formatTokens(model.totals.output), label: t('ov.outputTokens') },
-    ...(cost !== undefined
-      ? [{ value: formatUsd(cost.usd), label: t('ov.cost', { label: cost.label }) }]
-      : []),
-    { value: String(report.findings.length), label: t('ov.findings'), alert: alerts > 0, onClick: onOpenAudit },
+    {
+      value: cost !== undefined ? formatMoney(cost.usd, currency) : '—',
+      label: cost !== undefined ? t('ov.cost', { label: cost.label }) : t('ov.noCost'),
+    },
+    { value: String(risk), label: t('ov.risk'), alert: risk > 0, onClick: onOpenAudit },
   ]
+
   return (
     <div className="dshr-overview">
       <div className="dshr-tiles">
@@ -245,7 +316,7 @@ export function OverviewView({
           >
             <span className="dshr-tile-value">
               {tile.value}
-              {tile.alert ? <span className="dshr-tile-flag">⛔ {alerts}</span> : null}
+              {tile.alert ? <span className="dshr-tile-flag">⛔ {risk}</span> : null}
             </span>
             <span className="dshr-tile-label">{tile.label}</span>
           </button>
@@ -253,6 +324,51 @@ export function OverviewView({
       </div>
       <CumulativeTokensChart model={model} />
       <ToolTimeBars model={model} />
+      <div className="dshr-panel dshr-cost-panel">
+        <div className="dshr-panel-head">
+          <span className="dshr-panel-title">{t('ov.costPanel')}</span>
+          <span className="dshr-spacer" />
+          <span className="dshr-segmented">
+            <button data-active={currency === 'USD' || undefined} onClick={() => setCurrency('USD')}>USD</button>
+            <button data-active={currency === 'CNY' || undefined} onClick={() => setCurrency('CNY')}>CNY</button>
+          </span>
+          <button className="dshr-tab" onClick={() => setEditing(value => !value)}>
+            {t('ov.editPrices')}
+          </button>
+        </div>
+        {cost !== undefined ? (
+          <>
+            <div className="dshr-cost-total">
+              <span>{t('ov.cost', { label: cost.label })}</span>
+              <strong>{formatMoney(cost.usd, currency)}</strong>
+            </div>
+            {cost.parts.length > 1 && (
+              <table className="dshr-table dshr-cost-table">
+                <thead>
+                  <tr>
+                    <th>{t('ov.perModel')}</th>
+                    <th>{t('dash.tokens')}</th>
+                    <th>{t('dash.cost')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {cost.parts.map(part => (
+                    <tr key={part.model}>
+                      <td>{part.model}</td>
+                      <td>{formatTokens(part.totals.billedInput + part.totals.output)}</td>
+                      <td>{formatMoney(part.usd, currency)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </>
+        ) : (
+          <p className="dshr-cost-note">{t('ov.noCost')}</p>
+        )}
+        <p className="dshr-cost-note">{t('ov.costNote')}</p>
+        {editing && <PricingEditor pricing={pricing} onClose={() => setEditing(false)} />}
+      </div>
     </div>
   )
 }

package/src/client/components/ReplayApp.tsx

@@ -2,10 +2,18 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { auditSession } from '../../core/audit.js'
 import { buildTimeline } from '../../core/timeline.js'
 import type { ParsedSession } from '../../core/types.js'
-import { formatDuration, formatTokens, shortId, type ReplayApi, type SessionEntry } from '../api.js'
-import { buildReplayHtml, downloadReplayHtml } from '../export.js'
-import { detectLang, I18nContext, makeT, persistLang, type Lang } from '../i18n.js'
+import {
+  formatDuration,
+  formatTokens,
+  shortId,
+  type ReplayApi,
+  type SessionEntry,
+  type SessionSummaryEntry,
+} from '../api.js'
+import { I18nContext, makeT, setLang as setGlobalLang, useLang, type Lang } from '../i18n.js'
 import { MascotState } from '../mascot.js'
+import { DashboardView } from './DashboardView.js'
+import { ExportDialog } from './ExportDialog.js'
 import { SessionPicker } from './SessionPicker.js'
 import { AuditView } from './AuditView.js'
 import { CompareView } from './CompareView.js'
@@ -13,9 +21,9 @@ import { ForkTreeView } from './ForkTreeView.js'
 import { OverviewView } from './OverviewView.js'
 import { TimelineView } from './TimelineView.js'
 
-type Tab = 'overview' | 'timeline' | 'audit' | 'forks' | 'compare'
+type Tab = 'dashboard' | 'overview' | 'timeline' | 'audit' | 'forks' | 'compare'
 
-const TABS: { id: Tab; labelKey: string }[] = [
+const TABS: { id: Exclude<Tab, 'dashboard'>; labelKey: string }[] = [
   { id: 'overview', labelKey: 'tab.overview' },
   { id: 'timeline', labelKey: 'tab.timeline' },
   { id: 'audit', labelKey: 'tab.audit' },
@@ -28,56 +36,133 @@ export function ReplayApp({
   sessionId,
   initialLang,
   onSwitchSession,
+  standalone = false,
 }: {
   api: ReplayApi
-  /** Omit to start on the session picker (modal / standalone modes). */
+  /** Omit to start on the session archive (modal / standalone modes). */
   sessionId?: string
   /** Override the detected language ('en' | 'zh'). */
   initialLang?: Lang
   /** Optional host-provided navigation; falls back to internal state. */
   onSwitchSession?: (id: string) => void
+  /** Exported HTML viewer: one session, no archive/forks/compare/export. */
+  standalone?: boolean
 }): React.ReactElement {
-  const [lang, setLangState] = useState<Lang>(initialLang ?? detectLang())
-  const [tab, setTab] = useState<Tab>('overview')
+  const lang = useLang()
+  const t = useMemo(() => makeT(lang), [lang])
+  const [tab, setTab] = useState<Tab>(sessionId !== undefined ? 'overview' : 'dashboard')
   const [currentId, setCurrentId] = useState<string | undefined>(sessionId)
   const [session, setSession] = useState<ParsedSession>()
   const [entries, setEntries] = useState<SessionEntry[]>([])
-  const [error, setError] = useState<string>()
+  const [summaries, setSummaries] = useState<SessionSummaryEntry[]>([])
+  const [listLoading, setListLoading] = useState(true)
+  const [listError, setListError] = useState<string>()
+  const [sessionLoading, setSessionLoading] = useState(false)
+  const [sessionError, setSessionError] = useState<string>()
+  const [refreshTick, setRefreshTick] = useState(0)
+  const [updatedAt, setUpdatedAt] = useState<number>()
   const [jumpToSeq, setJumpToSeq] = useState<number>()
+  const [jumpNonce, setJumpNonce] = useState(0)
+  const [exporting, setExporting] = useState(false)
 
-  const t = useMemo(() => makeT(lang), [lang])
-  const setLang = (next: Lang): void => {
-    setLangState(next)
-    persistLang(next)
-  }
-  const i18n = useMemo(() => ({ lang, t, setLang }), [lang, t])
+  const i18n = useMemo(() => ({ lang, t, setLang: setGlobalLang }), [lang, t])
 
   useEffect(() => {
-    if (sessionId !== undefined) setCurrentId(sessionId)
+    if (initialLang !== undefined) setGlobalLang(initialLang)
+  }, [initialLang])
+
+  useEffect(() => {
+    if (sessionId !== undefined) {
+      setCurrentId(sessionId)
+      setTab('overview')
+    }
   }, [sessionId])
 
+  // The session list and summaries load once, not on every session switch.
   useEffect(() => {
     let cancelled = false
-    setError(undefined)
-    if (currentId !== undefined) {
-      setSession(undefined)
+    setListLoading(true)
+    setListError(undefined)
+    api
+      .listSessions()
+      .then(list => {
+        if (cancelled) return
+        setEntries([...list].sort((a, b) => b.header.createdAt - a.header.createdAt))
+        setListLoading(false)
+        setUpdatedAt(Date.now())
+      })
+      .catch(error => {
+        if (cancelled) return
+        setListError(String(error))
+        setListLoading(false)
+      })
+    if (api.getSummaries !== undefined) {
       api
-        .getSession(currentId)
-        .then(s => !cancelled && setSession(s))
-        .catch(e => !cancelled && setError(String(e)))
+        .getSummaries(30)
+        .then(list => !cancelled && setSummaries(list))
+        .catch(() => {
+          /* dashboard cards are optional; the session list still works */
+        })
+    }
+    return () => {
+      cancelled = true
+    }
+  }, [api, refreshTick])
+
+  // Only the current session is fetched on selection.
+  useEffect(() => {
+    if (currentId === undefined) {
+      setSession(undefined)
+      setSessionError(undefined)
+      return
     }
+    let cancelled = false
+    setSessionLoading(true)
+    setSessionError(undefined)
+    setSession(undefined)
     api
-      .listSessions()
-      .then(list => !cancelled && setEntries(list))
-      .catch(() => {})
+      .getSession(currentId)
+      .then(value => {
+        if (cancelled) return
+        setSession(value)
+        setSessionLoading(false)
+        setUpdatedAt(Date.now())
+      })
+      .catch(error => {
+        if (cancelled) return
+        setSessionError(String(error))
+        setSessionLoading(false)
+      })
     return () => {
       cancelled = true
     }
-  }, [api, currentId])
+  }, [api, currentId, refreshTick])
 
   const model = useMemo(() => (session ? buildTimeline(session) : undefined), [session])
   const report = useMemo(() => (session ? auditSession(session) : undefined), [session])
-  const title = entries.find(e => e.header.id === currentId)?.title ?? model?.title
+  const currentEntry = entries.find(entry => entry.header.id === currentId)
+  const title = currentEntry?.title ?? model?.title
+
+  const availableTabs = useMemo(
+    () =>
+      TABS.filter(item => {
+        if (standalone && (item.id === 'forks' || item.id === 'compare')) return false
+        return true
+      }),
+    [standalone],
+  )
+
+  useEffect(() => {
+    if (currentId === undefined) {
+      setTab('dashboard')
+      return
+    }
+    if (tab === 'dashboard') {
+      setTab('overview')
+      return
+    }
+    if (!availableTabs.some(item => item.id === tab)) setTab('overview')
+  }, [availableTabs, currentId, tab])
 
   const switchSession = (id: string): void => {
     setJumpToSeq(undefined)
@@ -86,65 +171,99 @@ export function ReplayApp({
     setTab('overview')
   }
 
+  const backToArchive = (): void => {
+    setCurrentId(undefined)
+    setSession(undefined)
+    setTab('dashboard')
+  }
+
+  const refresh = (): void => setRefreshTick(tick => tick + 1)
+
   const jump = (seq: number): void => {
     setTab('timeline')
     setJumpToSeq(seq)
-  }
-
-  const handleExport = async (): Promise<void> => {
-    if (session === undefined || api.getViewerSource === undefined) return
-    try {
-      const viewer = await api.getViewerSource()
-      const html = buildReplayHtml(viewer, [
-        { header: session.header, events: session.events, title },
-      ])
-      downloadReplayHtml(html, `replay-${shortId(session.header.id).replace('…', '')}.html`)
-    } catch (e) {
-      // eslint-disable-next-line no-alert
-      alert(t('exp.fail', { error: String(e) }))
-    }
+    setJumpNonce(nonce => nonce + 1)
   }
 
   const langToggle = (
     <button
       className="dshr-tab"
-      onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}
-      title={lang === 'en' ? '切换到中文' : 'Switch to English'}
-      aria-label="language"
+      onClick={() => setGlobalLang(lang === 'en' ? 'zh' : 'en')}
+      title={t('lang.switch')}
+      aria-label={t('lang.switch')}
     >
       {lang === 'en' ? '中' : 'EN'}
     </button>
   )
 
+  const updated = updatedAt !== undefined
+    ? t('app.updated', {
+        time: new Date(updatedAt).toLocaleTimeString(lang === 'zh' ? 'zh-CN' : 'en', {
+          hour: '2-digit',
+          minute: '2-digit',
+        }),
+      })
+    : undefined
+
   if (currentId === undefined) {
     return (
       <I18nContext.Provider value={i18n}>
         <div className="dshr-root">
           <div className="dshr-header">
-            <span className="dshr-title">Replay</span>
+            <span className="dshr-title">{t('dash.title')}</span>
+            <span className="dshr-header-sub">{t('app.reviewSub')}</span>
             <span className="dshr-spacer" />
+            {updated !== undefined && <span className="dshr-header-stat">{updated}</span>}
+            <button className="dshr-tab" onClick={refresh} title={t('app.refresh')}>
+              ↻ {t('app.refresh')}
+            </button>
             {langToggle}
           </div>
-          <SessionPicker api={api} onPick={switchSession} />
+          {listError !== undefined ? (
+            <MascotState mood="alert" text={t('app.error', { error: listError })} />
+          ) : api.getSummaries !== undefined ? (
+            <DashboardView
+              entries={entries}
+              summaries={summaries}
+              loading={listLoading}
+              onPick={switchSession}
+            />
+          ) : (
+            <SessionPicker entries={entries} loading={listLoading} onPick={switchSession} />
+          )}
         </div>
       </I18nContext.Provider>
     )
   }
-  if (error !== undefined) {
+
+  if (sessionError !== undefined) {
     return (
       <I18nContext.Provider value={i18n}>
         <div className="dshr-root">
           <div className="dshr-header">
-            <span className="dshr-title">Replay</span>
+            {!standalone && (
+              <button className="dshr-tab" onClick={backToArchive}>
+                ← {t('app.back')}
+              </button>
+            )}
+            <span className="dshr-title">{t('modal.title')}</span>
             <span className="dshr-spacer" />
             {langToggle}
           </div>
-          <MascotState mood="alert" text={t('app.error', { error })} />
+          <div className="dshr-center dshr-error-state">
+            <div>
+              <p>{t('app.error', { error: sessionError })}</p>
+              <button className="dshr-btn" onClick={refresh}>
+                {t('app.retry')}
+              </button>
+            </div>
+          </div>
         </div>
       </I18nContext.Provider>
     )
   }
-  if (session === undefined || model === undefined || report === undefined) {
+
+  if (sessionLoading || session === undefined || model === undefined || report === undefined) {
     return (
       <I18nContext.Provider value={i18n}>
         <div className="dshr-root">
@@ -158,9 +277,14 @@ export function ReplayApp({
     <I18nContext.Provider value={i18n}>
       <div className="dshr-root">
         <div className="dshr-header">
-          <span className="dshr-title">Replay</span>
+          {!standalone && (
+            <button className="dshr-tab" onClick={backToArchive} title={t('app.back')}>
+              ←
+            </button>
+          )}
+          <span className="dshr-title">{t('modal.title')}</span>
           <nav className="dshr-tabs">
-            {TABS.map(item => (
+            {availableTabs.map(item => (
               <button
                 key={item.id}
                 className="dshr-tab"
@@ -175,14 +299,19 @@ export function ReplayApp({
             ))}
           </nav>
           <span className="dshr-spacer" />
-          <span className="dshr-header-stat">
+          <span className="dshr-header-stat dshr-header-session">
             {title ?? shortId(currentId)} · {t('hdr.turns', { n: model.turns.length })} ·{' '}
             {formatTokens(model.totals.billedInput + model.totals.output)} tok ·{' '}
             {formatDuration(model.durationMs)}
             {model.models.length > 0 ? ` · ${model.models.join(', ')}` : ''}
           </span>
-          {api.getViewerSource !== undefined && (
-            <button className="dshr-tab" onClick={() => void handleExport()} title={t('exp.button')}>
+          {currentEntry?.live === true && <span className="dshr-live-dot" title={t('picker.live')} />}
+          {updated !== undefined && <span className="dshr-header-stat">{updated}</span>}
+          <button className="dshr-tab" onClick={refresh} title={t('app.refresh')}>
+            ↻
+          </button>
+          {!standalone && api.getViewerSource !== undefined && (
+            <button className="dshr-tab" onClick={() => setExporting(true)} title={t('exp.button')}>
               ⬇ {t('exp.button')}
             </button>
           )}
@@ -191,13 +320,31 @@ export function ReplayApp({
         {tab === 'overview' && (
           <OverviewView model={model} report={report} onOpenAudit={() => setTab('audit')} />
         )}
-        {tab === 'timeline' && <TimelineView model={model} jumpToSeq={jumpToSeq} />}
-        {tab === 'audit' && <AuditView report={report} model={model} onJump={jump} />}
-        {tab === 'forks' && (
+        {tab === 'timeline' && (
+          <TimelineView model={model} jumpToSeq={jumpToSeq} jumpNonce={jumpNonce} />
+        )}
+        {tab === 'audit' && (
+          <AuditView report={report} model={model} onJump={jump} sessionId={currentId} />
+        )}
+        {tab === 'forks' && !standalone && (
           <ForkTreeView entries={entries} currentId={currentId} onSelect={switchSession} />
         )}
-        {tab === 'compare' && (
-          <CompareView api={api} session={session} entries={entries} title={title} />
+        {tab === 'compare' && !standalone && (
+          <CompareView
+            api={api}
+            session={session}
+            entries={entries}
+            title={title}
+            onOpenSession={switchSession}
+          />
+        )}
+        {exporting && (
+          <ExportDialog
+            api={api}
+            session={session}
+            title={title}
+            onClose={() => setExporting(false)}
+          />
         )}
       </div>
     </I18nContext.Provider>