@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/shell-motion.js

@@ -0,0 +1,194 @@
+/**
+ * The shell is one surface. It starts as the whole viewport, where the mark draws, and moves to
+ * the shape of the page it opens. The website and the studio on its own both move it with this.
+ */
+/** This document has already drawn the mark. A full reload clears it; a route change does not. */
+let played = false;
+export function bootHasPlayed() {
+    return played;
+}
+/** Fired when the mark gives way, before the shell moves, so the cover attribute can drop. */
+export const SHELL_REVEAL = 'theorem-shell-reveal';
+/** Fired when the shell has settled and scroll may own it again. */
+export const SHELL_INTRO_DONE = 'theorem-shell-intro-done';
+export const OPEN_SHAPE = { kind: 'open' };
+export const REGULAR_SHAPE = { kind: 'regular' };
+const FRAME_WIDTH = '--shell-frame-width';
+const MAIN_ID = 'astryx-app-shell-main';
+const MOVE_CAP_MS = 1000;
+/** How long content takes to fade out. Keep in step with `--shell-hold-ms` in shell-motion.css. */
+export const HOLD_MS = 140;
+/**
+ * The shape of a page whose shell is a surface inside the page area, measured from the page on
+ * screen. That surface carries `data-shell-frame`; a page without one rests in the regular shape.
+ */
+export function frameShape() {
+    const frame = document.querySelector('[data-shell-frame]');
+    return frame ? { kind: 'frame', width: frame.offsetWidth } : REGULAR_SHAPE;
+}
+/** Where the shell last came to rest, for a route change that gave no warning. */
+let rest = OPEN_SHAPE;
+/** The shape measured when a route change began, while the page it leaves was still on screen. */
+let captured = null;
+export function captureShape(shape) {
+    captured = shape;
+}
+export function hasCapturedShape() {
+    return captured !== null;
+}
+export function peekShape() {
+    return captured ?? rest;
+}
+/** The shape the shell is leaving, and the claim on it: the next route change starts afresh. */
+export function takeShape() {
+    const shape = captured ?? rest;
+    captured = null;
+    return shape;
+}
+export function prefersReducedMotion() {
+    return globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+export function sleep(ms) {
+    return new Promise((resolve) => {
+        globalThis.setTimeout(resolve, ms);
+    });
+}
+/** What a host lays over the shell that pins it in place, such as a side panel. */
+let pinned = () => false;
+/** The host names when something of its own holds the shell still. */
+export function pinShellWhile(check) {
+    pinned = check;
+}
+/** Whether the shell can move. A narrow screen, reduced motion, and a host's pin cannot. */
+export function shellCanMove() {
+    return (globalThis.matchMedia('(min-width: 768px)').matches &&
+        !globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches &&
+        !pinned());
+}
+/** The mark is still up, or the shell is on its way: scroll must not move the shell yet. */
+export function shellIntroOwnsPull() {
+    const root = document.documentElement;
+    return root.hasAttribute('data-boot-pending') || root.hasAttribute('data-shell-move');
+}
+function showContent(root) {
+    root.dataset.shellIn = '';
+    globalThis.setTimeout(() => {
+        delete root.dataset.shellIn;
+    }, 320);
+}
+/** The page's content fades out and stays out until the shell settles. */
+export function holdShell() {
+    document.documentElement.dataset.shellHold = '';
+}
+/**
+ * Put the shell into move mode at the shape it is in. A route that mounts under it then finds the
+ * shell already drawn as a clip and cannot snap it to its own shape.
+ */
+export function enterShell(from) {
+    const root = document.documentElement;
+    const main = document.getElementById(MAIN_ID);
+    if (!main || !shellCanMove() || root.hasAttribute('data-shell-move'))
+        return;
+    if (from.kind === 'frame')
+        root.style.setProperty(FRAME_WIDTH, `${String(from.width)}px`);
+    root.dataset.shellClip = from.kind;
+    root.dataset.shellMove = '';
+    getComputedStyle(main).getPropertyValue('clip-path');
+}
+/** Each move claims the shell; a claim that was overtaken must not settle it. */
+let claim = 0;
+/**
+ * Move the shell from one shape to another, content hidden. If it is already moving, it carries on
+ * from the shape it is in. Resolves true when it arrives, false when a newer move overtook it. It
+ * stays in its last shape until `settleShell`, so a page that is still loading can wait on it.
+ */
+export function moveShell(from, to) {
+    const root = document.documentElement;
+    const main = document.getElementById(MAIN_ID);
+    const mine = ++claim;
+    if (!main || !shellCanMove())
+        return Promise.resolve(true);
+    const moving = root.hasAttribute('data-shell-move');
+    if (moving && root.dataset.shellClip === to.kind)
+        return Promise.resolve(true);
+    const frame = from.kind === 'frame' ? from : to.kind === 'frame' ? to : null;
+    if (frame)
+        root.style.setProperty(FRAME_WIDTH, `${String(frame.width)}px`);
+    if (!moving) {
+        root.dataset.shellClip = from.kind;
+        root.dataset.shellMove = '';
+    }
+    /* The first shape has to be drawn once, so the second one is a change to ease and not a start. */
+    getComputedStyle(main).getPropertyValue('clip-path');
+    root.dataset.shellClip = to.kind;
+    return new Promise((resolve) => {
+        const done = () => {
+            main.removeEventListener('transitionend', onEnd);
+            globalThis.clearTimeout(cap);
+            resolve(claim === mine);
+        };
+        const onEnd = (event) => {
+            if (event.target === main && event.propertyName === 'clip-path')
+                done();
+        };
+        main.addEventListener('transitionend', onEnd);
+        const cap = globalThis.setTimeout(done, MOVE_CAP_MS);
+    });
+}
+/** The shell rests. The page's content comes in at the size it will keep. */
+export function settleShell(to) {
+    const root = document.documentElement;
+    const shown = root.hasAttribute('data-shell-move') || root.hasAttribute('data-shell-hold');
+    delete root.dataset.shellMove;
+    delete root.dataset.shellClip;
+    delete root.dataset.shellHold;
+    root.style.removeProperty(FRAME_WIDTH);
+    if (shown)
+        showContent(root);
+    rest = to;
+    globalThis.dispatchEvent(new Event(SHELL_INTRO_DONE));
+}
+/**
+ * The mark has finished but the page is still loading. The shell pulls in to the regular panel and
+ * waits there, page hidden, for what the loader shows on it. `revealShell` then takes it to rest.
+ * A shell that cannot move stays full-bleed.
+ */
+export function pullShellIn() {
+    const root = document.documentElement;
+    const main = document.getElementById(MAIN_ID);
+    if (!main || !shellCanMove())
+        return Promise.resolve(true);
+    root.dataset.shellClip = 'open';
+    root.dataset.shellMove = '';
+    delete root.dataset.bootPending;
+    globalThis.dispatchEvent(new Event(SHELL_REVEAL));
+    return moveShell(OPEN_SHAPE, REGULAR_SHAPE);
+}
+/**
+ * The loader has finished. The page stays hidden while the shell moves to the shape of the page it
+ * opens, then comes in. It moves from the full-bleed shell, or from the regular panel when
+ * `pullShellIn` took it there. A page that rests open stays open.
+ */
+export function revealShell(to) {
+    played = true;
+    const root = document.documentElement;
+    const main = document.getElementById(MAIN_ID);
+    const pulled = root.hasAttribute('data-shell-move');
+    const moves = Boolean(main) && (pulled || (shellCanMove() && to.kind !== 'open'));
+    if (moves && !pulled) {
+        root.dataset.shellClip = 'open';
+        root.dataset.shellMove = '';
+    }
+    delete root.dataset.bootPending;
+    globalThis.dispatchEvent(new Event(SHELL_REVEAL));
+    if (!moves) {
+        showContent(root);
+        rest = to;
+        globalThis.dispatchEvent(new Event(SHELL_INTRO_DONE));
+        return;
+    }
+    void moveShell(pulled ? REGULAR_SHAPE : OPEN_SHAPE, to).then((arrived) => {
+        if (arrived)
+            settleShell(to);
+    });
+}

package/ui/studio-code-pane.d.ts

@@ -0,0 +1,19 @@
+import { type StudioIssue, type StudioProvider } from '../mod.ts';
+import type { StudioWorkspaceState } from './studio-screen.tsx';
+/** The open agent's TypeScript. A failed compile keeps the text and marks the issues. */
+export declare function CodeBody({ source, blocked, issues, state, }: {
+    source: string | null;
+    blocked: string | undefined;
+    issues: StudioIssue[];
+    state: StudioWorkspaceState;
+}): import("react").JSX.Element;
+/**
+ * An open provider's definition. On a project it is edited here as in its editor; the studio's own,
+ * and one on an adapter the project made, only show.
+ */
+export declare function ProviderCode({ provider, issues, state, isEditable, }: {
+    provider: StudioProvider;
+    issues: StudioIssue[];
+    state: StudioWorkspaceState;
+    isEditable: boolean;
+}): import("react").JSX.Element;

package/ui/studio-code-pane.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PaneFailure } from '@theoremjs/react/ui';
+import { useCallback, useRef } from 'react';
+import { agentDraft, definitionFactory, providerSource, readProviderSource, readStudioSource, withAgentDraft, withProvider, } from "../mod.js";
+import { StudioCode } from "./code/studio-code.js";
+/** The open agent's TypeScript. A failed compile keeps the text and marks the issues. */
+export function CodeBody({ source, blocked, issues, state, }) {
+    const seen = useRef(source);
+    if (source)
+        seen.current = source;
+    const apply = useCallback((text) => {
+        const current = agentDraft(state.workspace, state.focus);
+        if (!current) {
+            return { errors: [{ message: 'No agent is open.', line: 1, column: 1 }], spans: [] };
+        }
+        const read = readStudioSource(text, { ...current, toolSpecs: state.workspace.toolSpecs }, (agentId) => state.workspace.agents.find((agent) => agent.identity.agentId.trim() === agentId)?.key);
+        if (!read.ok)
+            return { errors: read.errors, spans: [] };
+        state.update((workspace) => withAgentDraft(workspace, state.focus, read.draft, read.registered));
+        return { errors: [], spans: read.spans };
+    }, [state]);
+    if (!seen.current) {
+        return (_jsx(PaneFailure, { title: "No code yet", description: `${blocked ?? ''} to generate the TypeScript.` }));
+    }
+    return (_jsx("div", { className: "studio-fill", children: _jsx(StudioCode, { text: source ?? seen.current, hold: source == null, issues: issues, onApply: apply }) }));
+}
+/**
+ * An open provider's definition. On a project it is edited here as in its editor; the studio's own,
+ * and one on an adapter the project made, only show.
+ */
+export function ProviderCode({ provider, issues, state, isEditable, }) {
+    const apply = useCallback((text) => {
+        const current = state.workspace.providers.find((each) => each.id === provider.id);
+        if (!current) {
+            return { errors: [{ message: 'No provider is open.', line: 1, column: 1 }], spans: [] };
+        }
+        const read = readProviderSource(text, current);
+        if (!read.ok)
+            return { errors: read.errors, spans: [] };
+        state.update((workspace) => withProvider(workspace, read.provider));
+        return { errors: [], spans: read.spans };
+    }, [state, provider.id]);
+    return (_jsx("div", { className: "studio-fill", children: _jsx(StudioCode, { text: providerSource(provider), hold: false, isReadOnly: !isEditable || definitionFactory(provider.definition) === undefined, issues: issues, onApply: apply }, provider.id) }));
+}

package/ui/studio-compare.d.ts

@@ -0,0 +1,80 @@
+import { type TraceFeed } from '@theoremjs/react/client';
+import { type TheoremChatHandle } from '@theoremjs/react/ui';
+import { type ReactNode, type Ref } from 'react';
+import { type StudioWorkspace } from '../mod.ts';
+import type { EditedAnswer, SaveRefusal } from '../server/save-wire.ts';
+import { type ProjectSession } from './lib/studio-project.ts';
+/**
+ * The load that runs a workspace's edits: asked for when there are edits, and again when they
+ * change. `answer` is the last one the server gave; `pending` while it is not for these edits yet.
+ * It waits while `hold` is set, so a reply that is streaming is not cut off by the next edit.
+ */
+export declare function useEditedLoad(project: ProjectSession, edits: StudioWorkspace | undefined, hold: boolean): {
+    answer: EditedAnswer | undefined;
+    pending: boolean;
+};
+/**
+ * The stamp of the last load of the edits that ran. A refused load leaves the one before it
+ * standing under the refusal, so the edited side keeps what it showed; with no edits, none.
+ */
+export declare function useLoadedStamp(answer: EditedAnswer | undefined): string | undefined;
+/** Whether the builder put the files' side away: the edits then run alone. */
+export declare function useSavedHidden(): boolean;
+/**
+ * Where the files' side stands in the row, with the line between it and the edits. Hiding it
+ * closes it toward its edge and showing it opens it again, on the motion the rest of the studio
+ * uses; it leaves the page once it has closed. It does not move when the page first opens.
+ */
+export declare function SavedSlot({ isShown, hasDivider, children, }: {
+    isShown: boolean;
+    /** Whether the edits sit beside it. */
+    hasDivider: boolean;
+    /** The side. With none there is nothing to close, and the slot is gone at once. */
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+/**
+ * The files' side: its run, and while the edits sit beside it, its title and the way to put it
+ * away.
+ */
+export declare function SavedSide({ isCompared, children, }: {
+    isCompared?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ProjectChatProps {
+    project: ProjectSession;
+    /** The id of the profile the page chats with, as its edits name it. */
+    profileId: string;
+    /** The workspace the preview runs, edits and all. Without one, the files alone are run. */
+    tested: StudioWorkspace | undefined;
+    note: () => void;
+    /** Where the files' side keeps its runs' traces. */
+    traces: TraceFeed;
+    trace?: boolean;
+    className?: string;
+    chatRef?: Ref<TheoremChatHandle>;
+    /** The value the page picked for each slot. */
+    slots?: Record<string, string>;
+    /** What the page tells the agent. */
+    context?: unknown;
+}
+/**
+ * The workspace when it holds edits the files do not: a changed setting, or an agent added or
+ * removed. Undefined when it is the files' own.
+ */
+export declare function unsavedEdits(tested: StudioWorkspace | undefined, profiles: readonly string[]): StudioWorkspace | undefined;
+/** The edited side: its run, why it is not running, or that it is loading. */
+export declare function EditedSide({ refused, isLoading, hasSaved, actions, children, }: {
+    refused: SaveRefusal | undefined;
+    isLoading: boolean;
+    /** The files hold this agent too, so their side can come back beside this one. */
+    hasSaved: boolean;
+    /** The ways out when the edits cannot run. */
+    actions?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A project's text or image profile, run by the studio's local server. While the builder has
+ * edits the files do not hold, one message is answered twice, side by side: by the files, and by
+ * the files with the edits laid over them.
+ */
+export declare function ProjectChat(props: ProjectChatProps): import("react").JSX.Element;

package/ui/studio-compare.js

@@ -0,0 +1,326 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { Divider } from '@astryxdesign/core/Divider';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from '@tabler/icons-react';
+import { createHttpTransport, createTraceFeed } from '@theoremjs/react/client';
+import { ChatComposerBar, InPlace, PaneFailure, PaneLoading, TheoremChat, } from '@theoremjs/react/ui';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { atStart } from "../mod.js";
+import { useActingAs } from "./lib/acting-as.js";
+import { tracedTransport } from "./lib/project-traces.js";
+import { noting } from "./lib/studio-activity.js";
+import { STUDIO_LABELS } from "./lib/studio-labels.js";
+import { editedProfileEndpoint, openEdited, projectProfileEndpoint, } from "./lib/studio-project.js";
+import { RefusalDetail } from "./refusal-detail.js";
+const SIDES = ['saved', 'edited'];
+/** Why the edits are not running, as the builder reads it. */
+const NOT_RUNNING = {
+    issues: 'Fix the issues in the editor to run your edits.',
+    load: 'The project did not start with your edits.',
+    differs: 'The studio cannot run these edits before they are saved.',
+    unanswered: 'The studio did not answer.',
+};
+/** A server that did not answer, as a refusal the pane can show. */
+function unreachable(saved) {
+    return (error) => ({
+        ok: false,
+        reason: 'unanswered',
+        detail: [error instanceof Error ? error.message : String(error)],
+        saved,
+    });
+}
+/**
+ * The load that runs a workspace's edits: asked for when there are edits, and again when they
+ * change. `answer` is the last one the server gave; `pending` while it is not for these edits yet.
+ * It waits while `hold` is set, so a reply that is streaming is not cut off by the next edit.
+ */
+export function useEditedLoad(project, edits, hold) {
+    const [held, setHeld] = useState();
+    useEffect(() => {
+        if (!edits || hold || held?.of === edits)
+            return;
+        let stale = false;
+        openEdited(project, edits)
+            .catch(unreachable(held?.answer.saved ?? project.profiles))
+            .then((answer) => {
+            if (!stale)
+                setHeld({ of: edits, answer });
+        });
+        return () => {
+            stale = true;
+        };
+    }, [project, edits, hold, held]);
+    if (!edits)
+        return { answer: undefined, pending: false };
+    return { answer: held?.answer, pending: held?.of !== edits };
+}
+/**
+ * The stamp of the last load of the edits that ran. A refused load leaves the one before it
+ * standing under the refusal, so the edited side keeps what it showed; with no edits, none.
+ */
+export function useLoadedStamp(answer) {
+    const [loaded, setLoaded] = useState();
+    const now = answer === undefined ? undefined : answer.ok ? answer.stamp : loaded;
+    if (now !== loaded)
+        setLoaded(now);
+    return now;
+}
+/**
+ * One message sent to both sides, and which of them still answers it. A side rests when its turn
+ * is done: the reply ended, and any question it stopped on was answered.
+ */
+function usePair() {
+    const chats = useRef({ saved: null, edited: null });
+    const [busy, setBusy] = useState([]);
+    const done = useCallback((side) => {
+        setBusy((sides) => sides.filter((other) => other !== side));
+    }, []);
+    const send = useCallback(async (text) => {
+        const sent = SIDES.filter((side) => chats.current[side]);
+        setBusy(sent);
+        const answers = sent.map(async (side) => {
+            // A side's send resolves once its reply is done, or at once when it could not take it.
+            const added = await chats.current[side]?.send(text).catch(() => null);
+            done(side);
+            return [side, added ?? null];
+        });
+        return new Map(await Promise.all(answers));
+    }, [done]);
+    const stop = useCallback(() => {
+        for (const side of SIDES)
+            chats.current[side]?.stop();
+    }, []);
+    const [refs] = useState(() => ({
+        saved: (handle) => {
+            chats.current.saved = handle;
+        },
+        edited: (handle) => {
+            chats.current.edited = handle;
+        },
+    }));
+    return useMemo(() => ({ busy, send, stop, refs, chats }), [busy, send, stop, refs]);
+}
+/** Whether the files' side is put away, for every comparison in this tab. */
+const savedSide = { isHidden: false, listeners: new Set() };
+function setSavedHidden(isHidden) {
+    savedSide.isHidden = isHidden;
+    for (const listener of savedSide.listeners)
+        listener();
+}
+function watchSavedSide(listener) {
+    savedSide.listeners.add(listener);
+    return () => {
+        savedSide.listeners.delete(listener);
+    };
+}
+/** Whether the builder put the files' side away: the edits then run alone. */
+export function useSavedHidden() {
+    return useSyncExternalStore(watchSavedSide, () => savedSide.isHidden, () => false);
+}
+/** One side of the comparison: what it runs, over its conversation. */
+function Pane({ title, startContent, children, }) {
+    return (_jsxs(VStack, { height: "100%", children: [title && (_jsxs(HStack, { paddingInline: 3, paddingBlock: 2, gap: 1, vAlign: "center", 
+                // As tall with the control as without, so the two titles sit on one line.
+                style: { minHeight: '2.75rem' }, children: [startContent, _jsx(Text, { type: "supporting", weight: "semibold", color: "secondary", children: title })] })), _jsx(StackItem, { size: "fill", children: children })] }));
+}
+/**
+ * Where the files' side stands in the row, with the line between it and the edits. Hiding it
+ * closes it toward its edge and showing it opens it again, on the motion the rest of the studio
+ * uses; it leaves the page once it has closed. It does not move when the page first opens.
+ */
+export function SavedSlot({ isShown, hasDivider, children, }) {
+    const [isMounted, setMounted] = useState(isShown);
+    const [hasMoved, setMoved] = useState(false);
+    const slot = useRef(null);
+    if (isShown && !isMounted)
+        setMounted(true);
+    if (isShown !== isMounted && !hasMoved)
+        setMoved(true);
+    useEffect(() => {
+        if (isShown || !slot.current)
+            return;
+        // It leaves once its own motion has run: at once where motion is reduced, and still on time
+        // in a tab that is not showing, where nothing reports a transition's end.
+        const seconds = Number.parseFloat(getComputedStyle(slot.current).transitionDuration) || 0;
+        const timer = setTimeout(() => {
+            setMounted(false);
+        }, seconds * 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [isShown]);
+    if (!children || !(isShown || isMounted))
+        return null;
+    return (_jsxs("div", { ref: slot, className: "studio-saved-slot", "data-moved": hasMoved ? '' : undefined, "data-closed": isShown ? undefined : '', "aria-hidden": isShown ? undefined : true, children: [_jsx("div", { className: "studio-saved-slot-side", children: children }), hasDivider && _jsx(Divider, { orientation: "vertical" })] }));
+}
+/**
+ * The files' side: its run, and while the edits sit beside it, its title and the way to put it
+ * away.
+ */
+export function SavedSide({ isCompared = true, children, }) {
+    return (_jsx(Pane, { title: isCompared ? 'Saved (your files)' : undefined, startContent: _jsx(IconButton, { label: "Hide saved", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconLayoutSidebarLeftCollapse, size: "sm" }), tooltip: "Hide saved: run your edits alone", onClick: () => {
+                setSavedHidden(true);
+            } }), children: children }));
+}
+function NotRunning({ refusal, actions }) {
+    return (_jsx(PaneFailure, { title: NOT_RUNNING[refusal.reason] ?? 'Your edits are not running.', actions: actions, children: _jsx(RefusalDetail, { refusal: refusal }) }));
+}
+/** The message both sides get, and the stop for both while either answers. */
+function SharedComposer({ handle, why, isBusy, onSend, onStop, }) {
+    const [text, setText] = useState('');
+    return (_jsxs(HStack, { gap: 2, vAlign: "end", padding: 3, children: [_jsx(StackItem, { size: "fill", children: _jsx(ChatComposerBar, { handle: handle, draftText: text, onDraftTextChange: setText, onSubmit: onSend, isDisabled: isBusy || why !== undefined, placeholder: why ?? 'Message both' }) }), isBusy && _jsx(Button, { label: "Stop", variant: "ghost", onClick: onStop })] }));
+}
+/** The agent as the files hold it: an edit may have renamed it, or made it another type. */
+function savedOf(tested, profileId) {
+    const agent = tested?.agents.find((held) => held.identity.agentId === profileId);
+    return agent && tested?.starts.agents[agent.key]?.identity;
+}
+/** The types a chat cannot talk to: the files' side of one of these has no conversation to show. */
+const NOT_A_CHAT = new Set(['decision', 'host', 'live']);
+/** Why a message cannot go to both sides now, when it cannot. */
+function whyNot(failed, isReady) {
+    if (failed)
+        return 'Your edits are not running';
+    return isReady ? undefined : 'Loading your edits';
+}
+/**
+ * Each side's latest conversation ref, so a side that comes back, or the edited side when its load
+ * is replaced, starts from what was said. Every load seals with the studio run's one key, so the
+ * edited side opens the files' side's ref and goes on from there on its own.
+ */
+function useConversations(isEditing) {
+    const conversations = useRef({});
+    if (!isEditing)
+        conversations.current.edited = undefined;
+    const [onChange] = useState(() => {
+        const change = (side) => (ref) => {
+            conversations.current[side] = ref;
+        };
+        return { saved: change('saved'), edited: change('edited') };
+    });
+    return { conversations, onChange };
+}
+/** Where each side sends: the files' profile, and the edited load's once there is one. */
+function useTransports(project, ids, stamp, { note, traces }) {
+    const { actingAs } = useActingAs();
+    const saved = useMemo(() => {
+        const endpoint = projectProfileEndpoint(project, ids.saved);
+        return noting(tracedTransport(createHttpTransport, endpoint, traces, actingAs), note);
+    }, [project, ids.saved, traces, actingAs, note]);
+    // One feed for the edited side, so a new load keeps the traces of the turns it starts from.
+    const [editedTraces] = useState(createTraceFeed);
+    const edited = useMemo(() => {
+        if (stamp === undefined)
+            return null;
+        const endpoint = editedProfileEndpoint(project, ids.edited);
+        return noting(tracedTransport(createHttpTransport, endpoint, editedTraces, actingAs), note);
+    }, [project, ids.edited, stamp, editedTraces, actingAs, note]);
+    return { saved, edited };
+}
+/**
+ * The workspace when it holds edits the files do not: a changed setting, or an agent added or
+ * removed. Undefined when it is the files' own.
+ */
+export function unsavedEdits(tested, profiles) {
+    if (!tested)
+        return undefined;
+    // An agent added here is at its own start, and still one the files do not hold.
+    const isFiles = atStart(tested) &&
+        tested.agents.length === profiles.length &&
+        tested.agents.every((agent) => profiles.includes(agent.identity.agentId));
+    return isFiles ? undefined : tested;
+}
+/** The edited side: its run, why it is not running, or that it is loading. */
+export function EditedSide({ refused, isLoading, hasSaved, actions, children, }) {
+    const isSavedHidden = useSavedHidden();
+    return (_jsxs(Pane, { title: "Edited (studio)", startContent: hasSaved &&
+            isSavedHidden && (_jsx(IconButton, { label: "Show saved", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconLayoutSidebarLeftExpand, size: "sm" }), tooltip: "Show saved: run your files beside your edits", onClick: () => {
+                setSavedHidden(false);
+            } })), children: [_jsx(InPlace, { view: refused ? _jsx(NotRunning, { refusal: refused, actions: actions }) : null, children: children }), isLoading && _jsx(PaneLoading, { label: "Loading your edits" })] }));
+}
+/** What the comparison shows now: which sides there are, and what each one runs. */
+function useComparison({ project, profileId, tested, note, traces }) {
+    const edits = useMemo(() => unsavedEdits(tested, project.profiles), [tested, project.profiles]);
+    const pair = usePair();
+    const isBusy = pair.busy.length > 0;
+    const { answer, pending } = useEditedLoad(project, edits, isBusy);
+    const saved = savedOf(tested, profileId);
+    const ids = useMemo(() => ({ saved: saved?.agentId ?? profileId, edited: profileId }), [saved?.agentId, profileId]);
+    const isEditing = edits !== undefined;
+    // A profile the edits made a chat is another type in the files, which a chat cannot talk to.
+    const chatsInFiles = !saved || !NOT_A_CHAT.has(saved.profileType);
+    const inFiles = !isEditing || (chatsInFiles && (answer?.saved ?? project.profiles).includes(ids.saved));
+    const { conversations, onChange } = useConversations(isEditing);
+    const stamp = useLoadedStamp(answer);
+    const transports = useTransports(project, ids, stamp, { note, traces });
+    const refused = answer && !answer.ok && !pending ? answer : undefined;
+    return {
+        pair,
+        isBusy,
+        isEditing,
+        inFiles,
+        /** Both sides are there, so one message goes to both. */
+        isShared: isEditing && inFiles,
+        conversations,
+        onChange,
+        transports,
+        refused,
+        isReady: !pending && !refused && transports.edited !== null,
+    };
+}
+/**
+ * The chat the page holds: a message goes to both sides while both are there and can take it, and
+ * to the one side otherwise. It answers with what the edits said.
+ */
+function useChatHandle(chatRef, pair, only, canSendBoth) {
+    const { send, stop, chats } = pair;
+    const sendBoth = useCallback(async (text) => (await send(text)).get('edited') ?? null, [send]);
+    useImperativeHandle(chatRef, () => ({
+        send: (text) => {
+            if (only)
+                return chats.current[only]?.send(text) ?? Promise.resolve(null);
+            return canSendBoth ? sendBoth(text) : Promise.resolve(null);
+        },
+        stop,
+    }), [only, canSendBoth, sendBoth, stop, chats]);
+    return sendBoth;
+}
+/**
+ * A project's text or image profile, run by the studio's local server. While the builder has
+ * edits the files do not hold, one message is answered twice, side by side: by the files, and by
+ * the files with the edits laid over them.
+ */
+export function ProjectChat(props) {
+    const { profileId, trace, className, chatRef, slots, context } = props;
+    const view = useComparison(props);
+    const { pair, isBusy, transports, refused, isReady } = view;
+    const isSavedHidden = useSavedHidden();
+    const showsSaved = view.inFiles && !(view.isEditing && isSavedHidden);
+    const isShared = view.isShared && showsSaved;
+    const only = isShared ? undefined : showsSaved ? 'saved' : 'edited';
+    const sendBoth = useChatHandle(chatRef, pair, only, !isBusy && isReady);
+    const common = {
+        detectCodeLanguage: true,
+        labels: STUDIO_LABELS,
+        trace,
+        className,
+        slots,
+        context,
+        composer: !isShared,
+    };
+    return (_jsxs(VStack, { height: "100%", children: [_jsx(StackItem, { size: "fill", children: _jsxs(HStack, { height: "100%", children: [_jsx(SavedSlot, { isShown: showsSaved, hasDivider: view.isShared, children: view.inFiles && (_jsx(SavedSide, { isCompared: view.isEditing, children: _jsx(TheoremChat, { ...common, transport: transports.saved, 
+                                    // A side that comes back starts from what it had said.
+                                    conversation: view.conversations.current.saved, onConversationChange: view.onChange.saved, chatRef: pair.refs.saved }) })) }), view.isEditing && (_jsx("div", { className: "studio-edited-slot", children: _jsx(EditedSide, { refused: refused, isLoading: !transports.edited && !refused, hasSaved: view.inFiles, children: transports.edited && (_jsx(TheoremChat, { ...common, 
+                                    // A new load is a new transport: the chat reads it in place and keeps its transcript.
+                                    transport: transports.edited, conversation: view.conversations.current.edited ?? view.conversations.current.saved, onConversationChange: view.onChange.edited, 
+                                    // Under a refusal nothing reaches it: the edits it ran are not loaded.
+                                    chatRef: refused ? undefined : pair.refs.edited })) }) }, "edited"))] }) }), isShared && (_jsx(SharedComposer, { handle: profileId, why: whyNot(refused !== undefined, isReady), isBusy: isBusy, onSend: (text) => {
+                    void sendBoth(text);
+                }, onStop: pair.stop }))] }));
+}