@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/profile-editor.js

@@ -0,0 +1,2638 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '@astryxdesign/core/Badge';
+import { Banner } from '@astryxdesign/core/Banner';
+import { Button } from '@astryxdesign/core/Button';
+import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
+import { CheckboxList, CheckboxListItem } from '@astryxdesign/core/CheckboxList';
+import { CodeBlock } from '@astryxdesign/core/CodeBlock';
+import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible';
+import { ComplexSelector } from '@astryxdesign/core/ComplexSelector';
+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 { List, ListItem } from '@astryxdesign/core/List';
+import { Section } from '@astryxdesign/core/Section';
+import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { pixel, proportional, Table } from '@astryxdesign/core/Table';
+import { Text } from '@astryxdesign/core/Text';
+import { TextArea } from '@astryxdesign/core/TextArea';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { Thumbnail } from '@astryxdesign/core/Thumbnail';
+import { Token } from '@astryxdesign/core/Token';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconAbc, IconAdjustmentsHorizontal, IconAlertTriangle, IconAlignLeft, IconAntennaBars1, IconAntennaBars2, IconAntennaBars3, IconAntennaBars4, IconAntennaBars5, IconAntennaBarsOff, IconArrowDown, IconArrowLeft, IconArrowUp, IconBan, IconBandage, IconBiohazard, IconBolt, IconBraces, IconBulb, IconBulbOff, IconCertificate, IconCheck, IconChevronRight, IconCircleDashed, IconDatabase, IconDeviceDesktop, IconEraser, IconEye, IconEyeOff, IconFeather, IconFlag, IconFlame, IconFlask, IconGauge, IconHandOff, IconHandStop, IconHeadset, IconHourglass, IconHttpDelete, IconHttpGet, IconHttpPatch, IconHttpPost, IconHttpPut, IconInfoCircle, IconInputAi, IconKey, IconLayersUnion, IconLockOpen, IconMessage, IconMicrophone, IconPackage, IconPaperclip, IconPencil, IconPlayerPause, IconPlayerPlay, IconPlayerStop, IconPlayerTrackNext, IconPlugConnected, IconPlus, IconRefresh, IconRegex, IconSearch, IconSend, IconServer, IconShieldLock, IconShieldOff, IconSquareRoundedNumber0, IconSquareRoundedNumber2, IconTool, IconTrash, IconUser, IconUserCheck, IconWaveSine, IconWriting, IconX, } from '@tabler/icons-react';
+import { ATTACHMENT_ACCEPT_MIMES, CONTINUE_STOP_KINDS, fieldMeta, GOOGLE_BUILTIN_TOOLS, GOOGLE_IMAGE_ASPECT_RATIOS, GOOGLE_IMAGE_OUTPUT_MIMES, GOOGLE_IMAGE_RESOLUTIONS, GOOGLE_SPEECH_VOICES, HTTP_METHODS, IMAGE_ATTACHMENT_ACCEPT_MIMES, LABEL_KEYS, labelDefault, PROFILE_HANDLE_MAX_CHARS, PROFILE_ID_MAX_CHARS, profileGraphFacet, THINKING_LEVELS, VOICE_ACCEPT_MIMES, } from '@theoremjs/agents';
+import { BOUNDARIES, BOUNDARY_META, DETECT_ACTION_META, DETECT_ACTIONS, DETECTOR_BOUNDARIES, DETECTOR_GROUP_META, DETECTOR_GROUPS, DETECTOR_META, DETECTORS, TOOL_BOUNDARIES, TOOL_KINDS, } from '@theoremjs/agents/guardrails';
+import { lazy, Suspense, useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { acceptSections, agentToolTarget, bindingSlots, COMPACTION_DRAFT_DEFAULTS, defaultEffortRequired, defaultModelRequired, definitionOf, draftAllows, draftKey, expandAccept, INLINE_LABELS, includableFacets, includeFacet, inputLimitsRequired, isGoogleRoute, isOpenRouterRoute, kernelDefinitions, LOCAL_PROVIDER_ID, lentCompression, modelBindingNodeId, modelRoute, modelSlots, newCriteria, newDecisionImage, newDecisionQuestion, newModelBinding, newOwnDetector, newPattern, newToolSpec, nextAccept, onStudioLocal, optionAt, plantsCanary, protocolOptionFields, removeModelBinding, STUDIO_TRACE_DESTINATION, sampleToolInput, sectionNote, servedProtocols, servesProfileType, setProfileType, studioNetworkNote, studioNodeRef, studioRunsProvider, studioTaintNote, takesContinueInstruction, toolSpecNodeId, updateModelBinding, withOption, writeAsk, } from "../mod.js";
+import { AddProviderButton } from "./add-provider.js";
+import { IconGoogle, IconOpenAi, IconOpenRouter, IconTypeSafe } from "./brand-icons.js";
+import { ChoiceRow, InspectorGroupTitle, InspectorRow, InspectorSection, ListRow, NamesRow, NumberRow, OriginLine, SegmentedRow, SetInCode, SliderRow, SwitchRow, TextAreaRow, TextRow, } from "./inspector.js";
+import { ConfirmWrite, LeavePage, ListBadges, LocalConnection, NodeIssues, ProjectAsks, QuestionLink, RowOrigins, RunsOn, SaidOrigin, useFieldStatus, useRowOrigin, WorkspaceContext, } from "./inspector-context.js";
+import { CONTEXT_PLACEHOLDER, contextErrorOf, draftSlots, usePageValues, } from "./lib/studio-page.js";
+import { useProject } from "./lib/studio-project.js";
+import { setToolCredential, subscribeToolCredentials, toolCredential, } from "./lib/tool-credentials.js";
+import { runToolProbe } from "./lib/tool-probe.js";
+import { PROFILE_TYPE_ICON, QUESTION_TYPE_ICON, TOOL_TYPE_ICON, toolTypeIcon, } from "./lib/type-icons.js";
+import { slotDescription, useProviderModels } from "./studio-connection.js";
+import { IconTheorem } from "./theorem-mark.js";
+// The tester and its probes load when a detector's page first shows it.
+const DetectorTester = lazy(() => import("./guardrail-tester.js").then((tester) => ({ default: tester.DetectorTester })));
+/** Sets fields of one section of the draft, leaving the rest as it is. */
+function patch(setDraft, key) {
+    return (change) => {
+        setDraft((draft) => ({ ...draft, [key]: { ...draft[key], ...change } }));
+    };
+}
+const PROFILE_TYPE_SEGMENTS = [
+    { value: 'text', label: 'Text', icon: PROFILE_TYPE_ICON.text },
+    { value: 'image', label: 'Image', icon: PROFILE_TYPE_ICON.image },
+    { value: 'speech', label: 'Speech', icon: PROFILE_TYPE_ICON.speech },
+    { value: 'live', label: 'Live', icon: PROFILE_TYPE_ICON.live },
+    { value: 'decision', label: 'Decision', icon: PROFILE_TYPE_ICON.decision },
+    { value: 'embedding', label: 'Embedding', icon: PROFILE_TYPE_ICON.embedding },
+    { value: 'host', label: 'Host', icon: PROFILE_TYPE_ICON.host },
+];
+const HISTORY_HOLDER_SEGMENTS = [
+    { value: 'host', label: 'Host', icon: IconDeviceDesktop },
+    { value: 'stateless', label: 'Stateless', icon: IconBan },
+    { value: 'provider', label: 'Provider', icon: IconServer },
+];
+/** How the studio's own providers are named. A project's provider is named by its id. */
+const PROVIDER_LABEL = {
+    gemini: 'Gemini',
+    openrouter: 'OpenRouter',
+    [LOCAL_PROVIDER_ID]: 'Local',
+    typesafe: 'TypeSafe',
+};
+/** The mark of the service a kernel definition reaches. */
+const DEFINITION_ICON = {
+    gemini: IconGoogle,
+    openrouter: IconOpenRouter,
+    local: IconOpenAi,
+    typesafe: IconTypeSafe,
+};
+const LEVEL_SEGMENT = {
+    none: { label: 'None', icon: IconAntennaBarsOff },
+    minimal: { label: 'Minimal', icon: IconAntennaBars1 },
+    low: { label: 'Low', icon: IconAntennaBars2 },
+    medium: { label: 'Medium', icon: IconAntennaBars3 },
+    high: { label: 'High', icon: IconAntennaBars4 },
+    xhigh: { label: 'Extra high', icon: IconAntennaBars5 },
+    max: { label: 'Max', icon: IconFlame },
+};
+const LEVEL_SEGMENTS = THINKING_LEVELS.map((value) => ({
+    value,
+    ...LEVEL_SEGMENT[value],
+}));
+/** Thought summaries: on, off, or left to the provider (`null` in the draft). */
+const SUMMARIES_SEGMENTS = [
+    { value: 'default', label: 'Provider default', icon: IconCircleDashed },
+    { value: 'on', label: 'On', icon: IconBulb },
+    { value: 'off', label: 'Off', icon: IconBulbOff },
+];
+/** A setting left to the provider (`null` in the draft), on, or off. */
+const PROVIDER_DEFAULT_SEGMENT = { default: null, on: true, off: false };
+function providerDefaultSegment(value) {
+    if (value === null)
+        return 'default';
+    return value ? 'on' : 'off';
+}
+const KIND_TITLE = {
+    image: 'Image',
+    video: 'Video',
+    document: 'Document',
+    audio: 'Audio',
+};
+/** A MIME allowlist's picker: a section per media kind, its wildcard first. */
+function acceptPicker(mimes) {
+    const sections = acceptSections(mimes);
+    const options = sections.map(({ kind, wildcard, mimes: kindMimes }) => ({
+        type: 'section',
+        title: KIND_TITLE[kind],
+        options: [
+            ...(wildcard ? [{ value: wildcard, description: `Every ${kind} type` }] : []),
+            ...kindMimes.map((value) => ({ value })),
+        ],
+    }));
+    return { sections, options };
+}
+const ATTACHMENT_PICKER = acceptPicker(ATTACHMENT_ACCEPT_MIMES);
+const IMAGE_ATTACHMENT_PICKER = acceptPicker(IMAGE_ATTACHMENT_ACCEPT_MIMES);
+const VOICE_PICKER = acceptPicker(VOICE_ACCEPT_MIMES);
+/** The page's lent keys, while the studio runs on them. */
+function useLentKeys() {
+    const on = useContext(RunsOn);
+    return on.mode === 'demo' ? on.keys : undefined;
+}
+/**
+ * Moves a binding to another provider. It keeps its protocol where the new provider serves it, and
+ * that protocol's options with it; otherwise it takes the first protocol served and starts with no
+ * options. On lent keys it takes their first model there and keeps the built-ins that model may
+ * use; otherwise the builder picks the model, and only Google keeps them.
+ */
+function reprovide(binding, type, provider, keys) {
+    const served = servedProtocols(provider, type);
+    const kept = !served || served.some((protocol) => protocol.id === binding.protocol);
+    const protocol = kept ? binding.protocol : (served[0]?.id ?? binding.protocol);
+    const apiId = keys?.models(type, provider.definition)[0]?.id ?? '';
+    const allowed = new Set(keys
+        ? keys.builtins(apiId)
+        : isGoogleRoute({ protocol })
+            ? GOOGLE_BUILTIN_TOOLS.map((tool) => tool.name)
+            : []);
+    return {
+        provider: provider.id,
+        protocol,
+        options: kept ? binding.options : {},
+        apiId,
+        builtInTools: binding.builtInTools.filter((id) => allowed.has(id)),
+    };
+}
+/**
+ * A type change turns on each optional section the new type brings that the old one didn't: the
+ * first pick shows them all. One the author took out under the old type stays out.
+ */
+function withNewSections(before, after) {
+    const leftOut = new Set(includableFacets(before));
+    return includableFacets(after)
+        .filter((facet) => !leftOut.has(facet))
+        .reduce(includeFacet, after);
+}
+function SystemPromptSection({ identity, set, }) {
+    return (_jsxs(InspectorSection, { title: "System prompt", children: [_jsx(TextArea, { label: "System prompt", isLabelHidden: true, size: "sm", rows: 8, value: identity.system, placeholder: fieldMeta('identity.system')?.unset, onChange: (system) => {
+                    set({ system });
+                } }), _jsx(TextAreaRow, { label: "By role", path: "identity.systemByRole", field: "systemByRoleJson", value: identity.systemByRoleJson, rows: 4, hasSpellCheck: false, placeholder: SYSTEM_BY_ROLE_PLACEHOLDER, onChange: (systemByRoleJson) => {
+                    set({ systemByRoleJson });
+                } })] }));
+}
+function IdentityEditor({ draft, setDraft }) {
+    const keys = useLentKeys();
+    const { identity } = draft;
+    const set = patch(setDraft, 'identity');
+    return (_jsxs(_Fragment, { children: [_jsxs(InspectorSection, { title: "Profile", children: [_jsx(TextRow, { label: "Id", path: "profile.id", field: "agentId", value: identity.agentId, placeholder: "my.agent", maxLength: PROFILE_ID_MAX_CHARS, onChange: (agentId) => {
+                            set({ agentId });
+                        } }), _jsx(SegmentedRow, { label: "Type", path: "profile.type", field: "profileType", value: identity.profileType, segments: PROFILE_TYPE_SEGMENTS, onChange: (type) => {
+                            if (type)
+                                setDraft((current) => withNewSections(current, setProfileType(current, type, keys)));
+                        } }), identity.profileType !== 'host' && (_jsx(TextRow, { label: "Handle", path: "identity.handle", field: "handle", value: identity.handle, placeholder: "agent", maxLength: PROFILE_HANDLE_MAX_CHARS, onChange: (handle) => {
+                            set({ handle });
+                        } }))] }), identity.profileType !== 'speech' &&
+                identity.profileType !== 'decision' &&
+                identity.profileType !== 'host' && _jsx(SystemPromptSection, { identity: identity, set: set })] }));
+}
+/** The policy every model of the profile shares: default, switching, steps, and key slots. */
+function ModelPolicySection({ draft, type, set, }) {
+    const { models } = draft;
+    return (_jsxs(InspectorSection, { title: "Policy", children: [_jsx(ChoiceRow, { label: "Default", path: "profile.defaultModel", field: "defaultModel", value: models.defaultModel, isRequired: defaultModelRequired(draft), options: draft.modelBindings.map((binding) => binding.modelId), onChange: (defaultModel) => {
+                    set({ defaultModel });
+                } }), _jsx(SwitchRow, { label: "Switching", path: "profile.allowModelSelect", field: "allowModelSelect", value: models.allowModelSelect, onChange: (allowModelSelect) => {
+                    set({ allowModelSelect });
+                } }), type !== 'embedding' && (_jsxs(_Fragment, { children: [_jsx(SegmentedRow, { label: "Conversation history kept by", path: "providerContinuation.history", field: "providerHistory", value: models.providerHistory ?? 'host', segments: HISTORY_HOLDER_SEGMENTS, onChange: (providerHistory) => {
+                            set({ providerHistory });
+                        } }), _jsx(NumberRow, { label: "Max steps", path: "profile.maxSteps", units: "steps", field: "maxSteps", value: models.maxSteps, min: 1, isIntegerOnly: true, onChange: (maxSteps) => {
+                            set({ maxSteps });
+                        } })] })), _jsx(SlotRow, { label: "Key slot", path: "models.*.keySlot", field: "key", value: models.key, onChange: (key) => {
+                    set({ key });
+                } }), _jsx(SlotRow, { label: "Fallback slot", path: "models.*.fallbackKeySlot", field: "fallbackKey", value: models.fallbackKey ?? '', onChange: (fallbackKey) => {
+                    set({ fallbackKey });
+                } })] }));
+}
+function ModelsEditor({ draft, setDraft, onSelect, }) {
+    const set = patch(setDraft, 'models');
+    const start = useLentKeys()?.start;
+    const addModel = () => {
+        const binding = newModelBinding(draft, start);
+        setDraft((current) => ({ ...current, modelBindings: [...current.modelBindings, binding] }));
+        onSelect(modelBindingNodeId(binding.key));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorSection, { note: draft.identity.profileType === 'decision'
+                    ? sectionNote('models.decision')
+                    : sectionNote('models'), children: _jsx(Button, { label: "Add model", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), isDisabled: draft.identity.profileType === 'decision' && draft.modelBindings.length >= 1, onClick: addModel }) }), draft.identity.profileType !== 'decision' && (_jsx(ModelPolicySection, { draft: draft, type: bindingProfileType(draft.identity.profileType), set: set }))] }));
+}
+/** A decision binding's wire model: picked from the demo's list, typed outside the demo. */
+function DecisionApiModelRow({ binding, definition, set, }) {
+    const keys = useLentKeys();
+    if (!keys)
+        return (_jsx(TextRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: binding.apiId, isRequired: true, onChange: (apiId) => {
+                set({ apiId });
+            } }));
+    return (_jsx(ChoiceRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: binding.apiId, options: keys.models('decision', definition).map((model) => ({
+            value: model.id,
+            label: model.label,
+            description: model.id,
+        })), onChange: (apiId) => {
+            set({ apiId });
+        } }));
+}
+/** Decision model binding, using the same provider and API id rows as other models. */
+function DecisionModelEditor({ draft, setDraft, bindingKey, }) {
+    const keys = useLentKeys();
+    const binding = draft.modelBindings.find((candidate) => candidate.key === bindingKey);
+    if (!binding)
+        return null;
+    const set = (change) => {
+        setDraft((current) => updateModelBinding(current, bindingKey, change));
+    };
+    return (_jsxs(InspectorSection, { title: "Decision model", note: sectionNote('decisionModel'), children: [_jsx(TextRow, { label: "Id", path: "models.*", field: "modelId", value: binding.modelId, isRequired: true, onChange: (modelId) => {
+                    set({ modelId });
+                } }), _jsx(ProviderRow, { providers: draft.providers, binding: binding, type: "decision", set: set }), _jsx(ProtocolRow, { providers: draft.providers, binding: binding, type: "decision", set: set }), _jsx(DecisionApiModelRow, { binding: binding, definition: definitionOf(draft.providers, binding.provider), set: set }), _jsx(ProtocolOptionRows, { providers: draft.providers, binding: binding, type: "decision", set: set }), _jsx(SlotRow, { label: "Key slot", path: "models.*.keySlot", value: draft.models.key, onChange: (key) => {
+                    setDraft((current) => ({ ...current, models: { ...current.models, key } }));
+                } }), _jsx(NumberRow, { label: "Timeout", path: "models.*.timeoutMs", units: "ms", field: "timeoutMs", value: binding.timeoutMs, min: 1, max: keys?.decision.timeoutMs, isIntegerOnly: true, onChange: (timeoutMs) => {
+                    set({ timeoutMs });
+                } })] }));
+}
+/** A key slot, chosen from the slots the keys panel holds; each says which service its key is for. */
+export function SlotRow({ label, path, field, value, isRequired, given, onChange, }) {
+    const connection = useContext(LocalConnection);
+    const hint = given ? `${given}, from its provider` : undefined;
+    if (!connection)
+        return (_jsx(TextRow, { label: label, path: path, field: field, value: value, isRequired: isRequired, hint: hint, onChange: onChange }));
+    // A slot the profile names but the panel doesn't hold yet stays choosable.
+    const slots = value && !connection.slots.includes(value) ? [...connection.slots, value] : connection.slots;
+    return (_jsx(ChoiceRow, { label: label, path: path, field: field, value: value, isRequired: isRequired, options: slots.map((slot) => ({
+            value: slot,
+            label: slot,
+            description: slotDescription(connection.vault[slot]),
+        })), emptyText: "Add a key under Keys first.", placeholder: hint, onChange: onChange }));
+}
+/**
+ * The provider's model, picked from what it lists for this profile type with the key in the
+ * model's slot. Until there is a list (a Gemini model with no key, or a list that failed), the id
+ * is typed.
+ */
+function ProviderModelRow({ definition, type, slot, value, onChange, }) {
+    const connection = useContext(LocalConnection);
+    const listed = definition === 'gemini' || definition === 'openrouter' ? definition : undefined;
+    const models = useProviderModels(listed, type, slot ? connection?.vault[slot] : undefined);
+    if (models.status === 'idle' || models.status === 'error')
+        return (_jsx(TextRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: value, isRequired: true, placeholder: listed === 'gemini' ? 'Choose a key to list models' : 'Provider model id', status: models.status === 'error' ? { type: 'error', message: models.error } : undefined, onChange: onChange }));
+    const options = models.models.map((model) => ({
+        value: model.id,
+        label: model.label,
+        description: model.id,
+    }));
+    return (_jsx(ChoiceRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: value, options: options, isLoading: models.status === 'loading', emptyText: `No ${type} models listed.`, hasSearch: true, isRequired: true, onChange: onChange }));
+}
+/** The profile type a model runs as: a decision has its own binding editor; a host has no model. */
+function bindingProfileType(chosen) {
+    return chosen && chosen !== 'decision' && chosen !== 'host' ? chosen : 'text';
+}
+/** A provider's segment, disabled with the reason when the studio can't run it here. */
+function providerSegment(provider, type, on, inProject) {
+    const local = onStudioLocal(provider.id, inProject);
+    return {
+        value: provider.id,
+        label: PROVIDER_LABEL[provider.id] ?? provider.id,
+        icon: local ? IconDeviceDesktop : (DEFINITION_ICON[provider.definition] ?? IconServer),
+        isDisabled: !studioRunsProvider(type, provider, local ? { mode: 'local' } : on),
+        disabledMessage: on.mode === 'demo' && !local
+            ? 'Add your own key under Keys to use it.'
+            : `It doesn't run ${type} agents.`,
+    };
+}
+/** Past this many providers, the row is a dropdown: more icons are too small to tell apart. */
+const MOST_PROVIDER_SEGMENTS = 4;
+/** The workspace's providers that serve this kind of agent, each enabled only where the studio runs it. */
+function ProviderRow({ providers, binding, type, set, }) {
+    const on = useContext(RunsOn);
+    const keys = on.mode === 'demo' ? on.keys : undefined;
+    const inProject = useProject() !== null;
+    const add = useContext(WorkspaceContext)?.addProvider;
+    const serving = providers.filter((provider) => provider.id === binding.provider || servesProfileType(provider, type));
+    // A new provider starts on the definition of the one the model is on, so the model keeps its API id.
+    const now = providers.find((provider) => provider.id === binding.provider)?.definition;
+    const serves = kernelDefinitions().filter((definition) => servesProfileType({ id: definition, definition }, type));
+    const definitions = now && serves.includes(now)
+        ? [now, ...serves.filter((definition) => definition !== now)]
+        : serves;
+    return (_jsx(SegmentedRow, { label: "Provider", path: "models.*.provider", field: "provider", value: binding.provider, segments: serving.map((provider) => providerSegment(provider, type, on, inProject)), selectorPast: MOST_PROVIDER_SEGMENTS, onChange: (id) => {
+            const provider = providers.find((each) => each.id === id);
+            if (provider)
+                set(reprovide(binding, type, provider, keys));
+        }, trailing: add && (_jsx(AddProviderButton, { isCompact: true, taken: providers.map((provider) => provider.id), definitions: definitions, 
+            // The model moves to it, and its editor opens for what it connects with.
+            onAdd: (provider) => {
+                set(reprovide(binding, type, provider, keys));
+                add(provider);
+            } })) }));
+}
+/**
+ * A local model's endpoint, with help when the page's origin can't reach it. It is the tab's
+ * connection, so changing it leaves the profile's model as it is: a model the new endpoint does
+ * not list shows as not in the list.
+ */
+function LocalEndpointRows() {
+    const localConnection = useContext(LocalConnection);
+    if (!localConnection)
+        return null;
+    const failed = localConnection.localModels.status === 'error';
+    return (_jsxs(_Fragment, { children: [_jsx(TextRow, { label: "Endpoint", path: "local.baseUrl", value: localConnection.local.baseUrl, placeholder: "http://127.0.0.1:11434", status: failed ? { type: 'error', message: localConnection.localModels.error ?? '' } : undefined, onChange: (baseUrl) => {
+                    localConnection.setLocal((current) => ({ ...current, baseUrl }));
+                } }), failed && !isLocalPage() && _jsx(LocalOriginHelp, {})] }));
+}
+/** A hosted model's key slot and fallback slot; left blank, each is the one its provider gives. */
+function KeySlotRows({ providers, binding, set, }) {
+    const given = modelSlots(providers, { provider: binding.provider });
+    return (_jsxs(_Fragment, { children: [_jsx(SlotRow, { label: "Key slot", path: "models.*.keySlot", field: "keySlot", given: given.keySlot, value: binding.keySlot ?? '', onChange: (keySlot) => {
+                    set({ keySlot });
+                } }), _jsx(SlotRow, { label: "Fallback slot", path: "models.*.fallbackKeySlot", field: "fallbackKeySlot", given: given.fallbackKeySlot, value: binding.fallbackKeySlot ?? '', onChange: (fallbackKeySlot) => {
+                    set({ fallbackKeySlot });
+                } })] }));
+}
+/** A local model, picked from what the endpoint lists, or typed while the endpoint lists nothing. */
+function LocalApiModelRow({ binding, localConnection, set, }) {
+    const { status } = localConnection.localModels;
+    const onChange = (apiId) => {
+        set({ apiId });
+    };
+    if (status === 'idle' || status === 'error')
+        return (_jsx(TextRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: binding.apiId, isRequired: true, placeholder: "Local model id", status: status === 'error'
+                ? {
+                    type: 'error',
+                    message: "Can't reach the endpoint. Start it to list its models, or type the id.",
+                }
+                : undefined, onChange: onChange }));
+    return (_jsx(ChoiceRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: binding.apiId, options: localConnection.localModels.ids, isLoading: status === 'loading', emptyText: "This server has no models.", hasSearch: true, isRequired: true, onChange: onChange }));
+}
+/** A model the lent keys offer here; built-ins the model may not use on them are dropped. */
+function LentApiModelRow({ binding, type, definition, keys, set, }) {
+    return (_jsx(ChoiceRow, { label: "API model", path: "models.*.apiId", field: "apiId", value: binding.apiId, options: keys.models(type, definition).map((model) => ({
+            value: model.id,
+            label: model.label,
+            description: model.id,
+        })), onChange: (apiId) => {
+            const allowed = new Set(keys.builtins(apiId));
+            set({ apiId, builtInTools: binding.builtInTools.filter((id) => allowed.has(id)) });
+        } }));
+}
+/** The model's API id: from the local endpoint, the lent keys' list, or the provider's list. */
+function ApiModelRow({ draft, binding, type, set, }) {
+    const keys = useLentKeys();
+    const localConnection = useContext(LocalConnection);
+    const inProject = useProject() !== null;
+    const { definition } = modelRoute(draft.providers, type, binding);
+    if (onStudioLocal(binding.provider, inProject) && localConnection)
+        return _jsx(LocalApiModelRow, { binding: binding, localConnection: localConnection, set: set });
+    if (keys)
+        return (_jsx(LentApiModelRow, { binding: binding, type: type, definition: definition, keys: keys, set: set }));
+    return (_jsx(ProviderModelRow, { definition: definition, type: type, slot: bindingSlots(draft, binding).keySlot ?? '', value: binding.apiId, onChange: (apiId) => {
+            set({ apiId });
+        } }));
+}
+/** Whether a local model may call the project's remote tools. */
+function RemoteToolsRow() {
+    const localConnection = useContext(LocalConnection);
+    if (!localConnection)
+        return null;
+    return (_jsx(SwitchRow, { label: "Remote tools", path: "studio.remoteTools", value: localConnection.remoteTools, onChange: localConnection.setRemoteTools }));
+}
+/**
+ * The protocol the model is spoken to in, picked from those its provider serves for this kind of
+ * agent. Shown when there is a choice, or when the model names one the provider doesn't serve; a
+ * provider from a project's own definition takes the protocol typed.
+ */
+function ProtocolRow({ providers, binding, type, set, }) {
+    const provider = providers.find((each) => each.id === binding.provider);
+    const served = provider && servedProtocols(provider, type);
+    if (!served)
+        return (_jsx(TextRow, { label: "Protocol", path: "models.*.protocol", field: "protocol", value: binding.protocol, isRequired: true, onChange: (protocol) => {
+                set({ protocol, options: {} });
+            } }));
+    if (served.length === 1 && served[0]?.id === binding.protocol)
+        return null;
+    return (_jsx(ChoiceRow, { label: "Protocol", path: "models.*.protocol", field: "protocol", value: binding.protocol, options: served.map((protocol) => ({
+            value: protocol.id,
+            label: protocol.name,
+            description: protocol.description,
+        })), isRequired: true, onChange: (protocol) => {
+            if (protocol !== binding.protocol)
+                set({ protocol, options: {} });
+        } }));
+}
+/** The protocol's own options, a row per setting its schema describes; a provider of the project's own leaves them to code. */
+function ProtocolOptionRows({ providers, binding, type, set, }) {
+    const protocol = protocolOf(providers, binding, type);
+    if (!protocol)
+        return null;
+    return (_jsx(_Fragment, { children: protocolOptionFields(protocol, binding).map((option) => (_jsx(ProtocolOptionRow, { option: option, binding: binding, set: set }, option.path))) }));
+}
+/** The protocol `binding` is spoken to in, where its provider is one of the kernel's own and serves it. */
+function protocolOf(providers, binding, type) {
+    const provider = providers.find((each) => each.id === binding.provider);
+    return provider && servedProtocols(provider, type)?.find((each) => each.id === binding.protocol);
+}
+/** A model's protocol options, as a section of their own, named for the protocol. */
+function ProtocolOptionsSection({ providers, binding, type, set, }) {
+    const protocol = protocolOf(providers, binding, type);
+    if (!protocol || protocolOptionFields(protocol, binding).length === 0)
+        return null;
+    return (_jsx(InspectorSection, { title: protocol.name, path: "models.*.options", children: _jsx(ProtocolOptionRows, { providers: providers, binding: binding, type: type, set: set }) }));
+}
+/** A setting a boolean option takes: left to the protocol, on, or off. */
+const OPTION_SWITCH_SEGMENTS = [
+    { value: 'default', label: 'Protocol default', icon: IconCircleDashed },
+    { value: 'on', label: 'On', icon: IconCheck },
+    { value: 'off', label: 'Off', icon: IconX },
+];
+/** One protocol option, edited by the row its kind takes. */
+function ProtocolOptionRow({ option, binding, set, }) {
+    const value = optionAt(binding.options, option.path);
+    const field = `options.${option.path}`;
+    const write = (next) => {
+        set({ options: withOption(binding.options, option.path, next) });
+    };
+    const common = {
+        label: option.label,
+        path: 'models.*.options',
+        field,
+        isRequired: option.required,
+    };
+    switch (option.kind) {
+        case 'boolean':
+            return (_jsx(SegmentedRow, { ...common, value: value === undefined ? 'default' : value ? 'on' : 'off', segments: OPTION_SWITCH_SEGMENTS, onChange: (segment) => {
+                    write(segment === 'default' ? undefined : segment === 'on');
+                } }));
+        case 'choice':
+            return (_jsx(ChoiceRow, { ...common, value: option.choiceType === 'number' && typeof value === 'number'
+                    ? String(value)
+                    : typeof value === 'string'
+                        ? value
+                        : '', options: option.choices ?? [], hasHoverDescriptions: true, onChange: (next) => {
+                    write(next ? (option.choiceType === 'number' ? Number(next) : next) : undefined);
+                } }));
+        case 'number':
+            return (_jsx(NumberRow, { ...common, value: typeof value === 'number' ? value : null, hint: option.description, onChange: (next) => {
+                    write(next ?? undefined);
+                } }));
+        case 'text':
+            return (_jsx(TextRow, { ...common, value: typeof value === 'string' ? value : '', hint: option.description, onChange: (next) => {
+                    write(next || undefined);
+                } }));
+    }
+}
+/** A Google model's built-ins: on lent keys, those its model may use on them. */
+function BuiltinsRow({ binding, set }) {
+    const keys = useLentKeys();
+    const builtins = keys
+        ? [...keys.builtins(binding.apiId)]
+        : GOOGLE_BUILTIN_TOOLS.map((tool) => tool.name);
+    return (_jsx(ListRow, { label: "Built-ins", path: "models.*.builtInTools", field: "builtInTools", value: binding.builtInTools, options: builtins, onChange: (builtInTools) => {
+            set({ builtInTools });
+        } }));
+}
+/** Which model the binding runs: its id, transport, key slots, and API model. */
+function ModelSection({ draft, binding, type, set, }) {
+    const google = isGoogleRoute(modelRoute(draft.providers, type, binding));
+    const local = onStudioLocal(binding.provider, useProject() !== null);
+    return (_jsxs(InspectorSection, { path: "models.*", children: [_jsx(TextRow, { label: "Id", path: "models.*", field: "modelId", 
+                // A model\'s id is its key in the profile\'s models, so it can\'t be left out.
+                isRequired: true, value: binding.modelId, placeholder: "fast", onChange: (modelId) => {
+                    set({ modelId });
+                } }), _jsx(ProviderRow, { providers: draft.providers, binding: binding, type: type, set: set }), _jsx(ProtocolRow, { providers: draft.providers, binding: binding, type: type, set: set }), local ? (_jsx(LocalEndpointRows, {})) : (_jsx(KeySlotRows, { providers: draft.providers, binding: binding, set: set })), _jsx(ApiModelRow, { draft: draft, binding: binding, type: type, set: set }), local && type !== 'embedding' && _jsx(RemoteToolsRow, {}), google && type !== 'embedding' && _jsx(BuiltinsRow, { binding: binding, set: set })] }));
+}
+/** How the model generates: its output cap, temperature, and summaries. */
+function GenerationSection({ binding, set }) {
+    return (_jsxs(InspectorSection, { title: "Generation", children: [_jsx(NumberRow, { label: "Max output", path: "models.*.maxOutputTokens", units: "tokens", field: "maxOutputTokens", value: binding.maxOutputTokens, min: 1, isIntegerOnly: true, onChange: (maxOutputTokens) => {
+                    set({ maxOutputTokens });
+                } }), _jsx(NumberRow, { label: "Temperature", path: "models.*.temperature", field: "temperature", value: binding.temperature, min: 0, step: 0.1, onChange: (temperature) => {
+                    set({ temperature });
+                } }), _jsx(SegmentedRow, { label: "Summaries", path: "models.*.summaries", value: providerDefaultSegment(binding.summaries), segments: SUMMARIES_SEGMENTS, onChange: (segment) => {
+                    set({ summaries: PROVIDER_DEFAULT_SEGMENT[segment] });
+                } })] }));
+}
+/** One effort: its alias, a remove button, and its level. */
+function EffortRow({ efforts, index, setEfforts, }) {
+    const statusAt = useFieldStatus();
+    const status = statusAt('efforts', index);
+    const effort = efforts[index];
+    return (_jsxs(VStack, { gap: 3, children: [_jsxs(InspectorRow, { label: `Effort ${String(index + 1)}`, path: "models.*.efforts", hasIssue: status !== undefined, children: [_jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `Effort ${String(index + 1)} alias`, isLabelHidden: true, size: "sm", status: status, value: effort.alias, placeholder: "Alias", onChange: (alias) => {
+                                setEfforts(efforts.map((e, i) => (i === index ? { ...e, alias } : e)), { from: effort.alias, to: alias });
+                            } }) }), _jsx(IconButton, { label: `Remove effort ${String(index + 1)}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: () => {
+                            setEfforts(efforts.filter((_, i) => i !== index));
+                        } })] }), _jsx(SegmentedRow, { label: "Level", path: "models.*.efforts.*", value: effort.level, segments: LEVEL_SEGMENTS, onChange: (level) => {
+                    setEfforts(efforts.map((e, i) => (i === index ? { ...e, level } : e)));
+                } })] }));
+}
+/** The model's named efforts, its default effort, and whether people can switch. */
+function EffortsSection({ binding, set }) {
+    const aliases = binding.efforts.map((effort) => effort.alias).filter(Boolean);
+    /**
+     * Sets the efforts and keeps the settings that depend on them valid: the default follows its
+     * alias through a rename (`renamed`) and is cleared when the alias goes, and effort switching
+     * turns off below two aliases, where its switch is disabled and couldn't be turned off.
+     */
+    const setEfforts = (efforts, renamed) => {
+        const next = new Set(efforts.map((effort) => effort.alias).filter(Boolean));
+        const defaultEffort = renamed && binding.defaultEffort === renamed.from ? renamed.to : binding.defaultEffort;
+        set({
+            efforts,
+            defaultEffort: next.has(defaultEffort) ? defaultEffort : '',
+            allowEffortSelect: binding.allowEffortSelect && next.size >= 2,
+        });
+    };
+    return (_jsxs(InspectorSection, { title: "Efforts", path: "models.*.efforts", children: [binding.efforts.map((_, index) => (_jsx(EffortRow, { efforts: binding.efforts, index: index, setEfforts: setEfforts }, index))), _jsx(Button, { label: "Add effort", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), onClick: () => {
+                    setEfforts([...binding.efforts, { alias: '', level: 'medium' }]);
+                } }), _jsx(ChoiceRow, { label: "Default", path: "models.*.defaultEffort", field: "defaultEffort", value: binding.defaultEffort, isRequired: defaultEffortRequired(binding), options: aliases, onChange: (defaultEffort) => {
+                    set({ defaultEffort });
+                } }), _jsx(SwitchRow, { label: "Switching", path: "models.*.allowEffortSelect", field: "allowEffortSelect", value: binding.allowEffortSelect, isDisabled: aliases.length < 2, disabledMessage: "Add a second effort to let people switch.", onChange: (allowEffortSelect) => {
+                    set({ allowEffortSelect });
+                } })] }));
+}
+function ModelBindingEditor({ draft, setDraft, bindingKey, onSelect, }) {
+    const binding = draft.modelBindings.find((candidate) => candidate.key === bindingKey);
+    if (!binding)
+        return null;
+    const type = bindingProfileType(draft.identity.profileType);
+    const set = (change) => {
+        setDraft((current) => updateModelBinding(current, bindingKey, change));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModelSection, { draft: draft, binding: binding, type: type, set: set }), type !== 'embedding' && _jsx(GenerationSection, { binding: binding, set: set }), _jsx(ProtocolOptionsSection, { providers: draft.providers, binding: binding, type: type, set: set }), type === 'text' && _jsx(CompactionSection, { binding: binding, set: set }), type !== 'embedding' && _jsx(EffortsSection, { binding: binding, set: set }), draft.modelBindings.length > 1 && (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove model", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
+                        setDraft((current) => removeModelBinding(current, bindingKey));
+                        onSelect('models');
+                    } }) }))] }));
+}
+function InputAcceptsSection({ inputs, set, image }) {
+    const attachmentPicker = image ? IMAGE_ATTACHMENT_PICKER : ATTACHMENT_PICKER;
+    return (_jsxs(InspectorSection, { title: "Accepts", path: "inputs", children: [_jsx(SwitchRow, { label: "Text", path: "inputs.text", value: inputs.text, onChange: (text) => {
+                    set({ text });
+                } }), _jsx(ListRow, { label: "Attachments", path: "inputs.attachments.accept", value: expandAccept(inputs.attachmentsAccept, attachmentPicker.sections), options: attachmentPicker.options, onChange: (selected) => {
+                    set({
+                        attachmentsAccept: nextAccept(inputs.attachmentsAccept, selected, attachmentPicker.sections),
+                    });
+                } }), !image && (_jsx(ListRow, { label: "Voice", path: "inputs.voice.accept", value: expandAccept(inputs.voiceAccept, VOICE_PICKER.sections), options: VOICE_PICKER.options, onChange: (selected) => {
+                    set({ voiceAccept: nextAccept(inputs.voiceAccept, selected, VOICE_PICKER.sections) });
+                } }))] }));
+}
+function InputLimitsSection({ inputs, set }) {
+    const limitsRequired = inputLimitsRequired(inputs);
+    return (_jsxs(InspectorSection, { title: "Limits", children: [_jsx(NumberRow, { label: "Max files", path: "inputs.maxFiles", units: "files", field: "maxFiles", isRequired: limitsRequired, value: inputs.maxFiles, min: 0, isIntegerOnly: true, onChange: (maxFiles) => {
+                    set({ maxFiles });
+                } }), _jsx(NumberRow, { label: "Max bytes", path: "inputs.maxBytes", units: "bytes", field: "maxBytes", isRequired: limitsRequired, value: inputs.maxBytes, min: 0, isIntegerOnly: true, onChange: (maxBytes) => {
+                    set({ maxBytes });
+                } }), _jsx(NumberRow, { label: "Turn bytes", path: "inputs.maxTurnBytes", units: "bytes", field: "maxTurnBytes", isRequired: limitsRequired, value: inputs.maxTurnBytes, min: 0, isIntegerOnly: true, onChange: (maxTurnBytes) => {
+                    set({ maxTurnBytes });
+                } }), _jsx(TextAreaRow, { label: "By type", path: "inputs.limitsByMime", field: "limitsByMimeJson", value: inputs.limitsByMimeJson, rows: 3, hasSpellCheck: false, placeholder: LIMITS_BY_MIME_PLACEHOLDER, onChange: (limitsByMimeJson) => {
+                    set({ limitsByMimeJson });
+                } })] }));
+}
+const CONTEXT_SENDER_LABELS = {
+    client: 'The page',
+    server: 'The server',
+};
+const CONTEXT_SENDERS = Object.keys(CONTEXT_SENDER_LABELS);
+/** The size a context starts with when its first sender is ticked. */
+const CONTEXT_MAX_CHARS_START = 4000;
+/** Who may tell the agent what the page shows, and how much. */
+function InputContextSection({ inputs, set }) {
+    return (_jsxs(InspectorSection, { title: "Context", path: "inputs.context", note: sectionNote('context'), children: [_jsx(InspectorRow, { label: "From", path: "inputs.context.from", children: _jsx(StackItem, { size: "fill", children: _jsx(CheckboxList, { label: "From", isLabelHidden: true, density: "compact", value: inputs.contextFrom, onChange: (checked) => {
+                            set({
+                                contextFrom: CONTEXT_SENDERS.filter((sender) => checked.includes(sender)),
+                                // why: The kernel has no default size; the first sender starts with one to edit.
+                                contextMaxChars: inputs.contextMaxChars ?? CONTEXT_MAX_CHARS_START,
+                            });
+                        }, children: CONTEXT_SENDERS.map((sender) => (_jsx(CheckboxListItem, { value: sender, label: CONTEXT_SENDER_LABELS[sender] }, sender))) }) }) }), inputs.contextFrom.length > 0 && (_jsx(NumberRow, { label: "Max size", path: "inputs.context.maxChars", units: "characters", field: "contextMaxChars", isRequired: true, value: inputs.contextMaxChars, min: 1, isIntegerOnly: true, onChange: (contextMaxChars) => {
+                    set({ contextMaxChars });
+                } })), inputs.contextFrom.includes('client') && _jsx(ContextPreviewRow, {})] }));
+}
+/** The context the studio's page sends the open agent. Kept in this tab, not in the profile. */
+function ContextPreviewRow() {
+    const [values, setValues] = usePageValues(useContext(WorkspaceContext)?.self ?? '');
+    const error = contextErrorOf(values.contextJson);
+    return (_jsx(TextAreaRow, { label: "Preview", path: "inputs.context", isRequired: false, value: values.contextJson, rows: 3, hasSpellCheck: false, placeholder: CONTEXT_PLACEHOLDER, status: error ? { type: 'error', message: error } : undefined, onChange: (contextJson) => {
+            setValues({ ...values, contextJson });
+        } }));
+}
+/** The value the studio's page sends for each slot declared so far. Kept in this tab. */
+function SlotPreviewRows({ slotsJson }) {
+    const [values, setValues] = usePageValues(useContext(WorkspaceContext)?.self ?? '');
+    const slots = draftSlots(slotsJson);
+    return Object.entries(slots).map(([name, allowed]) => (_jsx(ChoiceRow, { label: name, path: "inputs.slots", isRequired: true, value: allowed.find((value) => value === values.slots[name]) ?? allowed[0], options: allowed, onChange: (next) => {
+            if (next)
+                setValues({ ...values, slots: { ...values.slots, [name]: next } });
+        } }, name)));
+}
+function InputsEditor({ draft, setDraft }) {
+    const { inputs } = draft;
+    const set = patch(setDraft, 'inputs');
+    /** An image profile takes images, video, and PDF as references, and no voice. */
+    const image = draft.identity.profileType === 'image';
+    return (_jsxs(_Fragment, { children: [draftAllows(draft, 'inputs.attachments.accept') && (_jsx(InputAcceptsSection, { inputs: inputs, set: set, image: image })), draftAllows(draft, 'inputs.maxFiles') && _jsx(InputLimitsSection, { inputs: inputs, set: set }), draftAllows(draft, 'inputs.context') && _jsx(InputContextSection, { inputs: inputs, set: set }), _jsxs(InspectorSection, { path: "inputs.slots", note: sectionNote('slots'), children: [_jsx(TextAreaRow, { label: "Slots", path: "inputs.slots", field: "slotsJson", value: inputs.slotsJson, rows: 3, hasSpellCheck: false, placeholder: SLOTS_PLACEHOLDER, onChange: (slotsJson) => {
+                            set({ slotsJson });
+                        } }), _jsx(SlotPreviewRows, { slotsJson: inputs.slotsJson })] })] }));
+}
+const SYSTEM_BY_ROLE_PLACEHOLDER = `{
+  "support": "Answer as the support desk."
+}`;
+const LIMITS_BY_MIME_PLACEHOLDER = `{
+  "application/pdf": 5000000
+}`;
+const SLOTS_PLACEHOLDER = `{
+  "language": ["en", "fr"]
+}`;
+/** The agents another agent can name: every one but itself, each by its id. */
+function otherAgents(agents, self, canName) {
+    return agents
+        .filter((agent) => agent.key !== self)
+        .map((agent) => ({
+        value: agent.key,
+        label: agent.agentId || 'Unnamed agent',
+        disabled: !canName(agent),
+    }));
+}
+/** The other text agent that writes the summary, where the workspace has one to name. */
+function CompactionSummariserRow({ binding, set, }) {
+    const workspace = useContext(WorkspaceContext);
+    // Kept while it names an agent, so a removed one can still be cleared here.
+    if (!workspace || !(workspace.agents.length > 1 || binding.compactWith))
+        return null;
+    return (_jsx(ChoiceRow, { label: "Summarised by", path: "models.*.compaction.profile", field: "compactWith", isRequired: false, value: binding.compactWith ?? '', options: otherAgents(workspace.agents, workspace.self, (agent) => agent.type === 'text'), onChange: (compactWith) => {
+            set({ compactWith });
+        } }));
+}
+/** How compaction runs once it has a timing: its budget, threshold, kept turns, and meter. */
+function CompactionRows({ binding, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Budget", path: "models.*.compaction.maxTokens", field: "compactMaxTokens", value: binding.compactMaxTokens ?? null, min: 1, isIntegerOnly: true, units: "tokens", onChange: (compactMaxTokens) => {
+                    set({ compactMaxTokens });
+                } }), _jsx(SliderRow, { label: "Starts at", path: "models.*.compaction.compactAt", field: "compactAt", value: binding.compactAt ?? COMPACTION_DRAFT_DEFAULTS.compactAt, min: 0.05, max: 0.95, step: 0.05, format: (at) => PERCENT.format(at), onChange: (compactAt) => {
+                    set({ compactAt });
+                } }), _jsx(NumberRow, { label: "Keep", path: "models.*.compaction.previousExchanges", field: "compactKeep", value: binding.compactKeep ?? null, min: 0, onChange: (compactKeep) => {
+                    set({ compactKeep });
+                } }), _jsx(CompactionSummariserRow, { binding: binding, set: set }), _jsx(ChoiceRow, { label: "Counts", path: "models.*.compaction.meter", field: "compactMeter", isRequired: false, placeholder: fieldMeta('models.*.compaction.meter')?.unset, value: binding.compactMeter ?? '', options: catalogChoices('models.*.compaction.meter'), onChange: (compactMeter) => {
+                    set({ compactMeter });
+                } })] }));
+}
+/** Compaction, where the agent summarises its older history, or another text agent does. */
+function CompactionSection({ binding, set }) {
+    return (_jsxs(InspectorSection, { path: "models.*.compaction", note: sectionNote('compaction'), children: [_jsx(ChoiceRow, { label: "Compact", path: "models.*.compaction.timing", field: "compactTiming", isRequired: false, placeholder: fieldMeta('models.*.compaction')?.unset, value: binding.compactTiming ?? '', options: catalogChoices('models.*.compaction.timing'), onChange: (compactTiming) => {
+                    set({
+                        compactTiming,
+                        compactMaxTokens: binding.compactMaxTokens ?? COMPACTION_DRAFT_DEFAULTS.compactMaxTokens,
+                        compactAt: binding.compactAt ?? COMPACTION_DRAFT_DEFAULTS.compactAt,
+                        compactKeep: binding.compactKeep ?? COMPACTION_DRAFT_DEFAULTS.compactKeep,
+                    });
+                } }), binding.compactTiming && _jsx(CompactionRows, { binding: binding, set: set })] }));
+}
+/** A closed set's options as the kernel's catalog lists them, each with its own description. */
+function catalogChoices(path) {
+    const meta = fieldMeta(path);
+    return (meta?.options ?? []).map((value) => ({
+        value: value,
+        description: meta?.optionDescriptions?.[value],
+    }));
+}
+/** The segment for a closed set left unset: the provider's default. */
+const PROVIDER_DEFAULT = {
+    value: 'default',
+    label: 'Provider default',
+    icon: IconCircleDashed,
+};
+/** An unset pin (`''`) as the provider-default segment. */
+function segmentOf(value) {
+    return value === '' ? 'default' : value;
+}
+/** The provider-default segment back to an unset pin. */
+function pinOf(segment) {
+    return segment === 'default' ? '' : segment;
+}
+const BARGE_IN_SEGMENTS = [
+    PROVIDER_DEFAULT,
+    { value: 'START_OF_ACTIVITY_INTERRUPTS', label: 'Interrupts', icon: IconHandStop },
+    { value: 'NO_INTERRUPTION', label: 'No interruption', icon: IconHandOff },
+];
+/** Gemini reads only a sensitivity's LOW or HIGH, so each end offers its own pair. */
+const START_SENSITIVITY_SEGMENTS = [
+    PROVIDER_DEFAULT,
+    { value: 'START_SENSITIVITY_LOW', label: 'Low', icon: IconAntennaBars2 },
+    { value: 'START_SENSITIVITY_HIGH', label: 'High', icon: IconAntennaBars5 },
+];
+const END_SENSITIVITY_SEGMENTS = [
+    PROVIDER_DEFAULT,
+    { value: 'END_SENSITIVITY_LOW', label: 'Low', icon: IconAntennaBars2 },
+    { value: 'END_SENSITIVITY_HIGH', label: 'High', icon: IconAntennaBars5 },
+];
+/** Whether every model is on Google, so the Google preset's vocabularies apply to the pins. */
+function allGoogle(draft) {
+    return (draft.modelBindings.length > 0 &&
+        draft.modelBindings.every((binding) => isGoogleRoute(modelRoute(draft.providers, draft.identity.profileType, binding))));
+}
+/**
+ * A pin the kernel takes as any string: the Google preset's values when every model is on
+ * Google, free text otherwise.
+ */
+function PresetRow({ google, label, path, value, preset, hasSearch, onChange, }) {
+    return google ? (_jsx(ChoiceRow, { label: label, path: path, value: value, options: preset, hasSearch: hasSearch, onChange: onChange })) : (_jsx(TextRow, { label: label, path: path, value: value, onChange: onChange }));
+}
+/** OpenRouter's image vocabularies; the kernel takes free strings, so these are the studio's. */
+const OPENROUTER_IMAGE_QUALITIES = ['auto', 'low', 'medium', 'high'];
+const OPENROUTER_IMAGE_BACKGROUNDS = ['auto', 'transparent', 'opaque'];
+/** A pinned file rides in every turn's request, so it stays small. */
+const REFERENCE_MAX_BYTES = 4 * 1024 * 1024;
+/** A picked file's type and its bytes in base64. */
+async function fileData(file) {
+    const url = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(typeof reader.result === 'string' ? reader.result : '');
+        };
+        reader.onerror = () => {
+            reject(reader.error ?? new Error('Couldn’t read the file.'));
+        };
+        reader.readAsDataURL(file);
+    });
+    return { mimeType: file.type, data: url.slice(url.indexOf(',') + 1) };
+}
+/** A picked image file as a pinned reference. */
+async function referenceFromFile(file) {
+    return { key: draftKey('reference'), name: file.name, ...(await fileData(file)) };
+}
+/** An image's aspect ratio, resolution, and format. */
+function ImageShapeRows({ image, set, google }) {
+    return (_jsxs(_Fragment, { children: [_jsx(PresetRow, { google: google, label: "Aspect ratio", path: "image.aspectRatio", value: image.aspectRatio, preset: GOOGLE_IMAGE_ASPECT_RATIOS, onChange: (aspectRatio) => {
+                    set({ aspectRatio });
+                } }), _jsx(PresetRow, { google: google, label: "Resolution", path: "image.resolution", value: image.resolution, preset: GOOGLE_IMAGE_RESOLUTIONS, onChange: (resolution) => {
+                    set({ resolution });
+                } }), _jsx(PresetRow, { google: google, label: "Format", path: "image.mimeType", value: image.mimeType, preset: GOOGLE_IMAGE_OUTPUT_MIMES, onChange: (mimeType) => {
+                    set({ mimeType });
+                } })] }));
+}
+/** The pins only OpenRouter takes: quality, background, compression, and image count. */
+function OpenRouterImageRows({ image, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ChoiceRow, { label: "Quality", path: "image.quality", field: "quality", value: image.quality, options: OPENROUTER_IMAGE_QUALITIES, onChange: (quality) => {
+                    set({ quality });
+                } }), _jsx(ChoiceRow, { label: "Background", path: "image.background", field: "background", value: image.background, options: OPENROUTER_IMAGE_BACKGROUNDS, onChange: (background) => {
+                    set({ background });
+                } }), _jsx(NumberRow, { label: "Compression", path: "image.outputCompression", field: "outputCompression", value: image.outputCompression, min: 0, max: 100, isIntegerOnly: true, onChange: (outputCompression) => {
+                    set({ outputCompression });
+                } }), _jsx(NumberRow, { label: "Images", path: "image.n", field: "n", units: "per turn", value: image.n, min: 1, max: 10, isIntegerOnly: true, onChange: (n) => {
+                    set({ n });
+                } })] }));
+}
+/** Image output pins. OpenRouter-only pins show when every model is on OpenRouter. */
+function ImageEditor({ draft, setDraft }) {
+    const google = allGoogle(draft);
+    const openRouter = draft.modelBindings.length > 0 &&
+        draft.modelBindings.every((binding) => isOpenRouterRoute(modelRoute(draft.providers, 'image', binding)));
+    const { image } = draft;
+    const set = patch(setDraft, 'image');
+    return (_jsxs(_Fragment, { children: [_jsxs(InspectorSection, { title: "Output", path: "image", children: [_jsx(ImageShapeRows, { image: image, set: set, google: google }), openRouter && _jsx(OpenRouterImageRows, { image: image, set: set }), _jsx(NumberRow, { label: "Seed", path: "image.seed", field: "seed", value: image.seed, min: 0, isIntegerOnly: true, onChange: (seed) => {
+                            set({ seed });
+                        } }), _jsx(SwitchRow, { label: "With text", path: "image.includeText", value: image.includeText, onChange: (includeText) => {
+                            set({ includeText });
+                        } })] }), _jsx(ImageReferencesEditor, { references: image.references, onChange: (references) => {
+                    set({ references });
+                } })] }));
+}
+/** One reference: a pinned file's thumbnail and name, or a link's field, and a remove button. */
+function ImageReferenceRow({ reference, index, onReplace, onRemove, }) {
+    const statusAt = useFieldStatus();
+    const label = `Reference ${String(index + 1)}`;
+    const status = statusAt('references', index);
+    return (_jsxs(InspectorRow, { label: label, path: "image.references", hasIssue: status !== undefined, children: ['data' in reference ? (_jsx(StackItem, { size: "fill", children: _jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Thumbnail, { src: `data:${reference.mimeType};base64,${reference.data}`, alt: reference.name, label: reference.name }), _jsx(Text, { size: "sm", maxLines: 1, children: reference.name })] }) })) : (_jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `${label} link`, isLabelHidden: true, size: "sm", status: status, value: reference.uri, placeholder: "https://\u2026/image.png", onChange: (uri) => {
+                        onReplace({ ...reference, uri });
+                    } }) })), _jsx(IconButton, { label: `Remove ${label.toLowerCase()}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onRemove })] }));
+}
+/** A dropzone's `changeAction`: the files picked, read while it shows as loading. */
+function useFilesRead(read) {
+    const [reading, setReading] = useState(false);
+    const changeAction = async (files) => {
+        const picked = files === null ? [] : Array.isArray(files) ? files : [files];
+        if (!picked.length)
+            return;
+        setReading(true);
+        try {
+            await read(picked);
+        }
+        finally {
+            setReading(false);
+        }
+    };
+    return { reading, changeAction };
+}
+/** Reference images sent with every turn, ahead of what the user attaches: files or links. */
+function ImageReferencesEditor({ references, onChange, }) {
+    const { reading, changeAction } = useFilesRead(async (picked) => {
+        onChange([...references, ...(await Promise.all(picked.map(referenceFromFile)))]);
+    });
+    const replace = (key, next) => {
+        onChange(references.map((reference) => (reference.key === key ? next : reference)));
+    };
+    return (_jsxs(InspectorSection, { title: "References", path: "image.references", children: [references.map((reference, index) => (_jsx(ImageReferenceRow, { reference: reference, index: index, onReplace: (next) => {
+                    replace(reference.key, next);
+                }, onRemove: () => {
+                    onChange(references.filter((candidate) => candidate.key !== reference.key));
+                } }, reference.key))), _jsx(FileInput, { label: "Add images", isLabelHidden: true, mode: "dropzone", accept: "image/*", isMultiple: true, maxSize: REFERENCE_MAX_BYTES, isLoading: reading, placeholder: "Drop images or choose files, up to 4 MB each", value: null, changeAction: changeAction, onChange: () => undefined }), _jsx(Button, { label: "Add link", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), onClick: () => {
+                    onChange([...references, { key: draftKey('reference'), uri: '' }]);
+                } })] }));
+}
+/** Speech pins. mp3 is only on offer when every model's provider can make it. */
+function SpeechEditor({ draft, setDraft }) {
+    const google = allGoogle(draft);
+    const { speech } = draft;
+    const set = patch(setDraft, 'speech');
+    // Gemini refuses mp3.
+    const mp3 = draft.modelBindings.every((binding) => !isGoogleRoute(modelRoute(draft.providers, 'speech', binding)));
+    return (_jsxs(InspectorSection, { path: "speech", children: [_jsx(PresetRow, { google: google, label: "Voice", path: "speech.voice", value: speech.voice, preset: GOOGLE_SPEECH_VOICES, hasSearch: true, onChange: (voice) => {
+                    set({ voice });
+                } }), _jsx(TextAreaRow, { label: "Style", path: "speech.style", field: "style", value: speech.style, rows: 2, onChange: (style) => {
+                    set({ style });
+                } }), _jsx(NumberRow, { label: "Speed", path: "speech.speed", field: "speed", value: speech.speed, step: 0.1, onChange: (speed) => {
+                    set({ speed });
+                } }), _jsx(ChoiceRow, { label: "Format", path: "speech.format", field: "format", value: speech.format, options: [
+                    'pcm',
+                    {
+                        value: 'mp3',
+                        label: 'mp3',
+                        ...(mp3 ? {} : { description: 'Only openAi models make mp3', disabled: true }),
+                    },
+                ], onChange: (format) => {
+                    set({ format });
+                } })] }));
+}
+/** Compression sliders move in steps of 1,024 tokens, which divides the free key's cap. */
+const COMPRESSION_STEP = 1024;
+function LiveIngressSection({ live, set }) {
+    return (_jsxs(InspectorSection, { title: "Ingress", path: "live.ingress", children: [_jsx(SwitchRow, { label: "Audio", path: "live.ingress.audio", value: live.ingressAudio, onChange: (ingressAudio) => {
+                    set({ ingressAudio });
+                } }), _jsx(SwitchRow, { label: "Video", path: "live.ingress.video", value: live.ingressVideo, onChange: (ingressVideo) => {
+                    set({ ingressVideo });
+                } }), _jsx(SwitchRow, { label: "Text", path: "live.ingress.text", value: live.ingressText, onChange: (ingressText) => {
+                    set({ ingressText });
+                } })] }));
+}
+function LiveVoiceSection({ live, set, google }) {
+    return (_jsx(InspectorSection, { path: "live.voice", children: _jsx(PresetRow, { google: google, label: "Voice", path: "live.voice", value: live.voice, preset: GOOGLE_SPEECH_VOICES, hasSearch: true, onChange: (voice) => {
+                set({ voice });
+            } }) }));
+}
+function LiveSessionSection({ live, set }) {
+    return (_jsxs(InspectorSection, { title: "Session", path: "live.sessionResumption", children: [_jsx(SwitchRow, { label: "Resumption", path: "live.sessionResumption", value: live.sessionResumption, onChange: (sessionResumption) => {
+                    set({ sessionResumption });
+                } }), live.sessionResumption && (_jsx(TextAreaRow, { label: "On resume", path: "live.resumed.prompt", field: "resumedPrompt", value: live.resumedPrompt, rows: 2, onChange: (resumedPrompt) => {
+                    set({ resumedPrompt });
+                } })), live.sessionResumption && live.resumedPrompt.trim() !== '' && (_jsx(NumberRow, { label: "Away for", path: "live.resumed.afterMs", units: "ms", field: "resumedAfterMs", value: live.resumedAfterMs, min: 0, isIntegerOnly: true, onChange: (resumedAfterMs) => {
+                    set({ resumedAfterMs });
+                } }))] }));
+}
+/** What the agent is told to say when a call opens. */
+function LiveGreetingSection({ live, set }) {
+    return (_jsx(InspectorSection, { path: "live.greeting", children: _jsx(TextAreaRow, { label: "Greeting", path: "live.greeting", field: "greeting", value: live.greeting, rows: 2, onChange: (greeting) => {
+                set({ greeting });
+            } }) }));
+}
+/** The sliding window: on lent keys its sizes are sliders, capped at what a session holds on them. */
+function LiveCompressionSection({ live, set }) {
+    const keys = useLentKeys();
+    return (_jsxs(InspectorSection, { path: "live.contextCompression", children: [_jsx(SwitchRow, { label: "Sliding window", path: "live.contextCompression", value: live.contextCompression, onChange: (contextCompression) => {
+                    set({ contextCompression });
+                } }), live.contextCompression &&
+                (keys ? (_jsx(CompressionSliderRows, { live: live, set: set, keys: keys })) : (_jsx(CompressionNumberRows, { live: live, set: set })))] }));
+}
+/** A blank size sits where a run on the keys puts it. */
+function CompressionSliderRows({ live, set, keys }) {
+    const held = keys.liveInputTokens;
+    const fallback = lentCompression(keys, {
+        triggerTokens: live.compressionTriggerTokens ?? undefined,
+        targetTokens: live.compressionTargetTokens ?? undefined,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(SliderRow, { label: "Trigger", path: "live.contextCompression.triggerTokens", field: "compressionTriggerTokens", value: live.compressionTriggerTokens, fallback: fallback.triggerTokens, min: COMPRESSION_STEP, max: held, step: COMPRESSION_STEP, onChange: (compressionTriggerTokens) => {
+                    set({ compressionTriggerTokens });
+                } }), _jsx(SliderRow, { label: "Keep", path: "live.contextCompression.slidingWindow.targetTokens", field: "compressionTargetTokens", value: live.compressionTargetTokens, fallback: fallback.targetTokens, min: COMPRESSION_STEP, max: held - COMPRESSION_STEP, step: COMPRESSION_STEP, onChange: (compressionTargetTokens) => {
+                    set({ compressionTargetTokens });
+                } })] }));
+}
+function CompressionNumberRows({ live, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Trigger", path: "live.contextCompression.triggerTokens", field: "compressionTriggerTokens", value: live.compressionTriggerTokens, min: 1, isIntegerOnly: true, onChange: (compressionTriggerTokens) => {
+                    set({ compressionTriggerTokens });
+                } }), _jsx(NumberRow, { label: "Keep", path: "live.contextCompression.slidingWindow.targetTokens", field: "compressionTargetTokens", value: live.compressionTargetTokens, min: 1, isIntegerOnly: true, onChange: (compressionTargetTokens) => {
+                    set({ compressionTargetTokens });
+                } })] }));
+}
+function LiveTranscriptsSection({ live, set }) {
+    return (_jsxs(InspectorSection, { title: "Transcripts", path: "live.transcription", children: [_jsx(SwitchRow, { label: "Input", path: "live.transcription.input", value: live.transcriptionInput, onChange: (transcriptionInput) => {
+                    set({ transcriptionInput });
+                } }), _jsx(SwitchRow, { label: "Output", path: "live.transcription.output", value: live.transcriptionOutput, onChange: (transcriptionOutput) => {
+                    set({ transcriptionOutput });
+                } })] }));
+}
+function LiveVadSection({ live, set }) {
+    return (_jsxs(InspectorSection, { title: "Voice activity", path: "live.vad", children: [_jsx(SegmentedRow, { label: "Barge-in", path: "live.vad.activityHandling", value: segmentOf(live.vadActivityHandling), segments: BARGE_IN_SEGMENTS, onChange: (segment) => {
+                    set({ vadActivityHandling: pinOf(segment) });
+                } }), _jsx(SegmentedRow, { label: "Start", path: "live.vad.startSensitivity", value: segmentOf(live.vadStartSensitivity), segments: START_SENSITIVITY_SEGMENTS, onChange: (segment) => {
+                    set({ vadStartSensitivity: pinOf(segment) });
+                } }), _jsx(SegmentedRow, { label: "End", path: "live.vad.endSensitivity", value: segmentOf(live.vadEndSensitivity), segments: END_SENSITIVITY_SEGMENTS, onChange: (segment) => {
+                    set({ vadEndSensitivity: pinOf(segment) });
+                } }), _jsx(NumberRow, { label: "Padding", path: "live.vad.prefixPaddingMs", field: "vadPrefixPaddingMs", value: live.vadPrefixPaddingMs, min: 0, units: "ms", isIntegerOnly: true, onChange: (vadPrefixPaddingMs) => {
+                    set({ vadPrefixPaddingMs });
+                } }), _jsx(NumberRow, { label: "Silence", path: "live.vad.silenceDurationMs", field: "vadSilenceDurationMs", value: live.vadSilenceDurationMs, min: 0, units: "ms", isIntegerOnly: true, onChange: (vadSilenceDurationMs) => {
+                    set({ vadSilenceDurationMs });
+                } })] }));
+}
+function LiveEditor({ draft, setDraft }) {
+    const google = allGoogle(draft);
+    const { live } = draft;
+    const set = patch(setDraft, 'live');
+    return (_jsxs(_Fragment, { children: [_jsx(LiveIngressSection, { live: live, set: set }), _jsx(LiveVoiceSection, { live: live, set: set, google: google }), _jsx(LiveGreetingSection, { live: live, set: set }), _jsx(LiveSessionSection, { live: live, set: set }), _jsx(LiveCompressionSection, { live: live, set: set }), _jsx(LiveTranscriptsSection, { live: live, set: set }), _jsx(LiveVadSection, { live: live, set: set })] }));
+}
+const OUTPUT_MODE_SEGMENTS = [
+    { value: 'text', label: 'Free text', icon: IconAlignLeft },
+    { value: 'structured', label: 'Structured', icon: IconBraces },
+];
+/** The kernel streams over SSE when the mode is left out, so SSE stands for the unset pin. */
+const STREAM_MODE_SEGMENTS = [
+    { value: 'sse', label: 'Streamed', icon: IconWaveSine },
+    { value: 'buffered', label: 'Buffered', icon: IconPackage },
+];
+const SCHEMA_PLACEHOLDER = `{
+  "type": "object",
+  "properties": { "answer": { "type": "string" } },
+  "required": ["answer"]
+}`;
+/** Free text or structured, and a structured reply's schema. */
+function OutputShapeSection({ outputs, set, structured, }) {
+    return (_jsxs(InspectorSection, { title: "Shape", path: "outputs.structured", children: [_jsx(SegmentedRow, { label: "Mode", path: "outputs.structured", value: outputs.mode, segments: OUTPUT_MODE_SEGMENTS, onChange: (mode) => {
+                    set({ mode });
+                } }), structured && (_jsxs(_Fragment, { children: [_jsx(TextRow, { label: "Schema id", path: "outputs.structured", field: "schemaId", isRequired: true, value: outputs.schemaId, placeholder: "reply", onChange: (schemaId) => {
+                            set({ schemaId });
+                        } }), _jsx(TextAreaRow, { label: "JSON Schema", path: "outputs.structured", field: "schemaJson", isRequired: true, rows: 8, hasSpellCheck: false, value: outputs.schemaJson, placeholder: SCHEMA_PLACEHOLDER, onChange: (schemaJson) => {
+                            set({ schemaJson });
+                        } })] }))] }));
+}
+/** What a list's check does with an item it refuses. The check is the project's code. */
+const ITEM_RULE_SEGMENTS = [
+    { value: 'drop', label: 'Remove', icon: IconTrash },
+    { value: 'fix', label: 'Rewrite', icon: IconRefresh },
+];
+function OutputRepairSection({ outputs, set }) {
+    return (_jsxs(InspectorSection, { title: "Repair", path: "outputs.validation", children: [_jsx(SwitchRow, { label: "Repair", path: "outputs.validation", value: outputs.validationEnabled, onChange: (validationEnabled) => {
+                    set({ validationEnabled });
+                } }), outputs.validationEnabled && (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Retries", path: "outputs.validation.maxRetries", units: "retries", field: "maxRetries", value: outputs.maxRetries, min: 0, isIntegerOnly: true, onChange: (maxRetries) => {
+                            set({ maxRetries });
+                        } }), Object.entries(outputs.itemRules).map(([list, onFail]) => (_jsx(SegmentedRow, { label: `A refused item of ${list}`, path: "outputs.validation.items.*.onFail", value: onFail, segments: ITEM_RULE_SEGMENTS, onChange: (next) => {
+                            set({ itemRules: { ...outputs.itemRules, [list]: next } });
+                        } }, list))), _jsx(TextAreaRow, { label: "Guidance", path: "labels.repair.default_guidance", field: "repairGuidance", value: outputs.repairGuidance, placeholder: labelDefault('repair.default_guidance'), onChange: (repairGuidance) => {
+                            set({ repairGuidance });
+                        } })] }))] }));
+}
+function OutputsEditor({ draft, setDraft }) {
+    const { outputs } = draft;
+    const set = patch(setDraft, 'outputs');
+    const shaped = draftAllows(draft, 'outputs.structured');
+    const structured = shaped && outputs.mode === 'structured';
+    return (_jsxs(_Fragment, { children: [shaped && _jsx(OutputShapeSection, { outputs: outputs, set: set, structured: structured }), structured && _jsx(OutputRepairSection, { outputs: outputs, set: set }), _jsxs(InspectorSection, { title: "Streaming", path: "outputs.streaming", children: [_jsx(SegmentedRow, { label: "Delivery", path: "outputs.streaming.mode", value: outputs.streamMode || 'sse', segments: STREAM_MODE_SEGMENTS, onChange: (mode) => {
+                            set({ streamMode: mode === 'sse' ? '' : mode });
+                        } }), _jsx(SwitchRow, { label: "Thoughts", path: "outputs.streaming.streamThoughts", value: outputs.streamThoughts, onChange: (streamThoughts) => {
+                            set({ streamThoughts });
+                        } })] })] }));
+}
+const STOP_KIND_LABEL = {
+    length: 'Length',
+    stream_incomplete: 'Dropped stream',
+    provider_error: 'Provider error',
+};
+/** The picks after one box of the grid changes. The two columns are picked apart. */
+function pickKind(current, kind, column, checked) {
+    const set = (kinds) => CONTINUE_STOP_KINDS.filter((candidate) => candidate === kind ? checked : kinds.includes(candidate));
+    return column === 'offer'
+        ? { ...current, allow: set(current.allow) }
+        : { ...current, auto: set(current.auto) };
+}
+/** What a picked stop does, for its token's hover. */
+function resumptionSays({ allow, auto }, kind) {
+    if (!auto.includes(kind))
+        return 'Offers Continue';
+    return allow.includes(kind)
+        ? 'Continues on its own, and offers Continue'
+        : 'Continues on its own';
+}
+/**
+ * The trigger's tokens: each stop picked in either column, a bolt on the ones that continue on
+ * their own, the first few shown and the rest counted, as the list rows do.
+ */
+function ResumptionTokens({ allow, auto }) {
+    const maxBadges = useContext(ListBadges);
+    const picked = CONTINUE_STOP_KINDS.filter((kind) => allow.includes(kind) || auto.includes(kind));
+    const rest = picked.length - maxBadges;
+    return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [picked.slice(0, maxBadges).map((kind) => (_jsx(Token, { size: "sm", label: STOP_KIND_LABEL[kind], icon: auto.includes(kind) ? _jsx(Icon, { icon: IconBolt, size: "sm" }) : undefined, description: resumptionSays({ allow, auto }, kind) }, kind))), rest > 0 && _jsx(Token, { size: "sm", label: `+${String(rest)}` })] }));
+}
+/** One box of the grid: whether a stop kind is offered, or continues on its own. */
+function ResumptionBox({ current, change, kind, column, }) {
+    return (_jsx(CheckboxInput, { label: `${column === 'offer' ? 'Offer Continue' : 'Continue on its own'} after ${STOP_KIND_LABEL[kind].toLowerCase()}`, isLabelHidden: true, value: (column === 'offer' ? current.allow : current.auto).includes(kind), onChange: (checked) => {
+            change(pickKind(current, kind, column, checked));
+        } }));
+}
+/** The picker's grid: a row per stop kind, with an Offer box and an Auto box. */
+function ResumptionGrid({ current, change }) {
+    const kinds = fieldMeta('turnBehaviour.resumption.allowContinue')?.optionDescriptions;
+    const offerDoc = fieldMeta('turnBehaviour.resumption.allowContinue')?.doc;
+    const autoDoc = fieldMeta('turnBehaviour.resumption.autoContinue')?.doc;
+    const box = (kind, column) => (_jsx(ResumptionBox, { current: current, change: change, kind: kind, column: column }));
+    return (_jsx(VStack, { width: 280, padding: 2, children: _jsx(Table, { density: "compact", dividers: "rows", idKey: "kind", data: CONTINUE_STOP_KINDS.map((kind) => ({ kind })), columns: [
+                {
+                    key: 'kind',
+                    header: 'After',
+                    width: proportional(1),
+                    renderCell: ({ kind }) => (_jsx(Tooltip, { content: kinds?.[kind], hasHoverIndication: false, children: STOP_KIND_LABEL[kind] })),
+                },
+                {
+                    key: 'offer',
+                    header: (_jsx(Tooltip, { content: offerDoc, hasHoverIndication: false, children: "Offer" })),
+                    width: pixel(64),
+                    align: 'center',
+                    renderCell: ({ kind }) => box(kind, 'offer'),
+                },
+                {
+                    key: 'auto',
+                    header: (_jsx(Tooltip, { content: autoDoc, hasHoverIndication: false, children: "Auto" })),
+                    width: pixel(64),
+                    align: 'center',
+                    renderCell: ({ kind }) => box(kind, 'auto'),
+                },
+            ] }) }));
+}
+/**
+ * Resumption as one picker, a checklist per stop kind. Picking anything turns resumption on, and
+ * clearing everything turns it off, so there is no separate switch.
+ */
+function ResumptionRow({ value, onChange, }) {
+    return (_jsx(InspectorRow, { label: "Continue after", path: "turnBehaviour.resumption", children: _jsx(StackItem, { size: "fill", children: _jsx(ComplexSelector, { label: "Continue after", isLabelHidden: true, size: "sm", placement: "below", value: value, triggerLabel: value.allow.length || value.auto.length ? _jsx(ResumptionTokens, { ...value }) : undefined, placeholder: "Never", onChange: onChange, children: (current, change) => _jsx(ResumptionGrid, { current: current, change: change }) }) }) }));
+}
+function ResumptionSection({ draft, set, }) {
+    const turn = draft.turnBehaviour;
+    return (_jsxs(InspectorSection, { title: "Resumption", path: "turnBehaviour.resumption", children: [_jsx(ResumptionRow, { value: turn.resumeEnabled
+                    ? { allow: turn.allowContinue, auto: turn.autoContinue }
+                    : { allow: [], auto: [] }, onChange: ({ allow, auto }) => {
+                    set({
+                        resumeEnabled: allow.length > 0 || auto.length > 0,
+                        allowContinue: allow,
+                        autoContinue: auto,
+                    });
+                } }), turn.resumeEnabled && (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Max rounds", path: "turnBehaviour.resumption.maxContinues", units: "rounds", field: "maxContinues", value: turn.maxContinues, min: 1, isIntegerOnly: true, onChange: (maxContinues) => {
+                            set({ maxContinues });
+                        } }), takesContinueInstruction(draft) && (_jsx(TextAreaRow, { label: "Instruction", path: "labels.continue.instruction", field: "continueInstruction", value: turn.continueInstruction, placeholder: labelDefault('continue.instruction'), onChange: (continueInstruction) => {
+                            set({ continueInstruction });
+                        } }))] }))] }));
+}
+const STEP_LIMIT_SEGMENTS = [
+    { value: 'stop', label: 'Stop', icon: IconHandStop },
+    { value: 'answer', label: 'Answer', icon: IconMessage },
+];
+function TurnBehaviourEditor({ draft, setDraft }) {
+    const turn = draft.turnBehaviour;
+    const set = patch(setDraft, 'turnBehaviour');
+    return (_jsxs(_Fragment, { children: [draftAllows(draft, 'turnBehaviour.resumption') && (_jsx(ResumptionSection, { draft: draft, set: set })), draftAllows(draft, 'turnBehaviour.allowSteering') && (_jsx(InspectorSection, { path: "turnBehaviour.allowSteering", children: _jsx(SwitchRow, { label: "Steering", path: "turnBehaviour.allowSteering", value: turn.allowSteering, onChange: (allowSteering) => {
+                        set({ allowSteering });
+                    } }) })), draftAllows(draft, 'turnBehaviour.atStepLimit') && (_jsx(InspectorSection, { path: "turnBehaviour.atStepLimit", children: _jsx(SegmentedRow, { label: "At the step limit", path: "turnBehaviour.atStepLimit", value: turn.atStepLimit, segments: STEP_LIMIT_SEGMENTS, onChange: (atStepLimit) => {
+                        set({ atStepLimit });
+                    } }) }))] }));
+}
+/** The kernel retries when on-block is left out, so retry stands for the unset pin. */
+const ON_BLOCK_SEGMENTS = [
+    { value: 'retry', label: 'Retry', icon: IconRefresh },
+    { value: 'refuse', label: 'Refuse', icon: IconHandStop },
+];
+/** Each threshold wears the icon of the tool access it starts refusing; none is the guard off. */
+const TAINT_SEGMENTS = [
+    { value: 'off', label: 'None', icon: IconShieldOff },
+    { value: 'destructive', label: 'Destructive', icon: IconFlame },
+    { value: 'write', label: 'Writes', icon: IconPencil },
+];
+const DESTINATION_SEGMENTS = [
+    { value: 'off', label: 'Log', icon: IconFlag },
+    { value: 'confirm', label: 'Ask', icon: IconUserCheck },
+    { value: 'block', label: 'Refuse', icon: IconBan },
+];
+/** The addresses an image or link detector lets through besides the ones the model was given. */
+function UrlAllowRows({ detector, allow, onChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NamesRow, { label: "Allowed hosts", path: `guardrails.detect.${detector}.allow.hosts`, field: `allow.${detector}.hosts`, value: allow.hosts, onChange: (hosts) => {
+                    onChange({ ...allow, hosts });
+                } }), _jsx(SwitchRow, { label: "Tool URLs", path: `guardrails.detect.${detector}.allow.fromTools`, value: allow.fromTools, onChange: (fromTools) => {
+                    onChange({ ...allow, fromTools });
+                } })] }));
+}
+/** The note that binds the canary, on the canary leak detector's page while it reads somewhere. */
+function CanarySection({ guardrails, set }) {
+    return (_jsx(InspectorSection, { children: _jsx(TextAreaRow, { label: "Bind note", path: "labels.canary.bind_note", field: "canaryBindNote", value: guardrails.canaryBindNote, placeholder: labelDefault('canary.bind_note'), onChange: (canaryBindNote) => {
+                set({ canaryBindNote });
+            } }) }));
+}
+/**
+ * Retries and guidance, shown when a blocked reply goes back to the agent. At no retries nothing goes
+ * back, so the row says what the visitor reads in place of the reply, and guidance has no reader.
+ */
+function BlockedReplyRetryRows({ guardrails, withheld, set, }) {
+    const isNever = guardrails.blockedReplyMaxRetries === 0;
+    return (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Retries", path: "guardrails.blockedReply.maxRetries", units: "retries", field: "blockedReplyMaxRetries", value: guardrails.blockedReplyMaxRetries, min: 0, isIntegerOnly: true, status: isNever
+                    ? {
+                        type: 'warning',
+                        message: `At 0 a blocked reply is not rewritten. The visitor reads: \u201c${withheld}\u201d`,
+                    }
+                    : undefined, onChange: (blockedReplyMaxRetries) => {
+                    set({ blockedReplyMaxRetries });
+                } }), !isNever && (_jsx(TextAreaRow, { label: "Guidance", path: "labels.egress.default_repair_guidance", field: "egressRepairGuidance", value: guardrails.egressRepairGuidance, placeholder: labelDefault('egress.default_repair_guidance'), onChange: (egressRepairGuidance) => {
+                    set({ egressRepairGuidance });
+                } }))] }));
+}
+/** What happens to a reply a detector blocks. */
+function BlockedReplySection({ guardrails, withheld, set, }) {
+    return (_jsxs(InspectorSection, { path: "guardrails.blockedReply", children: [_jsx(SegmentedRow, { label: "On block", path: "guardrails.blockedReply.onBlock", value: guardrails.blockedReplyOnBlock || 'retry', segments: ON_BLOCK_SEGMENTS, onChange: (onBlock) => {
+                    set({ blockedReplyOnBlock: onBlock === 'retry' ? '' : onBlock });
+                } }), guardrails.blockedReplyOnBlock === 'refuse' ? (_jsx(TextAreaRow, { label: "Message", path: "labels.egress.refusal", field: "egressRefusal", value: guardrails.egressRefusal, placeholder: labelDefault('egress.refusal'), onChange: (egressRefusal) => {
+                    set({ egressRefusal });
+                } })) : (_jsx(BlockedReplyRetryRows, { guardrails: guardrails, withheld: withheld, set: set }))] }));
+}
+function NetworkSection({ guardrails, set }) {
+    const on = useContext(RunsOn);
+    const runtime = useContext(LocalConnection)?.runtime ?? on;
+    return (_jsxs(InspectorSection, { title: "Network", path: "guardrails.network", note: studioNetworkNote(runtime), children: [_jsx(SwitchRow, { label: "Private", path: "guardrails.network.allowPrivateNetworks", value: guardrails.allowPrivateNetworks, onChange: (allowPrivateNetworks) => {
+                    set({ allowPrivateNetworks });
+                } }), _jsx(NamesRow, { label: "Allow hosts", path: "guardrails.network.allowedHosts", field: "allowedHosts", value: guardrails.allowedHosts, placeholder: "None: private hosts stay blocked", isDisabled: guardrails.allowPrivateNetworks, disabledMessage: "Every private host is already allowed.", onChange: (allowedHosts) => {
+                    set({ allowedHosts });
+                } }), _jsx(NamesRow, { label: "Schemes", path: "guardrails.network.allowedSchemes", field: "allowedSchemes", value: guardrails.allowedSchemes, onChange: (allowedSchemes) => {
+                    set({ allowedSchemes });
+                } })] }));
+}
+function QuotaSection({ guardrails, set }) {
+    return (_jsxs(InspectorSection, { title: "Quota", path: "guardrails.quota", note: sectionNote('quota'), children: [_jsx(SwitchRow, { label: "Daily cap", path: "guardrails.quota", value: guardrails.quotaEnabled, onChange: (quotaEnabled) => {
+                    set({ quotaEnabled });
+                } }), guardrails.quotaEnabled && (_jsxs(_Fragment, { children: [_jsx(NumberRow, { label: "Per day", path: "guardrails.quota.perDay", field: "quotaPerDay", isRequired: true, value: guardrails.quotaPerDay, min: 1, units: "turns", isIntegerOnly: true, onChange: (quotaPerDay) => {
+                            set({ quotaPerDay });
+                        } }), _jsx(TextAreaRow, { label: "Message", path: "labels.quota.exhausted", field: "quotaMessage", value: guardrails.quotaMessage, placeholder: labelDefault('quota.exhausted', {
+                            perDay: guardrails.quotaPerDay ?? '{perDay}',
+                        }), onChange: (quotaMessage) => {
+                            set({ quotaMessage });
+                        } })] }))] }));
+}
+/** Every action, so one the kernel adds fails the type check until it has an icon. */
+const DETECT_ACTION_ICON = {
+    ignore: IconEyeOff,
+    flag: IconFlag,
+    redact: IconEraser,
+    block: IconBan,
+};
+/** Every action, with the one the kernel recommends marked. */
+function detectSegments(recommended) {
+    return DETECT_ACTIONS.map((action) => ({
+        value: action,
+        label: DETECT_ACTION_META[action].label,
+        icon: DETECT_ACTION_ICON[action],
+        isRecommended: action === recommended,
+    }));
+}
+/** "Mixed": the pick a detector shows while its boundaries differ. Offered only then, already picked. */
+const MIXED_SEGMENT = {
+    value: 'mixed',
+    label: 'Mixed',
+    icon: IconAdjustmentsHorizontal,
+    description: sectionNote('detect.mixed'),
+};
+const TOOL_KIND_LABEL = {
+    function: 'Function',
+    http: 'HTTP',
+    mcp: 'MCP',
+    agent: 'Agent',
+};
+/** Where a tool's text crosses, with the boundary each kind of tool has there. */
+const TOOL_CROSSINGS = [
+    { title: 'Tool arguments', boundary: (kind) => `tool_arguments_${kind}` },
+    { title: 'Tool output', boundary: (kind) => `tool_output_${kind}` },
+    { title: 'Tool errors', boundary: (kind) => `tool_failure_${kind}` },
+    { title: 'Shown from tools', boundary: (kind) => `tool_shown_${kind}` },
+];
+const TOOL_BOUNDARY_SET = new Set(TOOL_BOUNDARIES);
+/** One boundary of one detector: what happens to a match there. */
+function BoundaryRow({ label, detector, boundary, actions, recommended, onChange, }) {
+    return (_jsx(SegmentedRow, { label: label, path: `guardrails.detect.${detector}.at.${boundary}`, value: actions[boundary], segments: detectSegments(recommended), onChange: (action) => {
+            onChange({ ...actions, [boundary]: action });
+        } }));
+}
+/**
+ * One control for a detector's every boundary: it shows the action they share, or "Mixed" when
+ * they differ, and a pick sets them all.
+ */
+function ActionRow({ detector, label, defaults, boundaries, actions, status, trailing, onChange, }) {
+    const taken = [...new Set(boundaries.map((boundary) => actions[boundary]))];
+    const uniform = taken.length === 1;
+    // One action is recommended for the whole detector only when every boundary recommends the same.
+    const recommended = [...new Set(boundaries.map((boundary) => defaults?.[boundary]))];
+    const segments = detectSegments(recommended.length === 1 ? recommended[0] : undefined);
+    return (_jsx(SegmentedRow, { label: label, path: `guardrails.detect.${detector}.action`, value: uniform ? taken[0] : 'mixed', segments: uniform ? segments : [...segments, MIXED_SEGMENT], status: status, trailing: trailing, onChange: (action) => {
+            if (action === 'mixed')
+                return;
+            const next = { ...actions };
+            for (const boundary of boundaries)
+                next[boundary] = action;
+            onChange(next);
+        } }));
+}
+/** Every boundary of one detector, in the kernel's order, a tool's under the crossing it is. */
+function BoundaryRows({ detector, defaults, boundaries, actions, onChange, }) {
+    const has = new Set(boundaries);
+    // The boundaries that are not a tool's, which sit either side of the tool ones in the kernel's order.
+    const plain = boundaries.filter((boundary) => !TOOL_BOUNDARY_SET.has(boundary));
+    const firstTool = BOUNDARIES.findIndex((boundary) => TOOL_BOUNDARY_SET.has(boundary));
+    const row = (boundary, label) => (_jsx(BoundaryRow, { label: label, detector: detector, boundary: boundary, actions: actions, recommended: defaults?.[boundary], onChange: onChange }, boundary));
+    return (_jsxs(_Fragment, { children: [plain
+                .filter((boundary) => BOUNDARIES.indexOf(boundary) < firstTool)
+                .map((boundary) => row(boundary, BOUNDARY_META[boundary].label)), TOOL_CROSSINGS.filter((crossing) => TOOL_KINDS.some((kind) => has.has(crossing.boundary(kind)))).map((crossing) => (_jsxs(VStack, { gap: 2, children: [_jsx(InspectorGroupTitle, { title: crossing.title }), TOOL_KINDS.filter((kind) => has.has(crossing.boundary(kind))).map((kind) => row(crossing.boundary(kind), TOOL_KIND_LABEL[kind]))] }, crossing.title))), plain
+                .filter((boundary) => BOUNDARIES.indexOf(boundary) > firstTool)
+                .map((boundary) => row(boundary, BOUNDARY_META[boundary].label))] }));
+}
+/**
+ * What a detector does with a match: one control for every boundary, and each boundary's own
+ * under it, shut until opened. It starts open while the boundaries differ.
+ */
+function ActionSection({ detector, defaults, boundaries, actions, status, onChange, }) {
+    const uniform = new Set(boundaries.map((boundary) => actions[boundary])).size === 1;
+    return (_jsxs(InspectorSection, { children: [_jsx(ActionRow, { detector: detector, label: "On a match", defaults: defaults, boundaries: boundaries, actions: actions, status: status, onChange: onChange }), boundaries.length > 1 && (_jsx(CollapsibleGroup, { type: "multiple", density: "compact", defaultValue: uniform ? [] : ['each'], children: _jsx(Collapsible, { value: "each", trigger: _jsx(Text, { type: "supporting", children: "Each boundary" }), children: _jsx(VStack, { gap: 3, children: _jsx(BoundaryRows, { detector: detector, defaults: defaults, boundaries: boundaries, actions: actions, onChange: onChange }) }) }) }))] }));
+}
+const PATTERN_KIND_SEGMENTS = [
+    { value: 'words', label: 'Words', icon: IconAbc },
+    { value: 'pattern', label: 'Regular expression', icon: IconRegex },
+];
+/** The flags a regular expression takes, each by what it does. */
+const REGEX_FLAGS = [
+    { flag: 'i', label: 'Ignore case' },
+    { flag: 'm', label: '^ and $ match each line' },
+    { flag: 's', label: '. matches line breaks' },
+    { flag: 'u', label: 'Unicode' },
+];
+/** A regular expression's flags as a checklist: the ones set are checked. */
+function RegexFlagsRow({ detector, flags, onChange, }) {
+    return (_jsx(InspectorRow, { label: "Options", path: `guardrails.detect.${detector}.patterns.*.flags`, children: _jsx(StackItem, { size: "fill", children: _jsx(CheckboxList, { label: "Options", isLabelHidden: true, density: "compact", value: REGEX_FLAGS.filter(({ flag }) => flags.includes(flag)).map(({ flag }) => flag), onChange: (checked) => {
+                    onChange(REGEX_FLAGS.filter(({ flag }) => checked.includes(flag))
+                        .map(({ flag }) => flag)
+                        .join(''));
+                }, children: REGEX_FLAGS.map(({ flag, label }) => (_jsx(CheckboxListItem, { value: flag, label: label }, flag))) }) }) }));
+}
+/** One of the builder's patterns: its name, and the words or the regular expression it matches. */
+function PatternRows({ detector, pattern, index, status, onChange, onRemove, }) {
+    const remove = `Remove ${pattern.name.trim() || `pattern ${String(index + 1)}`}`;
+    return (_jsxs(VStack, { gap: 2, children: [_jsxs(InspectorRow, { label: "Name", path: `guardrails.detect.${detector}.patterns.*.name`, hasIssue: status !== undefined, children: [_jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `Pattern ${String(index + 1)} name`, isLabelHidden: true, size: "sm", status: status, value: pattern.name, placeholder: "codenames", onChange: (name) => {
+                                onChange({ ...pattern, name });
+                            } }) }), _jsx(Tooltip, { content: remove, children: _jsx(IconButton, { label: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onRemove }) })] }), _jsx(SegmentedRow, { label: "Matches", path: `guardrails.detect.${detector}.patterns`, value: pattern.kind, segments: PATTERN_KIND_SEGMENTS, onChange: (kind) => {
+                    onChange({ ...pattern, kind });
+                } }), pattern.kind === 'words' ? (_jsx(NamesRow, { label: "Words", path: `guardrails.detect.${detector}.patterns.*.words`, value: pattern.words, placeholder: "Bluebird", onChange: (words) => {
+                    onChange({ ...pattern, words });
+                } })) : (_jsxs(_Fragment, { children: [_jsx(TextRow, { label: "Expression", path: `guardrails.detect.${detector}.patterns.*.pattern`, value: pattern.pattern, hint: "ORD-\\d{6}", onChange: (source) => {
+                            onChange({ ...pattern, pattern: source });
+                        } }), _jsx(RegexFlagsRow, { detector: detector, flags: pattern.flags, onChange: (flags) => {
+                            onChange({ ...pattern, flags });
+                        } })] }))] }));
+}
+/** The builder's own patterns for one detector; `field` is the draft field their issues are reported at. */
+function PatternList({ detector, field, patterns, onChange, }) {
+    const status = useFieldStatus()(field);
+    return (_jsxs(_Fragment, { children: [patterns.map((pattern, index) => (_jsx(PatternRows
+            // biome-ignore lint/suspicious/noArrayIndexKey: patterns have no id and are only appended or removed
+            , { detector: detector, pattern: pattern, index: index, status: status, onChange: (next) => {
+                    onChange(patterns.map((each, at) => (at === index ? next : each)));
+                }, onRemove: () => {
+                    onChange(patterns.filter((_, at) => at !== index));
+                } }, index))), _jsx(Button, { label: "Add pattern", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), onClick: () => {
+                    onChange([...patterns, newPattern()]);
+                } })] }));
+}
+const PATTERN_USE_SEGMENTS = [
+    {
+        value: 'theorem',
+        label: "theorem's",
+        icon: IconTheorem,
+        description: sectionNote('detect.source.theorem'),
+    },
+    {
+        value: 'mine',
+        label: 'Mine',
+        icon: IconWriting,
+        description: sectionNote('detect.source.mine'),
+    },
+    {
+        value: 'both',
+        label: 'Both',
+        icon: IconLayersUnion,
+        description: sectionNote('detect.source.both'),
+    },
+];
+/**
+ * Whose patterns one of Theorem's detectors reads with, and the builder's when it reads with them.
+ * Patterns set aside by a move to Theorem's alone come back on a move away, while the page is open.
+ */
+function PatternSourceSection({ detector, source, onChange, }) {
+    const setAside = useRef([]);
+    const mine = source.patterns.length > 0;
+    const use = source.theorem ? (mine ? 'both' : 'theorem') : 'mine';
+    return (_jsxs(InspectorSection, { title: "Patterns", children: [_jsx(SegmentedRow, { label: "Read with", path: `guardrails.detect.${detector}.theorem`, value: use, segments: PATTERN_USE_SEGMENTS, onChange: (next) => {
+                    if (next === 'theorem') {
+                        setAside.current = source.patterns;
+                        onChange({ ...source, theorem: true, patterns: [] });
+                        return;
+                    }
+                    const kept = setAside.current.length ? setAside.current : [newPattern()];
+                    onChange({
+                        ...source,
+                        theorem: next === 'both',
+                        patterns: mine ? source.patterns : kept,
+                    });
+                } }), use !== 'theorem' && (_jsx(PatternList, { detector: detector, field: `sources.${detector}.patterns`, patterns: source.patterns, onChange: (patterns) => {
+                    onChange({ ...source, patterns });
+                } })), mine && (_jsx(TextRow, { label: "Retry hint", path: `guardrails.detect.${detector}.hint`, field: `sources.${detector}.hint`, value: source.hint, onChange: (hint) => {
+                    onChange({ ...source, hint });
+                } }))] }));
+}
+function isUrlDetector(detector) {
+    return DETECTOR_META[detector].allow === 'urls';
+}
+/** A problem with the detectors as a whole, such as a key of the builder's the kernel refuses. */
+function DetectIssue() {
+    const status = useFieldStatus()('detect');
+    return status?.message ? _jsx(Banner, { status: "error", title: status.message }) : null;
+}
+/**
+ * What a detector's row says when a field on its page has an issue, so the list shows where: the
+ * issue when there is one, a count when there are more, since the page says each on its own row.
+ */
+function usePageIssues() {
+    const issues = useContext(NodeIssues);
+    return (onPage) => {
+        const messages = issues.filter(onPage).map((issue) => issue.message);
+        if (messages.length === 0)
+            return undefined;
+        const [only] = messages;
+        return {
+            type: 'error',
+            message: messages.length === 1 ? only : `${String(messages.length)} things to fix`,
+        };
+    };
+}
+/** The button at the end of a detector's row that opens its page. */
+function OpenDetectorButton({ label, onOpen }) {
+    const open = `Open ${label}: patterns and boundaries`;
+    return (_jsx(Tooltip, { content: open, children: _jsx(IconButton, { label: open, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconChevronRight, size: "sm" }), onClick: onOpen }) }));
+}
+/** What an own detector is called before it has a label. */
+const ownName = (detector) => detector.label.trim() || detector.key.trim() || 'New detector';
+/**
+ * Every detector on one line: its name and what it does with a match, then the button that opens
+ * its page. Theorem's sit under their group, the builder's own under "Custom detectors", and one that applies
+ * at no boundary the profile has is left out.
+ */
+function DetectSection({ guardrails, boundaries, set, onOpen, }) {
+    const { detect, own } = guardrails;
+    const pageIssue = usePageIssues();
+    const has = new Set(boundaries);
+    const groups = DETECTOR_GROUPS.map((group) => ({
+        group,
+        rows: DETECTORS.filter((detector) => DETECTOR_META[detector].group === group)
+            .map((detector) => ({
+            detector,
+            applies: DETECTOR_BOUNDARIES[detector].filter((boundary) => has.has(boundary)),
+        }))
+            .filter(({ applies }) => applies.length > 0),
+    })).filter(({ rows }) => rows.length > 0);
+    return (_jsxs(InspectorSection, { title: "Detect", path: "guardrails.detect", children: [_jsx(DetectIssue, {}), groups.map(({ group, rows }) => (_jsxs(VStack, { gap: 2, children: [_jsx(InspectorGroupTitle, { title: DETECTOR_GROUP_META[group].label, hint: DETECTOR_GROUP_META[group].doc }), rows.map(({ detector, applies }) => (_jsx(ActionRow, { detector: detector, label: DETECTOR_META[detector].short ?? DETECTOR_META[detector].label, defaults: DETECTOR_META[detector].defaults, boundaries: applies, actions: detect[detector], status: pageIssue(({ field }) => field?.startsWith(`sources.${detector}.`) === true ||
+                            field?.startsWith(`allow.${detector}.`) === true ||
+                            (field === 'innocentNames' && DETECTOR_META[detector].allow === 'names')), trailing: _jsx(OpenDetectorButton, { label: DETECTOR_META[detector].label, onOpen: () => {
+                                onOpen({ detector });
+                            } }), onChange: (actions) => {
+                            set({ detect: { ...detect, [detector]: actions } });
+                        } }, detector)))] }, group))), _jsxs(VStack, { gap: 2, children: [_jsx(InspectorGroupTitle, { title: "Custom detectors", hint: sectionNote('detect.own') }), own.map((detector, index) => (_jsx(ActionRow
+                    // biome-ignore lint/suspicious/noArrayIndexKey: detectors are keyed by text the builder is typing
+                    , { detector: "*", label: ownName(detector), boundaries: boundaries, actions: detector.at, status: pageIssue(({ field, index: at }) => (field === 'own' && at === index) ||
+                            field?.startsWith(`own.${String(index)}.`) === true), trailing: _jsx(OpenDetectorButton, { label: ownName(detector), onOpen: () => {
+                                onOpen({ own: index });
+                            } }), onChange: (at) => {
+                            set({ own: own.map((each, i) => (i === index ? { ...detector, at } : each)) });
+                        } }, index))), _jsx(Button, { label: "Add detector", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), onClick: () => {
+                            set({ own: [...own, newOwnDetector()] });
+                            onOpen({ own: own.length });
+                        } })] })] }));
+}
+/**
+ * The top of a page inside a node, such as a detector's: the way back to the list, its name, and
+ * what it is, with anything wrong with the list as a whole under them.
+ */
+function PageHeader({ title, doc, back, trailing, onBack, children, }) {
+    return (_jsx(Section, { variant: "transparent", padding: 3, children: _jsxs(VStack, { gap: 1, children: [_jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(Tooltip, { content: back, children: _jsx(IconButton, { label: back, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconArrowLeft, size: "sm" }), onClick: onBack }) }), _jsx(StackItem, { size: "fill", children: _jsx(Text, { type: "label", weight: "semibold", children: title }) }), trailing] }), doc && _jsx(Text, { type: "supporting", children: doc }), children] }) }));
+}
+/** One of Theorem's detectors: its action, whose patterns it reads with, what it lets through, its boundaries. */
+function DetectorPage({ detector, boundaries, hasCanary, guardrails, set, onBack, }) {
+    const { detect, allow, sources, innocentNames } = guardrails;
+    const meta = DETECTOR_META[detector];
+    const setActions = (actions) => {
+        set({ detect: { ...detect, [detector]: actions } });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: meta.label, doc: meta.doc, back: "Back to detectors", onBack: onBack, children: _jsx(DetectIssue, {}) }), _jsx(ActionSection, { detector: detector, defaults: meta.defaults, boundaries: boundaries, actions: detect[detector], onChange: setActions }), detector === 'canary_leak' && hasCanary && (_jsx(CanarySection, { guardrails: guardrails, set: set })), meta.patterns && (_jsx(PatternSourceSection, { detector: detector, source: sources[detector], onChange: (next) => {
+                    set({ sources: { ...sources, [detector]: next } });
+                } })), isUrlDetector(detector) && (_jsx(InspectorSection, { title: "Allow", children: _jsx(UrlAllowRows, { detector: detector, allow: allow[detector], onChange: (next) => {
+                        set({ allow: { ...allow, [detector]: next } });
+                    } }) })), meta.allow === 'names' && (_jsx(InspectorSection, { title: "Allow", children: _jsx(NamesRow, { label: "Names", path: `guardrails.detect.${detector}.allow.names`, field: "innocentNames", value: innocentNames, onChange: (names) => {
+                        set({ innocentNames: names });
+                    } }) })), _jsx(Suspense, { fallback: null, children: _jsx(DetectorTester, { only: detector }) })] }));
+}
+/** One detector of the builder's own: its name and key, its action, its patterns, its boundaries. */
+function OwnDetectorPage({ detector, index, boundaries, onChange, onRemove, onBack, }) {
+    const statusAt = useFieldStatus();
+    const status = statusAt('own', index);
+    const remove = `Remove ${ownName(detector)}`;
+    const setActions = (at) => {
+        onChange({ ...detector, at });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: ownName(detector), doc: fieldMeta('guardrails.detect.*')?.doc, back: "Back to detectors", trailing: _jsx(Tooltip, { content: remove, children: _jsx(IconButton, { label: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: onRemove }) }), onBack: onBack, children: _jsx(DetectIssue, {}) }), _jsxs(InspectorSection, { title: "Detector", children: [_jsx(TextRow, { label: "Name", path: "guardrails.detect.*.label", field: `own.${String(index)}.label`, value: detector.label, placeholder: "Codenames", onChange: (label) => {
+                            onChange({ ...detector, label });
+                        } }), _jsx(TextRow, { label: "Key", path: "guardrails.detect.*", status: status, value: detector.key, placeholder: "acme.codenames", onChange: (key) => {
+                            onChange({ ...detector, key });
+                        } })] }), _jsx(ActionSection, { detector: "*", boundaries: boundaries, actions: detector.at, status: statusAt(`own.${String(index)}.at`), onChange: setActions }), _jsxs(InspectorSection, { children: [_jsx(PatternList, { detector: "*", field: `own.${String(index)}.patterns`, patterns: detector.patterns, onChange: (patterns) => {
+                            onChange({ ...detector, patterns });
+                        } }), _jsx(TextRow, { label: "Retry hint", path: "guardrails.detect.*.hint", field: `own.${String(index)}.hint`, value: detector.hint, onChange: (hint) => {
+                            onChange({ ...detector, hint });
+                        } })] }), _jsx(Suspense, { fallback: null, children: _jsx(DetectorTester, { only: detector.key }) })] }));
+}
+/** The page for `open`, or `undefined` when what it names is gone or applies nowhere in this profile. */
+function openDetectorPage(open, { guardrails, set }, boundaries, hasCanary, onBack) {
+    if (open === null)
+        return undefined;
+    if ('detector' in open) {
+        const has = new Set(boundaries);
+        const applies = DETECTOR_BOUNDARIES[open.detector].filter((boundary) => has.has(boundary));
+        if (applies.length === 0)
+            return undefined;
+        return (_jsx(DetectorPage, { detector: open.detector, boundaries: applies, hasCanary: hasCanary, guardrails: guardrails, set: set, onBack: onBack }));
+    }
+    const { own } = guardrails;
+    const detector = own.at(open.own);
+    if (!detector)
+        return undefined;
+    return (_jsx(OwnDetectorPage, { detector: detector, index: open.own, boundaries: boundaries, onChange: (next) => {
+            set({ own: own.map((each, at) => (at === open.own ? next : each)) });
+        }, onRemove: () => {
+            set({ own: own.filter((_, at) => at !== open.own) });
+            onBack();
+        }, onBack: onBack }));
+}
+/** The nearest element above `node` that scrolls it. */
+function scrollerOf(node) {
+    for (let up = node.parentElement; up; up = up.parentElement) {
+        if (/auto|scroll/.test(getComputedStyle(up).overflowY))
+            return up;
+    }
+    return null;
+}
+/** Fades `node` out at the theme's fast duration and standard curve, at once when motion is off. */
+async function fadeOut(node) {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches)
+        return;
+    const style = getComputedStyle(node);
+    const time = style.getPropertyValue('--duration-fast').trim();
+    const fade = node.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: Number.parseFloat(time) * (time.endsWith('ms') ? 1 : 1000),
+        easing: style.getPropertyValue('--ease-standard').trim(),
+        fill: 'forwards',
+    });
+    await fade.finished.catch(() => undefined);
+}
+/**
+ * A node's list and the page one of its rows opens, one at a time: `show` fades the view out and
+ * swaps it, and `frame` holds what is shown. A page opens at its top, and the list comes back
+ * where it was left.
+ */
+function usePageSwap() {
+    const [open, setOpen] = useState(null);
+    const view = useRef(null);
+    // Where the list was scrolled to when a page opened, to put it back there.
+    const listScroll = useRef(0);
+    const leavePage = useContext(LeavePage);
+    const show = (next) => {
+        const node = view.current;
+        if (node && open === null)
+            listScroll.current = scrollerOf(node)?.scrollTop ?? 0;
+        const left = leavePage();
+        const swap = () => {
+            left();
+            setOpen(next);
+        };
+        if (node)
+            void fadeOut(node).then(swap);
+        else
+            swap();
+    };
+    /** `viewKey` is `'list'` for the list, and names the page otherwise. */
+    const frame = (viewKey, children) => (_jsx(PageFrame, { viewKey: viewKey, view: view, listScroll: listScroll, children: children }));
+    return { open, show, frame };
+}
+/** What `usePageSwap` shows; the view that mounts fades in (`.editor-page`). */
+function PageFrame({ viewKey, view, listScroll, children, }) {
+    const shown = useRef(viewKey);
+    // Before either fades in.
+    useLayoutEffect(() => {
+        const node = view.current;
+        if (!node || shown.current === viewKey)
+            return;
+        shown.current = viewKey;
+        if (viewKey === 'list')
+            scrollerOf(node)?.scrollTo({ top: listScroll.current });
+        else
+            node.scrollIntoView({ block: 'start' });
+    }, [viewKey, view, listScroll]);
+    return (_jsx("div", { ref: view, className: "editor-page", children: children }, viewKey));
+}
+function GuardrailsEditor({ draft, setDraft }) {
+    const { guardrails } = draft;
+    const set = patch(setDraft, 'guardrails');
+    const on = useContext(RunsOn);
+    const boundaries = draft.identity.profileType === 'host' ? TOOL_BOUNDARIES : BOUNDARIES;
+    const { open, show, frame } = usePageSwap();
+    const page = openDetectorPage(open, { guardrails, set }, boundaries, plantsCanary(draft), () => {
+        show(null);
+    });
+    if (page)
+        return frame(JSON.stringify(open), page);
+    return frame('list', _jsxs(_Fragment, { children: [_jsx(DetectSection, { guardrails: guardrails, boundaries: boundaries, set: set, onOpen: show }), draftAllows(draft, 'guardrails.blockedReply') && (_jsx(BlockedReplySection, { guardrails: guardrails, withheld: labelValue(draft, 'error.safety') || labelDefault('error.safety'), set: set })), _jsx(NetworkSection, { guardrails: guardrails, set: set }), draftAllows(draft, 'guardrails.taint') && (_jsxs(InspectorSection, { title: "After a remote read", path: "guardrails.taint", note: studioTaintNote(on), children: [_jsx(SegmentedRow, { label: "Refuse calls", path: "guardrails.taint.afterRemoteRead", value: guardrails.taintAfterRemoteRead || 'off', segments: TAINT_SEGMENTS, onChange: (gate) => {
+                            set({ taintAfterRemoteRead: gate === 'off' ? '' : gate });
+                        } }), _jsx(SegmentedRow, { label: "New address", path: "guardrails.taint.remoteDestination", value: guardrails.taintRemoteDestination || 'off', segments: DESTINATION_SEGMENTS, onChange: (gate) => {
+                            set({ taintRemoteDestination: gate === 'off' ? '' : gate });
+                        } })] })), _jsx(QuotaSection, { guardrails: guardrails, set: set })] }));
+}
+/** Traces go to the studio's store, or to the store a project's profile names, shown by its name. */
+function traceSegments(destination) {
+    const on = destination === STUDIO_TRACE_DESTINATION
+        ? { label: 'Studio', icon: IconFlask }
+        : { label: destination, icon: IconDatabase };
+    return [
+        { value: 'studio', ...on },
+        { value: 'off', label: 'Off', icon: IconEyeOff },
+    ];
+}
+const INCLUDE_FLAGS = [
+    { key: 'upstreamLog', label: 'Upstream log' },
+    { key: 'outboundWire', label: 'Outbound wire' },
+    { key: 'evidenceRaw', label: 'Raw evidence' },
+    { key: 'usage', label: 'Usage' },
+    { key: 'guardrailDecisions', label: 'Decisions' },
+    { key: 'guardrailMatchPreview', label: 'Match preview' },
+];
+const SCRUB_FLAGS = [
+    { key: 'sensitive', label: 'Sensitive' },
+    { key: 'injection', label: 'Injection' },
+    { key: 'canary', label: 'Canary' },
+];
+/** A set of on-or-off flags as one checklist: the ones on are checked. */
+function FlagList({ label, path, flags, value, onChange, }) {
+    return (_jsx(CheckboxList, { label: label, isLabelHidden: true, density: "compact", value: flags.filter((flag) => value[flag.key]).map((flag) => flag.key), onChange: (checked) => {
+            const next = { ...value };
+            for (const flag of flags)
+                next[flag.key] = checked.includes(flag.key);
+            onChange(next);
+        }, children: flags.map((flag) => (_jsx(CheckboxListItem, { value: flag.key, label: flag.label, 
+            // A node, not a string, so the kernel's whole entry wraps instead of truncating.
+            description: _jsx(Text, { type: "supporting", children: fieldMeta(`${path}.${flag.key}`)?.doc }) }, flag.key))) }));
+}
+const PERCENT = new Intl.NumberFormat('en-US', { style: 'percent' });
+const RESOURCE_PLACEHOLDER = `{
+  "service.name": "my-agent"
+}`;
+/** Whether traces are written, and how many turns are sampled. */
+function TracesSection({ observability, set }) {
+    const on = observability.writeTo !== false;
+    return (_jsxs(InspectorSection, { title: "Traces", path: "observability", children: [_jsx(SegmentedRow, { label: "Write to", path: "observability.writeTo", value: on ? 'studio' : 'off', segments: traceSegments(observability.destination), onChange: (segment) => {
+                    set({ writeTo: segment === 'off' ? false : observability.destination });
+                } }), on && (_jsx(SliderRow, { label: "Sample", path: "observability.sampleRate", field: "sampleRate", value: observability.sampleRate, min: 0, max: 1, step: 0.05, format: (rate) => PERCENT.format(rate), onChange: (sampleRate) => {
+                    set({ sampleRate });
+                } }))] }));
+}
+/** What a trace keeps, and what is scrubbed from it. */
+function TraceContentSections({ observability, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorSection, { path: "observability.include", children: _jsx(FlagList, { label: "Keep", path: "observability.include", flags: INCLUDE_FLAGS, value: observability.include, onChange: (include) => {
+                        set({ include });
+                    } }) }), _jsx(InspectorSection, { path: "observability.scrub", children: _jsx(FlagList, { label: "Scrub", path: "observability.scrub", flags: SCRUB_FLAGS, value: observability.scrub, onChange: (scrub) => {
+                        set({ scrub });
+                    } }) })] }));
+}
+function TraceStorageSection({ observability, set }) {
+    return (_jsxs(InspectorSection, { title: "Storage", note: sectionNote('traces.storage'), children: [_jsx(NumberRow, { label: "Keep for", path: "observability.retainForDays", field: "retainForDays", units: "days", value: observability.retainForDays, isIntegerOnly: true, onChange: (retainForDays) => {
+                    set({ retainForDays });
+                } }), _jsx(NumberRow, { label: "Rotate at", path: "observability.rotateAfterMiB", field: "rotateAfterMiB", units: "MiB", value: observability.rotateAfterMiB, min: 1, onChange: (rotateAfterMiB) => {
+                    set({ rotateAfterMiB });
+                } }), _jsx(TextAreaRow, { label: "Resource", path: "observability.resource", field: "resourceJson", value: observability.resourceJson, rows: 3, hasSpellCheck: false, placeholder: RESOURCE_PLACEHOLDER, onChange: (resourceJson) => {
+                    set({ resourceJson });
+                } })] }));
+}
+/** Where traces go, what they keep, and how your host stores them. */
+function ObservabilityEditor({ draft, setDraft }) {
+    const { observability } = draft;
+    const set = patch(setDraft, 'observability');
+    const on = observability.writeTo !== false;
+    return (_jsxs(_Fragment, { children: [_jsx(TracesSection, { observability: observability, set: set }), on && (_jsxs(_Fragment, { children: [_jsx(TraceContentSections, { observability: observability, set: set }), _jsx(TraceStorageSection, { observability: observability, set: set })] }))] }));
+}
+const TOOL_TYPE_SEGMENTS = [
+    { value: 'function', label: 'Function', icon: TOOL_TYPE_ICON.function },
+    { value: 'http', label: 'HTTP', icon: TOOL_TYPE_ICON.http },
+    { value: 'mcp', label: 'MCP', icon: TOOL_TYPE_ICON.mcp },
+    { value: 'agent', label: 'Agent', icon: TOOL_TYPE_ICON.agent },
+];
+/** The agents an agent tool can run. */
+const CALLABLE_TYPES = new Set(['text', 'image', 'speech']);
+const ACCESS_SEGMENTS = [
+    { value: 'read-only', label: 'Read only', icon: IconEye },
+    { value: 'read-write', label: 'Read and write', icon: IconPencil },
+    { value: 'destructive', label: 'Destructive', icon: IconFlame },
+];
+const PERMISSION_SEGMENTS = [
+    { value: 'auto', label: 'Runs', icon: IconPlayerPlay },
+    { value: 'session_consent', label: 'Once a session', icon: IconUserCheck },
+    { value: 'always_confirm', label: 'Every call', icon: IconHandStop },
+];
+const METHOD_SEGMENTS = [
+    { value: 'GET', label: 'GET', icon: IconHttpGet },
+    { value: 'POST', label: 'POST', icon: IconHttpPost },
+    { value: 'PUT', label: 'PUT', icon: IconHttpPut },
+    { value: 'PATCH', label: 'PATCH', icon: IconHttpPatch },
+    { value: 'DELETE', label: 'DELETE', icon: IconHttpDelete },
+];
+const LOAD_TIER_SEGMENTS = [
+    { value: 'T0', label: 'T0', icon: IconSquareRoundedNumber0 },
+    { value: 'T2', label: 'T2', icon: IconSquareRoundedNumber2 },
+];
+const AUTH_TYPE_SEGMENTS = [
+    { value: 'none', label: 'None', icon: IconLockOpen },
+    { value: 'bearer', label: 'Bearer', icon: IconCertificate },
+    { value: 'api_key', label: 'API key', icon: IconKey },
+    { value: 'oauth2', label: 'OAuth 2', icon: IconShieldLock },
+];
+const UNAUTHENTICATED_SEGMENTS = [
+    { value: 'gate', label: 'Stop the turn', icon: IconPlayerPause },
+    { value: 'report_to_model', label: 'Tell the model', icon: IconMessage },
+    { value: 'fail', label: 'Fail the call', icon: IconX },
+];
+/** The prefix the kernel puts before the credential when none is set, by auth type. */
+const AUTH_HEADER_PREFIX = {
+    bearer: 'Bearer ',
+    api_key: '',
+    oauth2: 'Bearer ',
+};
+/**
+ * Why a tool on `tier` never loads on this draft: the studio can't write a T1 policy, so a
+ * T2 tool loads only through the T2 loader.
+ */
+function loadTierWarning(draft, tier) {
+    if (tier === 'T2' && draftAllows(draft, 'tools.t2Loader') && !draft.tools.t2Loader.trim()) {
+        return 'No T2 loader is set under Tools, so this tool never loads.';
+    }
+    return undefined;
+}
+function placeholderHint(schemas) {
+    const names = new Set();
+    for (const json of schemas) {
+        try {
+            const schema = JSON.parse(json);
+            const properties = schema && typeof schema === 'object' && 'properties' in schema
+                ? schema.properties
+                : undefined;
+            if (properties && typeof properties === 'object') {
+                for (const name of Object.keys(properties))
+                    names.add(`{${name}}`);
+            }
+        }
+        catch {
+            // A schema mid-edit names nothing yet.
+        }
+    }
+    return names.size ? `Can use ${[...names].join(' ')}` : undefined;
+}
+const HEADERS_PLACEHOLDER = `{
+  "Accept": "application/json"
+}`;
+/** Adds a new tool to the draft and opens it. */
+export function addToolSpec(draft, setDraft, onSelect) {
+    const tool = newToolSpec(draft);
+    setDraft((current) => ({ ...current, toolSpecs: [...current.toolSpecs, tool] }));
+    onSelect(toolSpecNodeId(tool.key));
+}
+/** The library's tools as a checklist, the ones this agent may use checked. A row's pencil opens the tool. */
+function AllowedToolsList({ tools, allowed, workspace, onSelect, }) {
+    return (_jsx(CheckboxList, { label: "Allowed", isLabelHidden: true, density: "compact", value: allowed.map((tool) => tool.key), onChange: (checked) => {
+            for (const tool of tools) {
+                workspace.setAllowed(tool.key, checked.includes(tool.key));
+            }
+        }, children: tools.map((tool) => {
+            // A tool that runs this agent can't be turned on here; one already on can still be turned off.
+            const runsSelf = tool.toolType === 'agent' &&
+                tool.agentKey === workspace.self &&
+                !workspace.allowed.includes(tool.key);
+            const name = tool.toolName.trim() || 'Unnamed tool';
+            const description = runsSelf
+                ? 'Runs this agent, so this agent can’t use it.'
+                : tool.description.trim();
+            return (_jsx(CheckboxListItem, { value: tool.key, label: name, isDisabled: runsSelf, endContent: _jsx("span", { className: "row-reveal", children: _jsx(Tooltip, { content: `Edit ${name}`, children: _jsx(IconButton, { label: `Edit ${name}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPencil, size: "sm" }), onClick: () => {
+                                onSelect(toolSpecNodeId(tool.key));
+                            } }) }) }), description: description ? _jsx(Text, { type: "supporting", children: description }) : undefined }, tool.key));
+        }) }));
+}
+/** An agent's own tools, each opening its editor. */
+function ToolList({ tools, onSelect }) {
+    return (_jsx(List, { density: "compact", children: tools.map((tool) => (_jsx(ListItem, { label: tool.toolName.trim() || 'Unnamed tool', description: tool.description.trim() || undefined, startContent: _jsx(Icon, { icon: toolTypeIcon(tool.toolType), size: "sm", color: "secondary" }), endContent: _jsx(Token, { label: tool.loadTier, size: "sm" }), onClick: () => {
+                onSelect(toolSpecNodeId(tool.key));
+            } }, tool.key))) }));
+}
+/** The tools, each opening its own editor, and the T2 loader. */
+function ToolsEditor({ draft, setDraft, onSelect, }) {
+    const set = patch(setDraft, 'tools');
+    const workspace = useContext(WorkspaceContext);
+    const isHost = draft.identity.profileType === 'host';
+    /** In a workspace, the library's tools this agent allows; on its own, every tool it has. */
+    const allowed = workspace
+        ? draft.toolSpecs.filter((tool) => workspace.allowed.includes(tool.key))
+        : draft.toolSpecs;
+    const unused = workspace
+        ? draft.toolSpecs.filter((tool) => !workspace.allowed.includes(tool.key))
+        : [];
+    // Any custom tool it allows can load T2 tools: one that answers with the ids to load.
+    const loaders = allowed.map((tool) => tool.toolName.trim()).filter(Boolean);
+    const note = isHost ? sectionNote('tools.host') : undefined;
+    const addTool = (_jsx(Button, { label: "Add tool", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), onClick: () => {
+            addToolSpec(draft, setDraft, onSelect);
+        } }));
+    return (_jsxs(_Fragment, { children: [workspace ? (_jsxs(InspectorSection, { path: "tools.allow", note: note, children: [allowed.length > 0 && (_jsx(AllowedToolsList, { tools: allowed, allowed: allowed, workspace: workspace, onSelect: onSelect })), unused.length > 0 && (_jsx(CollapsibleGroup, { type: "multiple", density: "compact", children: _jsx(Collapsible, { value: "library", trigger: _jsxs(Text, { type: "supporting", children: ["Library, not used by this agent (", String(unused.length), ")"] }), children: _jsx(AllowedToolsList, { tools: unused, allowed: [], workspace: workspace, onSelect: onSelect }) }) })), addTool] })) : (_jsxs(InspectorSection, { path: isHost ? undefined : 'tools', note: note, children: [draft.toolSpecs.length > 0 && _jsx(ToolList, { tools: draft.toolSpecs, onSelect: onSelect }), addTool] })), draftAllows(draft, 'tools.t2Loader') && (_jsx(ToolLoadingSection, { value: draft.tools.t2Loader, loaders: loaders, set: set })), draftAllows(draft, 'tools.parallel') && (_jsx(InspectorSection, { path: "tools.parallel", children: _jsx(SwitchRow, { label: "Parallel", path: "tools.parallel", field: "parallel", value: draft.tools.parallel, onChange: (parallel) => {
+                        set({ parallel });
+                    } }) }))] }));
+}
+/** The tool that loads T2 tools, picked from the custom tools the agent allows. */
+function ToolLoadingSection({ value, loaders, set, }) {
+    return (_jsx(InspectorSection, { path: "tools.t2Loader", children: _jsx(ChoiceRow, { label: "T2 loader", path: "tools.t2Loader", field: "t2Loader", value: value, options: loaders, onChange: (t2Loader) => {
+                set({ t2Loader });
+            } }) }));
+}
+const MS = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'millisecond' });
+/** The result's headline: the status line, or for an MCP server, what it offers. */
+function probeTitle(result, tool) {
+    const took = result.elapsedMs === undefined ? '' : ` · ${MS.format(result.elapsedMs)}`;
+    if (!result.ok && result.error)
+        return result.error;
+    if (tool.toolType === 'mcp' && result.tools) {
+        // The route only checks for the remote tool when one is named.
+        const name = tool.mcpToolName?.trim() ?? '';
+        if (result.targetToolFound === false)
+            return `Connected, but the server has no ${name}${took}`;
+        if (result.targetToolFound)
+            return `Connected, and ${name} is there${took}`;
+        return `Connected: ${String(result.tools.length)} tools${took}`;
+    }
+    return `${String(result.status ?? '')} ${result.statusText ?? ''}`.trim() + took;
+}
+/** The sample input for the tool, which follows its input schema, as JSON; blank without one. */
+function defaultSampleInput(tool) {
+    const sample = sampleToolInput(tool.toolName, tool.inputJson);
+    return sample ? JSON.stringify(sample, null, 2) : '';
+}
+/** What a test reaches and sends, as one comparable string. */
+function probeTarget(tool, method) {
+    return JSON.stringify([
+        tool.toolType,
+        tool.endpoint,
+        method,
+        tool.serverUrl,
+        tool.mcpToolName,
+        tool.headersJson,
+        tool.authType,
+        tool.authHeaderName,
+        tool.authHeaderPrefix,
+        tool.authQueryParam,
+    ]);
+}
+/** The result's banner status: a missing remote tool warns even though the server answered. */
+function probeStatus(result) {
+    if (result.ok && result.targetToolFound === false)
+        return 'warning';
+    return result.ok ? 'success' : 'error';
+}
+/** The result's detail: an MCP server's tools, or the start of the response. */
+function probeDetails(result) {
+    if (result.tools?.length)
+        return (_jsx(HStack, { gap: 1, wrap: "wrap", children: result.tools.map((name) => (_jsx(Token, { label: name, size: "sm" }, name))) }));
+    if (!result.preview)
+        return undefined;
+    return (_jsx(CodeBlock, { code: result.preview, language: result.preview.trimStart().startsWith('{') ? 'json' : 'text', hasLanguageLabel: false, isWrapped: true, size: "sm", maxHeight: 200 }));
+}
+/** The test's credential, typed for this test only. */
+function TestCredentialRow({ value, onChange, }) {
+    return (_jsx(InspectorRow, { label: "Credential", path: "studio.testCredential", children: _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: "Credential", isLabelHidden: true, size: "sm", type: "password", autoComplete: "off", value: value, placeholder: "Used once, never saved", onChange: onChange }) }) }));
+}
+/** The input an HTTP tool's test sends. */
+function SampleInputRow({ value, onChange }) {
+    return (_jsx(TextAreaRow, { label: "Sample input", path: "studio.sampleInput", value: value, rows: 4, hasSpellCheck: false, placeholder: "{}", onChange: onChange }));
+}
+function TestConnectionButton({ isLoading, onClick }) {
+    return (_jsx(HStack, { children: _jsx(Button, { label: "Test connection", variant: "secondary", size: "sm", icon: _jsx(Icon, { icon: IconPlugConnected, size: "sm" }), isLoading: isLoading, onClick: onClick }) }));
+}
+/**
+ * Tries the tool's endpoint or MCP server once, from the server, which reaches public hosts only.
+ * The sample input and credential live here only: neither is saved to the draft.
+ */
+function ToolTest({ tool, guardrails }) {
+    /** What the user typed; until then, the sample for the tool, which follows its input schema. */
+    const [typedInput, setTypedInput] = useState();
+    const sampleInput = typedInput ?? defaultSampleInput(tool);
+    const credential = useSyncExternalStore(subscribeToolCredentials, () => toolCredential(tool.key), () => '');
+    const setCredential = (value) => {
+        setToolCredential(tool.key, value);
+    };
+    const [pending, setPending] = useState(false);
+    const [result, setResult] = useState();
+    const http = tool.toolType === 'http';
+    const method = tool.method ?? HTTP_METHODS[0];
+    // A result answers the request as it was: once what it reaches or sends changes, it's dropped.
+    const target = probeTarget(tool, method);
+    const [testedTarget, setTestedTarget] = useState(target);
+    if (target !== testedTarget) {
+        setTestedTarget(target);
+        setResult(undefined);
+    }
+    const confirmWrite = useContext(ConfirmWrite);
+    const run = async () => {
+        // A tool that writes runs only once the builder read the input and said so.
+        const ask = writeAsk(tool, sampleInput);
+        if (ask && !(await confirmWrite(ask)))
+            return;
+        setPending(true);
+        try {
+            setResult(await runToolProbe(tool, sampleInput, credential, guardrails));
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    return (_jsxs(InspectorSection, { title: "Test", note: http ? sectionNote('tool.test.http', { method }) : sectionNote('tool.test.mcp'), children: [http && _jsx(SampleInputRow, { value: sampleInput, onChange: setTypedInput }), (tool.authType ?? 'none') !== 'none' && (_jsx(TestCredentialRow, { value: credential, onChange: setCredential })), _jsx(TestConnectionButton, { isLoading: pending, onClick: () => {
+                    void run();
+                } }), result && (_jsx(Banner, { status: probeStatus(result), title: probeTitle(result, tool), description: probeDetails(result) }))] }));
+}
+/** The tool types offered: an agent tool only where there are agents to run. */
+function toolTypeSegments(workspace) {
+    return workspace
+        ? TOOL_TYPE_SEGMENTS
+        : TOOL_TYPE_SEGMENTS.filter((segment) => segment.value !== 'agent');
+}
+/** Renames a tool; the T2 loader names this tool, so it follows the rename. */
+function renameToolSpec(draft, toolKey, from, toolName) {
+    return {
+        ...draft,
+        tools: draft.tools.t2Loader === from.trim()
+            ? { ...draft.tools, t2Loader: toolName.trim() }
+            : draft.tools,
+        toolSpecs: draft.toolSpecs.map((candidate) => candidate.key === toolKey ? { ...candidate, toolName } : candidate),
+    };
+}
+/** Removes a tool, and the T2 loader with it when it names the tool. */
+function removeToolSpec(draft, toolKey, name) {
+    return {
+        ...draft,
+        tools: draft.tools.t2Loader === name.trim() ? { ...draft.tools, t2Loader: '' } : draft.tools,
+        toolSpecs: draft.toolSpecs.filter((candidate) => candidate.key !== toolKey),
+    };
+}
+/** The tool's type, from the types on offer here. */
+function ToolTypeRow({ tool, set }) {
+    const workspace = useContext(WorkspaceContext);
+    return (_jsx(SegmentedRow, { label: "Type", path: "registerTool.type", field: "toolType", value: tool.toolType, segments: toolTypeSegments(workspace), onChange: (toolType) => {
+            set({ toolType });
+        } }));
+}
+/** What the tool is: its name, type, description, and category. */
+function ToolSection({ draft, setDraft, tool, set, }) {
+    return (_jsxs(InspectorSection, { note: draft.identity.profileType === 'host' ? sectionNote('tool.host') : undefined, children: [_jsx(TextRow, { label: "Name", path: "registerTool.name", field: "toolName", isRequired: true, value: tool.toolName, placeholder: "search_flights", onChange: (toolName) => {
+                    setDraft((current) => renameToolSpec(current, tool.key, tool.toolName, toolName));
+                } }), _jsx(ToolTypeRow, { tool: tool, set: set }), _jsx(TextAreaRow, { label: "Description", path: "registerTool.description", field: "description", isRequired: true, value: tool.description, placeholder: "Finds flights between two airports on a date.", onChange: (description) => {
+                    set({ description });
+                } }), _jsx(TextRow, { label: "Category", path: "registerTool.category", field: "category", value: tool.category, placeholder: "studio", onChange: (category) => {
+                    set({ category });
+                } })] }));
+}
+/** The tool's input and output schemas. */
+function ContractSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Contract", children: [_jsx(TextAreaRow, { label: "Input", path: "registerTool.inputSchema", field: "inputJson", value: tool.inputJson, rows: 8, hasSpellCheck: false, onChange: (inputJson) => {
+                    set({ inputJson });
+                } }), _jsx(TextAreaRow, { label: "Output", path: "registerTool.outputSchema", field: "outputJson", value: tool.outputJson, rows: 8, hasSpellCheck: false, onChange: (outputJson) => {
+                    set({ outputJson });
+                } })] }));
+}
+/** One label: a line of wording, or a list with a line each, read top to bottom. */
+function ActivityLabelRow({ label, field, value, schemas, onChange, }) {
+    const text = value ?? '';
+    return (_jsx(TextAreaRow, { label: label, path: `registerTool.labels.${field}`, field: field, value: text, rows: Math.max(1, text.split('\n').length), hint: placeholderHint(schemas), onChange: onChange }));
+}
+/** What the chat says while the tool runs, once it's done, when it fails and when it asks. */
+function ActivitySection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Activity", path: "registerTool.labels", children: [_jsx(ActivityLabelRow, { label: "Running", field: "activity", value: tool.activity, schemas: [tool.inputJson], onChange: (activity) => {
+                    set({ activity });
+                } }), _jsx(ActivityLabelRow, { label: "Done", field: "activityPast", value: tool.activityPast, schemas: [tool.inputJson, tool.outputJson], onChange: (activityPast) => {
+                    set({ activityPast });
+                } }), _jsx(ActivityLabelRow, { label: "Failed", field: "activityFailed", value: tool.activityFailed, schemas: [tool.inputJson], onChange: (activityFailed) => {
+                    set({ activityFailed });
+                } }), _jsx(ActivityLabelRow, { label: "Asking", field: "request", value: tool.request, schemas: [tool.inputJson], onChange: (request) => {
+                    set({ request });
+                } })] }));
+}
+/** What a function tool returns in the studio, and whether the page answers it on a host. */
+function StubSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Stub", path: "studio.stubOutput", children: [_jsx(SwitchRow, { label: "Page answers", path: "registerTool.answeredBy", value: tool.answeredBy === 'page', onChange: (page) => {
+                    set({ answeredBy: page ? 'page' : undefined });
+                } }), _jsx(TextAreaRow, { label: "Returns", path: "studio.stubOutput", field: "stubOutputJson", value: tool.stubOutputJson ?? '', rows: 6, hasSpellCheck: false, hint: "Left blank, a stand-in built from the output schema.", onChange: (stubOutputJson) => {
+                    set({ stubOutputJson });
+                } })] }));
+}
+/** The static headers HTTP and MCP tools both send. */
+function HeadersRow({ tool, set }) {
+    return (_jsx(TextAreaRow, { label: "Headers", path: "registerTool.headers", field: "headersJson", value: tool.headersJson ?? '', rows: 4, hasSpellCheck: false, placeholder: HEADERS_PLACEHOLDER, onChange: (headersJson) => {
+            set({ headersJson });
+        } }));
+}
+/** An HTTP tool's request, and how its input maps onto it. */
+function HttpSections({ tool, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(HttpRequestSection, { tool: tool, set: set }), _jsx(HttpMappingSection, { tool: tool, set: set })] }));
+}
+function HttpRequestSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Request", note: sectionNote('tool.headers'), children: [_jsx(TextRow, { label: "Endpoint", path: "registerTool.endpoint", field: "endpoint", isRequired: true, value: tool.endpoint ?? '', placeholder: "https://api.example.com/flights/{id}", onChange: (endpoint) => {
+                    set({ endpoint });
+                } }), _jsx(SegmentedRow, { label: "Method", path: "registerTool.method", field: "method", value: tool.method ?? HTTP_METHODS[0], segments: METHOD_SEGMENTS, onChange: (method) => {
+                    set({ method });
+                } }), _jsx(HeadersRow, { tool: tool, set: set })] }));
+}
+function HttpMappingSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Mapping", path: "registerTool.mapping", children: [_jsx(NamesRow, { label: "Path", path: "registerTool.mapping.pathParams", field: "pathParams", value: tool.pathParams ?? [], placeholder: "Names in {braces}", onChange: (pathParams) => {
+                    set({ pathParams });
+                } }), _jsx(NamesRow, { label: "Query", path: "registerTool.mapping.queryParams", field: "queryParams", value: tool.queryParams ?? [], placeholder: "None", onChange: (queryParams) => {
+                    set({ queryParams });
+                } }), _jsx(TextRow, { label: "Body", path: "registerTool.mapping.bodyParam", field: "bodyParam", value: tool.bodyParam ?? '', hint: "None", onChange: (bodyParam) => {
+                    set({ bodyParam });
+                } })] }));
+}
+/** The agent an agent tool runs, and how often a turn may call it. */
+function AgentSection({ tool, set, workspace, }) {
+    return (_jsxs(InspectorSection, { title: "Agent", children: [_jsx(ChoiceRow, { label: "Runs", path: "registerTool.profile", field: "agentKey", isRequired: true, value: tool.agentKey ?? '', options: otherAgents(workspace.agents, workspace.self, (agent) => CALLABLE_TYPES.has(agent.type)), onChange: (agentKey) => {
+                    const agentId = workspace.agents.find((agent) => agent.key === agentKey)?.agentId ?? '';
+                    set(agentToolTarget(tool, agentKey, agentId));
+                } }), _jsx(NumberRow, { label: "Calls per turn", path: "registerTool.maxCallsPerTurn", field: "maxCallsPerTurn", value: tool.maxCallsPerTurn ?? null, min: 1, isIntegerOnly: true, onChange: (maxCallsPerTurn) => {
+                    set({ maxCallsPerTurn });
+                } })] }));
+}
+/** An MCP tool's server and the tool it calls there. */
+function McpServerSection({ tool, set }) {
+    return (_jsxs(InspectorSection, { title: "Server", note: sectionNote('tool.headers'), children: [_jsx(TextRow, { label: "Server", path: "registerTool.serverUrl", field: "serverUrl", isRequired: true, value: tool.serverUrl ?? '', placeholder: "https://mcp.example.com/mcp", onChange: (serverUrl) => {
+                    set({ serverUrl });
+                } }), _jsx(TextRow, { label: "Remote tool", path: "registerTool.mcpToolName", field: "mcpToolName", isRequired: true, value: tool.mcpToolName ?? '', placeholder: "search_flights", onChange: (mcpToolName) => {
+                    set({ mcpToolName });
+                } }), _jsx(HeadersRow, { tool: tool, set: set })] }));
+}
+/** Where an authenticated tool's credential comes from, how it's sent, and what signed out does. */
+function AuthCredentialRows({ tool, authType, set, }) {
+    const inUrl = authType === 'api_key' && Boolean(tool.authQueryParam?.trim());
+    return (_jsxs(_Fragment, { children: [_jsx(TextRow, { label: "Slot", path: "registerTool.auth.slot", field: "authSlot", value: tool.authSlot ?? '', placeholder: "default", onChange: (authSlot) => {
+                    set({ authSlot });
+                } }), authType === 'api_key' ? (_jsx(TextRow, { label: "Query parameter", path: "registerTool.auth.queryParam", field: "authQueryParam", value: tool.authQueryParam ?? '', onChange: (queryParam) => {
+                    // The key goes in one place: in the URL, the header rows have nothing to say.
+                    set(queryParam
+                        ? {
+                            authQueryParam: queryParam,
+                            authHeaderName: undefined,
+                            authHeaderPrefix: undefined,
+                        }
+                        : { authQueryParam: undefined });
+                } })) : null, inUrl ? null : (_jsxs(_Fragment, { children: [_jsx(TextRow, { label: "Header", path: "registerTool.auth.headerName", field: "authHeaderName", value: tool.authHeaderName ?? '', placeholder: "Authorization", onChange: (authHeaderName) => {
+                            set({ authHeaderName });
+                        } }), _jsx(TextRow, { label: "Prefix", path: "registerTool.auth.headerPrefix", field: "authHeaderPrefix", value: tool.authHeaderPrefix ?? '', placeholder: AUTH_HEADER_PREFIX[authType] || undefined, hint: "None", onChange: (prefix) => {
+                            // Blank is the kernel's prefix for the type, which the placeholder shows.
+                            set({ authHeaderPrefix: prefix || undefined });
+                        } })] })), _jsx(SegmentedRow, { label: "Signed out", path: "registerTool.auth.onUnauthenticated", field: "authUnauthenticated", value: tool.authUnauthenticated ?? 'gate', segments: UNAUTHENTICATED_SEGMENTS, onChange: (authUnauthenticated) => {
+                    set({ authUnauthenticated });
+                } })] }));
+}
+/** An OAuth tool's scopes, client id, and redirect. */
+function OAuthRows({ tool, set }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NamesRow, { label: "Scopes", path: "registerTool.auth.scopes", field: "authScopes", value: tool.authScopes ?? [], placeholder: "None", onChange: (authScopes) => {
+                    set({ authScopes });
+                } }), _jsx(TextRow, { label: "Client id", path: "registerTool.auth.clientId", field: "authClientId", value: tool.authClientId ?? '', onChange: (authClientId) => {
+                    set({ authClientId });
+                } }), _jsx(TextRow, { label: "Redirect", path: "registerTool.auth.redirectUri", field: "authRedirectUri", value: tool.authRedirectUri ?? '', placeholder: "https://example.com/oauth/callback", onChange: (authRedirectUri) => {
+                    set({ authRedirectUri });
+                } })] }));
+}
+/** How a remote tool authenticates. */
+function AuthSection({ tool, set }) {
+    const authType = tool.authType ?? 'none';
+    return (_jsxs(InspectorSection, { path: "registerTool.auth", note: sectionNote('tool.auth'), children: [_jsx(SegmentedRow, { label: "Type", path: "studio.authType", field: "authType", value: authType, segments: AUTH_TYPE_SEGMENTS, onChange: (next) => {
+                    set({ authType: next });
+                } }), authType !== 'none' && _jsx(AuthCredentialRows, { tool: tool, authType: authType, set: set }), authType === 'oauth2' && _jsx(OAuthRows, { tool: tool, set: set })] }));
+}
+/** What the studio does about a tool that writes, when that is not what Permission says. */
+function studioAskNote(asks, tool) {
+    if (asks.asked.includes(tool))
+        return 'In the studio this tool asks before every run, because it writes. Your application runs it as Permission says.';
+    if (asks.inside.includes(tool))
+        return 'This tool writes, and the studio cannot make it ask: a called agent runs it, and a question inside a called agent has no one to answer it. The call to that agent asks instead.';
+    return undefined;
+}
+/** Who may call the tool, whether it asks first, when it loads and on which paths. */
+function PolicySection({ draft, tool, set, }) {
+    const note = studioAskNote(useContext(ProjectAsks), tool.toolName);
+    return (_jsxs(InspectorSection, { title: "Policy", note: note, children: [_jsx(SegmentedRow, { label: "Access", path: "registerTool.access", field: "access", value: tool.access, segments: ACCESS_SEGMENTS, onChange: (access) => {
+                    set({ access });
+                } }), _jsx(SegmentedRow, { label: "Permission", path: "registerTool.permission", field: "permission", value: tool.permission, segments: PERMISSION_SEGMENTS, onChange: (permission) => {
+                    set({ permission });
+                } }), _jsx(SegmentedRow, { label: "Load tier", path: "registerTool.loadTier", field: "loadTier", value: tool.loadTier, segments: LOAD_TIER_SEGMENTS, warning: loadTierWarning(draft, tool.loadTier), onChange: (loadTier) => {
+                    set({ loadTier });
+                } }), _jsx(NamesRow, { label: "Paths", path: "registerTool.paths", field: "paths", value: tool.paths, placeholder: "Every path (*)", onChange: (paths) => {
+                    set({ paths });
+                } })] }));
+}
+function ToolSpecEditor({ draft, setDraft, toolKey, onSelect, }) {
+    const workspace = useContext(WorkspaceContext);
+    const tool = draft.toolSpecs.find((candidate) => candidate.key === toolKey);
+    if (!tool)
+        return null;
+    const set = (change) => {
+        setDraft((current) => ({
+            ...current,
+            toolSpecs: current.toolSpecs.map((candidate) => candidate.key === toolKey ? { ...candidate, ...change } : candidate),
+        }));
+    };
+    const remote = tool.toolType === 'http' || tool.toolType === 'mcp';
+    return (_jsxs(_Fragment, { children: [_jsx(ToolSection, { draft: draft, setDraft: setDraft, tool: tool, set: set }), _jsx(ContractSection, { tool: tool, set: set }), _jsx(ActivitySection, { tool: tool, set: set }), tool.toolType === 'function' && _jsx(StubSection, { tool: tool, set: set }), tool.toolType === 'http' && _jsx(HttpSections, { tool: tool, set: set }), tool.toolType === 'agent' && workspace && (_jsx(AgentSection, { tool: tool, set: set, workspace: workspace })), tool.toolType === 'mcp' && _jsx(McpServerSection, { tool: tool, set: set }), remote && _jsx(AuthSection, { tool: tool, set: set }), remote && _jsx(ToolTest, { tool: tool, guardrails: draft.guardrails }, tool.key), _jsx(PolicySection, { draft: draft, tool: tool, set: set }), _jsx(Section, { variant: "transparent", padding: 3, children: _jsx(Button, { label: "Remove tool", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: () => {
+                        setDraft((current) => removeToolSpec(current, toolKey, tool.toolName));
+                        onSelect('tools');
+                    } }) })] }));
+}
+const LABEL_AREAS = [
+    {
+        prefix: 'error',
+        title: 'Errors',
+        note: 'When a turn fails.',
+        icon: IconAlertTriangle,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'attachments',
+        title: 'Attachments',
+        note: "When a file can't be sent.",
+        icon: IconPaperclip,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'voice',
+        title: 'Voice',
+        note: "When a voice note can't be recorded or used.",
+        icon: IconMicrophone,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'session',
+        title: 'Session',
+        note: 'Waits, approvals, and signing in.',
+        icon: IconHourglass,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'stop',
+        title: 'Stops',
+        note: 'Why a reply ended short.',
+        icon: IconPlayerStop,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'composer',
+        title: 'Composer',
+        note: 'The model and effort pickers.',
+        icon: IconAdjustmentsHorizontal,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'live',
+        title: 'Live',
+        note: 'When a live session ends.',
+        icon: IconHeadset,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'quota',
+        title: 'Quota',
+        note: 'When the daily limit is reached.',
+        icon: IconGauge,
+        audience: 'visitor',
+    },
+    {
+        prefix: 'tool',
+        title: 'Tools',
+        note: "When a tool call can't run.",
+        icon: IconTool,
+        audience: 'model',
+    },
+    {
+        prefix: 'repair',
+        title: 'Repair',
+        note: 'Fixing a reply that failed its schema.',
+        icon: IconBandage,
+        audience: 'model',
+    },
+    {
+        prefix: 'egress',
+        title: 'Egress',
+        note: 'A reply that fails its check, sent back or refused.',
+        icon: IconSend,
+        audience: 'model',
+    },
+    {
+        prefix: 'continue',
+        title: 'Resumption',
+        note: 'Picking up a reply that stopped short.',
+        icon: IconPlayerTrackNext,
+        audience: 'model',
+    },
+    {
+        prefix: 'canary',
+        title: 'Canary',
+        note: "The note that binds each turn's canary.",
+        icon: IconFeather,
+        audience: 'model',
+    },
+    {
+        prefix: 'taint',
+        title: 'Untrusted content',
+        note: 'Why a tool call was refused after reading it.',
+        icon: IconBiohazard,
+        audience: 'model',
+    },
+    {
+        prefix: 'advisory',
+        title: 'Advisories',
+        note: 'Notes beside content that tries to direct it.',
+        icon: IconInfoCircle,
+        audience: 'model',
+    },
+];
+const LABEL_AUDIENCES = [
+    {
+        value: 'visitor',
+        label: 'Visitor reads',
+        icon: IconUser,
+        note: 'Shown in the chat when something fails or needs a wait.',
+    },
+    {
+        value: 'model',
+        label: 'Model reads',
+        icon: IconInputAi,
+        note: 'Put in front of the model; the visitor never sees these.',
+    },
+];
+/** Row names for keys whose own name reads as code. */
+const LABEL_TITLES = {
+    'attachments.mime_not_allowed': 'File type not allowed',
+    'attachments.limits_unconfigured': 'Files turned off',
+    'quota.exhausted': 'Limit reached',
+};
+/** `rate_limit` → "Rate limit". */
+function labelTitle(key) {
+    const named = LABEL_TITLES[key];
+    if (named)
+        return named;
+    const words = key.slice(key.indexOf('.') + 1).replaceAll('_', ' ');
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+/** The kernel's line for `key`, worded with the draft's own limits where it takes them. */
+function labelPlaceholder(draft, key) {
+    const { inputs, guardrails } = draft;
+    const text = labelDefault(key, {
+        maxFiles: inputs.maxFiles ?? '{maxFiles}',
+        maxBytes: inputs.maxBytes ?? Number.NaN,
+        maxTurnBytes: inputs.maxTurnBytes ?? Number.NaN,
+        perDay: guardrails.quotaPerDay ?? '{perDay}',
+    });
+    // A size the draft leaves unset formats as NaN: show the placeholder the template takes instead.
+    return text.replace('NaN MB', key === 'attachments.turn_too_large' ? '{maxTurnBytes}' : '{maxBytes}');
+}
+/**
+ * The lines that also sit beside their setting: one value, edited from either place. `isOn` is when
+ * the kernel uses the line; off, Labels links to the setting that turns it on.
+ */
+const SHARED_LABELS = {
+    'continue.instruction': {
+        setting: 'Resumption',
+        read: (draft) => draft.turnBehaviour.continueInstruction,
+        write: (setDraft, continueInstruction) => {
+            patch(setDraft, 'turnBehaviour')({ continueInstruction });
+        },
+        isOn: (draft) => takesContinueInstruction(draft) && draft.turnBehaviour.resumeEnabled,
+    },
+    'canary.bind_note': {
+        setting: 'Canary',
+        read: (draft) => draft.guardrails.canaryBindNote,
+        write: (setDraft, canaryBindNote) => {
+            patch(setDraft, 'guardrails')({ canaryBindNote });
+        },
+        isOn: plantsCanary,
+    },
+    'quota.exhausted': {
+        setting: 'Daily cap',
+        read: (draft) => draft.guardrails.quotaMessage,
+        write: (setDraft, quotaMessage) => {
+            patch(setDraft, 'guardrails')({ quotaMessage });
+        },
+        isOn: (draft) => draft.guardrails.quotaEnabled,
+    },
+    'repair.default_guidance': {
+        setting: 'Repair',
+        read: (draft) => draft.outputs.repairGuidance,
+        write: (setDraft, repairGuidance) => {
+            patch(setDraft, 'outputs')({ repairGuidance });
+        },
+        isOn: (draft) => draft.outputs.validationEnabled,
+    },
+    'egress.default_repair_guidance': {
+        setting: 'Blocked reply',
+        read: (draft) => draft.guardrails.egressRepairGuidance,
+        write: (setDraft, egressRepairGuidance) => {
+            patch(setDraft, 'guardrails')({ egressRepairGuidance });
+        },
+        isOn: (draft) => draft.guardrails.blockedReplyOnBlock !== 'refuse',
+    },
+    'egress.refusal': {
+        setting: 'Blocked reply',
+        read: (draft) => draft.guardrails.egressRefusal,
+        write: (setDraft, egressRefusal) => {
+            patch(setDraft, 'guardrails')({ egressRefusal });
+        },
+        isOn: (draft) => draft.guardrails.blockedReplyOnBlock === 'refuse',
+    },
+};
+/** The text a line holds in the draft: its own setting's field, or Labels'. */
+function labelValue(draft, key) {
+    return SHARED_LABELS[key]?.read(draft) ?? draft.labels[key] ?? '';
+}
+/** A line that also sits beside its setting; while that setting is off, a link to turn it on. */
+function SharedLabelRow({ labelKey, facet, draft, setDraft, onSelect, }) {
+    const shared = SHARED_LABELS[labelKey];
+    if (!shared)
+        return null;
+    return (_jsxs(VStack, { gap: 1, children: [_jsx(TextAreaRow, { label: labelTitle(labelKey), path: `labels.${labelKey}`, rows: 2, value: shared.read(draft), placeholder: labelPlaceholder(draft, labelKey), onChange: (text) => {
+                    shared.write(setDraft, text);
+                } }), !shared.isOn(draft) && (_jsxs(HStack, { gap: 1, align: "center", children: [_jsxs(Text, { type: "supporting", children: [shared.setting, " is off."] }), _jsx(Button, { label: `Open ${profileGraphFacet(facet)?.label ?? facet}`, variant: "ghost", size: "sm", onClick: () => {
+                            // A section left out of the profile has no node to open until it's back in.
+                            setDraft((current) => includeFacet(current, facet));
+                            onSelect(facet);
+                        } })] }))] }));
+}
+/** Every line the kernel says, by area; left blank, a line keeps the kernel's own. */
+function LabelsEditor({ draft, setDraft, onSelect, }) {
+    const [audience, setAudience] = useState('visitor');
+    const [query, setQuery] = useState('');
+    const needle = query.trim().toLowerCase();
+    const areas = labelAreas(draft, needle, audience);
+    const note = LABEL_AUDIENCES.find((entry) => entry.value === audience)?.note;
+    return (_jsx(Section, { variant: "transparent", padding: 3, children: _jsxs(VStack, { gap: 3, children: [_jsx(TextInput, { label: "Search labels", isLabelHidden: true, placeholder: "Search names, defaults, and text", value: query, onChange: setQuery, startIcon: IconSearch, hasClear: true }), !needle && _jsx(LabelAudiencePicker, { value: audience, onChange: setAudience }), !needle && _jsx(Text, { type: "supporting", children: note }), needle && areas.length === 0 && (_jsxs(Text, { type: "supporting", children: ["No labels match \u201C", query.trim(), "\u201D."] })), _jsx(CollapsibleGroup
+                // Searching opens every area with a match; clearing the search goes back to all closed.
+                , { type: "multiple", hasDividers: true, density: "compact", defaultValue: needle ? areas.map((area) => area.prefix) : undefined, children: areas.map((area) => (_jsx(Collapsible, { value: area.prefix, trigger: _jsx(LabelAreaTrigger, { area: area }), children: _jsx(LabelAreaLines, { keys: area.keys, draft: draft, setDraft: setDraft, onSelect: onSelect }) }, area.prefix))) }, needle ? `search:${areas.map((area) => area.prefix).join()}` : audience)] }) }));
+}
+/**
+ * The areas on show, each with its lines. A search spans both readers: a line matches on its area,
+ * its name, its default, or its text.
+ */
+function labelAreas(draft, needle, audience) {
+    return LABEL_AREAS.filter((area) => needle || area.audience === audience)
+        .map((area) => {
+        const all = LABEL_KEYS.filter((key) => key.startsWith(`${area.prefix}.`));
+        const keys = needle
+            ? all.filter((key) => [
+                area.title,
+                labelTitle(key),
+                labelPlaceholder(draft, key),
+                labelValue(draft, key),
+            ].some((text) => text.toLowerCase().includes(needle)))
+            : all;
+        const edited = all.filter((key) => labelValue(draft, key)).length;
+        return { ...area, keys, edited };
+    })
+        .filter((area) => area.keys.length > 0);
+}
+/** Who reads the lines on show: the visitor, or the model. */
+function LabelAudiencePicker({ value, onChange, }) {
+    return (_jsx(SegmentedControl, { label: "Who reads it", size: "sm", layout: "fill", value: value, onChange: (next) => {
+            const picked = LABEL_AUDIENCES.find((entry) => entry.value === next);
+            if (picked)
+                onChange(picked.value);
+        }, children: LABEL_AUDIENCES.map((entry) => (_jsx(Tooltip, { content: entry.label, children: _jsx(SegmentedControlItem, { value: entry.value, label: entry.label, isLabelHidden: true, icon: _jsx(Icon, { icon: entry.icon, size: "sm" }) }) }, entry.value))) }));
+}
+/** An area's heading: its icon, title and note, and how many of its lines are edited. */
+function LabelAreaTrigger({ area }) {
+    return (_jsxs(HStack, { gap: 2, align: "center", children: [_jsx(Icon, { icon: area.icon, size: "sm", color: "secondary" }), _jsx(StackItem, { size: "fill", children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { type: "supporting", weight: "semibold", color: "primary", children: area.title }), _jsx(Text, { type: "supporting", color: "secondary", children: area.note })] }) }), area.edited > 0 && _jsx(Badge, { variant: "info", label: `${String(area.edited)} edited` })] }));
+}
+/** An area's lines; one that also sits beside its setting edits that setting's field. */
+function LabelAreaLines({ keys, draft, setDraft, onSelect, }) {
+    const set = patch(setDraft, 'labels');
+    return (_jsx(VStack, { gap: 3, paddingBlock: 2, children: keys.map((key) => {
+            const facet = INLINE_LABELS[key];
+            if (facet)
+                return (_jsx(SharedLabelRow, { labelKey: key, facet: facet, draft: draft, setDraft: setDraft, onSelect: onSelect }, key));
+            return (_jsx(TextAreaRow, { label: labelTitle(key), path: `labels.${key}`, field: key, rows: 2, value: draft.labels[key] ?? '', placeholder: labelPlaceholder(draft, key), onChange: (text) => {
+                    set({ [key]: text });
+                } }, key));
+        }) }));
+}
+const QUESTION_TYPE_SEGMENTS = [
+    { value: 'choice', label: 'Choice', icon: QUESTION_TYPE_ICON.choice },
+    { value: 'score', label: 'Score', icon: QUESTION_TYPE_ICON.score },
+    { value: 'noul', label: 'Noul', icon: QUESTION_TYPE_ICON.noul },
+    { value: 'box', label: 'Box', icon: QUESTION_TYPE_ICON.box },
+];
+/** What a question's rows are called, and what a new one's text says. */
+const CRITERIA_COPY = {
+    choice: {
+        title: 'Options',
+        row: 'Option',
+        note: 'Each answer it may pick, and when to pick it.',
+    },
+    score: { title: 'Levels', row: 'Level', note: 'The scale from 0 up, each level described.' },
+    noul: { title: 'Criteria', row: 'Criterion', note: 'Optional named things the number weighs.' },
+    box: { title: 'Criteria', row: 'Criterion', note: 'A box takes no criteria.' },
+};
+/** What a question is called in its row and on its page, before it has a name. */
+const questionName = (question, index) => question.id.trim() || `Question ${String(index + 1)}`;
+/** A question's issues, wherever on its page they are. */
+function useQuestionIssues() {
+    const issues = useContext(NodeIssues);
+    return (index) => issues
+        .filter((issue) => issue.field === 'questions' && issue.index === index)
+        .map((issue) => issue.message);
+}
+/**
+ * One question's row: its answer type's icon, its name, and its instructions, with how many options
+ * or levels it has, or what is wrong with it. A click anywhere on it presses its Open button.
+ */
+function QuestionRow({ question, name, issues, onOpen, }) {
+    const button = useRef(null);
+    const segment = QUESTION_TYPE_SEGMENTS.find((each) => each.value === question.type);
+    const open = `Open ${name}: its answer and instructions`;
+    const listed = question.type !== 'box' && question.criteria.length > 0;
+    const trailing = issues.length > 0 ? (_jsx(Tooltip, { content: issues.join(' '), children: _jsx(Badge, { variant: "error", label: String(issues.length) }) })) : (listed && (_jsx(Tooltip, { content: question.criteria
+            .map((criterion) => criterion.label.trim() || criterion.text.trim())
+            .join(', '), children: _jsx(Token, { label: `${String(question.criteria.length)} ${CRITERIA_COPY[question.type].title.toLowerCase()}`, size: "sm" }) })));
+    return (_jsx(ListItem, { label: name, description: question.instructions.trim() || undefined, interactiveRef: button, startContent: _jsx(Tooltip, { content: `${segment?.label ?? question.type}: ${fieldMeta('decision.questions.type')?.optionDescriptions?.[question.type] ?? ''}`, children: _jsx(Icon, { icon: QUESTION_TYPE_ICON[question.type], size: "sm", color: "secondary" }) }), endContent: _jsxs(HStack, { gap: 1, vAlign: "center", children: [trailing, _jsx(Tooltip, { content: open, children: _jsx(IconButton, { ref: button, label: open, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconChevronRight, size: "sm" }), onClick: onOpen }) })] }) }));
+}
+/** Every question on one line, in the order they are answered. Each opens its own page. */
+function QuestionList({ questions, onOpen, }) {
+    const issuesAt = useQuestionIssues();
+    return (_jsx(List, { density: "compact", children: questions.map((question, index) => (_jsx(QuestionRow, { question: question, name: questionName(question, index), issues: issuesAt(index), onOpen: () => {
+                onOpen(question.key);
+            } }, question.key))) }));
+}
+/** One question's page: its name and answer type, what to ask, and its options or levels. */
+function QuestionPage({ question, index, count, onChange, onMove, onRemove, images, onBack, }) {
+    const status = useFieldStatus()('questions', index);
+    return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { title: questionName(question, index), back: "Back to questions", trailing: _jsx(QuestionActions, { name: questionName(question, index), index: index, count: count, onMove: onMove, onRemove: onRemove }), onBack: onBack }), _jsxs(InspectorSection, { children: [_jsx(TextRow, { label: "Name", path: "decision.questions.id", status: status, value: question.id, placeholder: "verdict", onChange: (id) => {
+                            onChange({ id });
+                        } }), _jsx(SegmentedRow, { label: "Answer", path: "decision.questions.type", value: question.type, segments: QUESTION_TYPE_SEGMENTS, selectorPast: 0, onChange: (type) => {
+                            // Options carry over between choice and number; a score's levels and a box's none are different lists.
+                            const listed = (kind) => kind === 'choice' || kind === 'noul';
+                            const keeps = listed(type) && listed(question.type);
+                            onChange({ type, ...(keeps ? {} : { criteria: newCriteria(type) }) });
+                        } }), _jsx(TextAreaRow, { label: "Instructions", path: "decision.questions.instructions", rows: 3, value: question.instructions, hint: "What should the model decide, given the state?", onChange: (instructions) => {
+                            onChange({ instructions });
+                        } }), question.type === 'box' && (_jsx(ChoiceRow, { label: "In image", path: "decision.questions.image", value: question.image ?? '', options: boxImages(question, images), emptyText: "Add an image under Images, or name a state field in backticks.", onChange: (image) => {
+                            onChange({ image: image || undefined });
+                        } }))] }), question.type !== 'box' && _jsx(CriteriaList, { question: question, onChange: onChange })] }));
+}
+/** What a box can be in: the decision's own images, then the state fields its instructions name. */
+function boxImages(question, images) {
+    const fields = [...question.instructions.matchAll(/\x60([^\x60\s]+)\x60/g)].map(([, name]) => name);
+    return [
+        ...images.map((image) => ({
+            value: `<${image.name}>`,
+            description: "One of the decision's images",
+        })),
+        ...[...new Set(fields)].map((name) => ({
+            value: name,
+            description: 'The image in this state field',
+        })),
+    ];
+}
+/** The buttons on a question's page that move it in the list and remove it. */
+function QuestionActions({ name, index, count, onMove, onRemove, }) {
+    const up = `Ask ${name} one place earlier. Its answer shows earlier too.`;
+    const down = `Ask ${name} one place later. Its answer shows later too.`;
+    const remove = `Remove ${name}`;
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: up, children: _jsx(IconButton, { label: up, variant: "ghost", size: "sm", isDisabled: index === 0, icon: _jsx(Icon, { icon: IconArrowUp, size: "sm" }), onClick: () => {
+                        onMove(index - 1);
+                    } }) }), _jsx(Tooltip, { content: down, children: _jsx(IconButton, { label: down, variant: "ghost", size: "sm", isDisabled: index === count - 1, icon: _jsx(Icon, { icon: IconArrowDown, size: "sm" }), onClick: () => {
+                        onMove(index + 1);
+                    } }) }), _jsx(Tooltip, { content: remove, children: _jsx(IconButton, { label: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconTrash, size: "sm" }), onClick: onRemove }) })] }));
+}
+/** What a row leads with: a score level's number, or the label of an option or criterion. */
+function CriterionLabel({ question, row, at, setCriteria }) {
+    const copy = CRITERIA_COPY[question.type];
+    return question.type === 'score' ? (_jsx(StackItem, { size: "static", children: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: String(at) }) })) : (_jsx("div", { className: "criterion-label", children: _jsx(TextInput, { label: `${copy.row} ${String(at + 1)} label`, isLabelHidden: true, size: "sm", value: row.label, placeholder: "label", onChange: (label) => {
+                setCriteria(question.criteria.map((r) => (r.key === row.key ? { ...r, label } : r)));
+            } }) }));
+}
+function CriterionRow({ question, row, at, setCriteria }) {
+    const copy = CRITERIA_COPY[question.type];
+    return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(CriterionLabel, { question: question, row: row, at: at, setCriteria: setCriteria }), _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `${copy.row} ${String(at + 1)} description`, isLabelHidden: true, size: "sm", value: row.text, placeholder: question.type === 'score' ? 'What this level means' : 'When to pick it', onChange: (text) => {
+                        setCriteria(question.criteria.map((r) => (r.key === row.key ? { ...r, text } : r)));
+                    } }) }), _jsx(IconButton, { label: `Remove ${copy.row.toLowerCase()} ${String(at + 1)}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: () => {
+                    setCriteria(question.criteria.filter((r) => r.key !== row.key));
+                } })] }));
+}
+/** A question's options, levels, or criteria, and the button that adds one. */
+function CriteriaList({ question, onChange, }) {
+    const keys = useLentKeys();
+    const copy = CRITERIA_COPY[question.type];
+    const setCriteria = (criteria) => {
+        onChange({ criteria });
+    };
+    return (_jsxs(InspectorSection, { title: copy.title, note: copy.note, children: [question.criteria.map((row, at) => (_jsx(CriterionRow, { question: question, row: row, at: at, setCriteria: setCriteria }, row.key))), _jsx(HStack, { children: _jsx(Button, { label: `Add ${copy.row.toLowerCase()}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), isDisabled: question.criteria.length >= (keys?.decision.criteria ?? Infinity), onClick: () => {
+                        setCriteria([...question.criteria, ...newCriteria('score').slice(0, 1)]);
+                    } }) })] }));
+}
+function DecisionContractSection({ decision, set }) {
+    return (_jsx(InspectorSection, { path: "decision.contract", children: _jsx(TextRow, { label: "Contract", path: "decision.contract", field: "contract", value: decision.contract, placeholder: "guardrails.tool_call.v1", onChange: (contract) => {
+                set({ contract });
+            } }) }));
+}
+function DecisionStateSection({ decision, set }) {
+    const keys = useLentKeys();
+    return (_jsx(InspectorSection, { children: _jsx(NumberRow, { label: "Max state", path: "inputs.maxStateBytes", units: "bytes", field: "maxStateBytes", value: decision.maxStateBytes, min: 1, max: keys?.decision.stateBytes, isIntegerOnly: true, onChange: (maxStateBytes) => {
+                set({ maxStateBytes });
+            } }) }));
+}
+/** The page for the question keyed `open`, or `undefined` when there is none or it is gone. */
+function openQuestionPage(open, { questions, images }, setQuestions, onBack) {
+    const index = questions.findIndex((question) => question.key === open);
+    const question = questions[index];
+    if (!question)
+        return undefined;
+    return (_jsx(QuestionPage, { question: question, index: index, count: questions.length, images: images, onChange: (change) => {
+            setQuestions((all) => all.map((q) => (q.key === question.key ? { ...q, ...change } : q)));
+        }, onMove: (to) => {
+            setQuestions((all) => {
+                const next = all.filter((q) => q.key !== question.key);
+                next.splice(to, 0, question);
+                return next;
+            });
+        }, onRemove: () => {
+            setQuestions((all) => all.filter((q) => q.key !== question.key));
+            onBack();
+        }, onBack: onBack }));
+}
+/**
+ * A decision: the contract it answers to, how much state it takes, and the questions it asks of
+ * it, listed one to a line. A question opens its own page.
+ */
+function DecisionEditor({ draft, setDraft }) {
+    const { decision } = draft;
+    const set = patch(setDraft, 'decision');
+    const listStatus = useFieldStatus()('questions');
+    const { open, show, frame } = usePageSwap();
+    const setQuestions = (change) => {
+        setDraft((current) => ({
+            ...current,
+            decision: { ...current.decision, questions: change(current.decision.questions) },
+        }));
+    };
+    // A project's files hold the questions outside the profile: the studio shows them and says where.
+    const inFiles = useRowOrigin('decision.questions');
+    const inCode = (rows) => inFiles ? (_jsx(SaidOrigin, { value: inFiles.origin, children: _jsx(SetInCode, { children: rows }) })) : (rows);
+    const { asked, shown } = useContext(QuestionLink);
+    const askedKey = decision.questions.find((question) => question.id === asked)?.key;
+    useEffect(() => {
+        if (asked === undefined)
+            return;
+        shown?.();
+        if (askedKey)
+            show(askedKey);
+    }, [asked, askedKey, shown, show]);
+    const page = openQuestionPage(open, decision, setQuestions, () => {
+        show(null);
+    });
+    if (page)
+        return frame(open ?? '', inCode(page));
+    return frame('list', _jsxs(_Fragment, { children: [_jsx(DecisionContractSection, { decision: decision, set: set }), _jsx(DecisionStateSection, { decision: decision, set: set }), _jsxs(InspectorSection, { title: "Questions", note: sectionNote('decision.questions'), children: [inFiles && !inFiles.said && _jsx(OriginLine, { origin: inFiles.origin, onOpen: inFiles.open }), listStatus && _jsx(Banner, { status: "error", title: listStatus.message }), inCode(_jsxs(_Fragment, { children: [decision.questions.length > 0 && (_jsx(QuestionList, { questions: decision.questions, onOpen: show })), _jsx(AddQuestionButton, { draft: draft, setDraft: setDraft, onOpen: show })] }))] }), _jsx(DecisionImagesSection, { draft: draft, setDraft: setDraft })] }));
+}
+/** One of a decision's pictures: its thumbnail, the name its questions write it by, and a remove button. */
+function DecisionImageRow({ image, index, onRename, onRemove, }) {
+    const status = useFieldStatus()('images', index);
+    const label = `Image ${String(index + 1)}`;
+    const reference = `<${image.name}>`;
+    return (_jsxs(InspectorRow, { label: label, path: "decision.images.name", hasIssue: status !== undefined, children: [_jsx(Thumbnail, { src: `data:${image.mimeType};base64,${image.data}`, label: `Questions write it as ${reference}` }), _jsx(StackItem, { size: "fill", children: _jsx(TextInput, { label: `${label} name`, isLabelHidden: true, size: "sm", status: status, value: image.name, onChange: onRename }) }), _jsx(Tooltip, { content: `Remove ${reference}. A question that names it then has no image to read.`, children: _jsx(IconButton, { label: `Remove ${reference}`, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX, size: "sm" }), onClick: onRemove }) })] }));
+}
+/** The pictures every decision sends, each under the name its questions write, and a drop to add more. */
+function DecisionImagesSection({ draft, setDraft }) {
+    const keys = useLentKeys();
+    const { reading, changeAction } = useFilesRead(async (picked) => {
+        const read = await Promise.all(picked.map(async (file) => ({ file: file.name, image: await fileData(file) })));
+        setDraft((current) => {
+            let next = current;
+            for (const { file, image } of read) {
+                const added = newDecisionImage(next, file, image);
+                next = {
+                    ...next,
+                    decision: { ...next.decision, images: [...next.decision.images, added] },
+                };
+            }
+            return next;
+        });
+    });
+    const listStatus = useFieldStatus()('images');
+    const { images } = draft.decision;
+    const setImages = (change) => {
+        setDraft((current) => ({
+            ...current,
+            decision: { ...current.decision, images: change(current.decision.images) },
+        }));
+    };
+    const most = keys?.decision.images ?? Infinity;
+    return (_jsxs(InspectorSection, { title: "Images", path: "decision.images", children: [listStatus && _jsx(Banner, { status: "error", title: listStatus.message }), images.map((image, index) => (_jsx(DecisionImageRow, { image: image, index: index, onRename: (name) => {
+                    setImages((all) => all.map((each) => (each.key === image.key ? { ...each, name } : each)));
+                }, onRemove: () => {
+                    setImages((all) => all.filter((each) => each.key !== image.key));
+                } }, image.key))), _jsx(FileInput, { label: "Add images", isLabelHidden: true, mode: "dropzone", accept: "image/png,image/jpeg", isMultiple: true, isDisabled: images.length >= most, maxSize: keys?.decision.imageBytes, isLoading: reading, placeholder: "Drop a PNG or JPEG, or choose one. Its file name becomes the name a question writes.", value: null, changeAction: changeAction, onChange: () => undefined })] }));
+}
+/** Adds a question and opens its page, up to the most a decision takes on lent keys. */
+function AddQuestionButton({ draft, setDraft, onOpen, }) {
+    const keys = useLentKeys();
+    const count = draft.decision.questions.length;
+    return (_jsx(HStack, { children: _jsx(Button, { label: "Add question", variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconPlus, size: "sm" }), isDisabled: count >= (keys?.decision.questions ?? Infinity), onClick: () => {
+                const question = newDecisionQuestion(draft);
+                setDraft((current) => ({
+                    ...current,
+                    decision: {
+                        ...current.decision,
+                        questions: [...current.decision.questions, question],
+                    },
+                }));
+                onOpen(question.key);
+            } }) }));
+}
+/** The editor for a node's facet: one per section of the profile, model, and tool. */
+function facetEditor(ref, draft, setDraft, onSelect) {
+    const props = { draft, setDraft };
+    switch (ref.facet) {
+        case 'identity':
+            return _jsx(IdentityEditor, { ...props });
+        case 'models':
+            return _jsx(ModelsEditor, { ...props, onSelect: onSelect });
+        case 'modelBinding':
+            return draft.identity.profileType === 'decision' ? (_jsx(DecisionModelEditor, { ...props, bindingKey: ref.key })) : (_jsx(ModelBindingEditor, { ...props, bindingKey: ref.key, onSelect: onSelect }));
+        case 'tools':
+            return _jsx(ToolsEditor, { ...props, onSelect: onSelect });
+        case 'toolSpec':
+            return _jsx(ToolSpecEditor, { ...props, toolKey: ref.key, onSelect: onSelect });
+        case 'inputs':
+            return _jsx(InputsEditor, { ...props });
+        case 'image':
+            return _jsx(ImageEditor, { ...props });
+        case 'speech':
+            return _jsx(SpeechEditor, { ...props });
+        case 'live':
+            return _jsx(LiveEditor, { ...props });
+        case 'outputs':
+            return _jsx(OutputsEditor, { ...props });
+        case 'turnBehaviour':
+            return _jsx(TurnBehaviourEditor, { ...props });
+        case 'guardrails':
+            return _jsx(GuardrailsEditor, { ...props });
+        case 'observability':
+            return _jsx(ObservabilityEditor, { ...props });
+        case 'labels':
+            return _jsx(LabelsEditor, { ...props, onSelect: onSelect });
+        case 'decision':
+            return _jsx(DecisionEditor, { ...props });
+    }
+}
+/** A node's issues that name no field of it, over its rows. */
+export function IssueBanners({ issues }) {
+    const banners = issues.filter((issue) => issue.field === undefined);
+    if (banners.length === 0)
+        return null;
+    return (_jsx(Section, { variant: "transparent", padding: 3, children: _jsx(VStack, { gap: 2, children: banners.map((issue) => (_jsx(Banner, { status: "error", title: issue.message }, issue.message))) }) }));
+}
+/**
+ * The editor for the tree node `selectedId`. The compile's issues for that node show on the rows
+ * of the fields they name; the rest show above it.
+ * Edits go straight to the draft; the page compiles it.
+ */
+export function ProfileEditor({ draft, setDraft, selectedId, onSelect, issues, }) {
+    // One place in the project's files sets the whole node: the page says so over it, and no row takes an edit.
+    const setInCode = useContext(RowOrigins)?.scope.section !== undefined;
+    const ref = studioNodeRef(draft, selectedId);
+    if (!ref)
+        return null;
+    const nodeIssues = issues.filter((issue) => issue.nodeId === selectedId);
+    const editor = facetEditor(ref, draft, setDraft, onSelect);
+    return (_jsx(NodeIssues, { value: nodeIssues, children: _jsxs(VStack, { children: [_jsx(IssueBanners, { issues: nodeIssues }), setInCode ? _jsx(SetInCode, { children: editor }) : editor] }) }));
+}
+/** Local servers answer local pages only; a hosted page needs its origin allowed. */
+const isLocalPage = () => typeof window !== 'undefined' &&
+    /^(localhost|127\.0\.0\.1|\[::1\])$/.test(globalThis.location.hostname);
+/** Allows the page the builder is on, wherever it's hosted. */
+const ollamaOriginsCommand = () => `launchctl setenv OLLAMA_ORIGINS "${globalThis.location.origin}"`;
+/** Why a hosted page can't list local models, and the one command that fixes it. */
+function LocalOriginHelp() {
+    return (_jsx(Banner, { status: "warning", title: "Your local server must allow this site", description: _jsxs(VStack, { gap: 2, children: [_jsx(Text, { type: "supporting", children: "Ollama only answers pages on your own machine. Run this, then quit and reopen Ollama. LM Studio: turn on CORS in its server settings." }), _jsx(CodeBlock, { code: ollamaOriginsCommand(), language: "bash", hasLanguageLabel: false, isWrapped: true, size: "sm" })] }) }));
+}