@mingozhou/dsh-replay 0.3.3 → 0.4.2

package/src/client/components/ReplayModal.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } 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. */
+/** Full-screen modal hosting the session review app, opened from the sidebar. */
 export function ReplayModal({
   api,
   onClose,
@@ -13,17 +13,52 @@ export function ReplayModal({
   onClose: () => void
   closeLabel: string
 }): React.ReactElement {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const closeRef = useRef<HTMLButtonElement>(null)
+
   useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    closeRef.current?.focus()
     const onKey = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') onClose()
+      if (event.key === 'Escape') {
+        onClose()
+        return
+      }
+      if (event.key !== 'Tab') return
+      const focusable = dialogRef.current?.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      )
+      if (focusable === undefined || focusable.length === 0) return
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
     }
     document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = previousOverflow
+      previous?.focus()
+    }
   }, [onClose])
 
   return (
     <div className="dshr-modal-backdrop" onClick={onClose}>
-      <div className="dshr-modal" onClick={event => event.stopPropagation()}>
+      <div
+        ref={dialogRef}
+        className="dshr-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label="dsh-replay"
+        onClick={event => event.stopPropagation()}
+      >
         <div className="dshr-modal-chrome">
           <Mascot mood="idle" size={30} />
           <span className="dshr-modal-title">dsh-replay</span>
@@ -40,7 +75,7 @@ export function ReplayModal({
             </svg>
             GitHub
           </a>
-          <button className="dshr-modal-close" onClick={onClose} aria-label={closeLabel}>
+          <button ref={closeRef} className="dshr-modal-close" onClick={onClose} aria-label={closeLabel}>
             ✕
           </button>
         </div>

package/src/client/components/SessionPicker.tsx

@@ -1,60 +1,88 @@
-import React, { useEffect, useState } from 'react'
-import { formatDuration, shortId, type ReplayApi, type SessionEntry } from '../api.js'
+import React, { useMemo, useState } from 'react'
+import { formatRelativeTime, shortId, type SessionEntry } from '../api.js'
 import { useI18n } from '../i18n.js'
 import { MascotState } from '../mascot.js'
 
 export function SessionPicker({
-  api,
+  entries,
+  loading = false,
   onPick,
 }: {
-  api: ReplayApi
+  entries: SessionEntry[]
+  loading?: boolean
   onPick: (id: string) => void
 }): React.ReactElement {
-  const { t } = useI18n()
-  const [entries, setEntries] = useState<SessionEntry[]>()
-  const [error, setError] = useState<string>()
+  const { t, lang } = useI18n()
+  const [query, setQuery] = useState('')
+  const [workspace, setWorkspace] = useState('')
 
-  useEffect(() => {
-    let cancelled = false
-    api
-      .listSessions()
-      .then(list => {
-        if (!cancelled) setEntries([...list].sort((a, b) => b.header.createdAt - a.header.createdAt))
+  const workspaces = useMemo(
+    () =>
+      [...new Set(entries.map(entry => entry.header.cwd).filter((cwd): cwd is string => typeof cwd === 'string'))].sort(),
+    [entries],
+  )
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return entries
+      .filter(entry => workspace === '' || entry.header.cwd === workspace)
+      .filter(entry => {
+        if (q === '') return true
+        return `${entry.title ?? ''} ${entry.header.id} ${entry.header.cwd ?? ''}`.toLowerCase().includes(q)
       })
-      .catch(e => !cancelled && setError(String(e)))
-    return () => {
-      cancelled = true
-    }
-  }, [api])
+      .sort((a, b) => b.header.createdAt - a.header.createdAt)
+  }, [entries, query, workspace])
 
-  if (error !== undefined) return <MascotState mood="alert" text={error} />
-  if (entries === undefined) return <MascotState mood="idle" text={t('app.loadingText')} />
+  if (loading && entries.length === 0) 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 => (
+      <div className="dshr-picker-toolbar">
+        <input
+          className="dshr-filter-input dshr-picker-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-picker-count">{t('picker.count', { n: rows.length })}</span>
+      </div>
+      {rows.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.origin === 'subagent' && <span className="dshr-picker-tag">{t('picker.subagent')}</span>}
             {entry.header.parentSession !== undefined && entry.header.origin !== 'subagent' && (
-              <span className="dshr-picker-tag">fork</span>
+              <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-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)
-              : ''}
+            {formatRelativeTime(entry.header.createdAt, Date.now(), lang)}
           </span>
         </button>
       ))}
+      {rows.length === 0 && <MascotState mood="happy" text={t('audit.empty')} />}
     </div>
   )
 }

package/src/client/components/TimelineView.tsx

@@ -24,10 +24,21 @@ function TokenStrip({
   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,
-  )
+  let max = 1
+  for (const sample of samples) {
+    const value =
+      sample.usage.inputTokens +
+      (sample.usage.cacheReadTokens ?? 0) +
+      (sample.usage.cacheWriteTokens ?? 0) +
+      sample.usage.outputTokens
+    if (value > max) max = value
+  }
+  // Precompute the next sample seq so the current-bar test is O(1), not O(n²).
+  const nextSeq = new Map<number, number>()
+  for (let index = 0; index < samples.length; index++) {
+    const next = samples[index + 1]
+    if (next !== undefined) nextSeq.set(samples[index].seq, next.seq)
+  }
   return (
     <div className="dshr-tokenstrip">
       <div className="dshr-tokenstrip-head">
@@ -54,8 +65,7 @@ function TokenStrip({
             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
+            currentSeq >= sample.seq && (nextSeq.get(sample.seq) ?? Number.POSITIVE_INFINITY) > currentSeq
           return (
             <button
               key={`${sample.turn}/${sample.step}`}
@@ -80,9 +90,11 @@ function TokenStrip({
 export function TimelineView({
   model,
   jumpToSeq,
+  jumpNonce,
 }: {
   model: TimelineModel
   jumpToSeq?: number
+  jumpNonce?: number
 }): React.ReactElement {
   const { t } = useI18n()
   const [query, setQuery] = useState('')
@@ -95,6 +107,7 @@ export function TimelineView({
       return (
         item.label.toLowerCase().includes(q) ||
         (item.text?.toLowerCase().includes(q) ?? false) ||
+        (item.reasoningText?.toLowerCase().includes(q) ?? false) ||
         (item.toolCall !== undefined &&
           (item.toolCall.name.toLowerCase().includes(q) ||
             item.toolCall.argumentsRaw.toLowerCase().includes(q) ||
@@ -102,15 +115,28 @@ export function TimelineView({
       )
     })
   }, [model.items, query, kinds])
-  const [cursor, setCursor] = useState(items.length > 0 ? items.length - 1 : 0)
+  const [selectedSeq, setSelectedSeq] = useState<number>()
   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])
+  // Derive the cursor from the selected seq. When a filter hides the selected
+  // event, prefer the next visible event instead of jumping to an unrelated
+  // array index.
+  const cursor = useMemo(() => {
+    if (items.length === 0) return 0
+    if (selectedSeq === undefined) return items.length - 1
+    const exact = items.findIndex(item => item.seq === selectedSeq)
+    if (exact >= 0) return exact
+    const next = items.findIndex(item => item.seq >= selectedSeq)
+    return next >= 0 ? next : items.length - 1
+  }, [items, selectedSeq])
+  const current: TimelineItem | undefined = items[Math.min(cursor, Math.max(0, items.length - 1))]
+
+  const select = (seq: number): void => {
+    setSelectedSeq(seq)
+    setPlaying(false)
+  }
 
   const toggleKind = (kind: string): void => {
     setKinds(prev => {
@@ -126,12 +152,12 @@ export function TimelineView({
 
   useEffect(() => {
     if (jumpToSeq === undefined) return
-    const index = items.findIndex(i => i.seq >= jumpToSeq)
+    const index = items.findIndex(item => item.seq >= jumpToSeq)
     if (index >= 0) {
-      setCursor(index)
+      setSelectedSeq(items[index].seq)
       setPlaying(false)
     }
-  }, [jumpToSeq, items])
+  }, [jumpToSeq, jumpNonce, items])
 
   useEffect(() => {
     if (!playing) return
@@ -139,10 +165,10 @@ export function TimelineView({
       setPlaying(false)
       return
     }
-    const timer = setTimeout(
-      () => setCursor(c => Math.min(c + 1, items.length - 1)),
-      delayFor(items[cursor], items[cursor + 1], speed),
-    )
+    const timer = setTimeout(() => {
+      const next = items[cursor + 1]
+      if (next !== undefined) setSelectedSeq(next.seq)
+    }, delayFor(items[cursor], items[cursor + 1], speed))
     return () => clearTimeout(timer)
   }, [playing, cursor, speed, items])
 
@@ -157,7 +183,7 @@ export function TimelineView({
     items.forEach((item, index) => {
       if (item.turn !== undefined && item.turn !== lastTurn) {
         lastTurn = item.turn
-        const turnModel = model.turns.find(t => t.turn === item.turn)
+        const turnModel = model.turns.find(turn => turn.turn === item.turn)
         rows.push({
           head: {
             turn: item.turn,
@@ -177,8 +203,35 @@ export function TimelineView({
   }
 
   const togglePlay = (): void => {
-    if (!playing && cursor >= items.length - 1) setCursor(0)
-    setPlaying(p => !p)
+    if (!playing && cursor >= items.length - 1) {
+      const first = items[0]
+      if (first !== undefined) setSelectedSeq(first.seq)
+    }
+    setPlaying(value => !value)
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (items.length === 0) return
+    if (event.key === 'ArrowDown' || event.key === 'j' || event.key === 'J') {
+      event.preventDefault()
+      const next = items[Math.min(cursor + 1, items.length - 1)]
+      if (next !== undefined) select(next.seq)
+    } else if (event.key === 'ArrowUp' || event.key === 'k' || event.key === 'K') {
+      event.preventDefault()
+      const previous = items[Math.max(cursor - 1, 0)]
+      if (previous !== undefined) select(previous.seq)
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      const first = items[0]
+      if (first !== undefined) select(first.seq)
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      const last = items[items.length - 1]
+      if (last !== undefined) select(last.seq)
+    } else if (event.key === ' ') {
+      event.preventDefault()
+      togglePlay()
+    }
   }
 
   return (
@@ -188,14 +241,14 @@ export function TimelineView({
           className="dshr-play-btn"
           data-playing={playing || undefined}
           onClick={togglePlay}
-          aria-label={playing ? 'pause' : 'play'}
+          aria-label={playing ? t('tl.pause') : t('tl.play')}
         >
           {playing ? '❚❚' : '▶'}
         </button>
         <button
           className="dshr-speed"
-          onClick={() => setSpeed(s => SPEEDS[(SPEEDS.indexOf(s) + 1) % SPEEDS.length])}
-          title="playback speed"
+          onClick={() => setSpeed(value => SPEEDS[(SPEEDS.indexOf(value) + 1) % SPEEDS.length])}
+          title={t('tl.speed')}
         >
           {speed}×
         </button>
@@ -205,9 +258,9 @@ export function TimelineView({
           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)
+          onChange={event => {
+            const next = items[Number(event.target.value)]
+            if (next !== undefined) select(next.seq)
           }}
           aria-label={t('play.position')}
         />
@@ -220,8 +273,8 @@ export function TimelineView({
           type="search"
           placeholder={t('flt.search')}
           value={query}
-          onChange={e => {
-            setQuery(e.target.value)
+          onChange={event => {
+            setQuery(event.target.value)
             setPlaying(false)
           }}
           aria-label={t('flt.search')}
@@ -245,16 +298,20 @@ export function TimelineView({
         model={model}
         currentSeq={current?.seq ?? 0}
         onJump={seq => {
-          const index = items.findIndex(i => i.seq >= seq)
-          if (index >= 0) {
-            setCursor(index)
-            setPlaying(false)
-          }
+          const index = items.findIndex(item => item.seq >= seq)
+          if (index >= 0) select(items[index].seq)
         }}
       />
       <div className="dshr-timeline">
-        <div className="dshr-rail" ref={railRef}>
-          {grouped.map((row, i) =>
+        <div
+          className="dshr-rail"
+          ref={railRef}
+          tabIndex={0}
+          role="listbox"
+          aria-label={t('tab.timeline')}
+          onKeyDown={onKeyDown}
+        >
+          {grouped.map((row, index) =>
             'head' in row ? (
               <div key={`h${row.head.turn}`} className="dshr-turn-head">
                 <span>{t('tl.turn', { n: row.head.turn })}</span>
@@ -269,21 +326,29 @@ export function TimelineView({
               <button
                 key={row.item.seq}
                 className="dshr-item"
+                role="option"
+                aria-selected={row.index === cursor}
                 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)
-                }}
+                onClick={() => select(row.item.seq)}
               >
                 <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-label">
+                  {row.item.kind === 'tool'
+                    ? row.item.toolCall?.summary ?? row.item.label
+                    : localizeItemLabel(t, row.item)}
+                </span>
+                {row.item.reasoningText !== undefined && row.item.reasoningText !== '' && (
+                  <span className="dshr-item-thinking" title={t('tl.reasoning')}>
+                    ✦
+                  </span>
+                )}
                 <span className="dshr-item-time">{formatClock(row.item.time, model.startTime)}</span>
               </button>
             ),

package/src/client/export.ts

@@ -11,16 +11,26 @@ export interface ExportSession {
   title?: string
 }
 
-export function buildReplayHtml(viewerSource: string, sessions: ExportSession[]): string {
+export interface BuildReplayOptions {
+  lang?: 'en' | 'zh'
+  title?: string
+}
+
+export function buildReplayHtml(
+  viewerSource: string,
+  sessions: ExportSession[],
+  options: BuildReplayOptions = {},
+): string {
   const data = JSON.stringify({ sessions }).replaceAll('<', '\\u003c')
   const safeViewer = viewerSource.replaceAll('</script>', '<\\/script>')
-  const title = sessions[0]?.title ?? 'session replay'
+  const title = options.title ?? sessions[0]?.title ?? 'session replay'
   return `<!doctype html>
-<html lang="en">
+<html lang="${options.lang ?? 'en'}">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>dsh-replay — ${title.replaceAll('<', '&lt;')}</title>
+<meta name="generator" content="dsh-replay" />
+<title>dsh-replay — ${title.replaceAll('&', '&amp;').replaceAll('<', '&lt;')}</title>
 <style>html, body, #root { height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }</style>
 </head>
 <body>
@@ -41,3 +51,9 @@ export function downloadReplayHtml(html: string, filename: string): void {
   link.click()
   setTimeout(() => URL.revokeObjectURL(url), 5000)
 }
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`
+  return `${bytes} B`
+}