@mingozhou/dsh-replay 0.3.3 → 0.4.2

package/package.json

@@ -1,107 +1,118 @@
-{
-  "name": "@mingozhou/dsh-replay",
-  "version": "0.3.3",
-  "description": "Session replay, fork-tree, audit & compare visualization for DeepSeek Harness — time machine for your agent sessions",
-  "main": "lib/index.js",
-  "directories": {
-    "test": "tests"
-  },
-  "scripts": {
-    "build": "node scripts/build.mjs && tsc -p tsconfig.json",
-    "test": "vitest run",
-    "demo": "node demo/serve.mjs",
-    "screenshots": "node scripts/screenshot.mjs",
-    "prepare": "node scripts/build.mjs"
-  },
-  "keywords": [
-    "deepseek-harness",
-    "dsh-plugin",
-    "dsh",
-    "agent",
-    "session-replay",
-    "observability",
-    "audit",
-    "timeline",
-    "visualization"
-  ],
-  "author": "MingoZhou",
-  "license": "MIT",
-  "type": "module",
-  "devDependencies": {
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "esbuild": "^0.28.2",
-    "playwright": "^1.62.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "typescript": "^7.0.2",
-    "vitest": "^4.1.10"
-  },
-  "types": "lib/types/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/types/src/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./client": {
-      "types": "./lib/types/src/client/index.d.ts",
-      "default": "./lib/client.js"
-    },
-    "./core": {
-      "types": "./lib/types/src/core/index.d.ts",
-      "default": "./lib/core.js"
-    },
-    "./cordis.patch.yml": "./cordis.patch.yml",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "lib",
-    "cordis.patch.yml",
-    "scripts/build.mjs",
-    "src",
-    "types.d.ts",
-    "tsconfig.json"
-  ],
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "platform": "web",
-      "inject": [
-        "@deepseek-ai/dsh-client-runtime"
-      ]
-    }
-  },
-  "peerDependencies": {
-    "@deepseek-ai/cordis": "*",
-    "@deepseek-ai/dsh-host-webserver": "*",
-    "@deepseek-ai/dsh-session-query": "*",
-    "react": "^18.2.0"
-  },
-  "peerDependenciesMeta": {
-    "@deepseek-ai/cordis": {
-      "optional": true
-    },
-    "@deepseek-ai/dsh-host-webserver": {
-      "optional": true
-    },
-    "@deepseek-ai/dsh-session-query": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MingoZhou/dsh-replay"
-  },
-  "homepage": "https://mingozhou.github.io/dsh-replay/",
-  "bugs": "https://github.com/MingoZhou/dsh-replay/issues",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  }
-}
+{
+  "name": "@mingozhou/dsh-replay",
+  "version": "0.4.2",
+  "description": "Read-only session review for DeepSeek Harness: cost, audit, fork tree, compare and shareable HTML exports",
+  "icon": "./assets/icon.png",
+  "main": "lib/index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs && tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "demo": "node demo/serve.mjs",
+    "screenshots": "node scripts/screenshot.mjs",
+    "prepare": "node scripts/build.mjs"
+  },
+  "keywords": [
+    "deepseek-harness",
+    "dsh-plugin",
+    "dsh",
+    "agent",
+    "session-replay",
+    "session-review",
+    "observability",
+    "agent-observability",
+    "audit",
+    "cost",
+    "timeline",
+    "visualization",
+    "html-export"
+  ],
+  "author": "MingoZhou",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22",
+    "dsh": ">=0.2.0-rc.8"
+  },
+  "devDependencies": {
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "esbuild": "^0.28.2",
+    "playwright": "^1.62.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.10"
+  },
+  "types": "lib/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/src/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/src/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./core": {
+      "types": "./lib/types/src/core/index.d.ts",
+      "default": "./lib/core.js"
+    },
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "scripts/build.mjs",
+    "src",
+    "types.d.ts",
+    "tsconfig.json",
+    "assets/icon.png"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "*",
+    "@deepseek-ai/dsh-host-webserver": "*",
+    "@deepseek-ai/dsh-session-query": "*",
+    "react": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@deepseek-ai/cordis": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-host-webserver": {
+      "optional": true
+    },
+    "@deepseek-ai/dsh-session-query": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MingoZhou/dsh-replay"
+  },
+  "homepage": "https://mingozhou.github.io/dsh-replay/",
+  "bugs": "https://github.com/MingoZhou/dsh-replay/issues",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

package/scripts/build.mjs

@@ -8,7 +8,7 @@
  *   demo/dist/demo.js — fully self-contained demo bundle (react inlined).
  */
 import { build } from 'esbuild'
-import { copyFile, mkdir, writeFile } from 'node:fs/promises'
+import { copyFile, mkdir, stat, writeFile } from 'node:fs/promises'
 
 const cssAsText = { loader: { '.css': 'text' } }
 
@@ -78,6 +78,8 @@ const client = await build({
   jsx: 'automatic',
   ...cssAsText,
   external: ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/client', '@deepseek-ai/*'],
+  minify: true,
+  legalComments: 'none',
   write: false,
 })
 const cjs = client.outputFiles[0].text
@@ -91,7 +93,7 @@ ${cjs}
     return module.exports;
   };
   if (typeof window !== 'undefined' && window.__ModuleLoader__) {
-    window.__ModuleLoader__.load({ id: 'dsh-replay', factory: factory });
+    window.__ModuleLoader__.load({ id: '@mingozhou/dsh-replay', factory: factory });
   } else if (typeof module !== 'undefined' && module.exports) {
     module.exports = factory(typeof require === 'function' ? require : function (id) {
       throw new Error('unresolvable external: ' + id);
@@ -129,3 +131,7 @@ await build({
 })
 
 console.log('build ok: lib/index.js, lib/core.js, lib/client.js, lib/viewer.js, demo/dist/demo.js')
+for (const file of ['lib/index.js', 'lib/core.js', 'lib/client.js', 'lib/viewer.js']) {
+  const info = await stat(file)
+  console.log(`  ${file.padEnd(16)} ${(info.size / 1024).toFixed(1)} KB`)
+}

package/src/client/api.ts

@@ -1,15 +1,58 @@
 /** Data access for the UI — one HTTP implementation, one in-memory demo implementation. */
+import { auditSession } from '../core/audit.js'
 import { fromInspection, parseSessionJsonl } from '../core/decode.js'
+import { buildTimeline } from '../core/timeline.js'
 import type { ParsedSession, SessionHeader, StorageRecord } from '../core/types.js'
 
 export interface SessionEntry {
   header: SessionHeader
   title?: string
+  live?: boolean
+}
+
+export interface SessionSummaryData {
+  events: number
+  turns: number
+  steps: number
+  toolCalls: number
+  toolErrors: number
+  durationMs: number
+  models: string[]
+  tokens: {
+    input: number
+    output: number
+    cacheRead: number
+    cacheWrite: number
+    reasoning: number
+    billedInput: number
+  }
+  modelTotals: Record<string, {
+    input: number
+    output: number
+    cacheRead: number
+    cacheWrite: number
+    reasoning: number
+    billedInput: number
+  }>
+  findings: number
+  critical: number
+  serious: number
+  warning: number
+  info: number
+}
+
+export interface SessionSummaryEntry {
+  header: SessionHeader
+  title?: string
+  live?: boolean
+  summary?: SessionSummaryData
+  error?: string
 }
 
 export interface ReplayApi {
   listSessions: () => Promise<SessionEntry[]>
   getSession: (id: string) => Promise<ParsedSession>
+  getSummaries?: (limit?: number) => Promise<SessionSummaryEntry[]>
   /** Source of the standalone viewer bundle, for HTML export (optional). */
   getViewerSource?: () => Promise<string>
 }
@@ -36,6 +79,13 @@ export class HttpReplayApi implements ReplayApi {
     return fromInspection(body.header, body.events)
   }
 
+  async getSummaries(limit = 30): Promise<SessionSummaryEntry[]> {
+    const body = (await this.fetchJson(`/summary?limit=${limit}`)) as {
+      sessions: SessionSummaryEntry[]
+    }
+    return body.sessions
+  }
+
   async getViewerSource(): Promise<string> {
     const response = await fetch(`${this.base}/viewer.js`)
     if (!response.ok) throw new Error(`viewer bundle: HTTP ${response.status}`)
@@ -59,7 +109,9 @@ export class StaticReplayApi implements ReplayApi {
   }
 
   /** Build directly from already-decoded sessions (exported HTML, tooling). */
-  static fromParsed(list: { header: ParsedSession['header']; events: ParsedSession['events']; title?: string }[]): StaticReplayApi {
+  static fromParsed(
+    list: { header: ParsedSession['header']; events: ParsedSession['events']; title?: string }[],
+  ): StaticReplayApi {
     const api = new StaticReplayApi([])
     for (const { header, events, title } of list) {
       api.sessions.set(header.id, { header, events, malformed: [] })
@@ -76,9 +128,9 @@ export class StaticReplayApi implements ReplayApi {
   }
 
   async listSessions(): Promise<SessionEntry[]> {
-    return [...this.sessions.values()].map(s => ({
-      header: s.header,
-      title: this.titles.get(s.header.id),
+    return [...this.sessions.values()].map(session => ({
+      header: session.header,
+      title: this.titles.get(session.header.id),
     }))
   }
 
@@ -87,6 +139,36 @@ export class StaticReplayApi implements ReplayApi {
     if (session === undefined) throw new Error(`unknown session ${id}`)
     return session
   }
+
+  async getSummaries(limit = 30): Promise<SessionSummaryEntry[]> {
+    const entries = await this.listSessions()
+    return entries.slice(0, limit).map(entry => {
+      const session = this.sessions.get(entry.header.id)
+      if (session === undefined) return { header: entry.header, title: entry.title }
+      const model = buildTimeline(session)
+      const report = auditSession(session)
+      return {
+        header: entry.header,
+        ...(entry.title !== undefined ? { title: entry.title } : {}),
+        summary: {
+          events: model.eventCount,
+          turns: model.turns.length,
+          steps: model.turns.reduce((sum, turn) => sum + turn.steps.length, 0),
+          toolCalls: model.toolCalls.length,
+          toolErrors: model.toolCalls.filter(call => call.error !== undefined).length,
+          durationMs: model.durationMs,
+          models: model.models,
+          tokens: model.totals,
+          modelTotals: model.modelTotals,
+          findings: report.findings.length,
+          critical: report.counts.critical,
+          serious: report.counts.serious,
+          warning: report.counts.warning,
+          info: report.counts.info,
+        },
+      }
+    })
+  }
 }
 
 export function formatDuration(ms: number): string {
@@ -96,7 +178,9 @@ export function formatDuration(ms: number): string {
   if (s < 60) return `${s.toFixed(s < 10 ? 1 : 0)}s`
   const m = Math.floor(s / 60)
   if (m < 60) return `${m}m ${Math.round(s % 60)}s`
-  return `${Math.floor(m / 60)}h ${m % 60}m`
+  const h = Math.floor(m / 60)
+  if (h < 48) return `${h}h ${m % 60}m`
+  return `${Math.floor(h / 24)}d ${h % 24}h`
 }
 
 export function formatTokens(n: number): string {
@@ -106,12 +190,32 @@ export function formatTokens(n: number): string {
   return String(n)
 }
 
+/** Clock offset from the session start: mm:ss, or h:mm:ss for long sessions. */
 export function formatClock(time: number, startTime: number): string {
-  const ms = time - startTime
-  const s = Math.floor(ms / 1000)
-  const mm = String(Math.floor(s / 60)).padStart(2, '0')
-  const ss = String(s % 60).padStart(2, '0')
-  return `${mm}:${ss}`
+  const ms = Math.max(0, time - startTime)
+  const total = Math.floor(ms / 1000)
+  const h = Math.floor(total / 3600)
+  const mm = String(Math.floor((total % 3600) / 60)).padStart(2, '0')
+  const ss = String(total % 60).padStart(2, '0')
+  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`
+}
+
+/** Human relative time for the session picker ("3 days ago", "2 months ago"). */
+export function formatRelativeTime(time: number, now = Date.now(), lang: 'en' | 'zh' = 'en'): string {
+  if (!Number.isFinite(time) || time <= 0) return ''
+  const diff = time - now
+  const abs = Math.abs(diff)
+  const locale = lang === 'zh' ? 'zh-CN' : 'en'
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+  const minute = 60_000
+  const hour = 60 * minute
+  const day = 24 * hour
+  if (abs < minute) return lang === 'zh' ? '刚刚' : 'just now'
+  if (abs < hour) return formatter.format(Math.round(diff / minute), 'minute')
+  if (abs < day) return formatter.format(Math.round(diff / hour), 'hour')
+  if (abs < 30 * day) return formatter.format(Math.round(diff / day), 'day')
+  if (abs < 365 * day) return formatter.format(Math.round(diff / (30 * day)), 'month')
+  return formatter.format(Math.round(diff / (365 * day)), 'year')
 }
 
 export function shortId(id: string): string {

package/src/client/components/AuditView.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo, useState } from 'react'
 import type { AuditReport, Severity } from '../../core/audit.js'
 import type { TimelineModel } from '../../core/timeline.js'
 import { formatClock } from '../api.js'
@@ -12,42 +12,121 @@ const SEV_META: Record<Severity, { color: string; icon: string }> = {
   info: { color: 'var(--dshr-good)', icon: 'ℹ' },
 }
 
+const SEVERITIES: Severity[] = ['critical', 'serious', 'warning', 'info']
+
+function downloadText(text: string, filename: string): void {
+  const blob = new Blob([text], { type: 'text/markdown;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)
+}
+
 export function AuditView({
   report,
   model,
   onJump,
+  sessionId,
 }: {
   report: AuditReport
   model: TimelineModel
   onJump: (seq: number) => void
+  sessionId?: string
 }): React.ReactElement {
   const { t } = useI18n()
+  const [severity, setSeverity] = useState<Severity>()
+
+  const findings = useMemo(
+    () => (severity === undefined ? report.findings : report.findings.filter(finding => finding.severity === severity)),
+    [report.findings, severity],
+  )
+
+  const exportReport = (): void => {
+    const lines = [
+      `# dsh-replay audit report`,
+      ``,
+      `- session: ${sessionId ?? 'unknown'}`,
+      `- generated: ${new Date().toISOString()}`,
+      `- scanned events: ${report.scanned}`,
+      `- rules: ${report.rules}`,
+      `- ignored baseline config events: ${report.suppressed}`,
+      ``,
+      `| severity | category | seq | time | finding | detail |`,
+      `| --- | --- | --- | --- | --- | --- |`,
+      ...report.findings.map(finding => {
+        const detail = (finding.detail ?? '').replaceAll('|', '\\|').replaceAll('\n', ' ')
+        return `| ${finding.severity} | ${finding.category ?? ''} | ${finding.seq} | ${formatClock(finding.time, model.startTime)} | ${localizeFinding(t, finding).replaceAll('|', '\\|')} | ${detail} |`
+      }),
+      ``,
+      `> ${t('audit.coverage')}`,
+      ``,
+    ]
+    downloadText(lines.join('\n'), `audit-${(sessionId ?? 'session').slice(0, 24)}.md`)
+  }
+
   return (
     <div className="dshr-audit">
+      <div className="dshr-audit-head">
+        <span className="dshr-audit-coverage">
+          {t('audit.scanned', { n: report.scanned, rules: report.rules })}
+          {report.suppressed > 0 ? ` · ${t('audit.baseline', { n: report.suppressed })}` : ''}
+        </span>
+        <span className="dshr-spacer" />
+        {report.findings.length > 0 && (
+          <button className="dshr-tab" onClick={exportReport}>
+            ⬇ {t('audit.export')}
+          </button>
+        )}
+      </div>
+
       <div className="dshr-audit-summary">
-        {(Object.keys(SEV_META) as Severity[]).map(sev => (
-          <div key={sev} className="dshr-audit-tile">
+        {SEVERITIES.map(sev => (
+          <button
+            key={sev}
+            className="dshr-audit-tile"
+            data-active={severity === sev || undefined}
+            onClick={() => setSeverity(current => (current === sev ? undefined : sev))}
+            title={t('audit.riskOnly')}
+          >
             <div className="dshr-count">{report.counts[sev]}</div>
             <div className="dshr-cap">
               <span className="dshr-sev-dot" style={{ background: SEV_META[sev].color }} />
               {SEV_META[sev].icon} {t(`sev.${sev}`)}
             </div>
-          </div>
+          </button>
         ))}
       </div>
+
+      <p className="dshr-audit-note">{t('audit.coverage')}</p>
+
       {report.findings.length === 0 ? (
         <MascotState mood="happy" text={t('audit.empty')} />
+      ) : findings.length === 0 ? (
+        <MascotState mood="happy" text={t('audit.noRisk')} />
       ) : (
-        report.findings.map((finding, i) => (
-          <button key={i} className="dshr-finding" onClick={() => onJump(finding.seq)}>
+        findings.map((finding, index) => (
+          <button
+            key={`${finding.ruleId}-${finding.seq}-${index}`}
+            className="dshr-finding"
+            onClick={() => onJump(finding.seq)}
+          >
             <span className="dshr-sev">
               <span className="dshr-sev-dot" style={{ background: SEV_META[finding.severity].color }} />
               {SEV_META[finding.severity].icon} {t(`sev.${finding.severity}`)}
             </span>
-            <span className="dshr-finding-title">{localizeFinding(t, finding)}</span>
-            {finding.detail !== undefined && finding.detail !== '' && (
-              <span className="dshr-finding-detail">{finding.detail}</span>
-            )}
+            <span className="dshr-finding-body">
+              <span className="dshr-finding-title">
+                {localizeFinding(t, finding)}
+                {finding.category !== undefined && (
+                  <span className="dshr-category">{t(`audit.category.${finding.category}`)}</span>
+                )}
+              </span>
+              {finding.detail !== undefined && finding.detail !== '' && (
+                <span className="dshr-finding-detail">{finding.detail}</span>
+              )}
+            </span>
             <span className="dshr-item-time">{formatClock(finding.time, model.startTime)}</span>
           </button>
         ))