@mingozhou/dsh-replay 0.4.1 → 0.4.2

package/src/client/components/CompareView.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useMemo, useState } from 'react'
+import { auditSession } from '../../core/audit.js'
 import { compareSessions, type CompareResult } from '../../core/compare.js'
+import { estimateCostDetailed, formatMoney } from '../../core/cost.js'
+import { redactText } from '../../core/redact.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 { useI18n } from '../i18n.js'
+import { usePricing } from '../pricing.js'
 
 function Row({
   label,
@@ -27,25 +32,38 @@ function Row({
   )
 }
 
+function preview(event: { type: string; data: unknown } | undefined): string {
+  if (event === undefined) return '—'
+  const data = redactText(JSON.stringify(event.data) ?? '').text
+  return `${event.type}\n${data.slice(0, 700)}${data.length > 700 ? '…' : ''}`
+}
+
 export function CompareView({
   api,
   session,
   entries,
   title,
+  onOpenSession,
 }: {
   api: ReplayApi
   session: ParsedSession
   entries: SessionEntry[]
   title?: string
+  onOpenSession?: (id: string) => void
 }): React.ReactElement {
   const { t } = useI18n()
+  const pricing = usePricing()
   const others = useMemo(
-    () => entries.filter(e => e.header.id !== session.header.id),
+    () => entries.filter(entry => entry.header.id !== session.header.id),
     [entries, session],
   )
+  const parentMap = useMemo(
+    () => new Map(entries.map(entry => [entry.header.id, entry.header.parentSession])),
+    [entries],
+  )
   const defaultOther =
-    others.find(e => e.header.id === session.header.parentSession)?.header.id ??
-    others.find(e => e.header.parentSession === session.header.id)?.header.id ??
+    others.find(entry => entry.header.id === session.header.parentSession)?.header.id ??
+    others.find(entry => entry.header.parentSession === session.header.id)?.header.id ??
     others[0]?.header.id
   const [otherId, setOtherId] = useState(defaultOther)
   const [other, setOther] = useState<ParsedSession>()
@@ -60,13 +78,13 @@ export function CompareView({
     let cancelled = false
     api
       .getSession(otherId)
-      .then(s => {
+      .then(value => {
         if (!cancelled) {
-          setOther(s)
+          setOther(value)
           setError(undefined)
         }
       })
-      .catch(e => !cancelled && setError(String(e)))
+      .catch(reason => !cancelled && setError(String(reason)))
     return () => {
       cancelled = true
     }
@@ -74,11 +92,32 @@ export function CompareView({
 
   const result: CompareResult | undefined = useMemo(() => {
     if (other === undefined) return undefined
-    return compareSessions(session, other, {
-      a: title,
-      b: others.find(e => e.header.id === other.header.id)?.title,
-    })
-  }, [session, other, title, others])
+    return compareSessions(
+      session,
+      other,
+      { a: title, b: others.find(entry => entry.header.id === other.header.id)?.title },
+      id => parentMap.get(id),
+    )
+  }, [session, other, title, others, parentMap])
+
+  const costA = useMemo(() => {
+    const model = buildTimeline(session)
+    return estimateCostDetailed(model.modelTotals, pricing)
+  }, [session, pricing])
+  const costB = useMemo(() => {
+    if (other === undefined) return undefined
+    const model = buildTimeline(other)
+    return estimateCostDetailed(model.modelTotals, pricing)
+  }, [other, pricing])
+  const riskA = useMemo(() => {
+    const report = auditSession(session)
+    return report.counts.critical + report.counts.serious
+  }, [session])
+  const riskB = useMemo(() => {
+    if (other === undefined) return 0
+    const report = auditSession(other)
+    return report.counts.critical + report.counts.serious
+  }, [other])
 
   if (others.length === 0) {
     return <div className="dshr-center">{t('cmp.none')}</div>
@@ -91,7 +130,7 @@ export function CompareView({
         <select
           className="dshr-select"
           value={otherId}
-          onChange={e => setOtherId(e.target.value)}
+          onChange={event => setOtherId(event.target.value)}
           aria-label={t('cmp.aria')}
         >
           {others.map(entry => (
@@ -108,7 +147,25 @@ export function CompareView({
         <>
           {result.related && result.divergenceSeq !== undefined && (
             <div className="dshr-divergence">
-              {t('cmp.divergence', { seq: result.divergenceSeq })}
+              <div className="dshr-divergence-title">
+                {t('cmp.divergence', { seq: result.divergenceSeq })}
+              </div>
+              <div className="dshr-diff-grid">
+                <div className="dshr-diff-side">
+                  <div className="dshr-section-label">{t('cmp.divergenceA')}</div>
+                  <pre className="dshr-pre">{preview(result.divergenceA)}</pre>
+                  <button className="dshr-tab" onClick={() => onOpenSession?.(result.a.id)}>
+                    {t('forks.open')}
+                  </button>
+                </div>
+                <div className="dshr-diff-side">
+                  <div className="dshr-section-label">{t('cmp.divergenceB')}</div>
+                  <pre className="dshr-pre">{preview(result.divergenceB)}</pre>
+                  <button className="dshr-tab" onClick={() => onOpenSession?.(result.b.id)}>
+                    {t('forks.open')}
+                  </button>
+                </div>
+              </div>
             </div>
           )}
           <div className="dshr-compare-grid">
@@ -122,6 +179,10 @@ export function CompareView({
               </tr>
             </thead>
             <tbody>
+              <tr>
+                <td>{t('cmp.relation')}</td>
+                <td colSpan={3}>{t(`cmp.relation.${result.relation}`)}</td>
+              </tr>
               <Row label={t('cmp.turns')} a={result.a.turns} b={result.b.turns} />
               <Row label={t('cmp.steps')} a={result.a.steps} b={result.b.steps} />
               <Row label={t('cmp.events')} a={result.a.events} b={result.b.events} />
@@ -151,6 +212,21 @@ export function CompareView({
                 b={result.b.durationMs}
                 format={formatDuration}
               />
+              <Row label={t('cmp.risk')} a={riskA} b={riskB} />
+              {costA !== undefined && costB !== undefined && (
+                <tr>
+                  <td>{t('cmp.cost')}</td>
+                  <td>{formatMoney(costA.usd, 'USD')}</td>
+                  <td>{formatMoney(costB.usd, 'USD')}</td>
+                  <td style={{ color: 'var(--dshr-ink-3)' }}>
+                    {costA.usd === costB.usd
+                      ? '='
+                      : costA.usd > costB.usd
+                        ? `+${formatMoney(costA.usd - costB.usd, 'USD')}`
+                        : `−${formatMoney(costB.usd - costA.usd, 'USD')}`}
+                  </td>
+                </tr>
+              )}
             </tbody>
           </table>
           {result.toolNames.length > 0 && (

package/src/client/components/DashboardView.tsx

@@ -0,0 +1,232 @@
+import React, { useMemo, useState } from 'react'
+import { estimateCost, estimateCostDetailed, formatMoney } from '../../core/cost.js'
+import {
+  formatDuration,
+  formatRelativeTime,
+  formatTokens,
+  shortId,
+  type SessionEntry,
+  type SessionSummaryEntry,
+} from '../api.js'
+import { useI18n } from '../i18n.js'
+import { usePricing } from '../pricing.js'
+import { MascotState } from '../mascot.js'
+
+type Period = 'month' | 'all'
+type Currency = 'USD' | 'CNY'
+
+export function DashboardView({
+  entries,
+  summaries,
+  loading,
+  onPick,
+}: {
+  entries: SessionEntry[]
+  summaries: SessionSummaryEntry[]
+  loading: boolean
+  onPick: (id: string) => void
+}): React.ReactElement {
+  const { t, lang } = useI18n()
+  const pricing = usePricing()
+  const [query, setQuery] = useState('')
+  const [workspace, setWorkspace] = useState('')
+  const [period, setPeriod] = useState<Period>('all')
+  const [currency, setCurrency] = useState<Currency>('USD')
+
+  const summaryMap = useMemo(
+    () => new Map(summaries.map(summary => [summary.header.id, summary])),
+    [summaries],
+  )
+  const workspaces = useMemo(
+    () => [...new Set(entries.map(entry => entry.header.cwd).filter((cwd): cwd is string => typeof cwd === 'string'))].sort(),
+    [entries],
+  )
+  const periodStart = useMemo(() => {
+    const now = new Date()
+    return period === 'month' ? new Date(now.getFullYear(), now.getMonth(), 1).getTime() : 0
+  }, [period])
+
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return entries
+      .filter(entry => entry.header.createdAt >= periodStart)
+      .filter(entry => workspace === '' || entry.header.cwd === workspace)
+      .filter(entry => {
+        if (q === '') return true
+        const haystack = `${entry.title ?? ''} ${entry.header.id} ${entry.header.cwd ?? ''}`.toLowerCase()
+        return haystack.includes(q)
+      })
+  }, [entries, periodStart, query, workspace])
+
+  const costFor = (summary: SessionSummaryEntry | undefined): number | undefined => {
+    if (summary?.summary === undefined) return undefined
+    const detailed = estimateCostDetailed(summary.summary.modelTotals, pricing)
+    if (detailed !== undefined) return detailed.usd
+    return estimateCost(summary.summary.tokens, summary.summary.models, pricing)?.usd
+  }
+
+  const totals = useMemo(() => {
+    let tokens = 0
+    let cost = 0
+    let risk = 0
+    let errors = 0
+    for (const row of rows) {
+      const summary = summaryMap.get(row.header.id)?.summary
+      if (summary === undefined) continue
+      tokens += summary.tokens.billedInput + summary.tokens.output
+      cost += costFor(summaryMap.get(row.header.id)) ?? 0
+      risk += summary.critical + summary.serious
+      errors += summary.toolErrors
+    }
+    return { tokens, cost, risk, errors }
+  }, [rows, summaryMap, pricing])
+
+  if (loading && entries.length === 0) {
+    return (
+      <div className="dshr-dashboard">
+        <div className="dshr-dash-cards">
+          {[0, 1, 2, 3].map(index => (
+            <div key={index} className="dshr-dash-card dshr-skeleton" />
+          ))}
+        </div>
+        <div className="dshr-dash-list">
+          {[0, 1, 2, 3, 4].map(index => (
+            <div key={index} className="dshr-dash-row dshr-skeleton" />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (entries.length === 0) {
+    return <MascotState mood="happy" text={t('dash.empty')} />
+  }
+
+  return (
+    <div className="dshr-dashboard">
+      <div className="dshr-dash-head">
+        <div>
+          <div className="dshr-dash-subtitle">{t('dash.subtitle')}</div>
+          <div className="dshr-dash-scanned">{t('dash.scanned', { n: summaries.length })}</div>
+        </div>
+        <span className="dshr-spacer" />
+        <span className="dshr-segmented" role="group" aria-label={t('dash.sessions')}>
+          <button data-active={period === 'month' || undefined} onClick={() => setPeriod('month')}>
+            {t('dash.thisMonth')}
+          </button>
+          <button data-active={period === 'all' || undefined} onClick={() => setPeriod('all')}>
+            {t('dash.allTime')}
+          </button>
+        </span>
+      </div>
+
+      <div className="dshr-dash-cards">
+        <div className="dshr-dash-card">
+          <div className="dshr-dash-value">{rows.length}</div>
+          <div className="dshr-dash-label">{t('dash.sessions')}</div>
+        </div>
+        <div className="dshr-dash-card">
+          <div className="dshr-dash-value">{formatTokens(totals.tokens)}</div>
+          <div className="dshr-dash-label">{t('dash.tokens')}</div>
+        </div>
+        <button
+          className="dshr-dash-card dshr-dash-card-action"
+          onClick={() => setCurrency(value => (value === 'USD' ? 'CNY' : 'USD'))}
+          title={t('ov.currency')}
+        >
+          <div className="dshr-dash-value">{formatMoney(totals.cost, currency)}</div>
+          <div className="dshr-dash-label">
+            {t('dash.cost')} · {currency}
+          </div>
+        </button>
+        <div className={`dshr-dash-card${totals.risk > 0 ? ' dshr-dash-risk' : ''}`}>
+          <div className="dshr-dash-value">{totals.risk}</div>
+          <div className="dshr-dash-label">
+            {t('dash.risk')} · {t('dash.errors')} {totals.errors}
+          </div>
+        </div>
+      </div>
+
+      <div className="dshr-dash-toolbar">
+        <input
+          className="dshr-filter-input dshr-dash-search"
+          type="search"
+          placeholder={t('picker.search')}
+          value={query}
+          onChange={event => setQuery(event.target.value)}
+          aria-label={t('picker.search')}
+        />
+        <select
+          className="dshr-select"
+          value={workspace}
+          onChange={event => setWorkspace(event.target.value)}
+          aria-label={t('picker.allWorkspaces')}
+        >
+          <option value="">{t('picker.allWorkspaces')}</option>
+          {workspaces.map(cwd => (
+            <option key={cwd} value={cwd}>
+              {cwd}
+            </option>
+          ))}
+        </select>
+        <span className="dshr-spacer" />
+        <span className="dshr-dash-count">{t('picker.count', { n: rows.length })}</span>
+      </div>
+
+      <div className="dshr-dash-list">
+        {rows.map(entry => {
+          const summary = summaryMap.get(entry.header.id)
+          const data = summary?.summary
+          const cost = costFor(summary)
+          const risk = data === undefined ? 0 : data.critical + data.serious
+          return (
+            <button
+              key={entry.header.id}
+              className="dshr-dash-row"
+              onClick={() => onPick(entry.header.id)}
+            >
+              <span className="dshr-dash-main">
+                <span className="dshr-dash-title">
+                  {entry.title ?? shortId(entry.header.id)}
+                  {entry.header.origin === 'subagent' && (
+                    <span className="dshr-picker-tag">{t('picker.subagent')}</span>
+                  )}
+                  {entry.header.parentSession !== undefined && entry.header.origin !== 'subagent' && (
+                    <span className="dshr-picker-tag">{t('picker.fork')}</span>
+                  )}
+                  {entry.live === true && <span className="dshr-live-pill">{t('picker.live')}</span>}
+                </span>
+                <span className="dshr-dash-sub">
+                  {shortId(entry.header.id)}
+                  {entry.header.cwd !== undefined ? ` · ${entry.header.cwd}` : ''}
+                  {' · '}
+                  {formatRelativeTime(entry.header.createdAt, Date.now(), lang)}
+                </span>
+              </span>
+              <span className="dshr-dash-metrics">
+                {data !== undefined ? (
+                  <>
+                    <span title={t('cmp.turns')}>{t('hdr.turns', { n: data.turns })}</span>
+                    <span title={t('dash.tokens')}>
+                      {formatTokens(data.tokens.billedInput + data.tokens.output)}
+                    </span>
+                    <span title={t('dash.cost')}>
+                      {cost !== undefined ? formatMoney(cost, currency) : '—'}
+                    </span>
+                    <span title={t('dash.risk')} className={risk > 0 ? 'dshr-risk-badge' : 'dshr-ok-badge'}>
+                      {risk > 0 ? `⚠ ${risk}` : '✓'}
+                    </span>
+                    <span className="dshr-dash-duration">{formatDuration(data.durationMs)}</span>
+                  </>
+                ) : (
+                  <span className="dshr-dash-pending">—</span>
+                )}
+              </span>
+            </button>
+          )
+        })}
+        {rows.length === 0 && <MascotState mood="happy" text={t('audit.noRisk')} />}
+      </div>
+    </div>
+  )
+}

package/src/client/components/ExportDialog.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { redactSession } from '../../core/redact.js'
+import type { ParsedSession } from '../../core/types.js'
+import { shortId, type ReplayApi } from '../api.js'
+import { buildReplayHtml, downloadReplayHtml, formatBytes } from '../export.js'
+import { useI18n } from '../i18n.js'
+
+export function ExportDialog({
+  api,
+  session,
+  title,
+  onClose,
+}: {
+  api: ReplayApi
+  session: ParsedSession
+  title?: string
+  onClose: () => void
+}): React.ReactElement {
+  const { t, lang } = useI18n()
+  const [redact, setRedact] = useState(true)
+  const [viewer, setViewer] = useState<string>()
+  const [error, setError] = useState<string>()
+  const [busy, setBusy] = useState(false)
+  const [loadingViewer, setLoadingViewer] = useState(true)
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  useEffect(() => {
+    let cancelled = false
+    const getViewerSource = api.getViewerSource
+    if (getViewerSource === undefined) {
+      setError('viewer bundle unavailable')
+      setLoadingViewer(false)
+      return
+    }
+    setLoadingViewer(true)
+    getViewerSource
+      .call(api)
+      .then(source => {
+        if (cancelled) return
+        setViewer(source)
+        setLoadingViewer(false)
+      })
+      .catch(reason => {
+        if (cancelled) return
+        setError(String(reason))
+        setLoadingViewer(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [api])
+
+  const redacted = useMemo(
+    () => (redact ? redactSession(session) : { session, count: 0, kinds: [] as string[] }),
+    [redact, session],
+  )
+  const html = useMemo(() => {
+    if (viewer === undefined) return ''
+    return buildReplayHtml(
+      viewer,
+      [{ header: redacted.session.header, events: redacted.session.events, title }],
+      { lang, title },
+    )
+  }, [lang, redacted, title, viewer])
+  const size = useMemo(() => (html === '' ? 0 : new Blob([html]).size), [html])
+
+  const handleExport = (): void => {
+    if (html === '') return
+    setBusy(true)
+    try {
+      downloadReplayHtml(html, `replay-${shortId(session.header.id).replace('…', '')}.html`)
+      onClose()
+    } catch (reason) {
+      setError(String(reason))
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="dshr-modal-backdrop dshr-export-backdrop" onClick={onClose}>
+      <div
+        className="dshr-modal dshr-export"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dshr-export-title"
+        onClick={event => event.stopPropagation()}
+      >
+        <div className="dshr-modal-chrome">
+          <span className="dshr-modal-title" id="dshr-export-title">
+            {t('exp.title')}
+          </span>
+          <span className="dshr-spacer" />
+          <button className="dshr-modal-close" onClick={onClose} aria-label={t('modal.close')}>
+            ✕
+          </button>
+        </div>
+        <div className="dshr-export-body">
+          <p className="dshr-export-warning">{t('exp.warning')}</p>
+          <label className="dshr-check">
+            <input type="checkbox" checked={redact} onChange={event => setRedact(event.target.checked)} />
+            <span>{t('exp.redact')}</span>
+          </label>
+          {redact ? (
+            <p className="dshr-export-meta">{t('exp.redactions', { n: redacted.count })}</p>
+          ) : (
+            <p className="dshr-export-danger">{t('exp.includeRaw')}</p>
+          )}
+          <p className="dshr-export-meta">
+            {t('exp.size', { size: loadingViewer ? '…' : formatBytes(size) })}
+          </p>
+          <p className="dshr-export-note">{t('exp.note')}</p>
+          {error !== undefined && <p className="dshr-export-danger">{error}</p>}
+          <div className="dshr-export-actions">
+            <button className="dshr-btn" onClick={onClose}>
+              {t('exp.cancel')}
+            </button>
+            <button
+              className="dshr-btn dshr-btn-primary"
+              disabled={busy || loadingViewer || html === ''}
+              onClick={handleExport}
+            >
+              {busy ? '…' : t('exp.confirm')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/components/ItemDetail.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import type { TimelineItem, TimelineModel } from '../../core/timeline.js'
 import { formatClock, formatDuration, formatTokens } from '../api.js'
 import { useI18n } from '../i18n.js'
@@ -10,6 +10,22 @@ const KIND_COLOR: Record<string, string> = {
   meta: 'var(--dshr-s-meta)',
 }
 
+function CopyButton({ text }: { text: string }): React.ReactElement {
+  const { t } = useI18n()
+  const [copied, setCopied] = useState(false)
+  const copy = (): void => {
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    })
+  }
+  return (
+    <button className="dshr-copy-btn" onClick={copy} type="button">
+      {copied ? t('detail.copied') : t('detail.copy')}
+    </button>
+  )
+}
+
 export function ItemDetail({
   item,
   model,
@@ -38,9 +54,19 @@ export function ItemDetail({
         {item.step !== undefined && ` · step ${item.step}`}
       </div>
 
+      {item.reasoningText !== undefined && item.reasoningText !== '' && (
+        <details className="dshr-reasoning">
+          <summary>{t('detail.reasoning')}</summary>
+          <pre className="dshr-pre">{item.reasoningText}</pre>
+        </details>
+      )}
+
       {item.text !== undefined && item.text !== '' && (
         <>
-          <div className="dshr-section-label">{t('detail.message')}</div>
+          <div className="dshr-section-label">
+            {t('detail.message')}
+            <CopyButton text={item.text} />
+          </div>
           <pre className="dshr-pre">{item.text}</pre>
         </>
       )}
@@ -65,11 +91,17 @@ export function ItemDetail({
               </>
             )}
           </dl>
-          <div className="dshr-section-label">{t('detail.arguments')}</div>
+          <div className="dshr-section-label">
+            {t('detail.arguments')}
+            <CopyButton text={item.toolCall.argumentsPretty ?? item.toolCall.argumentsRaw} />
+          </div>
           <pre className="dshr-pre">{item.toolCall.argumentsPretty ?? item.toolCall.argumentsRaw}</pre>
           {item.toolCall.resultText !== undefined && item.toolCall.resultText !== '' && (
             <>
-              <div className="dshr-section-label">{t('detail.result')}</div>
+              <div className="dshr-section-label">
+                {t('detail.result')}
+                <CopyButton text={item.toolCall.resultText} />
+              </div>
               <pre className="dshr-pre">{item.toolCall.resultText}</pre>
             </>
           )}