@theoremjs/studio 0.3.4-next.403.g5de27f3 → 0.3.4-next.407.gd93ec2c

package/ui/studio-screen.js

@@ -21,13 +21,14 @@ import { Token } from '@astryxdesign/core/Token';
 import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { TreeList } from '@astryxdesign/core/TreeList';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconActivity, IconAdjustmentsHorizontal, IconArrowBarToDown, IconArrowLeft, IconBrowserShare, IconCheck, IconCloud, IconCode, IconCopy, IconCopyPlus, IconFile, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRestore, IconRotateClockwise, IconSearch, IconShieldSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
+import { IconActivity, IconAdjustmentsHorizontal, IconArrowBarToDown, IconArrowLeft, IconBrowserShare, IconCheck, IconCloud, IconCode, IconCopy, IconCopyPlus, IconDownload, IconFile, IconFileImport, IconFileSmile, IconFileZip, IconKey, IconMenu2, IconPlayerPlay, IconPlaylistX, IconPlus, IconRestore, IconRotateClockwise, IconSearch, IconShieldSearch, IconSitemap, IconSparkles, IconTool, IconX, } from '@tabler/icons-react';
 import { profileGraphFacet } from '@theoremjs/agents';
 import { InPlace, PaneFailure, RaisedPane, useDisclosureMotion, } from '@theoremjs/react/ui';
 import { canonical } from "../canonical.js";
 import { addAgent, addArchitectExample, addProvider, agentNodeId, compileWorkspace, createBlankDraft, createConsoleExampleDraft, createDecisionExampleDraft, createExampleDraft, createGeminiEmbeddingExampleDraft, createLiveExampleDraft, createNarratorExampleDraft, createStudioRunId, draftFacets, duplicateAgent, editedSince, excludeFacet, includableFacets, includeFacet, libraryDraft, localProviderAddress, mergedWithFiles, modelBindingNodeId, modelRoute, modelSharers, modelSlots, nodeOrigins, onStudioLocal, openOutcome, originLabel, originPlace, originWay, providerIdOf, providerNodeId, providerUse, rebased, removeAgent, removeLibraryTool, removeProvider, renameProvider, reopened, resetAgent, resetAll, resetLibraryTool, resetProvider, sampleToolInput, saveStudioRunPayload, scopedNodeId, setToolAllowed, sharedAsk, sharedAt, sharedEntries, studioNodeRef, studioSource, studioTree, toolSpecKeyOf, withAgentDraft, withFilesChosen, withProvider, workspaceNodeRef, workspaceRunAgent, workspaceTree, writeAsk, } from "../mod.js";
 import { studioSurface } from "../surface.js";
 import './studio.css';
+import { createTraceFeed } from '@theoremjs/web/client';
 import { lazy, memo, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { flushSync } from 'react-dom';
 import { ActingAsButton } from "./acting-as-button.js";
@@ -40,6 +41,7 @@ import { FACET_ICON } from "./lib/facet-icons.js";
 import { movePanel } from "./lib/panel-motion.js";
 import { screenEndpoint } from "./lib/project-address.js";
 import { recordsTraces } from "./lib/project-traces.js";
+import { sendWhenReady } from "./lib/send-when-ready.js";
 import { clearConversation, restoreConversation, saveConversation, } from "./lib/studio-conversation.js";
 import { STUDIO_EXAMPLES } from "./lib/studio-examples.js";
 import { pageInputsOf, sentPageValues, usePageValues } from "./lib/studio-page.js";
@@ -72,6 +74,8 @@ const StudioMap = lazy(() => mapPanel().then((map) => ({ default: map.StudioMap
 const CodeBody = lazy(() => codePane().then((code) => ({ default: code.CodeBody })));
 const ProviderCode = lazy(() => codePane().then((code) => ({ default: code.ProviderCode })));
 const GuardrailTester = lazy(() => testerPanel().then((tester) => ({ default: tester.GuardrailTester })));
+const traceReplay = () => import("./studio-trace-replay.js");
+const TraceReplay = lazy(() => traceReplay().then((pane) => ({ default: pane.TraceReplay })));
 const StudioSettings = lazy(() => settingsPanel().then((settings) => ({ default: settings.StudioSettings })));
 /** A node's icon; Identity shows the profile type's once one is picked. */
 function nodeIcon(draft, ref) {
@@ -1240,7 +1244,11 @@ function useConversationRun(mode, sealer, chatWith, actingAs, question) {
         firstRuns.set(chatKey, runKey);
     const isFirstRun = firstRuns.get(chatKey) === runKey;
     const [seeded] = useState(chatWith);
-    const conversation = useMemo(() => (isFirstRun ? restoreConversation(chatKey, sealer) : undefined), [isFirstRun, chatKey, sealer]);
+    /** A conversation started for a chat's next runner: what it resumes and draws at once. */
+    const [resumed, setResumed] = useState();
+    const resumes = resumed?.runKey === runKey ? resumed : undefined;
+    const conversation = useMemo(() => (resumes ? resumes.ref : isFirstRun ? restoreConversation(chatKey, sealer) : undefined), [resumes, isFirstRun, chatKey, sealer]);
+    const conversationView = resumes?.view;
     /** A docs seed's question waits in its agent's first composer, when that resumes nothing. */
     const initialText = isFirstRun && chatWith === seeded && !conversation ? question : undefined;
     /**
@@ -1255,6 +1263,7 @@ function useConversationRun(mode, sealer, chatWith, actingAs, question) {
         generation,
         sealer,
         conversation,
+        conversationView,
         initialText,
         isUsed,
         markUsed: () => {
@@ -1265,8 +1274,25 @@ function useConversationRun(mode, sealer, chatWith, actingAs, question) {
             clearConversation(chatKey);
             setCleared((counts) => ({ ...counts, [chatKey]: (counts[chatKey] ?? 0) + 1 }));
         },
+        /** Goes on in a new runner with the conversation under `ref`, drawn as `view` at once. */
+        resume: (ref, view) => {
+            saveConversation(chatKey, sealer, ref);
+            const next = (cleared[chatKey] ?? 0) + 1;
+            setResumed({ runKey: `${generation}:${chatKey}:${String(next)}`, ref, view });
+            setCleared((counts) => ({ ...counts, [chatKey]: next }));
+        },
         setConversation,
-    }), [runKey, chatKey, generation, sealer, conversation, initialText, isUsed]);
+    }), [
+        runKey,
+        chatKey,
+        generation,
+        sealer,
+        conversation,
+        conversationView,
+        initialText,
+        isUsed,
+        cleared,
+    ]);
 }
 /**
  * Once, on arrival: say when a kept draft was set aside for a docs seed, when a project's files
@@ -1732,15 +1758,32 @@ function EditorBody({ state, connection, selected, editing, issues, listBadges,
 function ClearHistoryButton({ run }) {
     return (_jsx(IconButton, { label: "Clear history", variant: "ghost", icon: _jsx(Icon, { icon: IconPlaylistX, size: "sm" }), tooltip: "Clear the conversation and its traces. Your profile stays.", onClick: run.clear }));
 }
+/** The types whose conversation a trace can hold, and so open and replay. */
+const NO_CONVERSATION = new Set(['decision', 'host', 'embedding', 'live']);
+/** Downloads the records of the conversation on screen, as a trace file the studio opens. */
+function DownloadTraceButton({ feed, name }) {
+    const records = useSyncExternalStore(feed.subscribe, feed.records, feed.records);
+    return (_jsx(IconButton, { label: "Download trace", variant: "ghost", tooltip: records.length ? 'Download trace' : 'Nothing recorded yet', icon: _jsx(Icon, { icon: IconDownload, size: "sm" }), isDisabled: records.length === 0, onClick: () => {
+            const stamp = new Date().toISOString().replaceAll(':', '-').slice(0, 19);
+            download(`${name}-${stamp}.trace.json`, new Blob([JSON.stringify(records, null, 2)], { type: 'application/json' }));
+        } }));
+}
+/** Open trace, for a type whose conversation a trace holds, and Download trace, outside an opened one. */
+function TraceFileButtons({ payload, tracing, feed, profileId, }) {
+    if (payload == null)
+        return null;
+    const openLabel = tracing.open ? 'Close trace' : 'Open trace';
+    return (_jsxs(_Fragment, { children: [!NO_CONVERSATION.has(payload.profile.type) && (_jsx(IconButton, { label: openLabel, variant: tracing.open ? 'secondary' : 'ghost', tooltip: openLabel, icon: _jsx(Icon, { icon: IconFileImport, size: "sm" }), "aria-pressed": tracing.open, onClick: tracing.toggle })), !tracing.open && _jsx(DownloadTraceButton, { feed: feed, name: profileId ?? 'agent' })] }));
+}
 /** The preview's header: back to the editor, the agent to chat with, history, trace, and Export. */
-function PreviewHeader({ store, chatAgents, chatWith, compile, run, connection, trace, testing, copy, setSheet, }) {
+function PreviewHeader({ store, chatAgents, chatWith, compile, run, connection, trace, testing, tracing, feed, profileId, copy, setSheet, }) {
     const testLabel = testing.open ? 'Close guardrail test' : 'Test guardrails';
     const traceLabel = trace.open ? 'Hide trace' : 'View trace';
     const { compiled } = compile;
-    return (_jsx(Section, { variant: "transparent", paddingInline: 3, paddingBlock: 0, children: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(SheetButton, { label: "Back to the editor", icon: IconArrowLeft, sheet: null, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(ChatPicker, { agents: chatAgents, chatWith: chatWith, onChange: store.chatWith }) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(ActingAsButton, {}), compile.payload && run.isUsed && !testing.open && _jsx(ClearHistoryButton, { run: run }), compile.payload && (_jsx(IconButton, { label: testLabel, variant: "ghost", tooltip: testLabel, icon: _jsx(Icon, { icon: IconShieldSearch, size: "sm" }), "aria-pressed": testing.open, onClick: testing.toggle })), _jsx(ExportActions, { store: store, compiled: compiled.ok ? compiled : undefined, chatted: compile.chatted, chattedId: compile.chattedId, blocked: compile.blocked, copy: copy, connection: {
+    return (_jsx(Section, { variant: "transparent", paddingInline: 3, paddingBlock: 0, children: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(SheetButton, { label: "Back to the editor", icon: IconArrowLeft, sheet: null, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(ChatPicker, { agents: chatAgents, chatWith: chatWith, onChange: store.chatWith }) }), _jsx(StackItem, { size: "static", children: _jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(ActingAsButton, {}), compile.payload && run.isUsed && !testing.open && !tracing.open && (_jsx(ClearHistoryButton, { run: run })), !testing.open && (_jsx(TraceFileButtons, { payload: compile.payload, tracing: tracing, feed: feed, profileId: profileId })), compile.payload && (_jsx(IconButton, { label: testLabel, variant: "ghost", tooltip: testLabel, icon: _jsx(Icon, { icon: IconShieldSearch, size: "sm" }), "aria-pressed": testing.open, onClick: testing.toggle })), _jsx(ExportActions, { store: store, compiled: compiled.ok ? compiled : undefined, chatted: compile.chatted, chattedId: compile.chattedId, blocked: compile.blocked, copy: copy, connection: {
                                     connectionMode: connection.mode,
                                     localBaseUrl: connection.local.baseUrl,
-                                } }), compile.traced && !testing.open ? (_jsx(IconButton, { label: traceLabel, variant: trace.open ? 'secondary' : 'ghost', tooltip: traceLabel, icon: _jsx(Icon, { icon: IconActivity, size: "sm" }), "aria-pressed": trace.open, onClick: trace.toggle })) : null] }) })] }) }));
+                                } }), (compile.traced || tracing.open) && !testing.open ? (_jsx(IconButton, { label: traceLabel, variant: trace.open ? 'secondary' : 'ghost', tooltip: traceLabel, icon: _jsx(Icon, { icon: IconActivity, size: "sm" }), "aria-pressed": trace.open, onClick: trace.toggle })) : null] }) })] }) }));
 }
 /**
  * Why the agent to chat with does not run: the errors in its config, or the workspace's when its
@@ -1762,7 +1805,7 @@ function ConfigIssues({ compile, chatWith, onIssue, }) {
  * The runner for the compiled agent, its conversation saved as it goes, or the guardrail tester
  * over it; while none compiles, why.
  */
-function PreviewBody({ compile, run, connection, chatRef, chatWith, profileId, traceOpen, testing, onIssue, }) {
+function PreviewBody({ compile, run, connection, chatRef, chatWith, profileId, traceOpen, testing, tracing, feedOf, onIssue, }) {
     const { payload, traced, tested } = compile;
     /** Why the project's server does not run this profile: its files say, not the editor. */
     const unserved = useProject()?.problems.find((problem) => problem.profile === profileId);
@@ -1777,6 +1820,7 @@ function PreviewBody({ compile, run, connection, chatRef, chatWith, profileId, t
                 payload,
                 onActivity: run.markUsed,
                 conversation: run.conversation,
+                conversationView: run.conversationView,
                 initialText: run.initialText,
                 onConversationChange: (ref) => {
                     if (ref)
@@ -1792,9 +1836,9 @@ function PreviewBody({ compile, run, connection, chatRef, chatWith, profileId, t
         : null;
     const kept = useKeptRuns(run, shown);
     const blocked = unserved ? (_jsx(PaneFailure, { title: `${unserved.profile} does not run here yet`, description: unserved.message })) : payload ? null : (_jsx(ConfigIssues, { compile: compile, chatWith: chatWith, onIssue: onIssue }));
-    return (_jsx(InPlace, { view: testing && payload ? (_jsx(RaisedPane, { children: (isWide) => (_jsx(Suspense, { fallback: null, children: _jsx(GuardrailTester, { payload: payload, isWide: isWide }) })) })) : null, children: _jsx(VStack, { height: "100%", children: _jsxs(StackItem, { size: "fill", children: [blocked, kept.map(([key, { props }]) => {
+    return (_jsx(InPlace, { view: testing && payload ? (_jsx(RaisedPane, { children: (isWide) => (_jsx(Suspense, { fallback: null, children: _jsx(GuardrailTester, { payload: payload, isWide: isWide }) })) })) : (tracing), children: _jsx(VStack, { height: "100%", children: _jsxs(StackItem, { size: "fill", children: [blocked, kept.map(([key, { props }]) => {
                         const isShown = shown !== null && key === run.runKey;
-                        return (_jsx("div", { style: { display: isShown ? 'contents' : 'none' }, children: _jsx(StudioRunner, { ...props, mode: connection.mode, runtime: connection.runtime, trace: traced ? traceOpen : undefined, chatRef: isShown ? chatRef : undefined }) }, key));
+                        return (_jsx("div", { style: { display: isShown ? 'contents' : 'none' }, children: _jsx(StudioRunner, { ...props, mode: connection.mode, runtime: connection.runtime, trace: traced ? traceOpen : undefined, chatRef: isShown ? chatRef : undefined, traces: feedOf(key) }) }, key));
                     })] }) }) }));
 }
 /**
@@ -1813,6 +1857,44 @@ function useKeptRuns(run, shown) {
         kept.set(run.runKey, shown);
     return [...kept];
 }
+/**
+ * The trace feed of each runner, by its run key: the header downloads the one on screen. Another
+ * mode or a restart drops them all, as it drops the runners.
+ */
+function useRunFeeds(generation) {
+    const [feeds] = useState(() => new Map());
+    return useCallback((runKey) => {
+        for (const key of feeds.keys())
+            if (!key.startsWith(`${generation}:`))
+                feeds.delete(key);
+        let feed = feeds.get(runKey);
+        if (!feed) {
+            feed = createTraceFeed();
+            feeds.set(runKey, feed);
+        }
+        return feed;
+    }, [feeds, generation]);
+}
+/** Sends a message once the runner for the next run key is ready: a conversation goes on live. */
+function useSendAfterResume(chatRef, runKey) {
+    const [next, setNext] = useState();
+    useEffect(() => {
+        if (!next?.text || next.after === runKey)
+            return;
+        const controller = new AbortController();
+        // why: cleared once sent, not before: clearing re-renders, and the cleanup would abort the send.
+        void sendWhenReady(chatRef, next.text, controller.signal).then(() => {
+            if (!controller.signal.aborted)
+                setNext(undefined);
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [next, runKey, chatRef]);
+    return useCallback((text) => {
+        setNext({ text, after: runKey });
+    }, [runKey]);
+}
 /**
  * The compiled agent to chat with, under its header; while none compiles, why. It sits out renders
  * that change nothing it shows: typing in the editor, opening a node, Keys.
@@ -1820,6 +1902,18 @@ function useKeptRuns(run, shown) {
 const PreviewPane = memo(function PreviewPane({ store, chatAgents, chatWith, compile, run, connection, chatRef, copy, setSheet, onIssue, }) {
     const [traceOpen, setTraceOpen] = useState(false);
     const [testing, setTesting] = useState(false);
+    const [tracing, setTracing] = useState(false);
+    const feedOf = useRunFeeds(run.generation);
+    const profileId = chatAgents.find((agent) => agent.value === chatWith)?.label;
+    const sendNext = useSendAfterResume(chatRef, run.runKey);
+    const { payload } = compile;
+    const traceView = tracing && payload ? (_jsx(Suspense, { fallback: null, children: _jsx(TraceReplay, { payload: payload, runtime: connection.runtime, trace: traceOpen, onClose: () => {
+                setTracing(false);
+            }, onLive: ({ conversation, view, text }) => {
+                run.resume(conversation, view);
+                setTracing(false);
+                sendNext(text);
+            } }) })) : null;
     return (_jsx(LayoutContent, { className: "studio-preview shell-fade", isScrollable: false, padding: 0, children: _jsxs(VStack, { height: "100%", children: [_jsx(PreviewHeader, { store: store, chatAgents: chatAgents, chatWith: chatWith, compile: compile, run: run, connection: connection, trace: {
                         open: traceOpen,
                         toggle: () => {
@@ -1829,8 +1923,14 @@ const PreviewPane = memo(function PreviewPane({ store, chatAgents, chatWith, com
                         open: testing,
                         toggle: () => {
                             setTesting((open) => !open);
+                            setTracing(false);
+                        },
+                    }, tracing: {
+                        open: tracing,
+                        toggle: () => {
+                            setTracing((open) => !open);
                         },
-                    }, copy: copy, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(PreviewBody, { compile: compile, run: run, connection: connection, chatRef: chatRef, chatWith: chatWith, profileId: chatAgents.find((agent) => agent.value === chatWith)?.label, traceOpen: traceOpen, testing: testing, onIssue: onIssue }) })] }) }));
+                    }, feed: feedOf(run.runKey), profileId: profileId, copy: copy, setSheet: setSheet }), _jsx(StackItem, { size: "fill", children: _jsx(PreviewBody, { compile: compile, run: run, connection: connection, chatRef: chatRef, chatWith: chatWith, profileId: profileId, traceOpen: traceOpen, testing: testing, tracing: traceView, feedOf: feedOf, onIssue: onIssue }) })] }) }));
 });
 /** Tells the host what is on screen as it changes, and that it closed. */
 function useScreenReport(onReport, { agent, type, issues, section }) {
@@ -2074,7 +2174,7 @@ function EditorColumnBody({ state, connection, view, compile, rowIssues, selecte
 /** The studio, opened on `opened`, with what the page showing it provides. */
 export function StudioScreen({ opened, host }) {
     useEffect(() => {
-        warmWhenIdle(testerPanel, mapPanel, codePane, exportKit);
+        warmWhenIdle(testerPanel, traceReplay, mapPanel, codePane, exportKit);
     }, []);
     return (_jsx(StudioHostContext.Provider, { value: host, children: _jsx(Studio, { opened: opened }) }));
 }

package/ui/studio-trace-replay.d.ts

@@ -0,0 +1,23 @@
+import type { TraceRecord } from '@theoremjs/agents/observability';
+import { type ConversationView } from '@theoremjs/web/client';
+import { type StudioBrowserRuntime } from '../browser.ts';
+import { type StudioRunPayload } from '../mod.ts';
+/** A trace file the builder opened. */
+export interface OpenedTrace {
+    name: string;
+    records: TraceRecord[];
+}
+/** A live conversation started where a replay stopped: its ref, its view, and the message to send next. */
+export interface LiveStart {
+    conversation: string;
+    view: ConversationView;
+    text: string;
+}
+/** The trace pane: a place to open one, then what it recorded and its replay. */
+export declare function TraceReplay({ payload, trace, runtime, onClose, onLive, }: {
+    payload: StudioRunPayload;
+    trace: boolean | undefined;
+    onClose: () => void;
+    runtime: StudioBrowserRuntime | null;
+    onLive: (start: LiveStart) => void;
+}): import("react").JSX.Element;

package/ui/studio-trace-replay.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An opened trace: the conversation it recorded, as the person saw it, and a replay of it through
+ * the profile as it is now. A replay reaches no model and, unless Live tools is on, no tool: the
+ * recording answers both. Where the profile asks for something the recording does not hold, the
+ * replay stops and says why; Continue live goes on from there with the real model.
+ *
+ * @module
+ */
+import { Banner } from '@astryxdesign/core/Banner';
+import { Button } from '@astryxdesign/core/Button';
+import { FileInput } from '@astryxdesign/core/FileInput';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Section } from '@astryxdesign/core/Section';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Switch } from '@astryxdesign/core/Switch';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconFileImport, IconPlayerPlay, IconX } from '@tabler/icons-react';
+import { PaneState, TheoremChat } from '@theoremjs/react/ui';
+import { createTraceFeed, } from '@theoremjs/web/client';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createBrowserStudioTransport, startBrowserStudioConversation, } from "../browser.js";
+import { createReplay, parseTraceFile, recordedPayload, recordedTranscript, replayScript, startStudioConversation, studioInterface, studioPageTools, } from "../mod.js";
+import { sendWhenReady } from "./lib/send-when-ready.js";
+import { pageConversationKey } from "./lib/studio-conversation.js";
+import { STUDIO_LABELS } from "./lib/studio-labels.js";
+/**
+ * A live conversation on `blocks`, kept where the live chat keeps its own: sealed in the page
+ * when it runs there, else in this visitor's session on the server.
+ */
+function startLive(payload, runtime, blocks) {
+    return runtime
+        ? startBrowserStudioConversation(payload, runtime, {
+            conversationKey: pageConversationKey(),
+            blocks,
+        })
+        : startStudioConversation(payload, blocks);
+}
+const ordinal = (turn) => `turn ${String(turn + 1)}`;
+/** A chat that only shows: the conversation a trace recorded, and its records beside it. */
+function recordedTransport(payload, transcript, traces) {
+    const refused = () => Promise.reject(new Error('A recorded conversation cannot change. Replay it, then continue live.'));
+    return {
+        describe: () => Promise.resolve(studioInterface(payload)),
+        turn: refused,
+        invoke: refused,
+        steer: refused,
+        rewind: refused,
+        conversation: () => Promise.resolve({ transcript }),
+        traces,
+    };
+}
+/** The pane to open a trace in: a place to drop it, and why the last one did not open. */
+function OpenTrace({ onOpen }) {
+    const [problem, setProblem] = useState();
+    const [reading, setReading] = useState(false);
+    const changeAction = async (files) => {
+        const file = Array.isArray(files) ? files[0] : files;
+        if (!file)
+            return;
+        setReading(true);
+        try {
+            onOpen({ name: file.name, records: parseTraceFile(await file.text()) });
+            setProblem(undefined);
+        }
+        catch (error) {
+            setProblem(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setReading(false);
+        }
+    };
+    return (_jsx(PaneState, { icon: _jsx(Icon, { icon: IconFileImport, size: "lg", color: "secondary" }), title: "Open a trace", description: "See how a conversation went, then replay it through this profile as it is now. A replay answers from the recording, so it needs no keys.", children: _jsxs(VStack, { gap: 2, children: [_jsx(FileInput, { label: "Trace file", isLabelHidden: true, mode: "dropzone", accept: "application/json,.json", isLoading: reading, placeholder: "Drop a trace (.json) or choose a file", value: null, changeAction: changeAction, onChange: () => undefined }), problem ? _jsx(Banner, { status: "error", title: problem }) : null] }) }));
+}
+/** What the replay is doing, or where and why it stopped, with the way on. */
+function StatusBanner({ status, turns, onContinue, onLive, }) {
+    const [starting, setStarting] = useState(false);
+    const [problem, setProblem] = useState();
+    const live = (turn) => (_jsx(Button, { label: "Continue live", variant: "secondary", size: "sm", isLoading: starting, onClick: async () => {
+            setStarting(true);
+            setProblem(undefined);
+            try {
+                await onLive(turn);
+            }
+            catch (error) {
+                setProblem(error instanceof Error ? error.message : String(error));
+                setStarting(false);
+            }
+        } }));
+    const banner = (() => {
+        switch (status.kind) {
+            case 'running':
+                return (_jsx(Banner, { status: "info", title: `Replaying ${ordinal(status.turn)} of ${String(turns)}` }));
+            case 'waiting':
+                return (_jsx(Banner, { status: "info", title: `${ordinal(status.turn - 1)} waits on you`, description: "Answer it in the conversation, then continue the replay.", endContent: _jsx(Button, { label: "Continue replay", variant: "secondary", size: "sm", onClick: () => {
+                            onContinue(status.turn);
+                        } }) }));
+            case 'missing':
+                return (_jsx(Banner, { status: "warning", title: `Replay stopped before ${ordinal(status.turn)}`, description: "It was sent with files, and a trace never holds a file's bytes. Continue live to send it again with yours.", endContent: live(status.turn) }));
+            case 'diverged': {
+                const { turn, call, reason } = status.divergence;
+                return (_jsx(Banner, { status: "warning", title: `Replay stopped at ${ordinal(turn)}, model call ${String(call)}`, description: reason, endContent: live(turn) }));
+            }
+            case 'failed':
+                return (_jsx(Banner, { status: "error", title: `Replay stopped at ${ordinal(status.turn)}`, description: status.message, endContent: live(status.turn) }));
+            case 'done':
+                return (_jsx(Banner, { status: "success", title: `Replayed ${String(turns)} ${turns === 1 ? 'turn' : 'turns'}`, description: "Every model call this profile made was one the recording answered." }));
+        }
+    })();
+    return (_jsxs(VStack, { gap: 1, children: [banner, problem ? _jsx(Banner, { status: "error", title: problem }) : null] }));
+}
+/** The replay of `script`: the chat it runs in, driven turn by turn, and where it stands. */
+function ReplayRun({ payload, script, liveTools, trace, runtime, onLive, }) {
+    const chatRef = useRef(null);
+    const diverged = useRef(undefined);
+    const [status, setStatus] = useState({ kind: 'running', turn: 0 });
+    const [traces] = useState(createTraceFeed);
+    const replay = useMemo(() => createReplay(script, payload.profile.id, (divergence) => {
+        diverged.current ??= divergence;
+    }), [script, payload.profile.id]);
+    const ran = useMemo(() => (liveTools ? payload : recordedPayload(payload)), [liveTools, payload]);
+    const pageTools = useMemo(() => (liveTools ? studioPageTools(payload) : undefined), [liveTools, payload]);
+    const transport = useMemo(() => createBrowserStudioTransport(ran, {
+        mode: 'byok',
+        provider: replay.provider,
+        ...(liveTools ? {} : { toolHandlers: replay.toolHandlers }),
+    }, { conversationKey: pageConversationKey(), traces }), [ran, replay, liveTools, traces]);
+    const [from, setFrom] = useState(0);
+    useEffect(() => {
+        const controller = new AbortController();
+        const { signal } = controller;
+        void (async () => {
+            for (let turn = from; turn < script.turns.length; turn += 1) {
+                if (signal.aborted)
+                    return;
+                const { text, attachments } = script.turns[turn];
+                if (attachments > 0)
+                    return setStatus({ kind: 'missing', turn });
+                replay.startTurn(turn);
+                setStatus({ kind: 'running', turn });
+                try {
+                    // why: The chat takes nothing until it has described its agent; later turns find it ready.
+                    const sent = turn === 0
+                        ? await sendWhenReady(chatRef, text, signal)
+                        : ((await chatRef.current?.send(text)) ?? null);
+                    if (signal.aborted)
+                        return;
+                    if (diverged.current)
+                        return setStatus({ kind: 'diverged', divergence: diverged.current });
+                    if (!sent) {
+                        // The turn before waits on a gate: its reply goes on with the calls it has left.
+                        replay.startTurn(turn - 1);
+                        return setStatus({ kind: 'waiting', turn });
+                    }
+                }
+                catch (error) {
+                    const message = error instanceof Error ? error.message : String(error);
+                    return setStatus({ kind: 'failed', turn, message });
+                }
+            }
+            setStatus({ kind: 'done' });
+        })();
+        return () => {
+            controller.abort();
+            chatRef.current?.stop();
+        };
+    }, [from, replay, script]);
+    const live = async (turn) => {
+        const blocks = script.turns.slice(0, turn).flatMap((each) => each.blocks);
+        const started = await startLive(payload, runtime, blocks);
+        onLive({ ...started, text: script.turns[turn]?.text ?? '' });
+    };
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(Section, { variant: "transparent", paddingInline: 3, paddingBlock: 2, children: _jsx(StatusBanner, { status: status, turns: script.turns.length, onContinue: setFrom, onLive: live }) }), _jsx(StackItem, { size: "fill", children: _jsx(TheoremChat, { detectCodeLanguage: true, labels: STUDIO_LABELS, transport: transport, trace: trace, composer: false, chatRef: chatRef, pageTools: pageTools }) })] }));
+}
+const recordedAt = (script) => script.recordedAt === undefined
+    ? undefined
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(script.recordedAt);
+/** An opened trace: its recorded conversation, or a replay of it, and the controls between them. */
+function OpenedTraceView({ payload, opened, trace, runtime, onClose, onLive, }) {
+    const script = useMemo(() => replayScript(opened.records), [opened.records]);
+    const [view, setView] = useState('recorded');
+    const [attempt, setAttempt] = useState(0);
+    const [liveTools, setLiveTools] = useState(false);
+    const recorded = useMemo(() => {
+        const traces = createTraceFeed();
+        for (const record of opened.records)
+            traces.push(record);
+        return recordedTransport(payload, recordedTranscript(script), traces);
+    }, [payload, opened.records, script]);
+    const turns = script.turns.length;
+    const facts = [
+        script.agent || 'No agent',
+        `${String(turns)} ${turns === 1 ? 'turn' : 'turns'}`,
+        recordedAt(script),
+    ].filter(Boolean);
+    const replayOnce = () => {
+        setAttempt((count) => count + 1);
+        setView('replayed');
+    };
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(Section, { variant: "transparent", paddingInline: 3, paddingBlock: 2, children: _jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(StackItem, { size: "fill", children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { type: "label", maxLines: 1, children: opened.name }), _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: facts.join(' · ') })] }) }), attempt > 0 ? (_jsxs(SegmentedControl, { label: "Show", size: "sm", value: view, onChange: (next) => {
+                                        setView(next === 'replayed' ? 'replayed' : 'recorded');
+                                    }, children: [_jsx(SegmentedControlItem, { value: "recorded", label: "Recorded" }), _jsx(SegmentedControlItem, { value: "replayed", label: "Replayed" })] })) : null, _jsx(Switch, { label: "Live tools", size: "sm", value: liveTools, onChange: (next) => {
+                                        setLiveTools(next);
+                                        if (attempt > 0)
+                                            replayOnce();
+                                    } }), _jsx(Button, { label: attempt > 0 ? 'Replay again' : 'Replay', variant: "primary", size: "sm", icon: _jsx(Icon, { icon: IconPlayerPlay, size: "sm" }), isDisabled: turns === 0, onClick: replayOnce }), _jsx(IconButton, { label: "Close trace", variant: "ghost", tooltip: "Close trace", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onClose })] }), script.agent && script.agent !== payload.profile.id ? (_jsx(Banner, { status: "info", title: `Recorded with ${script.agent}; a replay runs through ${payload.profile.id}.` })) : null, turns === 0 ? (_jsx(Banner, { status: "info", title: "This trace holds no conversation to replay." })) : null] }) }), _jsx(StackItem, { size: "fill", children: view === 'replayed' && attempt > 0 ? (_jsx(ReplayRun, { payload: payload, script: script, liveTools: liveTools, trace: trace, runtime: runtime, onLive: onLive }, attempt)) : (_jsx(TheoremChat, { detectCodeLanguage: true, labels: STUDIO_LABELS, transport: recorded, trace: trace, composer: false, conversation: "recorded", conversationView: { transcript: recordedTranscript(script) } }, opened.name)) })] }));
+}
+/** The trace pane: a place to open one, then what it recorded and its replay. */
+export function TraceReplay({ payload, trace, runtime, onClose, onLive, }) {
+    const [opened, setOpened] = useState();
+    return opened ? (_jsx(OpenedTraceView, { payload: payload, opened: opened, trace: trace, runtime: runtime, onClose: onClose, onLive: onLive })) : (_jsx(OpenTrace, { onOpen: setOpened }));
+}