[{"_1":2,"_185":-5,"_186":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","cdbc11de55e47953b237ebd2bc3607fb50931703","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_158":159,"_182":183,"_184":-5},"handle","c15r","name","sync","path","frontend/components/Replay.tsx","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":112,"_113":-5,"_12":114,"_115":-5,"_116":20,"_117":-5,"_118":-5,"_119":120,"_14":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":136,"_139":140,"_144":145,"_157":20},"id","93e19588-0ebb-11f1-a6cd-42dde27851f2","createdAt",["D",1771633422787],"deletedAt","legacyEnvVars","privacy","public","description","Agent collaboration layer https://sync.parc.land","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"0630d977-f678-453e-926c-52043293f59f","tursoName","93e195880ebb11f1a6cd42dde27851f2","tursoHostname","93e195880ebb11f1a6cd42dde27851f2-val-town.aws-us-east-2.turso.io","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_137":138},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","org",{"_95":96,"_141":138,"_12":114,"_142":143},"avatar","tier","pro","branch",{"_146":147,"_97":45,"_103":148,"_149":104,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":98,"_156":96},"version",639,"93e21602-0ebb-11f1-a6cd-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":160,"_97":161,"_162":163,"_164":165,"_166":148,"_167":168,"_169":170,"_105":171,"_146":172,"_173":174,"_175":176,"_177":20,"_178":-5,"_99":179},"89c59d34-2198-11f1-9238-42dde27851f2","Replay.tsx","fileId","88f60640-1a23-11f1-a362-42dde27851f2","parentId","019c9ffc-060a-74df-be1d-7850f5dfbf5a","branchId","branchVersion",634,"latest",true,["D",1773707445460],29,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n/**\n * Replay widget — plays back a frozen room from its audit log.\n *\n * Props:\n * roomId — the room to replay\n * viewToken — read-only token; no write access needed\n * height — optional container height (default 420px)\n *\n * Architecture:\n * 1. On mount, fetch full audit log via /poll (for the timeline)\n * 2. Fetch /replay/ to show initial state\n * 3. On playhead move to seq N, call GET /rooms/:id/replay/:seq\n * 4. Feed resulting PollData into frozen panel components\n *\n * Playback is time-faithful:\n * - Timeline strip dots are positioned proportionally to real event timestamps\n * - Scrubbing maps click position → timestamp → nearest event\n * - Auto-play delays are gap_ms / speed (speed = compression factor; 1× = real time)\n * - Gaps are capped at MAX_REAL_GAP_MS so a 6-hour silence doesn't freeze playback\n *\n * The widget is entirely read-only. No tokens are written, no mutations issued.\n */\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { styled, keyframes } from \"../styled.ts\";\nimport type { AuditRow, Agent, View, Surface } from \"../types.ts\";\nimport { AgentsPanel } from \"./panels/Agents.tsx\";\nimport { StatePanel } from \"./panels/State.tsx\";\nimport { MessagesPanel } from \"./panels/Messages.tsx\";\nimport { ActionsPanel } from \"./panels/Actions.tsx\";\nimport { ViewsPanel } from \"./panels/Views.tsx\";\nimport { SurfacesView, type SurfaceContext } from \"./panels/Surfaces.tsx\";\n\n// Lazily resolved at call time so it works during SSR (no location available)\nfunction getBaseUrl(): string {\n return (typeof location !== \"undefined\" && location.origin) || \"https://sync.parc.land\";\n}\n\n// ── Styled shell ─────────────────────────────────────────────────────────────\n\nconst Shell = styled.div<{ $height: number }>`\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 8px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: ${p => p.$height}px;\n font-family: \"SF Mono\", \"Cascadia Code\", \"Fira Code\", monospace;\n font-size: 12px;\n color: var(--fg);\n`;\n\n// ── Top bar ──────────────────────────────────────────────────────────────────\n\nconst TopBar = styled.div`\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 0.85rem;\n border-bottom: 1px solid var(--border);\n background: var(--surface);\n flex-shrink: 0;\n`;\n\nconst RoomLabel = styled.div`\n font-size: 11px;\n color: var(--dim);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst ReplayBadge = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--accent);\n opacity: 0.7;\n white-space: nowrap;\n`;\n\nconst SeqLabel = styled.div`\n font-size: 10px;\n color: var(--dim);\n white-space: nowrap;\n`;\n\n// ── Tabs ─────────────────────────────────────────────────────────────────────\n\nconst TabsRow = styled.div`\n display: flex;\n border-bottom: 1px solid var(--border);\n flex-shrink: 0;\n padding: 0 0.5rem;\n`;\n\nconst RTab = styled.button<{ $active: boolean }>`\n padding: 0.35rem 0.6rem;\n font-size: 11px;\n background: none;\n border: none;\n border-bottom: 2px solid ${p => p.$active ? \"var(--accent)\" : \"transparent\"};\n color: ${p => p.$active ? \"var(--accent)\" : \"var(--dim)\"};\n cursor: pointer;\n font-family: inherit;\n white-space: nowrap;\n &:hover { color: var(--fg); }\n`;\n\nconst TabBadge = styled.span<{ $active: boolean }>`\n display: inline-block;\n background: ${p => p.$active ? \"rgba(88,166,255,0.15)\" : \"var(--border)\"};\n color: ${p => p.$active ? \"var(--accent)\" : \"var(--dim)\"};\n border-radius: 8px;\n padding: 0 4px;\n font-size: 9px;\n margin-left: 3px;\n`;\n\n// ── Panel area ───────────────────────────────────────────────────────────────\n\nconst PanelArea = styled.div`\n flex: 1;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n`;\n\nconst EmptyState = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--dim);\n font-size: 11px;\n opacity: 0.5;\n`;\n\n// ── Agent colours ─────────────────────────────────────────────────────────────\n\nconst AGENT_PALETTE = [\n \"var(--accent)\", \"var(--green)\", \"var(--purple)\", \"var(--orange)\",\n \"var(--yellow)\", \"var(--red)\", \"#e879a0\", \"#47d1d1\",\n];\n\nfunction agentColor(agentId: string): string {\n let h = 0;\n for (let i = 0; i < agentId.length; i++) h = ((h << 5) - h + agentId.charCodeAt(i)) | 0;\n return AGENT_PALETTE[Math.abs(h) % AGENT_PALETTE.length];\n}\n\n// ── Event kind symbols ────────────────────────────────────────────────────────\n\nfunction kindSymbol(kind: string): string {\n switch (kind) {\n case \"agent_join\": return \"+\";\n case \"agent_update\": return \"~\";\n case \"register_action\": return \"⚡\";\n case \"delete_action\": return \"−\";\n case \"register_view\": return \"◉\";\n case \"delete_view\": return \"−\";\n case \"invoke\": return \"→\";\n default: return \"·\";\n }\n}\n\n// ── Timeline ─────────────────────────────────────────────────────────────────\n\nconst TimelineArea = styled.div`\n flex-shrink: 0;\n border-top: 1px solid var(--border);\n padding: 0.5rem 0.85rem 0.6rem;\n background: var(--surface);\n`;\n\nconst ControlsRow = styled.div`\n display: flex;\n align-items: center;\n gap: 0.35rem;\n`;\n\nconst TBtn = styled.button<{ $active?: boolean }>`\n background: none;\n border: 1px solid ${p => p.$active ? \"var(--accent)\" : \"var(--border)\"};\n border-radius: 4px;\n color: ${p => p.$active ? \"var(--accent)\" : \"var(--dim)\"};\n font-size: 11px;\n padding: 0.2rem 0.4rem;\n cursor: pointer;\n font-family: inherit;\n white-space: nowrap;\n flex-shrink: 0;\n line-height: 1;\n &:hover { color: var(--fg); border-color: var(--dim); }\n &:disabled { opacity: 0.3; cursor: default; }\n`;\n\nconst SpeedBtn = styled.button<{ $active: boolean }>`\n background: none;\n border: 1px solid ${p => p.$active ? \"var(--accent)\" : \"var(--border)\"};\n border-radius: 4px;\n color: ${p => p.$active ? \"var(--accent)\" : \"var(--dim)\"};\n font-size: 10px;\n padding: 0.2rem 0.4rem;\n cursor: pointer;\n font-family: inherit;\n white-space: nowrap;\n &:hover { color: var(--fg); }\n`;\n\nconst SeqCounter = styled.div`\n font-size: 10px;\n color: var(--dim);\n white-space: nowrap;\n min-width: 3.5em;\n text-align: center;\n`;\n\nconst Spacer = styled.div`flex: 1;`;\n\n// ── Visual timeline strip ────────────────────────────────────────────────────\n\nconst StripWrap = styled.div`\n margin-top: 0.35rem;\n position: relative;\n height: 18px;\n cursor: pointer;\n`;\n\nconst StripTrack = styled.div`\n position: absolute;\n top: 8px;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--border);\n border-radius: 1px;\n`;\n\nconst StripDot = styled.div<{ $color: string; $active: boolean; $pct: number }>`\n position: absolute;\n top: ${p => p.$active ? \"3px\" : \"5px\"};\n left: ${p => p.$pct}%;\n width: ${p => p.$active ? \"8px\" : \"4px\"};\n height: ${p => p.$active ? \"12px\" : \"8px\"};\n margin-left: ${p => p.$active ? \"-4px\" : \"-2px\"};\n border-radius: ${p => p.$active ? \"2px\" : \"1px\"};\n background: ${p => p.$color};\n opacity: ${p => p.$active ? 1 : 0.5};\n transition: all 0.1s ease;\n z-index: ${p => p.$active ? 2 : 1};\n`;\n\nconst TimeRow = styled.div`\n display: flex;\n justify-content: space-between;\n margin-top: 0.2rem;\n`;\n\nconst TimeLabel = styled.div`\n font-size: 9px;\n color: var(--dim);\n opacity: 0.5;\n white-space: nowrap;\n`;\n\nconst EventLabel = styled.div`\n font-size: 10px;\n color: var(--dim);\n margin-top: 0.2rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-height: 1.4em;\n display: flex;\n align-items: center;\n gap: 0.35rem;\n`;\n\nconst AgentDot = styled.span<{ $color: string }>`\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: ${p => p.$color};\n flex-shrink: 0;\n`;\n\n// ── Loading shimmer ───────────────────────────────────────────────────────────\n\nconst shimmer = keyframes`\n 0% { opacity: 0.4; }\n 50% { opacity: 0.8; }\n 100% { opacity: 0.4; }\n`;\n\nconst Loading = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--dim);\n font-size: 11px;\n animation: ${shimmer} 1.5s ease-in-out infinite;\n`;\n\n// ── Time helpers ──────────────────────────────────────────────────────────────\n\n/** Extract epoch ms from an audit row's embedded .ts field. Returns 0 if absent. */\nfunction entryMs(entry: AuditRow | undefined): number {\n const ts = (entry?.value as any)?.ts;\n if (!ts) return 0;\n const ms = Date.parse(ts);\n return isNaN(ms) ? 0 : ms;\n}\n\n/** Format a duration in ms as a compact human string: 0s, 4s, 2m 3s, 1h 4m */\nfunction formatDuration(ms: number): string {\n if (ms <= 0) return \"0s\";\n const s = Math.floor(ms / 1000);\n if (s < 60) return `${s}s`;\n const m = Math.floor(s / 60);\n const rs = s % 60;\n if (m < 60) return rs > 0 ? `${m}m ${rs}s` : `${m}m`;\n const h = Math.floor(m / 60);\n const rm = m % 60;\n return rm > 0 ? `${h}h ${rm}m` : `${h}h`;\n}\n\n/** Format a total duration for the right end label: abbreviated for long spans. */\nfunction formatTotal(ms: number): string {\n return formatDuration(ms);\n}\n\n// Max real gap before we cap the playback delay (30s of real time = cap)\nconst MAX_REAL_GAP_MS = 30_000;\n// Minimum playback delay per step (ms) — prevents instant-fire on zero-gap clusters\nconst MIN_DELAY_MS = 50;\n\n// ── Data shape normalizers ────────────────────────────────────────────────────\n\nfunction normalizeAgents(raw: any): Agent[] {\n if (!raw) return [];\n if (Array.isArray(raw)) return raw;\n return Object.entries(raw).map(([id, v]: [string, any]) => ({ id, ...v }));\n}\n\nfunction normalizeState(raw: any): any[] {\n if (!raw) return [];\n if (Array.isArray(raw)) return raw;\n const rows: any[] = [];\n for (const [scope, keys] of Object.entries(raw)) {\n if (typeof keys !== \"object\" || keys === null) continue;\n for (const [key, value] of Object.entries(keys as Record)) {\n rows.push({ scope, key, value, version: 1, room_id: \"\", updated_at: \"\" });\n }\n }\n return rows;\n}\n\nfunction normalizeMessages(raw: any): any[] {\n if (!raw) return [];\n if (Array.isArray(raw)) return raw;\n if (raw.recent && Array.isArray(raw.recent)) {\n return raw.recent.map((m: any) => ({\n sort_key: m.seq ?? 0,\n value: m,\n updated_at: \"\",\n }));\n }\n return Object.entries(raw)\n .filter(([k]) => !isNaN(Number(k)))\n .sort(([a], [b]) => Number(a) - Number(b))\n .map(([k, v]) => ({ sort_key: Number(k), value: v, updated_at: \"\" }));\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nconst SPEEDS = [1, 2, 5] as const;\ntype Speed = typeof SPEEDS[number];\n\nfunction describeAuditEntry(entry: any): string {\n if (!entry) return \"\";\n const kind = entry.kind ?? \"invoke\";\n const agent = entry.agent ?? \"?\";\n switch (kind) {\n case \"agent_join\": return `${agent} joined`;\n case \"agent_update\": return `${agent} updated`;\n case \"register_action\": return `${agent} registered action \"${entry.schema?.id ?? \"\"}\"`;\n case \"delete_action\": return `${agent} deleted action \"${entry.schema?.id ?? \"\"}\"`;\n case \"register_view\": return `${agent} registered view \"${entry.schema?.id ?? \"\"}\"`;\n case \"delete_view\": return `${agent} deleted view \"${entry.schema?.id ?? \"\"}\"`;\n case \"invoke\": {\n const ok = entry.ok ? \"\" : \" ✗\";\n return `${agent} → ${entry.action ?? \"?\"}${ok}`;\n }\n default: return `${agent}: ${kind}`;\n }\n}\n\n// ── Render hint → Surface converter (mirrors Dashboard.tsx logic) ─────────────\n\nfunction renderHintToSurface(view: View): Surface {\n const hint = view.render!;\n const id = `auto-${view.id}`;\n const label = hint.label || view.description || view.id;\n switch (hint.type) {\n case \"metric\": return { id, type: \"metric\", view: view.id, label };\n case \"markdown\": return { id, type: \"markdown\", view: view.id, label };\n case \"array-table\": return { id, type: \"array-table\", view: view.id, label, columns: hint.columns, max_rows: hint.max_rows };\n case \"view-table\": return { id, type: \"view-table\", views: [view.id], label };\n default: return { id, type: \"metric\", view: view.id, label };\n }\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\ninterface ReplayWidgetProps {\n roomId: string;\n viewToken: string;\n height?: number;\n}\n\ntype ReplayTab = \"surfaces\" | \"agents\" | \"state\" | \"messages\" | \"actions\" | \"views\";\n\nexport function ReplayWidget({ roomId, viewToken, height = 420 }: ReplayWidgetProps) {\n const [auditLog, setAuditLog] = useState([]);\n const [snapshot, setSnapshot] = useState(null);\n const [playIdx, setPlayIdx] = useState(0);\n const [playing, setPlaying] = useState(false);\n const [speed, setSpeed] = useState(1);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [fetching, setFetching] = useState(false);\n const [activeTab, setActiveTab] = useState(\"agents\");\n const playTimeoutRef = useRef | null>(null);\n const fetchAbortRef = useRef(null);\n\n const authHeadersRef = useRef({ \"Authorization\": `Bearer ${viewToken}` });\n useEffect(() => {\n authHeadersRef.current = { \"Authorization\": `Bearer ${viewToken}` };\n }, [viewToken]);\n\n // ── Fetch full audit log on mount ─────────────────────────────────────────\n useEffect(() => {\n setLoading(true);\n setError(null);\n const baseUrl = getBaseUrl();\n fetch(`${baseUrl}/rooms/${roomId}/poll?audit_limit=2000`, { headers: authHeadersRef.current })\n .then(async r => {\n if (!r.ok) {\n const body = await r.text().catch(() => \"\");\n throw new Error(`${r.status}: ${body.slice(0, 120)}`);\n }\n return r.json();\n })\n .then((data: any) => {\n // v8: audit entries have `seq` instead of `sort_key`. Normalize.\n const rawAudit = data.audit || [];\n const log: AuditRow[] = rawAudit.map((a: any) => ({\n sort_key: a.sort_key ?? a.seq ?? 0,\n value: a.value,\n updated_at: a.updated_at ?? \"\",\n })).sort(\n (a: AuditRow, b: AuditRow) => Number(a.sort_key) - Number(b.sort_key)\n );\n setAuditLog(log);\n setPlayIdx(0);\n // Load snapshot at the very first event\n const firstSeq = log.length > 0 ? Number(log[0].sort_key ?? 0) : 0;\n fetch(`${baseUrl}/rooms/${roomId}/replay/${firstSeq}`, { headers: authHeadersRef.current })\n .then(r => r.ok ? r.json() : null)\n .then(d => { if (d) setSnapshot(d); })\n .catch(() => {});\n })\n .catch(e => setError(e.message ?? String(e)))\n .finally(() => setLoading(false));\n }, [roomId, viewToken]);\n\n // ── Fetch snapshot at a given audit index ─────────────────────────────────\n const fetchSnapshot = useCallback(async (idx: number) => {\n if (auditLog.length === 0) return;\n const seq = Number(auditLog[idx]?.sort_key ?? idx);\n if (fetchAbortRef.current) fetchAbortRef.current.abort();\n const ac = new AbortController();\n fetchAbortRef.current = ac;\n setFetching(true);\n const baseUrl = getBaseUrl();\n try {\n const r = await fetch(`${baseUrl}/rooms/${roomId}/replay/${seq}`, {\n headers: authHeadersRef.current,\n signal: ac.signal,\n });\n if (!r.ok) return;\n setSnapshot(await r.json());\n } catch (e: any) {\n if (e.name !== \"AbortError\") setError(e.message ?? String(e));\n } finally {\n setFetching(false);\n }\n }, [roomId, auditLog]);\n\n // ── Time-based auto-play via setTimeout chain ─────────────────────────────\n // Re-runs whenever playIdx advances (or playing/speed/auditLog change).\n // Each timeout fires once, advances playIdx by 1, then this effect re-runs\n // and schedules the *next* gap — so speed changes take effect immediately.\n useEffect(() => {\n if (playTimeoutRef.current) clearTimeout(playTimeoutRef.current);\n if (!playing || auditLog.length === 0) return;\n if (playIdx >= auditLog.length - 1) {\n setPlaying(false);\n return;\n }\n const currentMs = entryMs(auditLog[playIdx]);\n const nextMs = entryMs(auditLog[playIdx + 1]);\n const rawGap = Math.max(0, nextMs - currentMs);\n const cappedGap = Math.min(rawGap, MAX_REAL_GAP_MS);\n const delay = Math.max(MIN_DELAY_MS, cappedGap / speed);\n\n playTimeoutRef.current = setTimeout(() => {\n const next = playIdx + 1;\n setPlayIdx(next);\n fetchSnapshot(next);\n }, delay);\n\n return () => { if (playTimeoutRef.current) clearTimeout(playTimeoutRef.current); };\n }, [playing, playIdx, speed, auditLog, fetchSnapshot]);\n\n const togglePlay = useCallback(() => {\n setPlaying(p => {\n if (!p && playIdx >= auditLog.length - 1) {\n setPlayIdx(0);\n fetchSnapshot(0);\n }\n return !p;\n });\n }, [playIdx, auditLog.length, fetchSnapshot]);\n\n const stepBack = useCallback(() => {\n if (playIdx <= 0) return;\n const next = playIdx - 1;\n setPlayIdx(next);\n fetchSnapshot(next);\n }, [playIdx, fetchSnapshot]);\n\n const stepForward = useCallback(() => {\n if (playIdx >= auditLog.length - 1) return;\n const next = playIdx + 1;\n setPlayIdx(next);\n fetchSnapshot(next);\n }, [playIdx, auditLog.length, fetchSnapshot]);\n\n // ── Scrub: debounced to avoid hammering /replay on drag ──────────────────\n const scrubTimeout = useRef | null>(null);\n const onScrub = useCallback((idx: number) => {\n setPlayIdx(idx);\n if (scrubTimeout.current) clearTimeout(scrubTimeout.current);\n scrubTimeout.current = setTimeout(() => fetchSnapshot(idx), 120);\n }, [fetchSnapshot]);\n\n // ── Timeline strip: time-based click mapping ──────────────────────────────\n const stripRef = useRef(null);\n\n const firstMs = auditLog.length > 0 ? entryMs(auditLog[0]) : 0;\n const lastMs = auditLog.length > 0 ? entryMs(auditLog[auditLog.length - 1]) : 0;\n const totalMs = lastMs - firstMs;\n\n const onStripClick = useCallback((e: React.MouseEvent) => {\n if (!stripRef.current || auditLog.length === 0) return;\n const rect = stripRef.current.getBoundingClientRect();\n const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n\n let idx: number;\n if (totalMs <= 0) {\n // All events at same timestamp — fall back to index\n idx = Math.round(pct * (auditLog.length - 1));\n } else {\n const targetMs = firstMs + pct * totalMs;\n // Last entry with ts <= targetMs\n idx = 0;\n for (let i = 0; i < auditLog.length; i++) {\n if (entryMs(auditLog[i]) <= targetMs) idx = i;\n else break;\n }\n }\n setPlayIdx(idx);\n fetchSnapshot(idx);\n }, [auditLog, firstMs, totalMs, fetchSnapshot]);\n\n // ── Derived display values ────────────────────────────────────────────────\n const currentEntry = auditLog[playIdx]?.value;\n const eventDesc = describeAuditEntry(currentEntry);\n const currentAgent = (currentEntry as any)?.agent ?? \"\";\n const currentKind = (currentEntry as any)?.kind ?? \"invoke\";\n\n const currentMs = entryMs(auditLog[playIdx]);\n const elapsedMs = currentMs - firstMs;\n const seqLabel = auditLog.length > 0 ? `${playIdx + 1} / ${auditLog.length}` : \"—\";\n const elapsedLabel = totalMs > 0 ? `+${formatDuration(elapsedMs)}` : \"\";\n const totalLabel = totalMs > 0 ? formatTotal(totalMs) : \"\";\n\n const agents = normalizeAgents(snapshot?.agents);\n const state = normalizeState(snapshot?.state);\n const messages = normalizeMessages(snapshot?.messages);\n const actions: any[] = Array.isArray((snapshot as any)?.actions) ? (snapshot as any).actions : [];\n const views: any[] = Array.isArray((snapshot as any)?.views) ? (snapshot as any).views : [];\n const agentMap: Record = {};\n for (const a of agents) agentMap[a.id] = a;\n\n // ── Surfaces from views with render hints ──────────────────────────────────\n const activeSurfaces = useMemo(() => {\n return views\n .filter((v: any) => v.render)\n .sort((a: any, b: any) => (a.render?.order ?? 999) - (b.render?.order ?? 999))\n .map((v: any) => renderHintToSurface(v as View));\n }, [views]);\n\n const hasSurfaces = activeSurfaces.length > 0;\n\n // Auto-switch to surfaces tab when surfaces become available\n useEffect(() => {\n if (hasSurfaces && activeTab === \"agents\") setActiveTab(\"surfaces\");\n }, [hasSurfaces]);\n\n const surfaceCtx = useMemo(() => {\n if (!snapshot || !hasSurfaces) return null;\n return {\n views: views.map((v: any) => ({ id: v.id, value: v.value, description: v.description, render: v.render })),\n actions: actions.map((a: any) => ({ id: a.id, available: a.available !== false, description: a.description, params: a.params, writes: a.writes, if: a.if })),\n messages: messages.map((m: any) => ({ sort_key: m.sort_key ?? 0, value: m.value, updated_at: m.updated_at ?? \"\" })),\n state: state.map((s: any) => ({ scope: s.scope ?? \"_shared\", key: s.key ?? \"\", value: s.value })),\n agentMap: Object.fromEntries(agents.map(a => [a.id, { name: a.name }])),\n roomId,\n baseUrl: getBaseUrl(),\n authHeaders: () => authHeadersRef.current,\n evalCel: () => true,\n readOnly: true,\n };\n }, [snapshot, agents, state, messages, actions, views, roomId, hasSurfaces]);\n\n const tabs: { id: ReplayTab; label: string; count: number }[] = [\n ...(hasSurfaces ? [{ id: \"surfaces\" as ReplayTab, label: \"Surfaces\", count: activeSurfaces.length }] : []),\n { id: \"agents\", label: \"Agents\", count: agents.length },\n { id: \"state\", label: \"State\", count: state.length },\n { id: \"messages\", label: \"Messages\", count: messages.length },\n { id: \"actions\", label: \"Actions\", count: actions.length },\n { id: \"views\", label: \"Views\", count: views.length },\n ];\n\n return (\n \n {/* Top bar */}\n \n {roomId}\n {fetching && …}\n {seqLabel}\n {elapsedLabel && {elapsedLabel}}\n replay\n \n\n {/* Tabs */}\n \n {tabs.map(t => (\n setActiveTab(t.id)}>\n {t.label}\n {t.count}\n \n ))}\n \n\n {/* Panel */}\n \n {loading ? (\n loading audit log…\n ) : error ? (\n \n fetch error\n {error}\n \n ) : !snapshot ? (\n no data\n ) : (\n <>\n {activeTab === \"surfaces\" && surfaceCtx && (\n \n )}\n {activeTab === \"agents\" && (\n agents.length === 0\n ? no agents at this point\n : \n )}\n {activeTab === \"state\" && (\n state.length === 0\n ? no state at this point\n : \n )}\n {activeTab === \"messages\" && (\n messages.length === 0\n ? no messages at this point\n : authHeadersRef.current}\n autoScroll={false}\n readOnly\n epochMs={firstMs}\n />\n )}\n {activeTab === \"actions\" && (\n actions.length === 0\n ? no actions at this point\n : authHeadersRef.current}\n readOnly\n />\n )}\n {activeTab === \"views\" && (\n views.length === 0\n ? no views at this point\n : \n )}\n \n )}\n \n\n {/* Timeline */}\n \n \n \n {playing ? \"⏸\" : \"▶\"}\n \n ◀\n = auditLog.length - 1}>▶\n {seqLabel}\n \n {SPEEDS.map(s => (\n setSpeed(s)}>\n {s}×\n \n ))}\n \n\n {auditLog.length > 0 && (\n <>\n \n \n {auditLog.map((entry, i) => {\n const v = (entry.value ?? {}) as any;\n const agent = v.agent ?? \"\";\n const kind = v.kind ?? \"invoke\";\n // Position by real timestamp fraction; fall back to index if no ts data\n const pct = totalMs > 0\n ? Math.max(0, Math.min(100, ((entryMs(entry) - firstMs) / totalMs) * 100))\n : auditLog.length <= 1 ? 50 : (i / (auditLog.length - 1)) * 100;\n return (\n \n );\n })}\n \n\n {totalMs > 0 && (\n \n 0s\n {totalLabel}\n \n )}\n \n )}\n\n \n {currentAgent && }\n {kindSymbol(currentKind)} {eventDesc || \"\\u00a0\"}\n \n \n \n );\n}\n","deleted","label",[180,181,161],"frontend","components","permalink","https://www.val.town/x/c15r/sync/code/frontend/components/Replay.tsx","extension","actionData","errors"]