@mingozhou/dsh-replay 0.3.3

package/src/client/components/ReplayApp.tsx

@@ -0,0 +1,205 @@
+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 { MascotState } from '../mascot.js'
+import { SessionPicker } from './SessionPicker.js'
+import { AuditView } from './AuditView.js'
+import { CompareView } from './CompareView.js'
+import { ForkTreeView } from './ForkTreeView.js'
+import { OverviewView } from './OverviewView.js'
+import { TimelineView } from './TimelineView.js'
+
+type Tab = 'overview' | 'timeline' | 'audit' | 'forks' | 'compare'
+
+const TABS: { id: Tab; labelKey: string }[] = [
+  { id: 'overview', labelKey: 'tab.overview' },
+  { id: 'timeline', labelKey: 'tab.timeline' },
+  { id: 'audit', labelKey: 'tab.audit' },
+  { id: 'forks', labelKey: 'tab.forks' },
+  { id: 'compare', labelKey: 'tab.compare' },
+]
+
+export function ReplayApp({
+  api,
+  sessionId,
+  initialLang,
+  onSwitchSession,
+}: {
+  api: ReplayApi
+  /** Omit to start on the session picker (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
+}): React.ReactElement {
+  const [lang, setLangState] = useState<Lang>(initialLang ?? detectLang())
+  const [tab, setTab] = useState<Tab>('overview')
+  const [currentId, setCurrentId] = useState<string | undefined>(sessionId)
+  const [session, setSession] = useState<ParsedSession>()
+  const [entries, setEntries] = useState<SessionEntry[]>([])
+  const [error, setError] = useState<string>()
+  const [jumpToSeq, setJumpToSeq] = useState<number>()
+
+  const t = useMemo(() => makeT(lang), [lang])
+  const setLang = (next: Lang): void => {
+    setLangState(next)
+    persistLang(next)
+  }
+  const i18n = useMemo(() => ({ lang, t, setLang }), [lang, t])
+
+  useEffect(() => {
+    if (sessionId !== undefined) setCurrentId(sessionId)
+  }, [sessionId])
+
+  useEffect(() => {
+    let cancelled = false
+    setError(undefined)
+    if (currentId !== undefined) {
+      setSession(undefined)
+      api
+        .getSession(currentId)
+        .then(s => !cancelled && setSession(s))
+        .catch(e => !cancelled && setError(String(e)))
+    }
+    api
+      .listSessions()
+      .then(list => !cancelled && setEntries(list))
+      .catch(() => {})
+    return () => {
+      cancelled = true
+    }
+  }, [api, currentId])
+
+  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 switchSession = (id: string): void => {
+    setJumpToSeq(undefined)
+    if (onSwitchSession) onSwitchSession(id)
+    setCurrentId(id)
+    setTab('overview')
+  }
+
+  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) }))
+    }
+  }
+
+  const langToggle = (
+    <button
+      className="dshr-tab"
+      onClick={() => setLang(lang === 'en' ? 'zh' : 'en')}
+      title={lang === 'en' ? '切换到中文' : 'Switch to English'}
+      aria-label="language"
+    >
+      {lang === 'en' ? '中' : 'EN'}
+    </button>
+  )
+
+  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-spacer" />
+            {langToggle}
+          </div>
+          <SessionPicker api={api} onPick={switchSession} />
+        </div>
+      </I18nContext.Provider>
+    )
+  }
+  if (error !== undefined) {
+    return (
+      <I18nContext.Provider value={i18n}>
+        <div className="dshr-root">
+          <div className="dshr-header">
+            <span className="dshr-title">Replay</span>
+            <span className="dshr-spacer" />
+            {langToggle}
+          </div>
+          <MascotState mood="alert" text={t('app.error', { error })} />
+        </div>
+      </I18nContext.Provider>
+    )
+  }
+  if (session === undefined || model === undefined || report === undefined) {
+    return (
+      <I18nContext.Provider value={i18n}>
+        <div className="dshr-root">
+          <MascotState mood="idle" text={t('app.loadingText')} />
+        </div>
+      </I18nContext.Provider>
+    )
+  }
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      <div className="dshr-root">
+        <div className="dshr-header">
+          <span className="dshr-title">Replay</span>
+          <nav className="dshr-tabs">
+            {TABS.map(item => (
+              <button
+                key={item.id}
+                className="dshr-tab"
+                data-active={tab === item.id || undefined}
+                onClick={() => setTab(item.id)}
+              >
+                {t(item.labelKey)}
+                {item.id === 'audit' && report.counts.critical + report.counts.serious > 0
+                  ? ` (${report.counts.critical + report.counts.serious})`
+                  : ''}
+              </button>
+            ))}
+          </nav>
+          <span className="dshr-spacer" />
+          <span className="dshr-header-stat">
+            {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')}>
+              ⬇ {t('exp.button')}
+            </button>
+          )}
+          {langToggle}
+        </div>
+        {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' && (
+          <ForkTreeView entries={entries} currentId={currentId} onSelect={switchSession} />
+        )}
+        {tab === 'compare' && (
+          <CompareView api={api} session={session} entries={entries} title={title} />
+        )}
+      </div>
+    </I18nContext.Provider>
+  )
+}

package/src/client/components/ReplayModal.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react'
+import type { ReplayApi } from '../api.js'
+import { Mascot } from '../mascot.js'
+import { ReplayApp } from './ReplayApp.js'
+
+/** Full-screen modal hosting the replay app, opened from the sidebar button. */
+export function ReplayModal({
+  api,
+  onClose,
+  closeLabel,
+}: {
+  api: ReplayApi
+  onClose: () => void
+  closeLabel: string
+}): React.ReactElement {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div className="dshr-modal-backdrop" onClick={onClose}>
+      <div className="dshr-modal" onClick={event => event.stopPropagation()}>
+        <div className="dshr-modal-chrome">
+          <Mascot mood="idle" size={30} />
+          <span className="dshr-modal-title">dsh-replay</span>
+          <span className="dshr-spacer" />
+          <a
+            className="dshr-modal-github"
+            href="https://github.com/MingoZhou/dsh-replay"
+            target="_blank"
+            rel="noreferrer"
+            title="GitHub"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+            </svg>
+            GitHub
+          </a>
+          <button className="dshr-modal-close" onClick={onClose} aria-label={closeLabel}>
+            ✕
+          </button>
+        </div>
+        <div className="dshr-modal-body">
+          <ReplayApp api={api} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/SessionPicker.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react'
+import { formatDuration, shortId, type ReplayApi, type SessionEntry } from '../api.js'
+import { useI18n } from '../i18n.js'
+import { MascotState } from '../mascot.js'
+
+export function SessionPicker({
+  api,
+  onPick,
+}: {
+  api: ReplayApi
+  onPick: (id: string) => void
+}): React.ReactElement {
+  const { t } = useI18n()
+  const [entries, setEntries] = useState<SessionEntry[]>()
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    let cancelled = false
+    api
+      .listSessions()
+      .then(list => {
+        if (!cancelled) setEntries([...list].sort((a, b) => b.header.createdAt - a.header.createdAt))
+      })
+      .catch(e => !cancelled && setError(String(e)))
+    return () => {
+      cancelled = true
+    }
+  }, [api])
+
+  if (error !== undefined) return <MascotState mood="alert" text={error} />
+  if (entries === undefined) return <MascotState mood="idle" text={t('app.loadingText')} />
+  if (entries.length === 0) return <MascotState mood="happy" text={t('picker.empty')} />
+
+  const now = Date.now()
+  return (
+    <div className="dshr-picker">
+      <div className="dshr-section-label">{t('picker.title')}</div>
+      {entries.map(entry => (
+        <button key={entry.header.id} className="dshr-picker-row" onClick={() => onPick(entry.header.id)}>
+          <span className="dshr-picker-title">
+            {entry.title ?? shortId(entry.header.id)}
+            {entry.header.origin === 'subagent' && <span className="dshr-picker-tag">subagent</span>}
+            {entry.header.parentSession !== undefined && entry.header.origin !== 'subagent' && (
+              <span className="dshr-picker-tag">fork</span>
+            )}
+          </span>
+          <span className="dshr-picker-sub">
+            {shortId(entry.header.id)}
+            {entry.header.cwd !== undefined ? ` · ${entry.header.cwd}` : ''}
+          </span>
+          <span className="dshr-picker-age">
+            {Number.isFinite(entry.header.createdAt) && entry.header.createdAt <= now
+              ? formatDuration(now - entry.header.createdAt)
+              : ''}
+          </span>
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/client/components/TimelineView.tsx

@@ -0,0 +1,296 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import type { TimelineItem, TimelineModel } from '../../core/timeline.js'
+import { formatClock, formatDuration, formatTokens } from '../api.js'
+import { localizeItemLabel, useI18n } from '../i18n.js'
+import { ItemDetail } from './ItemDetail.js'
+
+const SPEEDS = [1, 2, 4, 8, 16]
+
+/** Compress log time into playback time: per-item delay from real dt, clamped. */
+function delayFor(prev: TimelineItem | undefined, next: TimelineItem, speed: number): number {
+  const dt = prev === undefined ? 0 : Math.max(0, next.time - prev.time)
+  return Math.min(1400, Math.max(120, dt)) / speed
+}
+
+function TokenStrip({
+  model,
+  currentSeq,
+  onJump,
+}: {
+  model: TimelineModel
+  currentSeq: number
+  onJump: (seq: number) => void
+}): React.ReactElement | null {
+  const { t } = useI18n()
+  const samples = model.usageSamples
+  if (samples.length === 0) return null
+  const max = Math.max(
+    ...samples.map(s => s.usage.inputTokens + (s.usage.cacheReadTokens ?? 0) + (s.usage.cacheWriteTokens ?? 0) + s.usage.outputTokens),
+    1,
+  )
+  return (
+    <div className="dshr-tokenstrip">
+      <div className="dshr-tokenstrip-head">
+        <span>{t('ts.title')}</span>
+        <span className="dshr-legend">
+          <span className="dshr-legend-item">
+            <span className="dshr-legend-swatch" style={{ background: 'var(--dshr-s-assistant)' }} />
+            {t('ts.input')}
+          </span>
+          <span className="dshr-legend-item">
+            <span className="dshr-legend-swatch" style={{ background: 'var(--dshr-s-tool)' }} />
+            {t('ts.output')}
+          </span>
+        </span>
+        <span className="dshr-spacer" />
+        <span>
+          {t('ts.total', { in: formatTokens(model.totals.billedInput), out: formatTokens(model.totals.output) })}
+          {model.totals.cacheRead > 0 ? t('ts.cacheRead', { n: formatTokens(model.totals.cacheRead) }) : ''}
+        </span>
+      </div>
+      <div className="dshr-bars" role="img" aria-label={t('ts.title')}>
+        {samples.map(sample => {
+          const input =
+            sample.usage.inputTokens + (sample.usage.cacheReadTokens ?? 0) + (sample.usage.cacheWriteTokens ?? 0)
+          const output = sample.usage.outputTokens
+          const isCurrent =
+            currentSeq >= sample.seq &&
+            (samples.find(s => s.seq > sample.seq)?.seq ?? Number.POSITIVE_INFINITY) > currentSeq
+          return (
+            <button
+              key={`${sample.turn}/${sample.step}`}
+              className="dshr-bar"
+              data-current={isCurrent || undefined}
+              title={t('ts.barTitle', {
+                turn: sample.turn, step: sample.step,
+                in: formatTokens(input), out: formatTokens(output),
+              })}
+              onClick={() => onJump(sample.seq)}
+            >
+              <div className="dshr-bar-out" style={{ height: `${(output / max) * 100}%` }} />
+              <div className="dshr-bar-in" style={{ height: `${(input / max) * 100}%` }} />
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export function TimelineView({
+  model,
+  jumpToSeq,
+}: {
+  model: TimelineModel
+  jumpToSeq?: number
+}): React.ReactElement {
+  const { t } = useI18n()
+  const [query, setQuery] = useState('')
+  const [kinds, setKinds] = useState<Set<string>>(new Set(['user', 'assistant', 'tool', 'meta']))
+  const items = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return model.items.filter(item => {
+      if (!kinds.has(item.kind)) return false
+      if (q === '') return true
+      return (
+        item.label.toLowerCase().includes(q) ||
+        (item.text?.toLowerCase().includes(q) ?? false) ||
+        (item.toolCall !== undefined &&
+          (item.toolCall.name.toLowerCase().includes(q) ||
+            item.toolCall.argumentsRaw.toLowerCase().includes(q) ||
+            (item.toolCall.resultText?.toLowerCase().includes(q) ?? false)))
+      )
+    })
+  }, [model.items, query, kinds])
+  const [cursor, setCursor] = useState(items.length > 0 ? items.length - 1 : 0)
+  const [playing, setPlaying] = useState(false)
+  const [speed, setSpeed] = useState(4)
+  const railRef = useRef<HTMLDivElement>(null)
+  const current: TimelineItem | undefined = items[Math.min(cursor, items.length - 1)]
+
+  useEffect(() => {
+    setCursor(c => Math.min(c, Math.max(0, items.length - 1)))
+  }, [items.length])
+
+  const toggleKind = (kind: string): void => {
+    setKinds(prev => {
+      const next = new Set(prev)
+      if (next.has(kind)) {
+        if (next.size > 1) next.delete(kind)
+      } else {
+        next.add(kind)
+      }
+      return next
+    })
+  }
+
+  useEffect(() => {
+    if (jumpToSeq === undefined) return
+    const index = items.findIndex(i => i.seq >= jumpToSeq)
+    if (index >= 0) {
+      setCursor(index)
+      setPlaying(false)
+    }
+  }, [jumpToSeq, items])
+
+  useEffect(() => {
+    if (!playing) return
+    if (cursor >= items.length - 1) {
+      setPlaying(false)
+      return
+    }
+    const timer = setTimeout(
+      () => setCursor(c => Math.min(c + 1, items.length - 1)),
+      delayFor(items[cursor], items[cursor + 1], speed),
+    )
+    return () => clearTimeout(timer)
+  }, [playing, cursor, speed, items])
+
+  useEffect(() => {
+    const el = railRef.current?.querySelector<HTMLElement>('[data-selected="true"]')
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [cursor])
+
+  const grouped = useMemo(() => {
+    const rows: ({ head: { turn: number; reason?: string; durationMs?: number } } | { item: TimelineItem; index: number })[] = []
+    let lastTurn: number | undefined
+    items.forEach((item, index) => {
+      if (item.turn !== undefined && item.turn !== lastTurn) {
+        lastTurn = item.turn
+        const turnModel = model.turns.find(t => t.turn === item.turn)
+        rows.push({
+          head: {
+            turn: item.turn,
+            reason: turnModel?.endReason,
+            durationMs:
+              turnModel?.endTime !== undefined ? turnModel.endTime - turnModel.startTime : undefined,
+          },
+        })
+      }
+      rows.push({ item, index })
+    })
+    return rows
+  }, [items, model.turns])
+
+  if (model.items.length === 0) {
+    return <div className="dshr-center">{t('tl.empty')}</div>
+  }
+
+  const togglePlay = (): void => {
+    if (!playing && cursor >= items.length - 1) setCursor(0)
+    setPlaying(p => !p)
+  }
+
+  return (
+    <>
+      <div className="dshr-playbar">
+        <button
+          className="dshr-play-btn"
+          data-playing={playing || undefined}
+          onClick={togglePlay}
+          aria-label={playing ? 'pause' : 'play'}
+        >
+          {playing ? '❚❚' : '▶'}
+        </button>
+        <button
+          className="dshr-speed"
+          onClick={() => setSpeed(s => SPEEDS[(SPEEDS.indexOf(s) + 1) % SPEEDS.length])}
+          title="playback speed"
+        >
+          {speed}×
+        </button>
+        <input
+          className="dshr-scrub"
+          type="range"
+          min={0}
+          max={Math.max(0, items.length - 1)}
+          value={Math.min(cursor, Math.max(0, items.length - 1))}
+          onChange={e => {
+            setCursor(Number(e.target.value))
+            setPlaying(false)
+          }}
+          aria-label={t('play.position')}
+        />
+        <span className="dshr-clock">
+          {current ? formatClock(current.time, model.startTime) : '00:00'} /{' '}
+          {formatClock(model.endTime, model.startTime)} · {t('play.event', { i: Math.min(cursor, Math.max(0, items.length - 1)) + 1, n: items.length })}
+        </span>
+        <input
+          className="dshr-filter-input"
+          type="search"
+          placeholder={t('flt.search')}
+          value={query}
+          onChange={e => {
+            setQuery(e.target.value)
+            setPlaying(false)
+          }}
+          aria-label={t('flt.search')}
+        />
+        <span className="dshr-kind-chips">
+          {(['user', 'assistant', 'tool', 'meta'] as const).map(kind => (
+            <button
+              key={kind}
+              className="dshr-kind-chip"
+              data-on={kinds.has(kind) || undefined}
+              data-kind={kind}
+              onClick={() => toggleKind(kind)}
+            >
+              <span className="dshr-kind-dot" />
+              {t(`kind.${kind}`)}
+            </button>
+          ))}
+        </span>
+      </div>
+      <TokenStrip
+        model={model}
+        currentSeq={current?.seq ?? 0}
+        onJump={seq => {
+          const index = items.findIndex(i => i.seq >= seq)
+          if (index >= 0) {
+            setCursor(index)
+            setPlaying(false)
+          }
+        }}
+      />
+      <div className="dshr-timeline">
+        <div className="dshr-rail" ref={railRef}>
+          {grouped.map((row, i) =>
+            'head' in row ? (
+              <div key={`h${row.head.turn}`} className="dshr-turn-head">
+                <span>{t('tl.turn', { n: row.head.turn })}</span>
+                {row.head.durationMs !== undefined && (
+                  <span className="dshr-turn-reason">{formatDuration(row.head.durationMs)}</span>
+                )}
+                {row.head.reason !== undefined && row.head.reason !== 'completed' && (
+                  <span className="dshr-turn-reason">· {row.head.reason}</span>
+                )}
+              </div>
+            ) : (
+              <button
+                key={row.item.seq}
+                className="dshr-item"
+                data-kind={row.item.kind}
+                data-selected={row.index === cursor || undefined}
+                data-future={row.index > cursor || undefined}
+                data-shadowed={row.item.shadowed || undefined}
+                onClick={() => {
+                  setCursor(row.index)
+                  setPlaying(false)
+                }}
+              >
+                <span className="dshr-item-kind">
+                  {row.item.kind === 'tool'
+                    ? row.item.toolCall?.name.slice(0, 10) ?? t('kind.tool')
+                    : t(`kind.${row.item.kind}`)}
+                </span>
+                <span className="dshr-item-label">{localizeItemLabel(t, row.item)}</span>
+                <span className="dshr-item-time">{formatClock(row.item.time, model.startTime)}</span>
+              </button>
+            ),
+          )}
+        </div>
+        <div className="dshr-detail">{current && <ItemDetail item={current} model={model} />}</div>
+      </div>
+    </>
+  )
+}

package/src/client/export.ts

@@ -0,0 +1,43 @@
+/**
+ * Export a session as a single self-contained HTML file: the viewer bundle
+ * (react inlined) + the session data, playable offline and shareable in an
+ * issue, a blog post, or a chat.
+ */
+import type { ParsedSession } from '../core/types.js'
+
+export interface ExportSession {
+  header: ParsedSession['header']
+  events: ParsedSession['events']
+  title?: string
+}
+
+export function buildReplayHtml(viewerSource: string, sessions: ExportSession[]): string {
+  const data = JSON.stringify({ sessions }).replaceAll('<', '\\u003c')
+  const safeViewer = viewerSource.replaceAll('</script>', '<\\/script>')
+  const title = sessions[0]?.title ?? 'session replay'
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>dsh-replay — ${title.replaceAll('<', '&lt;')}</title>
+<style>html, body, #root { height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }</style>
+</head>
+<body>
+<div id="root"></div>
+<script>window.__DSHR_DATA__ = ${data}</script>
+<script>${safeViewer}</script>
+</body>
+</html>
+`
+}
+
+export function downloadReplayHtml(html: string, filename: string): void {
+  const blob = new Blob([html], { type: 'text/html;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  setTimeout(() => URL.revokeObjectURL(url), 5000)
+}