@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio-runner.d.ts

@@ -0,0 +1,45 @@
+import { TheoremChat } from '@theoremjs/react/ui';
+import { type ComponentProps } from 'react';
+import { type StudioBrowserRuntime } from '../browser.ts';
+import { type StudioConnectionMode, type StudioRunPayload, type StudioWorkspace } from '../mod.ts';
+export interface StudioRunnerProps {
+    payload: StudioRunPayload;
+    mode: StudioConnectionMode;
+    runtime: StudioBrowserRuntime | null;
+    trace?: boolean;
+    className?: string;
+    /** The run page is already the shell. A decision or host sits in it, rather than on its own ground. */
+    flush?: boolean;
+    /** A decision or host puts the request on the left and the response on the right. */
+    columns?: boolean;
+    /** Called on each request the conversation sends: a turn, call, decision, or live session. */
+    onActivity?: () => void;
+    /**
+     * The ref of a chat conversation to resume, as `onConversationChange` reported it (text and
+     * image agents run in the page). A project's chat is not resumed: its key is the run's.
+     */
+    conversation?: ChatProps['conversation'];
+    /** The conversation under `conversation` as the server showed it, drawn at once. */
+    conversationView?: ChatProps['conversationView'];
+    /** The text a chat's composer starts with. */
+    initialText?: ChatProps['initialText'];
+    onConversationChange?: ChatProps['onConversationChange'];
+    chatRef?: ChatProps['chatRef'];
+    /** The value the page picked for each slot, for a chat's turns and a call's start. */
+    slots?: ChatProps['slots'];
+    /** What the page tells the agent. */
+    context?: ChatProps['context'];
+    /**
+     * The workspace the payload was compiled from, when the page edits one. A project's chat then
+     * answers twice while it holds edits the files do not: as the files, and as the edits.
+     */
+    tested?: StudioWorkspace;
+}
+/**
+ * The builder preview and existing run page select transports under the same runner UI.
+ *
+ * A runner is one conversation. The chat keeps its transcript when an edit recompiles the draft,
+ * so its trace feed outlives each transport too; remount the runner (a new `key`) to start over.
+ */
+export declare function StudioRunner({ payload, mode, runtime, trace, className, flush, columns, onActivity, conversation, conversationView, initialText, onConversationChange, chatRef, slots, context, tested, }: StudioRunnerProps): import("react").JSX.Element;
+export type ChatProps = ComponentProps<typeof TheoremChat>;

package/ui/studio-runner.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { Token } from '@astryxdesign/core/Token';
+import { IconKey } from '@tabler/icons-react';
+import { createDecisionTransport, createEmbeddingTransport, createHostTransport, createHttpTransport, createTraceFeed, } from '@theoremjs/react/client';
+import { PaneLoading, PaneState, TheoremChat, useLabels } from '@theoremjs/react/ui';
+import { lazy, Suspense, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createBrowserStudioTransport } from "../browser.js";
+import { compileWorkspace, createStudioTransport, ON_OWN_KEYS, studioInterface, studioPageTools, workspaceRunAgent, } 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 { pageConversationKey } from "./lib/studio-conversation.js";
+import { STUDIO_LABELS } from "./lib/studio-labels.js";
+import { editedProfileEndpoint, projectProfileEndpoint, useProject, } from "./lib/studio-project.js";
+import { warmWhenIdle } from "./lib/when-idle.js";
+import { EditedSide, ProjectChat, SavedSide, SavedSlot, unsavedEdits, useEditedLoad, useLoadedStamp, useSavedHidden, } from "./studio-compare.js";
+import { ChooseConflictsContext } from "./studio-conflicts.js";
+import { clearRemoves, useProjectSave } from "./studio-save.js";
+// Each type that is not a chat loads when an agent of it first runs, or once the page is idle.
+const decisionRun = () => import("./studio-decision.js");
+const embeddingRun = () => import("./studio-embedding.js");
+const hostRun = () => import("./studio-host-console.js");
+const liveRun = () => import("./studio-live.js");
+const StudioDecision = lazy(() => decisionRun().then((run) => ({ default: run.StudioDecision })));
+const DecisionView = lazy(() => decisionRun().then((run) => ({ default: run.DecisionView })));
+const StudioEmbedding = lazy(() => embeddingRun().then((run) => ({ default: run.StudioEmbedding })));
+const EmbeddingView = lazy(() => embeddingRun().then((run) => ({ default: run.EmbeddingView })));
+const StudioHostConsole = lazy(() => hostRun().then((run) => ({ default: run.StudioHostConsole })));
+const HostView = lazy(() => hostRun().then((run) => ({ default: run.HostView })));
+const StudioLive = lazy(() => liveRun().then((run) => ({ default: run.StudioLive })));
+const ProjectLive = lazy(() => liveRun().then((run) => ({ default: run.ProjectLive })));
+/** While a type's runner loads: blank, then the chat's own loading pane if it takes a while. */
+function RunLoading() {
+    const t = useLabels();
+    return _jsx(PaneLoading, { label: t('@theorem.chat.loading') });
+}
+/**
+ * The builder preview and existing run page select transports under the same runner UI.
+ *
+ * A runner is one conversation. The chat keeps its transcript when an edit recompiles the draft,
+ * so its trace feed outlives each transport too; remount the runner (a new `key`) to start over.
+ */
+export function StudioRunner({ payload, mode, runtime, trace, className, flush, columns, onActivity, conversation, conversationView, initialText, onConversationChange, chatRef, slots, context, tested, }) {
+    const [traces] = useState(createTraceFeed);
+    const activity = useRef(onActivity);
+    activity.current = onActivity;
+    const [note] = useState(() => () => activity.current?.());
+    const project = useProject();
+    useEffect(() => {
+        warmWhenIdle(decisionRun, embeddingRun, hostRun, liveRun);
+    }, []);
+    return (_jsx(Suspense, { fallback: _jsx(RunLoading, {}), children: _jsx(Run, { payload: payload, mode: mode, runtime: runtime, trace: trace, className: className, flush: flush, columns: columns, conversation: conversation, conversationView: conversationView, initialText: initialText, onConversationChange: onConversationChange, chatRef: chatRef, slots: slots, context: context, tested: tested, project: project, traces: traces, note: note }) }));
+}
+function Run({ payload, mode, runtime, trace, className, flush, columns, conversation, conversationView, initialText, onConversationChange, chatRef, slots, context, tested, project, traces, note, }) {
+    if (project)
+        return (_jsx(ProjectRun, { project: project, payload: payload, traces: traces, trace: trace, className: className, flush: flush, columns: columns, note: note, chatRef: chatRef, slots: slots, context: context, tested: tested }));
+    if (mode !== 'demo' && !runtime)
+        return (_jsx(PaneState, { icon: _jsx(Icon, { icon: IconKey, size: "lg", color: "secondary" }), title: "Connect to run", description: "Add your provider keys or local endpoint under Keys." }));
+    if (payload.profile.type === 'decision')
+        return (_jsx(StudioDecision, { payload: payload, runtime: runtime, traces: traces, trace: trace, className: className, onActivity: note, flush: flush, columns: columns }));
+    if (payload.profile.type === 'host')
+        return (_jsx(StudioHostConsole, { payload: payload, runtime: runtime, traces: traces, trace: trace, className: className, onActivity: note, flush: flush, columns: columns }));
+    if (payload.profile.type === 'embedding')
+        return (_jsx(StudioEmbedding, { payload: payload, runtime: runtime, traces: traces, trace: trace, className: className, onActivity: note, flush: flush, columns: columns }));
+    return (_jsx(TurnRun, { payload: payload, runtime: runtime, traces: traces, trace: trace, className: className, note: note, conversation: conversation, conversationView: conversationView, initialText: initialText, onConversationChange: onConversationChange, chatRef: chatRef, slots: slots, context: context }));
+}
+/**
+ * The two ways out of a run that waits on a Save: write the edits, or drop them. Dropping an
+ * agent the files never held removes it.
+ */
+function UnsavedActions({ agentId, isNew }) {
+    const save = useProjectSave();
+    const choose = useContext(ChooseConflictsContext);
+    if (!save)
+        return null;
+    return (_jsxs(_Fragment, { children: [choose ? (_jsx(Token, { label: "Choose", color: "orange", description: "Choose between studio edits and source code, then save", onClick: choose })) : (_jsx(Token, { label: "Save", color: "blue", description: save.review ? 'Review the diff, then save' : 'Fix the issues in the editor first', onClick: save.review })), _jsx(Button, { label: isNew ? 'Remove agent' : 'Clear changes', variant: "ghost", size: "sm", onClick: () => {
+                    save.clear(agentId);
+                } })] }));
+}
+/** The types that are not a conversation: a chat cannot sit beside one of these. */
+const NOT_A_CHAT = new Set(['decision', 'host', 'live']);
+const isChat = (payload) => !NOT_A_CHAT.has(payload.profile.type);
+/**
+ * The agent as the files hold it, compiled from where the workspace started: an edit may have
+ * renamed it or made it another type. Undefined for an agent the files do not hold.
+ */
+function savedPayload(edits, payload, profiles) {
+    const inFiles = (agent) => profiles.includes(agent.identity.agentId.trim());
+    const key = edits.agents.find((agent) => agent.identity.agentId.trim() === payload.agentId)?.key;
+    const start = key === undefined ? undefined : edits.starts.agents[key];
+    if (!start || !inFiles(start))
+        return undefined;
+    const agents = Object.values(edits.starts.agents).filter(inFiles);
+    const here = new Set(agents.map((agent) => agent.key));
+    // A tool that ran an agent the edits removed has no agent here to run.
+    const toolSpecs = Object.values(edits.starts.tools).filter((tool) => tool.toolType !== 'agent' || here.has(tool.agentKey ?? ''));
+    const held = new Set(toolSpecs.map((tool) => tool.key));
+    const files = {
+        ...edits,
+        agents: agents.map((agent) => ({
+            ...agent,
+            tools: { ...agent.tools, allow: agent.tools.allow.filter((toolKey) => held.has(toolKey)) },
+        })),
+        toolSpecs,
+    };
+    // The files run in the project, on its own setup.
+    const compiled = compileWorkspace(files, ON_OWN_KEYS);
+    const run = compiled.ok ? workspaceRunAgent(compiled, start.identity.agentId.trim()) : undefined;
+    if (!run)
+        return undefined;
+    const { agentId, profile, customTools, structured, questions, dependencies } = run;
+    return { ...payload, agentId, profile, customTools, structured, questions, dependencies };
+}
+/** One profile on one endpoint, as its type runs: a chat, a decision, an embedding, a tool console, or a call. */
+function SideRun({ payload, endpoint, load, traces, note, trace, className, flush, columns, chatRef, slots, context, }) {
+    const { type } = payload.profile;
+    // One per load, so each transport below is made again when the edits load again.
+    const at = useMemo(() => ({ endpoint, load }), [endpoint, load]);
+    const pageTools = useMemo(() => studioPageTools(payload), [payload]);
+    const chats = isChat(payload);
+    const { actingAs } = useActingAs();
+    const chat = useMemo(() => chats
+        ? noting(tracedTransport(createHttpTransport, at.endpoint, traces, actingAs), note)
+        : null, [chats, at, traces, actingAs, note]);
+    const host = useMemo(() => type === 'host'
+        ? noting(tracedTransport(createHostTransport, at.endpoint, traces, actingAs), note)
+        : null, [type, at, traces, actingAs, note]);
+    const decision = useMemo(() => type === 'decision'
+        ? noting({ ...createDecisionTransport({ endpoint: at.endpoint }), traces }, note)
+        : null, [type, at, traces, note]);
+    const embedding = useMemo(() => type === 'embedding'
+        ? noting({ ...createEmbeddingTransport({ endpoint: at.endpoint }), traces }, note)
+        : null, [type, at, traces, note]);
+    if (chat)
+        return (_jsx(TheoremChat, { detectCodeLanguage: true, labels: STUDIO_LABELS, transport: chat, pageTools: pageTools, trace: trace, className: className, chatRef: chatRef, slots: slots, context: context }));
+    const view = { payload, trace, flush, columns, className };
+    if (decision)
+        return _jsx(DecisionView, { ...view, transport: decision });
+    if (embedding)
+        return _jsx(EmbeddingView, { ...view, transport: embedding });
+    if (host)
+        return _jsx(HostView, { ...view, transport: host });
+    return (_jsx(ProjectLive, { payload: payload, endpoint: endpoint, note: note, trace: trace, slots: slots, context: context }));
+}
+/**
+ * A project's profile with edits the files do not hold, where either side is not a chat: the
+ * files' run and the edits' run side by side, each its own. The files' side can be put away.
+ */
+function ProjectSides({ project, payload, saved, edits, traces, chatRef, ...shared }) {
+    const { answer, pending } = useEditedLoad(project, edits, false);
+    const stamp = useLoadedStamp(answer);
+    const refused = answer && !answer.ok && !pending ? answer : undefined;
+    const isSavedHidden = useSavedHidden();
+    // The edited side's own feed, so its traces are not the files' side's.
+    const [editedTraces] = useState(createTraceFeed);
+    return (_jsxs(HStack, { height: "100%", children: [_jsx(SavedSlot, { isShown: !isSavedHidden, hasDivider: true, children: saved && (_jsx(SavedSide, { children: _jsx(SideRun, { ...shared, payload: saved, endpoint: projectProfileEndpoint(project, saved.agentId), traces: traces }) })) }), _jsx("div", { className: "studio-edited-slot", children: _jsx(EditedSide, { refused: refused, isLoading: stamp === undefined && !refused, hasSaved: saved !== undefined, actions: _jsx(UnsavedActions, { agentId: payload.agentId, isNew: clearRemoves(edits, payload.agentId, project.profiles) }), children: stamp !== undefined && (_jsx(SideRun, { ...shared, load: stamp, payload: payload, endpoint: editedProfileEndpoint(project, payload.agentId), traces: editedTraces, chatRef: chatRef })) }) }, "edited")] }));
+}
+/**
+ * A project's profile, run by the studio's local server: the project's own tools and models.
+ * While the builder has edits the files do not hold, it runs twice, side by side: as the files,
+ * and as the files with the edits laid over them. Two chats share one message.
+ */
+function ProjectRun({ project, tested, ...run }) {
+    const { payload } = run;
+    const edits = useMemo(() => unsavedEdits(tested, project.profiles), [tested, project.profiles]);
+    const saved = useMemo(() => (edits ? savedPayload(edits, payload, project.profiles) : undefined), [edits, payload, project.profiles]);
+    if (isChat(payload) && (!saved || isChat(saved)))
+        return (_jsx(ProjectChat, { project: project, profileId: payload.agentId, tested: tested, note: run.note, traces: run.traces, trace: run.trace, className: run.className, chatRef: run.chatRef, slots: run.slots, context: run.context }));
+    if (!edits)
+        return _jsx(SideRun, { ...run, endpoint: projectProfileEndpoint(project, payload.agentId) });
+    return _jsx(ProjectSides, { ...run, project: project, saved: saved, edits: edits });
+}
+function TurnRun({ payload, runtime, traces, trace, className, note, conversation, conversationView, initialText, onConversationChange, chatRef, slots, context, }) {
+    const iface = useMemo(() => studioInterface(payload), [payload]);
+    /** The studio's page answers each page tool with the tool's stub. */
+    const pageTools = useMemo(() => studioPageTools(payload), [payload]);
+    const transport = useMemo(() => noting(runtime
+        ? createBrowserStudioTransport(payload, runtime, {
+            conversationKey: pageConversationKey(),
+            traces,
+        })
+        : createStudioTransport(payload, { traces }), note), [payload, runtime, traces, note]);
+    return iface.type === 'live' ? (_jsx(StudioLive, { payload: payload, runtime: runtime, note: note, trace: trace, slots: slots, context: context })) : (_jsx(TheoremChat, { detectCodeLanguage: true, labels: STUDIO_LABELS, transport: transport, trace: trace, className: className, conversation: conversation, conversationView: conversationView, initialText: initialText, onConversationChange: onConversationChange, chatRef: chatRef, slots: slots, context: context, pageTools: pageTools }));
+}

package/ui/studio-save.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { type StudioWorkspace } from '../mod.ts';
+import { type ProjectSession } from './lib/studio-project.ts';
+export type Update = (change: (current: StudioWorkspace) => StudioWorkspace) => void;
+/** Save, for whatever on the page offers it. */
+export interface ProjectSaveActions {
+    /** Whether the studio holds edits the project's files do not. */
+    unsaved: boolean;
+    /** Opens the review of the lines a Save writes. Absent while Save cannot start. */
+    review: (() => void) | undefined;
+    /** Puts one profile back as the files hold it. One the files do not hold leaves the studio. */
+    clear: (agentId: string) => void;
+    /**
+     * Asks once, then drops every unsaved edit and opens the files as they are. Absent while the
+     * studio holds no edits.
+     */
+    discard: (() => void) | undefined;
+}
+/** Save for the open project, or null on a page that has none. */
+export declare function useProjectSave(): ProjectSaveActions | null;
+/**
+ * Whether clearing a profile removes it: it was added here, the files do not hold it, and it has
+ * no changes of its own left to drop.
+ */
+export declare function clearRemoves(workspace: StudioWorkspace, agentId: string, profiles: readonly string[]): boolean;
+/**
+ * Save for a project: the review of the lines that change before anything is written, and the
+ * write. Whatever it wraps opens that review through `useProjectSave`.
+ */
+export declare function ProjectSave({ project, workspace, update, onFilesChanged, onDiscard, blocked, children, }: {
+    project: ProjectSession;
+    workspace: StudioWorkspace;
+    update: Update;
+    /** Called once a Save or an undo has changed the project's files. */
+    onFilesChanged: () => void;
+    /** Drops every unsaved edit and opens the files as they are. The builder has said yes. */
+    onDiscard: () => void;
+    /** Whether Save cannot start: the editor has issues. */
+    blocked: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A project's tokens in the editor's toolbar: Save while the studio holds edits the files do not,
+ * and what the studio cannot run. Nothing while there is neither.
+ */
+export declare function ProjectTokens({ project, unloaded, }: {
+    project: ProjectSession;
+    unloaded?: string;
+}): import("react").JSX.Element;

package/ui/studio-save.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertDialog } from '@astryxdesign/core/AlertDialog';
+import { Banner } from '@astryxdesign/core/Banner';
+import { Button } from '@astryxdesign/core/Button';
+import { CodeBlock } from '@astryxdesign/core/CodeBlock';
+import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
+import { HoverCard } from '@astryxdesign/core/HoverCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
+import { ScrollableArea } from '@astryxdesign/core/ScrollableArea';
+import { Tab, TabList } from '@astryxdesign/core/TabList';
+import { Text } from '@astryxdesign/core/Text';
+import { useToast } from '@astryxdesign/core/Toast';
+import { Token } from '@astryxdesign/core/Token';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconFiles, IconListDetails } from '@tabler/icons-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { atStart, removeAgent, resetAgent, startedHere, } from "../mod.js";
+import { DiffBlock } from "./diff-block.js";
+import { reviewSave, undoSave, writeSave } from "./lib/studio-project.js";
+import { RefusalDetail } from "./refusal-detail.js";
+/** Wide enough for a reason's sentence to read in a few lines. */
+const ALERTS_WIDTH = 320;
+/** The most of the alerts a hover shows before it scrolls: a project can have one for every agent. */
+const ALERTS_MAX_HEIGHT = 'min(24rem, 60vh)';
+const DIALOG_WIDTH = 720;
+/** How long the saved line stays, in milliseconds: long enough to reach Undo. */
+const UNDO_WINDOW = 15_000;
+/** Why nothing was written, as the builder reads it. */
+const REFUSED = {
+    issues: 'Fix the issues in the editor first.',
+    stale: 'Your files changed after this review was made. Close it and review again.',
+    unwritable: 'Some changes cannot be written to your files.',
+    write: 'A file could not be written, so your files were put back.',
+    check: 'The project did not type-check with these changes, so your files were put back.',
+    load: 'The project did not start with these changes, so your files were put back.',
+    differs: 'The files did not load as what you tested, so they were put back.',
+    nothing: 'There is no save to undo.',
+    unanswered: 'The studio did not answer, so it is not known whether your files changed. Check them in your editor.',
+};
+/** A server that did not answer, as a refusal the dialog can show. */
+function unreachable(error) {
+    return {
+        ok: false,
+        reason: 'unanswered',
+        detail: [error instanceof Error ? error.message : String(error)],
+    };
+}
+/** Where a change is set, as `file:line`. */
+function place(change) {
+    if (!change.file)
+        return 'your files';
+    return change.line ? `${change.file}:${String(change.line)}` : change.file;
+}
+/** Why a change inside a constant is not written: who else reads the constant, and the way through. */
+function constantReason(change) {
+    const name = change.name ?? 'a constant';
+    const also = change.readByCode ? ' Other code reads it too.' : '';
+    if (!change.sharedWith?.length)
+        return `Set by ${name} in ${place(change)}. Change it there.${also}`;
+    const others = change.sharedWith.join(', ');
+    const hold = change.sharedWith.length > 1 ? 'do' : 'does';
+    return `${name} in ${place(change)} is shared with ${others}, which ${hold} not hold this change. Make it on each, or change it there.${also}`;
+}
+/** The values Save writes that other code reads too, each once: `resultSchema in result.ts:3`. */
+function readElsewhere(changes) {
+    const held = changes
+        .filter((change) => change.status === 'written' && change.readByCode)
+        .map((change) => `${change.name ? `${change.name} in ` : ''}${place(change)}`);
+    return [...new Set(held)];
+}
+/** Why one change is not written, and what the builder does about it. */
+function reason(change) {
+    switch (change.status) {
+        case 'constant':
+            return constantReason(change);
+        case 'code':
+            return `Set in code at ${place(change)}. Change it there.`;
+        case 'changed':
+            return `${place(change)} changed after the studio opened it. Reload the studio.`;
+        case 'unused':
+            return 'No agent allows this tool yet. Allow it on an agent, or remove it.';
+        case 'taken':
+            return `A file is already at ${place(change)}. Rename the ${change.kind}, or move that file.`;
+        case 'owed':
+            return 'This agent checks each item of a list with code the studio does not hold. Add the agent in your code.';
+        case 'setup':
+            return `The studio cannot tell where ${place(change)} would register a new ${change.kind}. Add it in your code.`;
+        case 'removed':
+            return change.file
+                ? `The studio cannot tell how ${place(change)} registers this ${change.kind}. Remove it in your code.`
+                : `The studio could not find where your files register this ${change.kind}. Remove it in your code.`;
+        default:
+            return 'The studio could not find where your files set this.';
+    }
+}
+/** One run of changed lines: the lines taken out marked `-`, the lines put in marked `+`. */
+function HunkBlock({ file, hunk }) {
+    const signed = (sign) => (text) => ({ sign, text });
+    return (_jsx(DiffBlock, { title: file.created || file.removed
+            ? `${fileNote(file)} · ${file.file}`
+            : `${file.file}:${String(hunk.line)}`, start: hunk.line - hunk.lead.length, lines: [
+            ...hunk.lead.map(signed(' ')),
+            ...hunk.removed.map(signed('-')),
+            ...hunk.added.map(signed('+')),
+            ...hunk.trail.map(signed(' ')),
+        ] }));
+}
+/** What happens to a file: it is new, it goes, or how many places in it change. */
+function fileNote(file) {
+    if (file.created)
+        return 'New file';
+    if (file.removed)
+        return 'Removed file';
+    return file.hunks.length === 1 ? '1 change' : `${String(file.hunks.length)} changes`;
+}
+function FileHunks({ file }) {
+    return (_jsx(VStack, { gap: 3, children: file.hunks.map((hunk) => (_jsx(HunkBlock, { file: file, hunk: hunk }, hunk.line))) }));
+}
+/** The changes Save cannot write, each with what the builder does about it. */
+function BlockedChanges({ changes }) {
+    if (!changes.length)
+        return null;
+    return (_jsxs(VStack, { gap: 4, children: [_jsx(Banner, { status: "warning", title: "Save writes every change or none, so your files hold exactly what you tested.", description: "Reset the changes below in the studio, or make them in your code." }), changes.map((change) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: change.setting ? `${change.of} · ${change.setting}` : change.of }), _jsx(Text, { type: "supporting", color: "secondary", children: reason(change) })] }, `${change.kind}:${change.of}:${change.setting}`)))] }));
+}
+/** The button that flips the review's view: it names the view it goes to. */
+const VIEW_FLIP = {
+    all: { label: 'By file', icon: IconFiles, tooltip: 'Show one file at a time', next: 'file' },
+    file: {
+        label: 'All changes',
+        icon: IconListDetails,
+        tooltip: 'Show every change in one scroll',
+        next: 'all',
+    },
+};
+/**
+ * The lines Save changes. Down one scroll, each file's name stays at the top while its changes
+ * pass. By file, a tab for each file stays there and shows that file alone.
+ */
+function ReviewBody({ review, view }) {
+    const [picked, setPicked] = useState();
+    const { files } = review;
+    const blocked = review.changes.filter((change) => change.status !== 'written');
+    const elsewhere = readElsewhere(review.changes);
+    const shown = files.find((file) => file.file === picked) ?? files[0];
+    // One file reads the same either way.
+    const byFile = view === 'file' && files.length > 1;
+    return (_jsxs(_Fragment, { children: [review.changes.length === 0 && (_jsx(Text, { color: "secondary", children: "Nothing here changes what your files set." })), _jsx(BlockedChanges, { changes: blocked }), elsewhere.length > 0 && (_jsx(Banner, { status: "info", title: "Other code in your project reads what this changes.", description: `${elsewhere.join(', ')}. That code runs on the new value once you save.` })), byFile
+                ? shown && (_jsxs(VStack, { gap: 2, children: [_jsx("div", { className: "save-file", children: _jsx(TabList, { value: shown.file, size: "sm", onChange: setPicked, children: files.map((file) => (_jsx(Tab, { value: file.file, label: file.file }, file.file))) }) }), _jsx(FileHunks, { file: shown })] }))
+                : files.map((file) => (_jsxs(VStack, { gap: 2, children: [_jsx("div", { className: "save-file", children: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Text, { weight: "semibold", children: file.file }), _jsx(Text, { type: "supporting", color: "secondary", children: fileNote(file) })] }) }), _jsx(FileHunks, { file: file })] }, file.file)))] }));
+}
+function RefusalBody({ refusal }) {
+    return (_jsxs(VStack, { gap: 3, children: [_jsx(Banner, { status: "error", title: REFUSED[refusal.reason] }), refusal.kept?.length ? (_jsx(Banner, { status: "warning", title: `Left as they are now, because they changed while Save checked them: ${refusal.kept.join(', ')}` })) : null, _jsx(RefusalDetail, { refusal: refusal })] }));
+}
+/**
+ * What the studio cannot run: files that stopped loading, and the profiles a project registers
+ * that it cannot run. A count that shows each one's reason on hover. Nothing while there are none.
+ */
+function ProjectProblems({ project, unloaded }) {
+    const { problems, modelProblems, differences, unheld, unregistered } = project;
+    const count = problems.length +
+        modelProblems.length +
+        differences.length +
+        (unheld.length ? 1 : 0) +
+        (unregistered.length ? 1 : 0) +
+        (unloaded === undefined ? 0 : 1);
+    if (!count)
+        return null;
+    return (_jsx(HoverCard, { label: "What the studio cannot run or shows differently", touchTrigger: "tap", content: _jsx(ScrollableArea, { label: "What the studio cannot run or shows differently", width: ALERTS_WIDTH, style: { maxHeight: ALERTS_MAX_HEIGHT }, children: _jsxs(VStack, { gap: 3, children: [unloaded !== undefined && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot load your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: "It runs them as they last loaded, until they load again." }), _jsx(CodeBlock, { code: unloaded.trim(), size: "sm", isWrapped: true, maxHeight: 240 })] })), problems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio cannot run ${problem.profile}.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, problem.profile))), modelProblems.map((problem) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `As your files set it, ${problem.profile}'s model '${problem.model}' cannot run.` }), _jsx(Text, { type: "supporting", color: "secondary", children: problem.message })] }, `${problem.profile}:${problem.model}`))), unregistered.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "Your project did not register everything its files define." }), _jsx(Text, { type: "supporting", color: "secondary", children: `Not loaded, so not shown: ${unregistered.map((each) => each.name).join(', ')}. The studio shows what your project registers when it starts.` })] })), unheld.length > 0 && (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: "The studio cannot check what it shows against your files." }), _jsx(Text, { type: "supporting", color: "secondary", children: `A run and Save still use your files. ${unheld.join(' ')}` })] })), differences.map((difference) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "semibold", children: `The studio shows ${difference.of} differently from your files.` }), _jsx(Text, { type: "supporting", color: "secondary", children: `A run and Save still use your files for: ${difference.settings.join(', ')}.` })] }, `${difference.kind}:${difference.of}`)))] }) }), children: _jsx(Token, { label: count === 1 ? '1 alert' : `${String(count)} alerts`, color: "orange" }) }));
+}
+const ProjectSaveContext = createContext(null);
+/** Save for the open project, or null on a page that has none. */
+export function useProjectSave() {
+    return useContext(ProjectSaveContext);
+}
+/**
+ * Whether clearing a profile removes it: it was added here, the files do not hold it, and it has
+ * no changes of its own left to drop.
+ */
+export function clearRemoves(workspace, agentId, profiles) {
+    const agent = workspace.agents.find((each) => each.identity.agentId === agentId);
+    const start = agent && workspace.starts.agents[agent.key];
+    if (!agent || !start || profiles.includes(start.identity.agentId))
+        return false;
+    return resetAgent(workspace, agent.key) === workspace;
+}
+/** One profile as the files hold it: back to its start, or gone when it was added here. */
+function clearProfile(workspace, agentId, profiles) {
+    const agent = workspace.agents.find((each) => each.identity.agentId === agentId);
+    if (!agent)
+        return workspace;
+    return clearRemoves(workspace, agentId, profiles)
+        ? removeAgent(workspace, agent.key)
+        : resetAgent(workspace, agent.key);
+}
+/**
+ * Save for a project: the review of the lines that change before anything is written, and the
+ * write. Whatever it wraps opens that review through `useProjectSave`.
+ */
+export function ProjectSave({ project, workspace, update, onFilesChanged, onDiscard, blocked, children, }) {
+    const toast = useToast();
+    const [step, setStep] = useState({ at: 'closed' });
+    const [view, setView] = useState('all');
+    const [asking, setAsking] = useState(false);
+    // An agent or provider added here is at its own start, and still one the files do not hold.
+    // One removed here has no start left, and is still one the files hold.
+    const clean = useMemo(() => atStart(workspace) &&
+        workspace.agents.length === project.profiles.length &&
+        workspace.agents.every((agent) => project.profiles.includes(agent.identity.agentId)) &&
+        workspace.providers.length === project.providers.length &&
+        workspace.providers.every((provider) => project.providers.includes(provider.id)), [workspace, project.profiles, project.providers]);
+    // The review reads the workspace as it is when asked for, so a keystroke does not remake Save.
+    const held = useRef({ project, workspace });
+    useEffect(() => {
+        held.current = { project, workspace };
+    });
+    const open = useCallback(() => {
+        setStep({ at: 'reading' });
+        reviewSave(held.current.project, held.current.workspace)
+            .catch(unreachable)
+            .then((answer) => {
+            setStep(answer.ok
+                ? { at: 'review', review: answer, writing: false }
+                : { at: 'refused', refusal: answer });
+        });
+    }, []);
+    const clear = useCallback((agentId) => {
+        update((current) => clearProfile(current, agentId, held.current.project.profiles));
+    }, [update]);
+    const undo = (starts) => {
+        undoSave(project)
+            .catch(unreachable)
+            .then((answer) => {
+            if (!answer.ok) {
+                toast({ type: 'error', body: REFUSED[answer.reason] });
+                return;
+            }
+            // The edits stay in the studio, unsaved again.
+            update((current) => ({ ...current, starts }));
+            onFilesChanged();
+            toast({ body: `Put ${answer.written.join(', ')} back.` });
+        });
+    };
+    const write = (review) => {
+        setStep({ at: 'review', review, writing: true });
+        writeSave(project, workspace, review.stamp)
+            .catch(unreachable)
+            .then((answer) => {
+            if (!answer.ok) {
+                setStep({ at: 'review', review, writing: false, refusal: answer });
+                return;
+            }
+            const { starts } = workspace;
+            update(() => startedHere(workspace));
+            onFilesChanged();
+            setStep({ at: 'closed' });
+            const dismiss = toast({
+                body: `Saved to ${answer.written.join(', ')}.`,
+                autoHideDuration: UNDO_WINDOW,
+                endContent: (_jsx(Button, { label: "Undo", variant: "ghost", size: "sm", onClick: () => {
+                        undo(starts);
+                        dismiss();
+                    } })),
+            });
+        });
+    };
+    const ask = useCallback(() => {
+        setAsking(true);
+    }, []);
+    const unsaved = !clean || step.at !== 'closed';
+    const actions = useMemo(() => ({
+        unsaved,
+        review: blocked ? undefined : open,
+        clear,
+        discard: clean ? undefined : ask,
+    }), [unsaved, blocked, open, clear, clean, ask]);
+    const writing = step.at === 'review' && step.writing;
+    const refusal = step.at === 'refused' || step.at === 'review' ? step.refusal : undefined;
+    const flip = VIEW_FLIP[view];
+    return (_jsxs(ProjectSaveContext.Provider, { value: actions, children: [children, _jsx(Dialog, { isOpen: step.at === 'review' || step.at === 'refused', purpose: writing ? 'required' : 'form', width: DIALOG_WIDTH, maxHeight: "80vh", onOpenChange: (isOpen) => {
+                    if (!isOpen && !writing)
+                        setStep({ at: 'closed' });
+                }, children: _jsx(Layout, { header: _jsx(DialogHeader, { title: `Save to ${project.name}`, subtitle: writing
+                            ? 'Checking that the project still loads with these lines.'
+                            : 'Save writes all of these lines or none. It then type-checks and loads the project, and puts your files back unless it runs as what you tested.', endContent: step.at === 'review' &&
+                            step.review.files.length > 1 && (_jsx(IconButton, { label: flip.label, variant: "ghost", icon: _jsx(Icon, { icon: flip.icon, size: "sm" }), tooltip: flip.tooltip, onClick: () => {
+                                setView(flip.next);
+                            } })), onOpenChange: writing ? undefined : () => setStep({ at: 'closed' }) }), content: _jsx(LayoutContent, { isScrollable: false, padding: 0, children: _jsx(ScrollableArea, { label: "Changes", height: "100%", paddingInline: 4, children: _jsxs(VStack, { gap: 4, children: [refusal && _jsx(RefusalBody, { refusal: refusal }), step.at === 'review' && _jsx(ReviewBody, { review: step.review, view: view })] }) }) }), footer: _jsx(LayoutFooter, { children: _jsxs(HStack, { gap: 2, justify: "between", children: [_jsx(Button, { label: "Discard all", variant: "ghost", isDisabled: writing || clean, onClick: ask }), _jsxs(HStack, { gap: 2, children: [_jsx(Button, { label: "Cancel", variant: "ghost", isDisabled: writing, onClick: () => {
+                                                setStep({ at: 'closed' });
+                                            } }), step.at === 'review' && (_jsx(Button, { label: "Save", variant: "primary", isDisabled: !step.review.writable, isLoading: writing, onClick: () => {
+                                                write(step.review);
+                                            } }))] })] }) }) }) }), _jsx(AlertDialog, { isOpen: asking, onOpenChange: setAsking, title: "Discard every unsaved edit?", description: "All unsaved edits will be lost. This action cannot be reversed.", actionLabel: "Discard all", actionVariant: "destructive", onAction: () => {
+                    setAsking(false);
+                    setStep({ at: 'closed' });
+                    onDiscard();
+                } })] }));
+}
+/**
+ * A project's tokens in the editor's toolbar: Save while the studio holds edits the files do not,
+ * and what the studio cannot run. Nothing while there is neither.
+ */
+export function ProjectTokens({ project, unloaded, }) {
+    const save = useProjectSave();
+    return (_jsxs(_Fragment, { children: [save?.unsaved && save.review && (_jsx(Token, { label: "Save", color: "blue", description: "Review the diff, then save", onClick: save.review })), _jsx(ProjectProblems, { project: project, unloaded: unloaded })] }));
+}