@andorra-labs/code 0.0.0-stage → 0.1.5

package/dist/src/graph-ui/app.js

@@ -0,0 +1,1803 @@
+/* Browser-only graph editor. No dependencies or remote assets. */
+'use strict';
+const $ = id => document.getElementById(id);
+// SVG attributes cannot use CSS custom properties, so a token's value is read from :root.
+// `getComputedStyle` is feature-detected because this module is also loaded into harnesses that
+// provide a partial DOM.
+const themeColor = (token, fallback) => {
+  try {
+    if (typeof getComputedStyle === 'function') {
+      const value = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+      if (value) return value;
+    }
+  } catch { /* A partial DOM falls through to the literal below. */ }
+  return fallback;
+};
+// The connection colours, read once per paint. An outcome is a status, and status is the only
+// colour the chrome carries; the halo is the canvas ground, so a crossing stays legible.
+const connectionPalette = () => ({
+  fail: themeColor('--err', '#d64545'),
+  pass: themeColor('--ok', '#2f9e6a'),
+  blocked: themeColor('--warn', '#d99a2b'),
+  plain: themeColor('--text-3', '#85858f'),
+  halo: themeColor('--canvas-bg', '#1b1b1e'),
+  pill: themeColor('--bg-input', '#202024'),
+});
+const fragmentToken = new URLSearchParams(location.hash.slice(1)).get('token');
+const token = fragmentToken || sessionStorage.getItem('andorra-graph-token');
+if (fragmentToken) sessionStorage.setItem('andorra-graph-token', fragmentToken);
+history.replaceState(null, '', location.pathname + location.search);
+const state = { graphs: [], providers: [], tools: [], definitions: [], libraryExpanded: {}, selectedEdge: null, selectedIds: [], routePick: null, bulkOutcome: null, disclosures: {}, validationErrors: [], validationTimer: null, graph: null, selected: null, dirty: false, saving: false, undo: [], redo: [], zoom: 1, x: 60, y: 120, pendingProviderNodes: null };
+const copy = value => JSON.parse(JSON.stringify(value));
+const el = (tag, text, className) => { const item = document.createElement(tag); if (text !== undefined) item.textContent = text; if (className) item.className = className; return item; };
+// The studio's questions are the app's own dialogs (controls.js). A page without that layer — the
+// test harness — answers through the platform's, so the code path is the same either way.
+function askConfirm(options) {
+  const controls = globalThis.AndorraControls;
+  if (typeof controls?.confirm === 'function') return controls.confirm(options);
+  return Promise.resolve(confirm([options.title, options.message].filter(Boolean).join('\n\n')));
+}
+const DISCARD_QUESTION = { title: 'Discard unsaved changes?', message: 'Edits to this graph since its last revision are lost. Recoverable drafts stay in draft history.', confirmLabel: 'Discard', tone: 'danger' };
+function status(message, error = false) { $('status').textContent = message; $('status').parentElement.classList.toggle('error', error); }
+// The free tier keeps one custom graph of up to three nodes (Done does not count) and leaves the
+// Orchestrator to Premium. The server enforces the same rules on save; these keep the editor honest
+// about them before the user builds something it cannot save.
+const FREE_CREATE_TIP = 'Free tier includes 1 custom graph. Upgrade to Premium for more graphs.';
+const FREE_ORCHESTRATOR_TIP = 'The Orchestrator is a Premium feature. Free tier graphs can use the other agent nodes.';
+function freeTier() { return state.plan?.paid === false; }
+function freeNodeTip() { return `Free tier graphs can have up to ${state.plan.nodeLimit} nodes, not counting Done. Upgrade to Premium for larger graphs.`; }
+function countedNodes(graph) { return Object.values(graph.nodes).filter(node => node.type !== 'end').length; }
+function canCreateGraph() { return !freeTier() || state.graphs.filter(graph => graph.id !== 'default').length < state.plan.customGraphLimit; }
+/** Whether a free account may save this graph: its kept graph, or a new one while it has none. */
+function freeGraphEditable(graph) { return !freeTier() || (graph.revision ? graph.id === (state.plan.freeGraphId ?? state.graphs.find(item => item.id !== 'default')?.id) : canCreateGraph()); }
+/** Why adding these nodes would leave the free allowance, or undefined. */
+function freeNodeRefusal(added) {
+  if (!freeTier() || !state.graph) return undefined;
+  if (added.some(node => node?.agentRole === 'orchestrator')) return FREE_ORCHESTRATOR_TIP;
+  const counted = added.filter(node => node?.type !== 'end').length;
+  return counted && countedNodes(state.graph) + counted > state.plan.nodeLimit ? freeNodeTip() : undefined;
+}
+async function api(path, body, options = {}) {
+  const response = await fetch(path, { method: options.method || (body ? 'POST' : 'GET'), headers: { Authorization: `Bearer ${token || ''}`, ...(body ? { 'Content-Type': 'application/json' } : {}) }, ...(body ? { body: JSON.stringify(body) } : {}), ...(options.signal ? { signal: options.signal } : {}) });
+  const data = await response.json();
+  if (!response.ok) throw new Error(typeof data.error === 'string' ? data.error : JSON.stringify(data.error || data));
+  return data;
+}
+function checkpoint() { state.undo.push(copy(state.graph)); if (state.undo.length > 80) state.undo.shift(); state.redo = []; }
+function changed() { scheduleValidation(); state.dirty = true; renderCanvas(); renderHeading(); renderValidation(); status('Unsaved changes'); syncImportRequirementsMarker(); queueDraft(); }
+let draftTimer, pendingDraft;
+function flushDraft() {
+  clearTimeout(draftTimer);
+  const graph = pendingDraft; pendingDraft = null;
+  if (graph) return api('/api/drafts', graph).then(refreshDrafts).catch(error => status('Draft not saved: ' + error.message, true));
+}
+function queueDraft() {
+  if (!state.graph || !state.dirty) return;
+  if (pendingDraft && pendingDraft.id !== state.graph.id) void flushDraft();
+  pendingDraft = copy(state.graph);
+  if ($('sync-status')) $('sync-status').textContent = 'Saving draft locally…';
+  clearTimeout(draftTimer);
+  draftTimer = setTimeout(flushDraft, 500);
+}
+async function refreshDrafts() {
+  state.drafts = await api('/api/drafts'); renderList();
+}
+// The pending-provider set is session memory; the id array mirrored onto the graph object is
+// what survives an autosave, because queueDraft serializes the graph verbatim. Only the draft
+// round-trip carries the mirror (every saved-artifact reader strips it through
+// dropLegacyTokenFields), so a recovered imported draft can rebuild the requirement set.
+function syncImportRequirementsMarker() {
+  if (!state.graph) return;
+  if (state.pendingProviderNodes?.size) state.graph.pendingProviderNodes = [...state.pendingProviderNodes];
+  else if (Array.isArray(state.graph.pendingProviderNodes)) delete state.graph.pendingProviderNodes;
+}
+// A recovered draft rebuilds its requirement set from the mirror, keeping only ids whose node
+// still exists as an unassigned agent, so requirements can neither vanish nor outlive their
+// nodes, and the mirror on the draft converges to what is actually still owed.
+function restoreImportRequirements(graph) {
+  if (!graph || !Array.isArray(graph.pendingProviderNodes)) return null;
+  const owed = new Set();
+  for (const id of graph.pendingProviderNodes) {
+    const node = graph.nodes?.[id];
+    if (node?.type === 'agent' && !node.provider) owed.add(id);
+  }
+  if (owed.size) graph.pendingProviderNodes = [...owed]; else delete graph.pendingProviderNodes;
+  return owed.size ? owed : null;
+}
+async function openDraft(snapshot) {
+  if (state.dirty && !await askConfirm({ title: 'Open the saved draft?', message: 'Current edits are retained in draft history.', confirmLabel: 'Open draft' })) return;
+  try { const graph = await api(`/api/drafts/${snapshot}`); const owed = restoreImportRequirements(graph); state.graph = graph; state.dirty = true; clearSelection(); state.undo = []; state.redo = []; state.pendingProviderNodes = owed; render(); fit(); status(owed ? 'Recovered imported draft. Assign a model profile to every outlined node, then save.' : 'Recovered draft. Save a revision when valid, or duplicate if its base revision changed.'); }
+  catch (error) { status(error.message, true); }
+}
+function mutate(action, inspector = false) { if (!state.graph) return; checkpoint(); action(); changed(); if (inspector) renderInspector(); }
+/**
+ * Drop settings the runtime no longer defines. `maxTokens` and the subagent token pair were
+ * removed with the cumulative token ceiling; the server still accepts them so old graphs keep
+ * loading, but hiding their controls alone would not remove them from a saved revision because
+ * the editor serializes the whole graph. Removing them here makes the next save authoritative.
+ * The import-requirements marker (`pendingProviderNodes`) is stripped here too: it is editor
+ * state riding on draft snapshots, not graph content, so it never reaches a saved revision, an
+ * export or a reopened saved graph. Only the draft round-trip keeps it (queueDraft and
+ * openDraft bypass this), which is what lets a recovery restore the requirements.
+ */
+function dropLegacyTokenFields(graph) {
+  if (!graph || typeof graph !== 'object') return graph;
+  if (graph.limits && typeof graph.limits === 'object') delete graph.limits.maxTokens;
+  delete graph.pendingProviderNodes;
+  for (const node of Object.values(graph.nodes || {})) {
+    if (!node || typeof node !== 'object') continue;
+    if (node.limits && typeof node.limits === 'object') delete node.limits.maxTokens;
+    if (node.subagents && typeof node.subagents === 'object') { delete node.subagents.maxTokensPerSubagent; delete node.subagents.maxCombinedTokens; }
+  }
+  return graph;
+}
+function titleFor(provider) { return typeof provider === 'string' ? provider : provider.label || provider.name || provider.id; }
+function idFor(provider) { return typeof provider === 'string' ? provider : provider.id || provider.name; }
+function applyProviderRegistry(value) {
+  if (!value || !Array.isArray(value.providers)) return false;
+  const nextDefault = value.defaultProvider;
+  const nextProviders = value.providers;
+  if (JSON.stringify([state.defaultProvider, state.providers]) === JSON.stringify([nextDefault, nextProviders])) return false;
+  state.defaultProvider = nextDefault;
+  state.providers = nextProviders;
+  state.modelContextRequests = new Map();
+  // A changed registry can move the default provider or the endpoint's catalog, so discovered
+  // suggestions must not survive it; the next inspector render rediscovers against live config.
+  state.providerModelRequests = new Map();
+  // The same reasoning applies to the record-on-commit dedupe: a model that was recorded under
+  // the previous registry may have been removed from the provider's configured list since, and
+  // a stale entry would suppress the re-POST that makes such a selection runnable again.
+  // Models that are still configured skip re-recording via the `known` set, not this one.
+  state.providerModelRecords = new Set();
+  // And to the unmet-fallback explanations: each asserts what a fallback provider does not serve,
+  // a claim only the previous registry's catalogs justified. The next commit re-derives one.
+  state.providerModelWarnings = new Map();
+  // A discovery request started before this change is detached from the cleared caches: when it
+  // resolves it advertises the PREVIOUS endpoint's catalog, and applying it would record those
+  // model names into the new endpoint's configuration — binding checks the configured list, so an
+  // unsupported model would pass binding and fail only at inference. Callbacks capture this
+  // generation and discard themselves when it no longer matches.
+  state.providerRegistryGeneration = (state.providerRegistryGeneration || 0) + 1;
+  if (state.graph) {
+    document.activeElement?.blur?.();
+    renderInspector();
+    renderValidation();
+  }
+  return true;
+}
+function outcomes(node) {
+  if (node.type === 'end') return [];
+  if (node.type === 'agent' && node.modifiers?.condition) return ['true', 'false'];
+  if (node.type === 'agent' && node.modifiers?.loop?.until?.outcome !== undefined) return [node.modifiers.loop.until.outcome];
+  if (node.type === 'condition') return ['true', 'false'];
+  if (node.type === 'loop') return ['body', 'done'];
+  if (node.type === 'approval') return ['approved', 'rejected'];
+  return node.completion?.mode === 'outcomes' ? node.completion.outcomes : [node.completion?.outcome ?? 'completed'];
+}
+function edgeOutcome(edge) { return edge.outcome || 'completed'; }
+function selectedNodes() { return (state.selectedIds.length ? state.selectedIds : state.selected ? [state.selected] : []).map(id => state.graph?.nodes[id]).filter(Boolean); }
+function selectionType(node) { return `${node.type}:${node.agentRole || 'regular'}`; }
+function clearSelection() { state.selectedIds = []; state.selected = null; state.selectedEdge = null; state.routePick = null; state.bulkOutcome = null; }
+function showInspector() { $('inspector').classList.remove('hidden'); $('toggle-inspector').setAttribute('aria-expanded','true'); }
+function selectNode(node, event = {}) {
+  if (state.routePick) { routeSelectionTo(node.id); return; }
+  if (state.suppressClick === node.id) { state.suppressClick = null; return; }
+  const current = selectedNodes(); let mixed = false;
+  if ((event.ctrlKey || event.metaKey) && current.length) {
+    if (selectionType(current[0]) !== selectionType(node)) { state.selectedIds = [node.id]; mixed = true; }
+    else state.selectedIds = current.some(item => item.id === node.id) ? current.filter(item => item.id !== node.id).map(item => item.id) : [...current.map(item => item.id), node.id];
+  } else state.selectedIds = [node.id];
+  state.selected = state.selectedIds.at(-1) || null; state.selectedEdge = null; state.bulkOutcome = null;
+  renderCanvas(); renderInspector(); showInspector();
+  if (mixed) status('Selection restarted. Use Ctrl/Cmd-click to select nodes of the same type.');
+}
+function routeSelectionTo(targetId) {
+  const pick = state.routePick, target = state.graph?.nodes[targetId];
+  if (!pick || !target) return;
+  if (pick.sources.includes(targetId) || target.agentRole === 'orchestrator') { status('Choose a destination outside the selection. The Orchestrator cannot have incoming connections.', true); return; }
+  const sources = pick.sources.map(id => state.graph.nodes[id]);
+  if (sources.some(node => !node || !outcomes(node).includes(pick.outcome)) || sources.some(node => selectionType(node) !== selectionType(sources[0]))) { state.routePick=null; renderInspector(); status('The selection changed. Select matching nodes and choose an outcome again.',true); return; }
+  mutate(() => {
+    const existing = state.graph.edges;
+    const replacements = sources.map(node => existing.find(edge => edge.source === node.id && edgeOutcome(edge) === pick.outcome && edge.target === targetId) || {id:`edge-${crypto.randomUUID().slice(0,8)}`,source:node.id,target:targetId,outcome:pick.outcome});
+    state.graph.edges = [...existing.filter(edge => !pick.sources.includes(edge.source) || edgeOutcome(edge) !== pick.outcome),...replacements];
+    state.routePick = null;
+  },true);
+  status(`Routed ${sources.length} nodes to ${target.name}. Existing matching handoffs were kept; configure and validate new input mappings below.`);
+}
+function renderBulkInspector(parent, nodes) {
+  $('inspector-title').textContent = `${nodes.length} nodes selected`;
+  parent.append(el('p',nodes.map(node=>node.name).join(', '),'help'));
+  const group = section(parent,'Output Node');
+  const shared = outcomes(nodes[0]).filter(outcome => nodes.every(node => outcomes(node).includes(outcome)));
+  if (!shared.length) {group.append(el('p','These nodes have no shared outcome. Give them a matching completion outcome before routing together.','help'));return;}
+  if (!shared.includes(state.bulkOutcome)) state.bulkOutcome=shared[0];
+  const selector=choice(group,'Shared outcome',state.bulkOutcome,shared,()=>{});selector.onchange=()=>{state.bulkOutcome=selector.value;state.routePick=null;renderCanvas();renderInspector();};
+  group.append(el('p','This replaces only the chosen outcome routes. Other outcomes stay connected. Existing handoffs to the chosen destination are retained; new destinations start without mappings.','help'));
+  const route=el('button',state.routePick?'Click a destination on the canvas':`Route all ${nodes.length} to...`,'primary');
+  route.onclick=()=>{state.routePick={sources:nodes.map(node=>node.id),outcome:state.bulkOutcome};renderCanvas();renderInspector();status('Click the destination node. Press Escape to cancel.');};group.append(route);
+  if(state.routePick){const cancel=el('button','Cancel destination selection');cancel.onclick=cancelRoutePick;group.append(cancel);}
+  const connections=section(group,'Handoff mappings');
+  for(const node of nodes) for(const edge of state.graph.edges.filter(edge=>edge.source===node.id&&edgeOutcome(edge)===state.bulkOutcome)) {const edit=el('button',`${node.name} -> ${state.graph.nodes[edge.target]?.name} (${Object.keys(edge.inputMapping||{}).length} mappings)`,'graph-row');edit.onclick=()=>{clearSelection();state.selectedEdge=edge;renderCanvas();renderInspector();};connections.append(edit);}
+}
+function cancelRoutePick() { state.routePick=null;renderCanvas();renderInspector();status('Destination selection cancelled. No connections changed.'); }
+/** One validation problem: the message shown to the reader, and the node it blames. Errors that
+ * carry their node id directly survive duplicate display names; graph-level ones name none. */
+function issues() {
+  const graph = state.graph; if (!graph) return [];
+  const result = [], nodes = Object.values(graph.nodes);
+  if (nodes.length < 2 || nodes.length > nodeLimit(graph)) result.push({ message: `Use between 2 and ${nodeLimit(graph)} nodes; remove extra nodes before saving.` });
+  if (freeTier()) {
+    if (!freeGraphEditable(graph)) result.push({ message: graph.revision ? 'On the free tier only your first custom graph can be changed. Upgrade to Premium to edit this graph.' : FREE_CREATE_TIP });
+    if (nodes.some(node => node.agentRole === 'orchestrator')) result.push({ message: FREE_ORCHESTRATOR_TIP });
+    if (countedNodes(graph) > state.plan.nodeLimit) result.push({ message: freeNodeTip() });
+  }
+  if (new TextEncoder().encode(JSON.stringify(graph)).byteLength > 512 * 1024) result.push({ message: 'Graph exceeds 512 KiB; shorten instructions or remove nodes before saving.' });
+  if (!graph.name.trim()) result.push({ message: 'Give this graph a name.' });
+  if (graph.name.length > 200) result.push({ message: 'Keep the graph name to 200 characters or fewer.' });
+  if (graph.metadata?.description?.length > 2000) result.push({ message: 'Keep the description to 2000 characters or fewer.' });
+  if (Array.isArray(graph.widgets) && graph.widgets.length > 5) result.push({ message: 'Use at most 5 widgets.' });
+  const widgetIds = new Set();
+  for (const [index, widget] of (graph.widgets ?? []).entries()) {
+    const label = widget.name?.trim() || `Widget ${index + 1}`;
+    if (!widget.name?.trim() || widget.name.length > 80) result.push({ message: `${label}: give the widget a name of up to 80 characters.` });
+    if (!widget.description?.trim() || widget.description.length > 1000) result.push({ message: `${label}: describe what the widget tracks, in up to 1000 characters.` });
+    if (widgetIds.has(widget.id)) result.push({ message: `${label}: duplicate widget id; remove and re-add this widget.` });
+    widgetIds.add(widget.id);
+  }
+  if (!graph.nodes[graph.entry]) result.push({ message: 'Choose an existing entry node.' });
+  for (const node of nodes) {
+    const blame = message => result.push({ message, nodeId: node.id });
+    if (node.jevEnabled !== undefined && (node.type !== 'agent' || typeof node.jevEnabled !== 'boolean')) blame(`${node.name}: Jev decisions must be a boolean on an Agent node.`);
+    for (const outcome of outcomes(node)) if (typeof outcome !== 'string' || !/^[a-zA-Z0-9][a-zA-Z0-9_ -]{0,79}$/.test(outcome) || outcome.endsWith(' ') || outcome.includes('  ') || ['constructor', 'prototype', '__proto__'].includes(outcome)) blame(`${node.name}: Use outcome names of 1-80 characters starting with a letter or number and containing only letters, numbers, single spaces, underscores or hyphens. Avoid reserved names constructor, prototype and __proto__.`);
+    if (!node.name.trim()) blame(`${node.id}: Add a name.`);
+    if (node.name.length > 200) blame(`${node.id}: Keep the node name to 200 characters or fewer.`);
+    if (node.position !== undefined && (!Number.isFinite(node.position?.x) || !Number.isFinite(node.position?.y) || Math.abs(node.position.x) > 100000 || Math.abs(node.position.y) > 100000)) blame(`${node.name}: Set finite X and Y coordinates between -100000 and 100000.`);
+    if (node.type === 'agent') {
+      // An imported graph must not drift onto the machine default provider unnoticed: nodes
+      // that arrived without a usable provider stay pinned to this list until one is chosen.
+      if (state.pendingProviderNodes?.has(node.id) && !node.provider) blame(`${node.name}: choose a model profile for this imported node before saving.`);
+      // Missing provider profiles remain editable; the inspector labels them unavailable.
+      // Run-time preflight, not graph storage, enforces local provider availability.
+      for (const key of ['instruction', 'systemPrompt']) if (node[key] !== undefined && (typeof node[key] !== 'string' || node[key].length > 100000)) blame(`${node.name}: Keep ${key} to 100000 characters or fewer.`);
+      if (node.limits?.maxIterations !== undefined && (!Number.isSafeInteger(node.limits.maxIterations) || node.limits.maxIterations < 0 || node.limits.maxIterations > 1000)) blame(`${node.name}: Set an integer iteration limit from 1 to 1000, or 0 for unlimited.`);
+      if (node.prompt !== undefined && (typeof node.prompt !== 'string' || node.prompt.length > 100000)) blame(`${node.name}: Keep the system prompt to 100000 characters or fewer.`);
+      if (node.model !== undefined && (typeof node.model !== 'string' || !node.model.trim() || node.model.length > 500)) blame(`${node.name}: Use a nonempty model ID of 500 characters or fewer, or clear the override.`);
+      if (node.maxIterations !== undefined && (!Number.isSafeInteger(node.maxIterations) || node.maxIterations < 0 || node.maxIterations > 1000)) blame(`${node.name}: Set an integer iteration limit from 1 to 1000, or 0 for unlimited.`);
+    }
+  }
+  return result;
+}
+function scheduleValidation() {
+  clearTimeout(state.validationTimer); state.validationErrors = []; state.validated = false;
+  if (!state.graph) return;
+  const snapshot = JSON.stringify(state.graph);
+  state.validationTimer = setTimeout(async () => {
+    try { await api('/api/validate', { graph: JSON.parse(snapshot) }); if (JSON.stringify(state.graph) === snapshot) { state.validated = true; state.validationErrors = []; renderValidation(); renderCanvas(); } }
+    catch (error) { if (JSON.stringify(state.graph) === snapshot) { state.validated = true; state.validationErrors = [error.message]; renderValidation(); renderCanvas(); } }
+  }, 350);
+}
+function renderHeading() {
+  $('graph-title').textContent = state.graph?.name || 'Graph studio';
+  $('revision').textContent = state.graph ? `${state.graph.revision ? `Revision ${state.graph.revision}` : 'New graph'}${state.dirty ? ' - Unsaved' : ''}` : '';
+  $('save').disabled = state.saving || !state.graph || !state.dirty || state.graph.id === 'default';
+  $('save').title = state.graph?.id === 'default' ? 'Duplicate the preset to save your customization' : '';
+  $('undo').disabled = !state.undo.length; $('redo').disabled = !state.redo.length;
+  for (const id of ['duplicate', 'export', 'layout', 'fit']) $(id).disabled = !state.graph;
+  $('duplicate').disabled = state.saving || !state.graph || !canCreateGraph();
+  renderLibrary();
+  window.AndorraStudio?.heading?.();
+}
+function renderList() {
+  $('new-graph').disabled = state.saving || !canCreateGraph();
+  $('new-graph').title = canCreateGraph() ? 'Create graph' : FREE_CREATE_TIP;
+  $('duplicate').disabled = state.saving || !state.graph || !canCreateGraph();
+  $('duplicate').title = canCreateGraph() ? '' : FREE_CREATE_TIP;
+  $('graphs').replaceChildren();
+  for (const graph of state.graphs.filter(graph => graph.name.toLowerCase().includes($('search').value.toLowerCase()))) {
+    const button = el('button', undefined, `graph-row${state.graph?.id === graph.id ? ' active' : ''}`);
+    button.disabled = state.saving;
+    button.append(el('span', graph.name), el('small', graph.id === 'default' ? 'Preset' : `r${graph.revision}`));
+    button.onclick = () => openGraph(graph.id);
+    button.oncontextmenu = event => { event.preventDefault(); showGraphMenu(graph, event.clientX, event.clientY); };
+    $('graphs').append(button);
+  }
+  const draftGraphs = new Set();
+  for (const draft of (state.drafts || []).filter(draft => draft.name.toLowerCase().includes($('search').value.toLowerCase()))) {
+    if (!state.showDraftHistory && draftGraphs.has(draft.graphId)) continue;
+    draftGraphs.add(draft.graphId);
+    const button = el('button', undefined, 'graph-row'); button.disabled = state.saving;
+    button.append(el('span', draft.name), el('small', 'Draft ' + (draft.updatedAt ? new Date(draft.updatedAt).toLocaleString() : '(date unknown)')));
+    button.onclick = () => openDraft(draft.snapshot); $('graphs').append(button);
+  }
+  if (state.drafts?.length) {
+    const history = el('button', state.showDraftHistory ? 'Show latest drafts' : `Show draft history (${state.drafts.length})`);
+    history.onclick = () => { state.showDraftHistory = !state.showDraftHistory; renderList(); }; $('graphs').append(history);
+  }
+}
+// Right-click actions for a saved graph row, and the Plus button's New/Import choices. The menu
+// floats at the pointer as a body-level overlay, so a list re-render cannot tear it down
+// mid-choice; a pointerdown outside it or Escape closes it.
+let closeGraphMenuHandlers;
+function closeGraphMenu() { closeGraphMenuHandlers?.(); }
+function showMenuAt(x, y, ariaLabel, items) {
+  closeGraphMenu();
+  // A harness without a body cannot host the overlay; the click then simply does nothing.
+  if (!document.body?.append) return;
+  const menu = el('div', undefined, 'menu-list graph-context');
+  menu.id = 'graph-context-menu';
+  menu.setAttribute('role', 'menu'); menu.setAttribute('aria-label', ariaLabel);
+  const buttons = [];
+  for (const item of items) {
+    const button = el('button', item.label, item.danger ? 'danger' : undefined);
+    button.type = 'button'; button.setAttribute('role', 'menuitem');
+    if (item.icon) button.setAttribute('data-icon', item.icon);
+    button.onclick = () => { closeGraphMenu(); item.run(); };
+    menu.append(button); buttons.push(button);
+  }
+  window.AndorraIcons?.hydrate?.(menu);
+  document.body.append(menu);
+  // A menu near a window edge must not clip an item out of reach.
+  const width = menu.offsetWidth || 210, height = menu.offsetHeight || 40;
+  menu.style.left = `${Math.max(0, Math.min(x, (window.innerWidth || x + width + 8) - width - 8))}px`;
+  menu.style.top = `${Math.max(0, Math.min(y, (window.innerHeight || y + height + 8) - height - 8))}px`;
+  const invoker = document.activeElement;
+  const close = (restoreFocus = false) => {
+    closeGraphMenuHandlers = undefined;
+    window.removeEventListener?.('pointerdown', outside, true);
+    menu.remove();
+    if (restoreFocus) invoker?.focus?.();
+  };
+  const outside = event => { if (!menu.contains(event.target)) close(); };
+  // The toolbar overflow's menu-button pattern: the opening takes focus, arrows move between
+  // items, Escape closes and hands focus back to the row, Tab closes without restoring.
+  menu.onkeydown = event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const index = buttons.indexOf(document.activeElement);
+      buttons[(index + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+    }
+    else if (event.key === 'Escape') { event.preventDefault(); close(true); }
+    else if (event.key === 'Tab') close();
+  };
+  window.addEventListener?.('pointerdown', outside, true);
+  closeGraphMenuHandlers = close;
+  buttons[0]?.focus?.();
+}
+function showGraphMenu(graph, x, y) {
+  showMenuAt(x, y, `${graph.name} actions`, [
+    { label: 'Duplicate', icon: 'copy', run: () => duplicateGraph(graph) },
+    { label: 'Export JSON', icon: 'download', run: () => { exportGraph(graph).catch(error => status(error.message, true)); } },
+  ]);
+}
+function showNewGraphMenu(x, y) {
+  showMenuAt(x, y, 'Create a graph', [
+    { label: 'New graph', icon: 'plus', run: () => newGraph() },
+    { label: 'Import graph', icon: 'upload', run: () => { if (window.AndorraStudio?.openImport) window.AndorraStudio.openImport(); else status('The import dialog is still loading. Try again in a moment.', true); } },
+  ]);
+}
+// The saved revision a row names is what a friend receives: the open draft's unsaved edits are
+// not part of it. In the desktop host the graph id alone crosses the frame and the host writes
+// the file itself; a plain browser downloads the fetched revision directly.
+async function exportGraph(graph) {
+  if (window.AndorraEmbed?.hostChrome?.() && window.AndorraEmbed.exportGraph) { window.AndorraEmbed.exportGraph(graph.id); return; }
+  if (state.saving) { status('Wait for the current save before exporting a graph.'); return; }
+  downloadGraph(dropLegacyTokenFields(await api(`/api/graphs/${encodeURIComponent(graph.id)}`)));
+}
+function exportFileName(graph) {
+  const slug = String(graph.name || '').trim().replace(/[^\w-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 60);
+  return slug || graph.id;
+}
+function downloadGraph(graph) { downloadJson(graph, exportFileName(graph)); }
+function downloadJson(value, stem) {
+  const url = URL.createObjectURL(new Blob([JSON.stringify(value, null, 2)], { type: 'application/json' }));
+  const link = el('a'); link.href = url; link.download = `${stem}.json`; link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+async function duplicateGraph(source) {
+  if (state.saving) { status('Wait for the current save before duplicating a graph.'); return; }
+  state.saving = true; renderHeading(); renderList();
+  let created;
+  try {
+    const saved = dropLegacyTokenFields(await api(`/api/graphs/${encodeURIComponent(source.id)}`));
+    // validateGraph caps names at 200 characters, so a near-limit source name must make room
+    // for the suffix or the save would be rejected with no way to rename the invisible copy.
+    const suffix = ' (Copy)', base = saved.name || 'Untitled graph';
+    const name = base.length + suffix.length > 200 ? base.slice(0, 200 - suffix.length).trimEnd() + suffix : base + suffix;
+    const duplicate = { ...saved, id: newId(), name, revision: 0 };
+    const stored = await api('/api/graphs', duplicate);
+    created = { id: stored.id, name: stored.name };
+    // The rail lists graphs in the server's id order; slot the copy into that order.
+    const summary = { id: stored.id, name: stored.name, revision: stored.revision };
+    const index = state.graphs.findIndex(item => item.id !== 'default' && item.id > stored.id);
+    if (index < 0) state.graphs.push(summary); else state.graphs.splice(index, 0, summary);
+  } catch (error) { status(error.message, true); }
+  state.saving = false; renderHeading(); renderList();
+  if (!created) return;
+  if (state.dirty) { status(`Created "${created.name}". Open it from the list to rename it.`); return; }
+  await openGraph(created.id);
+  if (state.graph?.id === created.id) status(`Duplicated "${source.name}" - Rename it in Graph settings.`);
+}
+function position(node, index) { return node.position || { x: index * 290, y: 0 }; }
+function transform() { $('scene').style.transform = `translate(${state.x}px,${state.y}px) scale(${state.zoom})`; $('zoom').textContent = `${Math.round(state.zoom * 100)}%`; window.AndorraStudio?.viewport?.(); }
+// The canvas tips show until the reader dismisses them once. The choice is a per-browser
+// convenience, so unavailable storage simply shows the tips again next time.
+const HINT_KEY = 'andorra-graph-canvas-hint-dismissed';
+function canvasHintDismissed() {
+  if (state.canvasHintDismissed) return true;
+  try { return localStorage.getItem(HINT_KEY) === '1'; } catch { return false; }
+}
+function dismissCanvasHint() {
+  if (canvasHintDismissed()) return;
+  state.canvasHintDismissed = true;
+  try { localStorage.setItem(HINT_KEY, '1'); } catch { /* The tips still hide for this session. */ }
+  if (!state.routePick && $('canvas-hint')) $('canvas-hint').hidden = true;
+}
+// The model a card names: its own override, else the model its provider profile runs.
+function nodeModelLabel(node) {
+  if (node.model) return node.model;
+  const providerId = node.provider || state.defaultProvider;
+  const provider = state.providers.find(p => idFor(p) === providerId);
+  if (provider && typeof provider !== 'string' && provider.model) return provider.model;
+  return node.provider ? titleFor(provider || node.provider) : '';
+}
+function nodeSubtitle(node) {
+  if (node.type === 'agent') {
+    const model = nodeModelLabel(node);
+    return node.agentRole === 'orchestrator' ? `Orchestrator${model ? ' · ' + model : ''}` : model;
+  }
+  if (node.type === 'end') return 'Graph complete';
+  if (node.type === 'action') return node.action?.kind === 'tests' ? 'Run tests' : node.action?.kind === 'git' ? 'Git operation' : 'Run command';
+  return { join: 'Wait for branches', loop: 'Bounded repetition', condition: 'Branch on run state', parallel: 'Fan out', approval: 'Human approval' }[node.type] || 'Flow control';
+}
+const nodeIconElement = node => globalThis.AndorraIcons?.icon?.(globalThis.AndorraIcons.nodeIcon(node));
+function renderCanvas() {
+  $('nodes').replaceChildren(); $('edges').replaceChildren(); $('canvas').classList.toggle('picking-destination',!!state.routePick);
+  const hintText = state.routePick ? 'Click a destination node - Escape cancels' : 'Ctrl/Cmd-click same-type nodes to select together - Drag to pan - Scroll to zoom';
+  $('canvas-hint-text').textContent = hintText; $('canvas-hint').hidden = !state.routePick && canvasHintDismissed(); $('canvas-hint-close').hidden = !!state.routePick;
+  $('empty').hidden = !!state.graph;
+  if (!state.graph) return;
+  const nodes = Object.values(state.graph.nodes), positions = new Map(nodes.map((node, index) => [node.id, position(node, index)]));
+  const connected = new Set(state.graph.edges.map(edge => JSON.stringify([edge.source, edgeOutcome(edge)])));
+  const errorIds = nodeErrorIds();
+  nodes.forEach((node, index) => {
+    const p = positions.get(node.id), button = el('div', undefined, `node ${node.type}${selectedNodes().some(item=>item.id===node.id) ? ' selected' : ''}${errorIds.has(node.id) ? ' node-error' : ''}${state.routePick && !state.routePick.sources.includes(node.id) && node.agentRole !== 'orchestrator' ? ' route-target' : ''}`);
+    button.tabIndex = 0; button.setAttribute('data-node-id',node.id); button.setAttribute('role', 'button'); button.style.left = `${p.x}px`; button.style.top = `${p.y}px`; button.setAttribute('aria-label', `${node.name}, ${node.agentRole === 'orchestrator' ? 'orchestrator' : node.type}${node.id === state.graph.entry ? ', entry' : ''}`);
+    // The kind is the card's stripe and icon; the subtitle names what the node runs.
+    const title = el('div', undefined, 'node-title'), glyph = nodeIconElement(node);
+    if (glyph) title.append(glyph);
+    title.append(el('b', node.name || 'Untitled'));
+    if (node.id === state.graph.entry) title.append(el('span', 'Start', 'chip node-start'));
+    button.append(title);
+    const subtitle = nodeSubtitle(node);
+    if (subtitle) { const line = el('small', subtitle); line.title = subtitle; button.append(line); }
+    for (const outcome of outcomes(node)) { const port = el('button', outcome, 'output-port'); port.setAttribute('aria-label', `Connect ${node.name}: ${outcome}`); port.title = `${outcome} - drag to a node to connect`; if (connected.has(JSON.stringify([node.id, outcome]))) port.setAttribute('data-connected', 'true'); port.onpointerdown = event => event.stopPropagation(); port.onclick = event => { event.stopPropagation(); if(state.routePick || event.ctrlKey || event.metaKey) {selectNode(node,event);return;} clearSelection(); state.selectedIds=[node.id]; state.selected = node.id; state.inspectorTab = 'behavior'; renderCanvas(); renderInspector(); $('inspector').classList.remove('hidden'); $('toggle-inspector').setAttribute('aria-expanded','true'); document.getElementById(`route-${outcome}`)?.scrollIntoView({block: 'nearest'}); }; button.append(port); }
+    button.onkeydown = event => { if ((event.key === 'Enter' || event.key === ' ') && event.target === button) {event.preventDefault(); selectNode(node,event);} };
+    button.onclick = event => selectNode(node,event);
+    button.onpointerdown = event => {
+      if (event.button !== 0) return; event.stopPropagation(); if(event.ctrlKey || event.metaKey || state.routePick) return; state.suppressClick=null; const start = { x: event.clientX, y: event.clientY }, origin = position(node, index); let moved = false;
+      const move = e => { if (!moved && Math.hypot(e.clientX - start.x, e.clientY - start.y) < 3) return; if (!moved) { checkpoint(); moved = true; } const grid = state.studioSnap ? 20 : 1; node.position = { x: Math.round((origin.x + (e.clientX - start.x) / state.zoom) / grid) * grid, y: Math.round((origin.y + (e.clientY - start.y) / state.zoom) / grid) * grid }; changed(); };
+      const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); if (moved) {state.suppressClick=node.id; setTimeout(()=>{if(state.suppressClick===node.id)state.suppressClick=null;},0); renderInspector();} };
+      window.addEventListener('pointermove', move); window.addEventListener('pointerup', up, { once: true });
+    };
+    $('nodes').append(button);
+  }); transform(); renderEdges(); window.AndorraStudio?.canvas?.();
+}
+let routedGeometry = '', routedPaths = new Map();
+function renderEdges() {
+  $('edges').replaceChildren();
+  if (!state.graph) return;
+  const svg = tag => document.createElementNS('http://www.w3.org/2000/svg', tag);
+  const defs=svg('defs'); $('edges').append(defs);
+  const boxes=new Map();
+  Object.values(state.graph.nodes).forEach((node,index)=>{
+    const element=Array.from($('nodes').children).find(item=>item.getAttribute('data-node-id')===node.id), p=position(node,index);
+    const ports=Array.from(element.querySelectorAll('.output-port'));
+    boxes.set(node.id,{...p,width:element.offsetWidth,height:element.offsetHeight,ports:ports.map(port=>({x:p.x+element.offsetWidth,y:p.y+port.offsetTop+port.offsetHeight/2}))});
+  });
+  const geometry=JSON.stringify([...boxes]);
+  if(geometry!==routedGeometry){routedGeometry=geometry;routedPaths.clear();}
+  const rectangles=[...boxes.values()], rendered=[], pills=[], palette=connectionPalette();
+  const caption=svg('text'); caption.setAttribute('class','edge-caption'); caption.style.pointerEvents='none';
+  const emphasize = active => {
+    for (const item of rendered) {
+      item.path.setAttribute('stroke-width',item.edge===active?'3':'1.7');
+      item.path.setAttribute('opacity',active && item.edge!==active?'0.25':'1');
+      item.halo.setAttribute('opacity',active && item.edge!==active?'0.25':'1');
+      item.pill?.setAttribute('opacity',active && item.edge!==active?'0.25':'1');
+    }
+    for (const element of Array.from($('nodes').children)) {
+      const id=element.getAttribute('data-node-id');
+      element.classList.toggle('edge-source',Boolean(active && id===active.source));
+      element.classList.toggle('edge-target',Boolean(active && id===active.target));
+    }
+    const item=rendered.find(item=>item.edge===active);
+    caption.textContent=item?`${edgeOutcome(item.edge)} -> ${state.graph.nodes[item.edge.target].name}`:'';
+    if(item){caption.setAttribute('x',String(item.from.x));caption.setAttribute('y',String(item.from.y-14));caption.setAttribute('fill',item.color);}
+  };
+  // Draw a selected connection last so crossings cannot obscure its direction.
+  const ordered=state.graph.edges.map((edge,index)=>({edge,index})).sort((a,b)=>Number(a.edge===state.selectedEdge)-Number(b.edge===state.selectedEdge));
+  ordered.forEach(({edge,index})=>{
+    const from=boxes.get(edge.source),to=boxes.get(edge.target);if(!from||!to)return;
+    const source=from.ports[Math.max(0,outcomes(state.graph.nodes[edge.source]).indexOf(edgeOutcome(edge)))];if(!source)return;
+    const routeKey=JSON.stringify([source,to.x,to.y+48,index]);
+    if(!routedPaths.has(routeKey)){
+      const points=AndorraEdgeRouter.routeEdge(source,{x:to.x,y:to.y+48},rectangles,index);
+      // Elbows are drawn rounded; a router without the helper keeps its square corners.
+      routedPaths.set(routeKey,{d:(AndorraEdgeRouter.roundedPath||AndorraEdgeRouter.path)(points),label:AndorraEdgeRouter.labelPoint?.(points)});
+    }
+    const route=routedPaths.get(routeKey), d=route.d, path=svg('path'), hit=svg('path'), halo=svg('path');
+    const outcome=edgeOutcome(edge), color=outcome==='fail'||outcome==='rejected'?palette.fail:outcome==='pass'||outcome==='approved'?palette.pass:outcome==='blocked'?palette.blocked:palette.plain;
+    const marker=svg('marker'), arrow=svg('path');
+    for(const [name,value] of Object.entries({id:`edge-arrow-${index}`,viewBox:'0 0 10 10',refX:'9',refY:'5',markerWidth:'7',markerHeight:'7',orient:'auto-start-reverse'}))marker.setAttribute(name,value);
+    arrow.setAttribute('d','M 0 0 L 10 5 L 0 10 z');arrow.setAttribute('fill',color);arrow.style.pointerEvents='none';marker.append(arrow);defs.append(marker);
+    halo.setAttribute('d',d);halo.setAttribute('stroke',palette.halo);halo.setAttribute('stroke-width','6');halo.setAttribute('fill','none');halo.style.pointerEvents='none';
+    path.setAttribute('d',d);path.setAttribute('data-route',JSON.stringify([edge.source,edgeOutcome(edge),edge.target]));path.setAttribute('stroke',color);path.setAttribute('fill','none');path.setAttribute('stroke-linejoin','round');path.setAttribute('marker-end',`url(#edge-arrow-${index})`);path.style.pointerEvents='none';
+    hit.setAttribute('d',d);hit.setAttribute('stroke','transparent');hit.setAttribute('stroke-width','14');hit.setAttribute('fill','none');hit.style.pointerEvents='stroke';hit.style.cursor='pointer';hit.setAttribute('tabindex','0');hit.setAttribute('role','button');hit.setAttribute('aria-label',`Configure handoff from ${state.graph.nodes[edge.source].name}, ${edgeOutcome(edge)}, to ${state.graph.nodes[edge.target].name}`);
+    hit.onclick=event=>{event.stopPropagation();clearSelection();state.selectedEdge=edge;renderInspector();renderCanvas();showInspector();};
+    hit.onkeydown=event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();hit.onclick(event);}};
+    // The connection's hint is the app's tooltip (an SVG title would be the platform's).
+    hit.setAttribute('data-tip',`${state.graph.nodes[edge.source].name}: ${outcome} -> ${state.graph.nodes[edge.target].name}`);
+    hit.onpointerenter=hit.onfocus=()=>emphasize(edge);
+    hit.onpointerleave=hit.onblur=()=>emphasize(state.selectedEdge);
+    const entry={edge,path,halo,from,color,pill:null};rendered.push(entry);
+    $('edges').append(halo,path,hit);
+    // The outcome rides its line as a pill. A node's only, default outcome needs no name.
+    const single=outcomes(state.graph.nodes[edge.source]).length===1&&outcome==='completed';
+    if(route.label&&!single)pills.push({entry,outcome,color,at:route.label});
+  });
+  const pillLayer=svg('g');pillLayer.setAttribute('class','edge-pills');pillLayer.setAttribute('aria-hidden','true');
+  for(const {entry,outcome,color,at} of pills){const edge=entry.edge;
+    const group=svg('g'),rect=svg('rect'),text=svg('text');
+    const width=Math.max(28,Math.round(outcome.length*6.6+16)),height=18;
+    group.setAttribute('class','edge-pill');group.setAttribute('data-route',JSON.stringify([edge.source,outcome,edge.target]));
+    for(const [name,value] of Object.entries({x:String(Math.round(at.x-width/2)),y:String(at.y-height/2),width:String(width),height:String(height),rx:String(height/2),fill:palette.pill,stroke:color,'stroke-width':'1'}))rect.setAttribute(name,value);
+    for(const [name,value] of Object.entries({x:String(Math.round(at.x)),y:String(at.y+4),'text-anchor':'middle',fill:color}))text.setAttribute(name,value);
+    text.textContent=outcome;group.append(rect,text);pillLayer.append(group);
+    entry.pill=group;
+  }
+  $('edges').append(pillLayer,caption); emphasize(state.selectedEdge);
+}
+function removeNodes(ids) {
+  const graph = state.graph;
+  const remaining = Object.keys(graph.nodes).filter(id => !ids.has(id));
+  if (!remaining.length) { status('Keep at least one node as the graph start. Add a replacement before deleting all nodes.', true); return; }
+  const nextEntry = ids.has(graph.entry)
+    ? graph.edges.find(edge => edge.source === graph.entry && !ids.has(edge.target) && graph.nodes[edge.target])?.target ?? remaining[0]
+    : graph.entry;
+  mutate(() => {
+    for (const id of ids) delete graph.nodes[id];
+    graph.edges = graph.edges.filter(edge => !ids.has(edge.source) && !ids.has(edge.target));
+    if (graph.metadata?.studioLayoutGroupsV1) { for (const group of graph.metadata.studioLayoutGroupsV1) group.nodeIds = group.nodeIds.filter(id => !ids.has(id)); graph.metadata.studioLayoutGroupsV1 = graph.metadata.studioLayoutGroupsV1.filter(group => group.nodeIds.length); }
+    graph.entry = nextEntry;
+    // Explicitly preserve an edited graph without intake when it is reopened.
+    graph.schemaVersion = 3;
+    clearSelection();
+  }, true);
+  status(`Deleted ${ids.size} node${ids.size === 1 ? '' : 's'} and their connections. Start: ${graph.nodes[nextEntry].name}. Undo restores them.`);
+}
+function deleteSelection() {
+  if(!state.graph)return;
+  if(state.selectedEdge){const edge=state.selectedEdge;mutate(()=>{state.graph.edges=state.graph.edges.filter(item=>item!==edge);clearSelection();},true);return;}
+  const selected = selectedNodes();
+  if (selected.length) removeNodes(new Set(selected.map(node => node.id)));
+}
+function field(parent, label, value, onChange, options = {}) {
+  const wrapper = el('label', undefined, 'field'); wrapper.append(el('span', label));
+  const input = el(options.multiline ? 'textarea' : options.options ? 'select' : 'input');
+  if (options.options) for (const option of options.options) { const item = el('option', option.label); item.value = option.value; input.append(item); }
+  if (options.type) input.type = options.type;
+  if (options.type === 'number') input.step = '1';
+  if (options.min !== undefined) input.min = options.min; if (options.max !== undefined) input.max = options.max;
+  if (options.maxLength !== undefined) input.maxLength = options.maxLength;
+  if (options.placeholder !== undefined) input.placeholder = options.placeholder;
+  input.value = value ?? ''; if (options.mono) input.className = 'mono';
+  input.onchange = () => mutate(() => onChange(options.type === 'number' ? (options.optional && input.value.trim()==='' ? undefined : Number(input.value)) : input.value), !!options.refresh);
+  wrapper.append(input); parent.append(wrapper); return input;
+}
+function section(parent, title) { const item = el('section', undefined, 'section'); item.append(el('h3', title)); parent.append(item); return item; }
+// Normalize one validation error for display. Client issues carry the node id directly, so two
+// agents sharing a display name cannot misattribute an aura or a click-to-focus; a server
+// message names its node by the `node <id>:` label or `${node.name}:` and is matched the old way.
+function errorEntry(error) {
+  if (typeof error === 'string') {
+    return { message: error, nodeId: Object.values(state.graph?.nodes || {}).find(node => error.includes('node ' + node.id) || error.includes(node.name + ':'))?.id ?? null };
+  }
+  return { message: error.message, nodeId: error.nodeId ?? null };
+}
+function nodeErrorIds() {
+  const ids = new Set();
+  for (const error of [...issues(), ...state.validationErrors]) { const id = errorEntry(error).nodeId; if (id) ids.add(id); }
+  return ids;
+}
+function renderValidation() {
+  const container=$('validation');if(!container)return;container.replaceChildren();const errors=[...issues(),...state.validationErrors].map(errorEntry);
+  if(!errors.length)container.append(el('p',state.validated?'Validated - Ready to save':'Checking graph...','valid'));
+  else {const list=el('ul',undefined,'validation');errors.forEach(({message,nodeId})=>{ const row=el('li',message); row.tabIndex=0; row.title='Click to focus the affected node'; row.onclick=()=>{if(nodeId){clearSelection();state.selected=nodeId;state.selectedIds=[nodeId];renderCanvas();renderInspector();}};row.onkeydown=e=>{if(e.key==='Enter'||e.key===' ')row.click();};list.append(row);});container.append(list);}
+}
+function disclosure(parent, title, open = false) { const item = el('details', undefined, 'section disclosure'); const key = `${state.selectedEdge?.id || state.selected || 'graph'}:${title}`; item.open = state.disclosures[key] ?? open; item.ontoggle = () => {state.disclosures[key] = item.open;}; item.append(el('summary', title)); const body = el('div'); item.append(body); parent.append(item); return body; }
+function check(parent, label, value, update) { const wrapper = el('label', undefined, 'tool-label'), input = el('input'); input.type = 'checkbox'; input.checked = value; input.onchange = () => mutate(() => update(input.checked), true); wrapper.append(input, el('span', label)); parent.append(wrapper); return input; }
+// A "?" beside a label keeps a long explanation one hover, focus or tap away (ADR 0022). The text
+// stays in the document as the trigger's accessible description. `target` is a field's input, its
+// label, or a heading; anything else receives the explanation as an ordinary paragraph.
+let infoTipSeq = 0;
+const tipHost = item => !!item && (item.className === 'field' || item.className === 'field prompt-field' || item.className === 'tool-label' || item.tagName === 'h3' || item.tagName === 'H3');
+function explain(target, text) {
+  const host = tipHost(target) ? target : tipHost(target?.parentElement) ? target.parentElement : undefined;
+  if (!host) { target?.append?.(el('p', text, 'help')); return; }
+  const tip = el('span', undefined, 'info-tip'), trigger = el('button', undefined, 'icon-button'), body = el('span', text, 'info-tip-text');
+  const id = `info-tip-${++infoTipSeq}`;
+  body.id = id; body.setAttribute('role', 'tooltip');
+  trigger.type = 'button'; trigger.setAttribute('aria-label', 'More information'); trigger.setAttribute('aria-describedby', id);
+  const glyph = globalThis.AndorraIcons?.icon?.('help', 14); if (glyph) trigger.append(glyph); else trigger.textContent = '?';
+  // The trigger sits inside a label, so its click must not reach the label's control.
+  trigger.onclick = event => { event?.preventDefault?.(); event?.stopPropagation?.(); tip.classList.toggle('open'); };
+  trigger.onkeydown = event => { if (event.key === 'Escape') { tip.classList.remove('open'); trigger.blur?.(); } };
+  trigger.onblur = () => tip.classList.remove('open');
+  tip.append(trigger, body); host.append(tip);
+}
+// The inspector's node settings are split into tabs. Every panel is rendered, so a field keeps its
+// place in the document and the validity check before saving can still reach it; only the chosen
+// panel is shown. The choice is kept across selections, so moving between nodes stays on a tab.
+const INSPECTOR_TABS = { general: 'General', model: 'Model', behavior: 'Behavior', advanced: 'Advanced' };
+let inspectorTabControls = [];
+function selectInspectorTab(id, focus = false) {
+  if (!inspectorTabControls.some(item => item.id === id)) return;
+  state.inspectorTab = id;
+  for (const item of inspectorTabControls) {
+    const active = item.id === id;
+    item.tab.setAttribute('aria-selected', String(active)); item.tab.tabIndex = active ? 0 : -1; item.panel.hidden = !active;
+    if (active && focus) item.tab.focus?.();
+  }
+}
+// Shows the panel holding a control, used before a control in a hidden panel reports a problem.
+function revealInspectorControl(control) {
+  for (const item of inspectorTabControls) if (item.panel.contains?.(control)) { selectInspectorTab(item.id); return; }
+}
+function inspectorTabs(parent, ids) {
+  const bar = el('div', undefined, 'inspector-tabs'); bar.setAttribute('role', 'tablist'); bar.setAttribute('aria-label', 'Inspector sections');
+  parent.append(bar);
+  const active = ids.includes(state.inspectorTab) ? state.inspectorTab : ids[0];
+  const panels = {}; inspectorTabControls = [];
+  for (const id of ids) {
+    const tab = el('button', INSPECTOR_TABS[id]); tab.type = 'button'; tab.id = `inspector-tab-${id}`;
+    tab.setAttribute('role', 'tab'); tab.setAttribute('aria-controls', `inspector-panel-${id}`);
+    const panel = el('div', undefined, 'inspector-panel'); panel.id = `inspector-panel-${id}`;
+    panel.setAttribute('role', 'tabpanel'); panel.setAttribute('aria-labelledby', tab.id); panel.setAttribute('data-tab', id);
+    tab.onclick = () => selectInspectorTab(id);
+    tab.onkeydown = event => {
+      const index = ids.indexOf(id);
+      const next = event.key === 'ArrowRight' ? ids[(index + 1) % ids.length] : event.key === 'ArrowLeft' ? ids[(index - 1 + ids.length) % ids.length] : event.key === 'Home' ? ids[0] : event.key === 'End' ? ids.at(-1) : undefined;
+      if (next) { event.preventDefault(); selectInspectorTab(next, true); }
+    };
+    bar.append(tab); panels[id] = panel; inspectorTabControls.push({ id, tab, panel });
+  }
+  for (const id of ids) parent.append(panels[id]);
+  // Selecting is an inspection, not a choice: only a click on a tab changes the remembered tab.
+  const remembered = state.inspectorTab;
+  selectInspectorTab(active);
+  if (remembered !== undefined && !ids.includes(remembered)) state.inspectorTab = remembered;
+  return panels;
+}
+// The prompt grows with its text up to a ceiling, and a button opens it full screen.
+function promptField(parent, label, value, onChange, options = {}) {
+  const input = field(parent, label, value, onChange, { multiline: true, maxLength: 100000, ...options });
+  const wrapper = input.parentElement; wrapper.className = 'field prompt-field';
+  const isFullscreen = () => !!wrapper.classList.contains?.('fullscreen');
+  const grow = () => { try { if (!isFullscreen() && input.scrollHeight) { input.style.height = 'auto'; input.style.height = `${input.scrollHeight + 2}px`; } } catch { /* A partial DOM has no layout. */ } };
+  input.addEventListener?.('input', grow);
+  const expand = el('button', undefined, 'icon-button btn-small prompt-expand'); expand.type = 'button';
+  let backdrop;
+  const setFullscreen = on => {
+    wrapper.classList.toggle('fullscreen', on);
+    document.body?.classList?.toggle?.('prompt-fullscreen', on);
+    expand.setAttribute('aria-label', on ? `Exit full screen ${label}` : `Edit ${label} full screen`);
+    expand.title = on ? 'Exit full screen (Escape)' : 'Expand to full screen';
+    expand.replaceChildren(); const glyph = globalThis.AndorraIcons?.icon?.(on ? 'collapse' : 'expand', 14); if (glyph) expand.append(glyph);
+    if (on) { backdrop = el('div', undefined, 'prompt-backdrop'); backdrop.onclick = () => setFullscreen(false); document.body?.append?.(backdrop); input.style.height = ''; input.focus?.(); }
+    else { backdrop?.remove?.(); backdrop = undefined; grow(); }
+  };
+  expand.onclick = event => { event?.preventDefault?.(); event?.stopPropagation?.(); setFullscreen(!isFullscreen()); };
+  input.addEventListener?.('keydown', event => { if (event.key === 'Escape' && isFullscreen()) { event.preventDefault(); setFullscreen(false); } });
+  setFullscreen(false); wrapper.append(expand);
+  setTimeout(grow, 0);
+  return input;
+}
+// A provider the graph names but this machine does not configure is a warning, not a model name.
+function providerWarning(parent, providerId) {
+  const chip = el('p', undefined, 'chip chip-warning provider-warning'); chip.setAttribute('role', 'status');
+  const glyph = globalThis.AndorraIcons?.icon?.('warning', 14); if (glyph) chip.append(glyph);
+  chip.append(el('span', `${providerId} unavailable`));
+  // The desktop app can open its provider settings; a browser-launched studio has no such route.
+  if (typeof window.AndorraEmbed?.openProviderSettings === 'function' && window.AndorraEmbed.hostChrome?.()) {
+    const configure = el('button', 'Configure', 'link-button'); configure.type = 'button';
+    configure.title = 'Open provider settings in the desktop app'; configure.onclick = () => window.AndorraEmbed.openProviderSettings();
+    chip.append(configure);
+  } else chip.title = 'Add this provider in the Andorra Code provider settings, or choose another profile.';
+  parent.append(chip);
+}
+function choice(parent, label, value, values, update, refresh = true) { return field(parent, label, value, update, { options: values.map(v => typeof v === 'string' ? {value: v, label: v.replaceAll('-', ' ')} : v), refresh }); }
+function jsonField(parent, label, value, update) {
+  const wrapper = el('label', undefined, 'field'); wrapper.append(el('span', label)); const input = el('textarea'); input.className = 'mono'; input.value = value === undefined ? '' : JSON.stringify(value, null, 2); input.onchange = () => { try { const parsed = input.value.trim() ? JSON.parse(input.value) : undefined; input.setCustomValidity(''); mutate(() => update(parsed)); } catch { input.setCustomValidity('Enter valid JSON or clear this field.'); input.reportValidity(); } }; wrapper.append(input); parent.append(wrapper);
+}
+const CAPABILITIES = { filesystem: ['none', 'read', 'read-write'], shell: ['disabled', 'read-only', 'allowed'], git: ['none', 'read', 'write'], github: ['none', 'read', 'pull-request', 'review'], browser: ['disabled', 'playwright'], deployment: ['none', 'allowed'] };
+function capabilities(parent, policy, update, ceiling) {
+  for (const [key, values] of Object.entries(CAPABILITIES)) {
+    const input = choice(parent, key.charAt(0).toUpperCase() + key.slice(1), policy?.[key] || effectiveCaps()[key], values, value => update({...effectiveCaps(), ...policy, [key]: value}));
+    if (ceiling) for (const option of input.options) if ((key === 'github' && ['pull-request','review'].includes(option.value) && option.value !== ceiling[key]) || values.indexOf(option.value) > values.indexOf(ceiling[key] || values[0])) option.disabled = true;
+  }
+}
+let modelSuggestionSeq = 0;
+function modelFields(parent, target, update, parentModel, inheritedProvider, fallbackProvider) {
+  const providers = state.providers.map(p => ({value: idFor(p), label: `${titleFor(p)}${p.model ? ' - ' + p.model : ''}`}));
+  if (target.provider && !providers.some(p => p.value === target.provider)) providers.push({value: target.provider, label: target.provider + ' (unavailable)'});
+  choice(parent, 'Model profile / provider', target.provider || '', [{value:'', label:'Use configured default'}, ...providers], value => update({ ...target, provider: value || undefined, model: undefined }));
+  if (target.provider && !state.providers.some(p => idFor(p) === target.provider)) providerWarning(parent, target.provider);
+  // Surface portability without rewriting the synced revision or local credentials. The alias must
+  // satisfy every reference to the original provider graph-wide (bindPortableGraphProviders groups
+  // them), so the hint mirrors that grouping instead of promising an alias execution would refuse.
+  if (target.provider) {
+    const originalId = target.provider;
+    const recorded = state.graph?.metadata?.graphProviderProfilesV1?.[originalId];
+    const explicit = new Set();
+    let groupInheritsRecorded = false;
+    const note = (reference, parentProvider) => {
+      if (reference.provider !== originalId) return;
+      if (reference.model) { explicit.add(reference.model); return; }
+      if (parentProvider === originalId) return; // Same-provider child without a model inherits the parent at execution.
+      groupInheritsRecorded = true;
+    };
+    for (const node of Object.values(state.graph?.nodes || {})) {
+      if (node.type !== 'agent') continue;
+      const policy = node.subagents;
+      const activeSubagents = policy?.enabled && node.maxSubagents !== 0 && policy.maxTotal !== 0;
+      const inheritedModels = [];
+      if (activeSubagents) {
+        const children = policy.modelPolicy === 'per-role' ? policy.roles || []
+          : policy.modelPolicy === 'specific' ? [policy] : [];
+        for (const child of children) if (!child.provider && child.model) inheritedModels.push(child.model);
+      }
+      note(node);
+      if (node.provider === originalId) for (const model of inheritedModels) explicit.add(model);
+      if (node.retry?.fallback && node.retry.maxAttempts > 1) {
+        note(node.retry.fallback);
+        if (node.retry.fallback.provider === originalId) for (const model of inheritedModels) explicit.add(model);
+      }
+      if (!activeSubagents) continue;
+      if (policy.modelPolicy === 'specific') note(policy);
+      else if (policy.modelPolicy === 'per-role') for (const role of policy.roles || []) note(role, node.provider);
+    }
+    const explicitModels = [...explicit];
+    // The live-model hint describes the inspected selection, not the whole provider group: another
+    // reference being unpinned must not claim this one has no override.
+    const followsProvider = target.model === undefined && parentModel === undefined;
+    const requiredModels = groupInheritsRecorded && recorded?.model ? [...explicitModels, recorded.model] : explicitModels;
+    const offers = (p, models) => models.every(model => [p.model, ...(p.models || [])].includes(model));
+    // A same-ID local provider is authoritative; its current model is what an unpinned reference
+    // uses, so the recorded model is only an alias requirement. This mirrors
+    // bindPortableGraphProviders, which execution calls before every run.
+    const exact = state.providers.find(p => idFor(p) === originalId && (!recorded?.type || p.type === recorded.type) && offers(p, explicitModels));
+    if (!exact) {
+      // A local provider that owns the original ID blocks aliasing even when it cannot satisfy
+      // the graph, so the editor must not promise a Codex profile execution will refuse.
+      const claimedProvider = state.providers.find(p => idFor(p) === originalId);
+      const claimed = claimedProvider !== undefined;
+      const typeMismatch = claimed && !!recorded?.type && claimedProvider.type !== recorded.type;
+      const matches = !claimed && recorded?.type === 'codex' ? state.providers.filter(p => p.type === 'codex' && offers(p, requiredModels)) : [];
+      const refusalHint = typeMismatch
+        ? `Provider "${originalId}" is configured locally with type "${claimedProvider.type}", but this graph was published with type "${recorded.type}". Execution will refuse this graph; reconnect a provider of the recorded type.`
+        : `Provider "${originalId}" is configured locally but does not offer ${requiredModels.join(', ')}. Execution will refuse this graph until that provider is configured with the model; another profile is never used as a substitute.`;
+      const hint = matches.length === 1
+        ? `Will use local Codex OAuth profile "${idFor(matches[0])}" (${requiredModels.join(', ') || 'all referenced models'}). The OAuth connection is verified before execution.`
+        : matches.length > 1
+          ? `Multiple local Codex OAuth profiles (${matches.map(idFor).join(', ')}) each satisfy this graph's requirements for "${originalId}". Execution needs exactly one; configure the original provider ID or keep a single compatible profile.`
+          : claimed
+            ? refusalHint
+            : `Provider "${originalId}"${requiredModels.length ? ` / ${requiredModels.join(', ')}` : ''} is not configured on this machine. This graph can be saved, but execution requires a compatible provider.`;
+      parent.append(el('p', hint, 'help'));
+    } else if (followsProvider && recorded?.model && recorded.model !== exact.model) {
+      parent.append(el('p', `This selection follows "${originalId}"'s current model, ${exact.model}.`, 'help'));
+    }
+  }
+  // A providerless subagent child inherits the parent node's provider at execution
+  // (bindPortableGraphProviders adds its model to the parent's requirements), so the suggestions
+  // shown here and the recording that makes a discovered pick runnable must resolve against that
+  // inherited provider, not the machine default, or the selection lands on the wrong provider.
+  const listingProvider = target.provider || inheritedProvider || state.defaultProvider || '';
+  const provider = state.providers.find(p => idFor(p) === listingProvider);
+  const info = el('p', 'Context window: detecting from model...', 'help model-context'); parent.append(info);
+  const key = JSON.stringify([target.provider || '', target.model || '', provider?.model || '']);
+  // Capture the registry generation before any discovery request starts: a callback resolving
+  // after a registry change describes the previous endpoint and must discard itself.
+  const registryGeneration = state.providerRegistryGeneration || 0;
+  state.modelContextRequests ||= new Map();
+  if (!state.modelContextRequests.has(key)) state.modelContextRequests.set(key, api(`/api/model-context?provider=${encodeURIComponent(target.provider || '')}&model=${encodeURIComponent(target.model || '')}`).catch(() => ({contextWindow:null})));
+  state.modelContextRequests.get(key).then(data => {
+    if ((state.providerRegistryGeneration || 0) !== registryGeneration) return;
+    info.textContent = data.contextWindow ? `Context window: ${data.contextWindow.toLocaleString()} tokens (automatic)` : 'Context window: not reported by this model. Runtime uses its default budget.';
+  });
+  const override = disclosure(parent, 'Model override');
+  const model = field(override, 'Model override (optional)', target.model, value => update({...target, model: value.trim() || undefined}), {maxLength:500,refresh:true}); model.placeholder = provider?.model || 'Configured profile model';
+  // The override stays free-text so a graph can name a model this machine has never seen, but the
+  // provider's catalog is offered alongside it: the configured models first, then everything the
+  // endpoint itself lists, so a provider that serves several models is selectable here rather than
+  // only the active one. Discovery is per provider, requested once, and failures simply leave the
+  // configured suggestions in place.
+  const datalist = el('datalist'); datalist.id = `provider-models-${++modelSuggestionSeq}`; model.setAttribute('list', datalist.id); override.append(datalist);
+  const displayed = new Set();
+  // Recording candidates are ONLY names discovery listed. Everything shown in the datalist lives in
+  // `displayed` (dedupe for <option> elements), but committing a displayed name must not authorize
+  // recording it: the configured models are already configured (skipped via `known`), and the node's
+  // own free-text override is precisely the speculative name this machine must not endorse into the
+  // provider configuration just because the graph happened to contain it.
+  const offered = new Set();
+  const addModelOption = (name, label) => {
+    const value = name?.trim();
+    if (!value || displayed.has(value)) return;
+    displayed.add(value);
+    const option = el('option'); option.value = value; if (label) option.label = label; datalist.append(option);
+  };
+  const activeName = provider?.model?.trim() || '';
+  for (const name of [activeName, ...(provider?.models || [])]) addModelOption(name, name?.trim() === activeName && name ? '(active)' : undefined);
+  if (target.model) addModelOption(target.model, target.model.trim() === activeName ? '(active)' : undefined);
+  // Keyed by the resolved provider: a node using the configured default must follow that default's
+  // identity, not share a blank key that survives a default switch.
+  state.providerModelRequests ||= new Map();
+  if (!state.providerModelRequests.has(listingProvider)) state.providerModelRequests.set(listingProvider, api(`/api/provider-models?provider=${encodeURIComponent(listingProvider)}`).catch(() => ({ models: [] })));
+  state.providerModelRequests.get(listingProvider).then(data => {
+    if ((state.providerRegistryGeneration || 0) !== registryGeneration) return;
+    for (const name of data.models || []) {
+      const value = name?.trim();
+      if (value) offered.add(value);
+      addModelOption(name, name === activeName ? '(active)' : undefined);
+    }
+  });
+  // Committing one of the discovered suggestions records it with the provider, the way /model does:
+  // execution validates a node's explicit model against the provider's configured models, so an
+  // unrecorded discovered pick would save a graph that refuses to run. Eligibility keys on the
+  // discovered catalog, not the displayed options, so a stored free-text override the provider never
+  // listed stays untouched even when recommitted, keeping speculative model names out of this
+  // machine's configuration.
+  const known = new Set([activeName, ...(provider?.models || []).map(name => name?.trim() || '')].filter(Boolean));
+  const committed = model.onchange;
+  // A providerless subagent child executes on the inherited provider OR on the parent node's
+  // enabled retry fallback (bindPortableGraphProviders adds every providerless child model to the
+  // fallback provider's requirements when retry.maxAttempts > 1), so a discovered pick must be
+  // recorded on every provider the child can run on. But recording must not endorse a model the
+  // fallback does not actually serve: binding checks each provider's CONFIGURED list, and recording
+  // rewrites exactly that list, so a primary-only name POSTed blindly to the fallback would turn
+  // the save-time GraphProviderUnavailableError into a failure deferred to a retry executing the
+  // child. Verify against the fallback's own catalog before recording there, and explain an unmet
+  // requirement instead of configuring an unsupported model.
+  const fallbackTarget = !target.provider && fallbackProvider && fallbackProvider !== listingProvider ? fallbackProvider : '';
+  let fallbackCheck = null;
+  const recordWith = (recordProvider, value) => {
+    state.providerModelRecords ||= new Set();
+    const key = JSON.stringify([recordProvider, value]);
+    if (state.providerModelRecords.has(key)) return;
+    state.providerModelRecords.add(key);
+    api('/api/provider-models', { provider: recordProvider, model: value }).catch(() => state.providerModelRecords.delete(key));
+  };
+  // The commit path re-renders the whole inspector (the field's refresh), so a note appended to
+  // this closure's `override` would land on detached DOM. Persist the unmet requirement in state:
+  // every re-rendered modelFields draws it from the map on its initial pass, and a decision that
+  // the fallback does serve the model removes it the same way.
+  const warningKey = (value) => JSON.stringify([fallbackTarget, value]);
+  const setWarning = (value, text) => {
+    state.providerModelWarnings ||= new Map();
+    const had = state.providerModelWarnings.has(warningKey(value));
+    if (text) { if (!had) { state.providerModelWarnings.set(warningKey(value), text); renderInspector(); } }
+    else if (had) { state.providerModelWarnings.delete(warningKey(value)); renderInspector(); }
+  };
+  const applyCommit = (value) => {
+    // Eligibility is per provider, not per commit: the model being configured on the primary
+    // (live registry updates can add it there after an earlier commit) must not suppress the
+    // fallback leg — the fallback's own catalog decides whether it runs. Same on the fallback
+    // side: already-configured names need no POST, verified or not.
+    if (!known.has(value)) recordWith(listingProvider, value);
+    if (!fallbackCheck) return;
+    if (fallbackCheck.configured.has(value) || fallbackCheck.offered.has(value)) {
+      fallbackCheck.pending = null;
+      if (!fallbackCheck.configured.has(value)) recordWith(fallbackTarget, value);
+      setWarning(value, null);
+    } else if (fallbackCheck.loaded) {
+      fallbackCheck.pending = null;
+      setWarning(value, `The retry fallback "${fallbackTarget}" does not serve ${value}. The model was recorded on "${listingProvider}" only; a retry that runs this child on the fallback will be refused until the model is offered there.`);
+    } else {
+      // The fallback's catalog is still loading: withhold the endorsement until it answers rather
+      // than recording an unverified name into that provider's configuration.
+      fallbackCheck.pending = value;
+    }
+  };
+  if (fallbackTarget) {
+    state.providerModelRequests ||= new Map();
+    if (!state.providerModelRequests.has(fallbackTarget)) state.providerModelRequests.set(fallbackTarget, api(`/api/provider-models?provider=${encodeURIComponent(fallbackTarget)}`).catch(() => ({ models: [] })));
+    const configuredFallback = state.providers.find(p => idFor(p) === fallbackTarget);
+    fallbackCheck = { offered: new Set(), configured: new Set([configuredFallback?.model?.trim() || '', ...(configuredFallback?.models || []).map(name => name?.trim() || '')].filter(Boolean)), loaded: false, pending: null };
+    state.providerModelRequests.get(fallbackTarget).then(data => {
+      // A catalog resolving after a registry change came from the previous endpoint: recording its
+      // names into the new endpoint's configuration, or running a withheld commit against it,
+      // would endorse models the new endpoint may not serve. Discard it; the re-render started by
+      // applyProviderRegistry discovers against the live registry.
+      if ((state.providerRegistryGeneration || 0) !== registryGeneration) return;
+      for (const name of data.models || []) { const value = name?.trim(); if (value) fallbackCheck.offered.add(value); }
+      fallbackCheck.loaded = true;
+      // A commit made before the catalog arrived is decided now: recorded if served, explained if not.
+      if (fallbackCheck.pending !== null) applyCommit(fallbackCheck.pending);
+    });
+    // Draw a pending explanation recorded against this field's current model value.
+    const initialWarning = state.providerModelWarnings?.get(warningKey(target.model?.trim() || ''));
+    if (initialWarning) override.append(el('p', initialWarning, 'help'));
+  }
+  model.onchange = () => {
+    committed?.();
+    // Recording eligibility keys on whether the model still needs recording, not on whether the
+    // commit changed the graph value: a commit whose POST failed transiently must stay retryable
+    // by recomitting the same suggestion (the failed attempt already wrote the model into the
+    // graph, and a value-unchanged early-return would strand the node against execution's
+    // provider/model validation). The per-provider skips live inside applyCommit — `known` for
+    // the primary, the fallback's configured set for the child's other home — so a model that
+    // became configured on one provider cannot silence reconciliation on the other. Already-
+    // recorded ones skip via the dedupe set, which the failed POST removed.
+    const value = model.value.trim();
+    if (!value || !offered.has(value)) return;
+    applyCommit(value);
+  };
+}
+function renderCompletion(parent, node) {
+  const graph = state.graph, routing = node.agentRole === 'orchestrator';
+  const behavior = choice(parent, routing ? 'Routing behavior' : 'Completion behavior', node.completion?.mode || 'single', [
+    {value:'single',label:routing ? 'Continue to connected nodes' : 'Continue when complete'},
+    {value:'outcomes',label:'Choose outcome using written criteria'},
+  ], mode => {
+    node.completion = mode === 'single' ? {mode,outcome:'completed'} : {mode,outcomes:routing ? ['frontend','backend','devops'] : ['pass','fail','blocked']};
+    graph.edges = graph.edges.filter(edge => edge.source !== node.id || outcomes(node).includes(edgeOutcome(edge)));
+  });
+  explain(behavior, 'Outcome names are short phrases such as DONE, PASS, FAILED TESTING or BLOCKED. Describe when the agent should choose each one; for a single outcome, describe when the work is considered achieved, for example "This is considered DONE when xyz is finished". The agent evaluates these written criteria using its evidence; they are not automatic checks. Connect outcomes to destinations under Connections.');
+  if (node.completion?.mode === 'outcomes') {
+    parent.append(el('p', 'Criteria are optional; blank rows use the agent prompt. Removing or renaming an outcome removes its old routes. Undo restores routes and criteria.', 'help'));
+    if (node.modifiers?.condition || node.modifiers?.loop?.until.outcome !== undefined) parent.append(el('p', 'Modifiers control the final connections: a Condition routes to true/false; an outcome Loop exposes its exit outcome.', 'help'));
+    const completion = node.completion;
+    completion.outcomes.forEach((outcome, index) => {
+      const row = section(parent, `Outcome ${index + 1}`);
+      const name = field(row, `Outcome ${index + 1} name`, outcome, () => {}, {maxLength:80});
+      name.onchange = () => {
+        const value = name.value.trim();
+        if (!/^[a-zA-Z0-9][a-zA-Z0-9_ -]{0,79}$/.test(value) || value.endsWith(' ') || value.includes('  ') || ['constructor','prototype','__proto__'].includes(value) || completion.outcomes.some((item, i) => i !== index && item === value)) {
+          status('Use a unique outcome name of 1 to 80 letters, numbers, single spaces, underscores or hyphens, starting with a letter or number. Reserved names are not allowed.', true);
+          name.value = outcome; return;
+        }
+        if (value === outcome) { name.value = value; return; }
+        mutate(() => {
+          completion.outcomes[index] = value;
+          if (completion.criteria && Object.hasOwn(completion.criteria, outcome)) {
+            completion.criteria[value] = completion.criteria[outcome]; delete completion.criteria[outcome];
+          }
+          graph.edges = graph.edges.filter(edge => edge.source !== node.id || outcomes(node).includes(edgeOutcome(edge)));
+        }, true);
+      };
+      field(row, `Written criteria for ${outcome}`, completion.criteria && Object.hasOwn(completion.criteria, outcome) ? completion.criteria[outcome] : '', value => {
+        const criteria = {...completion.criteria};
+        if (value.trim()) criteria[outcome] = value; else delete criteria[outcome];
+        if (Object.keys(criteria).length) completion.criteria = criteria; else delete completion.criteria;
+      }, {multiline:true,maxLength:8000,placeholder:outcome === 'pass' ? 'All requested changes are complete and relevant checks passed.' : outcome === 'fail' ? 'Verification found a defect that remains unresolved.' : 'Describe when the agent should choose this outcome.'});
+      const remove = el('button', `Remove ${outcome}`, 'danger');
+      remove.disabled = completion.outcomes.length === 1;
+      remove.onclick = () => mutate(() => {
+        completion.outcomes.splice(index, 1);
+        if (completion.criteria) {
+          delete completion.criteria[outcome];
+          if (!Object.keys(completion.criteria).length) delete completion.criteria;
+        }
+        graph.edges = graph.edges.filter(edge => edge.source !== node.id || outcomes(node).includes(edgeOutcome(edge)));
+      }, true);
+      row.append(remove);
+    });
+    const add = el('button', 'Add outcome');
+    add.disabled = completion.outcomes.length >= 20;
+    add.title = 'Up to 20 outcomes per agent';
+    add.onclick = () => mutate(() => {
+      let name = 'outcome';
+      for (let i = 2; completion.outcomes.includes(name); i++) name = `outcome-${i}`;
+      completion.outcomes.push(name);
+    }, true);
+    parent.append(add);
+    check(parent, 'Require a route for every outcome', completion.requireRoutes ?? true, value => {completion.requireRoutes=value;});
+  } else {
+    field(parent, 'Outcome', node.completion?.outcome || 'completed', value => {
+      const previous = node.completion?.outcome ?? 'completed', outcome = value.trim();
+      node.completion = {mode:'single',outcome,...(node.completion?.criteria ? {criteria:node.completion.criteria} : {})};
+      if (!node.modifiers?.condition && node.modifiers?.loop?.until?.outcome === undefined) for (const edge of graph.edges) if (edge.source === node.id && edgeOutcome(edge) === previous) edge.outcome = outcome;
+    }, {refresh:true});
+    field(parent, `Written criteria for ${node.completion?.outcome || 'completed'}`, node.completion?.criteria ?? '', value => {
+      const outcome = node.completion?.outcome ?? 'completed';
+      node.completion = value.trim() ? {mode:'single',outcome,criteria:value} : {mode:'single',outcome};
+    }, {multiline:true,maxLength:8000,placeholder:'Describe when this outcome is considered achieved, for example: This is considered DONE when xyz is finished.'});
+  }
+}
+function routes(parent, node) {
+  if (!outcomes(node).length) return;
+  const group = disclosure(parent, 'Connections', true);
+  group.append(el('p', 'Select every destination for an outcome. Multiple destinations run independently; add a Join to wait for branches.', 'help'));
+  for (const outcome of outcomes(node)) {
+    const row = section(group, outcome); row.id = `route-${outcome}`;
+    for (const destination of Object.values(state.graph.nodes).filter(n => n.id !== node.id && n.agentRole !== 'orchestrator')) {
+      const edge = state.graph.edges.find(e => e.source === node.id && edgeOutcome(e) === outcome && e.target === destination.id);
+      check(row, destination.name, !!edge, enabled => { if (enabled) state.graph.edges.push({id: `edge-${crypto.randomUUID().slice(0,8)}`, source: node.id, target: destination.id, outcome}); else state.graph.edges = state.graph.edges.filter(e => e !== edge); });
+      if (edge) { const edit = el('button', 'Configure handoff', 'link-button'); edit.onclick = () => { state.selectedEdge = edge; state.selected = null; renderInspector(); renderCanvas(); }; row.append(edit); }
+    }
+  }
+}
+function renderEdgeInspector(parent, edge) {
+  $('inspector-title').textContent = 'Connection handoff';
+  parent.append(el('h3', `${state.graph.nodes[edge.source]?.name} - ${edgeOutcome(edge)}`), el('p', `To: ${state.graph.nodes[edge.target]?.name}`, 'help'));
+  if (edge.bootstrap) parent.append(el('p', 'Initial handoff: starts this upgraded graph at its original Join. Later loop iterations wait for the other incoming branches. Removing this connection removes that initial-start behavior.', 'help'));
+  const mappings = section(parent, 'Input mapping'); mappings.append(el('p', 'Map validated outputs or run context into the destination named inputs. Constants must be valid JSON.', 'help'));
+  const targetSchema=state.graph.nodes[edge.target]?.inputSchema, sourceSchema=state.graph.nodes[edge.source]?.modifiers?.parallel?.mode === 'copies' ? {properties:{results:{type:'array'}}} : state.graph.nodes[edge.source]?.outputSchema; const targetKeys = Object.keys(targetSchema?.properties || {}), sourceKeys = Object.keys(sourceSchema?.properties || {}); if(targetKeys.length)mappings.append(el('p',`Destination inputs: ${targetKeys.map(key=>key+(targetSchema.required?.includes(key)?' (required)':'')).join(', ')}`,'help'));if(sourceKeys.length)mappings.append(el('p',`Available source outputs: ${sourceKeys.join(', ')}`,'help'));
+  for (const [key, value] of Object.entries(edge.inputMapping || {})) {
+    const row = section(mappings, key);
+    const set = next => { edge.inputMapping[key] = next; };
+    const targetInput = field(row, 'Target input', key, next => { if (next !== key && next && !Object.hasOwn(edge.inputMapping, next)) { edge.inputMapping[next] = edge.inputMapping[key]; delete edge.inputMapping[key]; } }, {refresh:true}); if (targetKeys.length) { const list=el('datalist'); list.id=`targets-${crypto.randomUUID()}`; for (const name of targetKeys) {const option=el('option');option.value=name;list.append(option);} targetInput.setAttribute('list',list.id);row.append(list); }
+    const kind = typeof value !== 'string' ? 'constant' : value.startsWith('$source.output.') ? '$source.output' : value.startsWith('$run.input.') ? '$run.input' : value.startsWith('$run.state.') ? '$run.state' : value;
+    choice(row, 'Source', kind, [{value:'$source.output', label:'Source output field'}, {value:'$run.input', label:'Run input field'}, {value:'$run.state', label:'Run state field'}, {value:'$run.loop.iteration', label:'Loop iteration'}, {value:'$source.artifacts', label:'Source artifacts'}, {value:'constant', label:'Constant'}], next => set(next === 'constant' ? {constant: ''} : ['$source.output','$run.input','$run.state'].includes(next) ? `${next}.${next === '$source.output' ? sourceKeys[0] || 'result' : 'task'}` : next));
+    if (kind === 'constant') jsonField(row, 'Constant value', value.constant, next => set({constant:next}));
+    else if (['$source.output','$run.input','$run.state'].includes(kind)) { const input = field(row, 'Field / path', value.slice(kind.length + 1), next => set(`${kind}.${next}`)); const availableKeys = kind === '$source.output' ? sourceKeys : Object.keys((kind === '$run.input' ? state.graph.inputSchema : state.graph.stateSchema)?.properties || {}); if (availableKeys.length) { const list = el('datalist'); list.id = `mapping-${crypto.randomUUID()}`; availableKeys.forEach(key => { const option = el('option'); option.value = key; list.append(option); }); input.setAttribute('list', list.id); row.append(list); } }
+    const remove = el('button', 'Remove mapping'); remove.onclick = () => mutate(() => { delete edge.inputMapping[key]; }, true); row.append(remove);
+  }
+  const add = el('button', 'Add mapping'); add.onclick = () => mutate(() => { edge.inputMapping ||= {}; let key = targetKeys.find(k => !Object.hasOwn(edge.inputMapping,k)) || 'input'; while (Object.hasOwn(edge.inputMapping,key)) key += '_'; edge.inputMapping[key] = {constant:''}; }, true);
+  const suggest = el('button', 'Suggest matching fields'); suggest.onclick = () => mutate(() => { edge.inputMapping ||= {}; for (const key of targetKeys.filter(k => sourceKeys.includes(k))) if (!Object.hasOwn(edge.inputMapping,key)) edge.inputMapping[key] = `$source.output.${key}`; }, true); mappings.append(add, suggest);
+  const remove = el('button', 'Remove connection', 'danger'); remove.onclick = () => mutate(() => { state.graph.edges = state.graph.edges.filter(e => e !== edge); state.selectedEdge = null; }, true); parent.append(remove);
+}
+function effectiveCaps(node = {}) { return node.capabilities || {filesystem:'read-write',shell:'allowed',git:'write',github:'none',browser:'playwright',deployment:'none'}; }
+// Browser copy of src/tool-names.ts. The server treats these spellings as aliases of the canonical
+// tools it exposes, so every comparison on tool names here resolves them first: a name that
+// skips this step cannot match a canonical allowlist, and the editor then silently drops
+// allowed tools. 'shell' is deliberately absent: it is platform-resolved server-side and kept
+// as its own family token below rather than pinned to a spelling this page cannot know.
+const TOOL_ALIASES = {
+  read_file: 'Read', read: 'Read',
+  write_file: 'Write', write: 'Write',
+  edit_file: 'Edit', edit: 'Edit',
+  find: 'Glob', list_files: 'Glob', ls: 'Glob',
+  search_files: 'Grep', grep: 'Grep',
+  bash: 'Bash', powershell: 'PowerShell',
+};
+const SHELL_TOOLS = ['Bash', 'PowerShell', 'shell'];
+// Display spelling round-trips back into role.tools, so it must stay one-to-one.
+function displayToolName(name) { return TOOL_ALIASES[name] || name; }
+// Permission comparison spelling: folds the whole shell family onto one token so the server's
+// platform-dependent resolution of 'shell' cannot change which tools the editor offers.
+function canonicalToolName(name) { const d = displayToolName(name); return SHELL_TOOLS.includes(d) ? 'shell' : d; }
+function roleToolOptions(node, role, policy) {
+  const parent = effectiveCaps(node);
+  const child = role.capabilities || {...parent,...((policy.workspace || 'shared-read-only') === 'shared-read-only' ? {filesystem:parent.filesystem === 'none' ? 'none' : 'read',git:parent.git === 'none' ? 'none' : 'read',shell:'disabled'} : {})};
+  const canonical = canonicalToolName;
+  const permits = (caps, name) => name === 'qa.browser_session' ? caps.browser === 'playwright' : ['Read','Glob','Grep','repo_explore','read_skill_resource'].includes(canonical(name)) ? caps.filesystem !== 'none' : ['Write','Edit'].includes(canonical(name)) ? caps.filesystem === 'read-write' : canonical(name) === 'shell' ? caps.shell === 'allowed' && caps.filesystem === 'read-write' && caps.git === 'write' : name === 'git_read' ? caps.git !== 'none' : ['read_artifact','write_artifact'].includes(name);
+  const configured = node.tools?.map(displayToolName);
+  const available = (configured || state.tools.map(t=>displayToolName(typeof t === 'string' ? t : t.name || t.id))).filter((name,index,array)=>array.indexOf(name)===index).filter(name=>permits(parent,name)&&permits(child,name));
+  const defaults = policy.toolInheritance === 'inherit' ? available : available.filter(name=>['Read','Glob','Grep','git_read','qa.browser_session','read_skill_resource'].includes(canonical(name)));
+  return {available, selected:policy.toolInheritance === 'inherit' ? defaults : (role.tools?.map(displayToolName) ?? defaults)};
+}
+function renderSubagents(parent, node) {
+  const policy = node.subagents || {enabled:false}; const set = patch => {Object.assign(policy,patch);node.subagents=policy;};
+  explain(check(parent,'Allow subagents',policy.enabled,value=>set({enabled:value})),'Internal delegation returns observations to this Agent. Only this parent chooses its graph outcome. Active children finish or cancel before the parent can complete. Subagents never receive the unsandboxed host shell, including in worktrees. Read-only roles use filesystem tools and supported Git read operations.');
+  if (!policy.enabled) return;
+  for (const [key,label,fallback] of [['maxConcurrent','Max concurrent',3],['maxTotal','Max total per node run',8],['maxDepth','Max nesting depth',1]]) field(parent,label,policy[key]??fallback,value=>set({[key]:value}),{type:'number',min:1,max:key==='maxDepth'?3:key==='maxConcurrent'?16:1000});
+  choice(parent,'Model policy',policy.modelPolicy||'inherit',[{value:'inherit',label:'Inherit parent model'},{value:'specific',label:'Use specific model'},{value:'per-role',label:'Per-role model'}],value=>set({modelPolicy:value}));
+  // Mirrors bindPortableGraphProviders: enabled retry attempts may spawn providerless children on
+  // the fallback provider, so a discovered child pick must be recorded there as well.
+  const childFallbackProvider = node.retry?.fallback && node.retry.maxAttempts > 1 ? node.retry.fallback.provider : '';
+  if(policy.modelPolicy==='specific') modelFields(parent,policy,value=>set({provider:value.provider,model:value.model}),undefined,node.provider,childFallbackProvider);
+  choice(parent,'Workspace policy',policy.workspace||'shared-read-only',[{value:'shared-read-only',label:'Shared workspace, read only'},{value:'shared-write',label:'Shared workspace, write allowed'},{value:'worktree',label:'Separate Git worktree'}],value=>set({workspace:value}));
+  choice(parent,'Tool inheritance',policy.toolInheritance||'restricted',[{value:'restricted',label:'Restricted subset'},{value:'inherit',label:'Inherit parent allowlist'}],value=>set({toolInheritance:value}));
+  choice(parent,'Context',policy.context||'selected',[{value:'selected',label:'Selected context only'},{value:'task-only',label:'Task only'}],value=>set({context:value}));
+  // The runtime no longer invents a child deadline, so this field must not display one: blank
+  // means the child inherits the parent's bounds, and a shown fallback would claim a two-minute
+  // ceiling that is not configured.
+  field(parent,'Wall time per child, ms (blank = inherits the parent)',policy.maxWallTimeMs,value=>{if(value===undefined)delete policy.maxWallTimeMs;else policy.maxWallTimeMs=value;node.subagents=policy;},{type:'number',min:1,optional:true,placeholder:'Inherits the parent'});
+  const roles = disclosure(parent,'Configure roles',true);
+  roles.append(el('p','Roles can only narrow parent capabilities. Concurrent writing roles require separate worktrees.', 'help'));
+  for(const role of policy.roles||[]) {
+    const body=disclosure(roles,role.name||'New role',true);
+    field(body,'Role ID',role.id,value=>{role.id=value;}); field(body,'Name',role.name,value=>{role.name=value;});field(body,'Instruction',role.instruction,value=>{role.instruction=value;},{multiline:true,maxLength:100000});
+    if(policy.modelPolicy==='per-role')modelFields(body,role,value=>{role.provider=value.provider;role.model=value.model;},role.provider===node.provider?node.model:undefined,node.provider,childFallbackProvider);
+    capabilities(disclosure(body,'Role capabilities'),role.capabilities||effectiveCaps(node),value=>{role.capabilities=value;},effectiveCaps(node));
+    const allowedTools=disclosure(body,'Role tools'); const toolOptions=roleToolOptions(node,role,policy);
+    for(const name of new Set([...toolOptions.available,...toolOptions.selected])) {
+      const available=toolOptions.available.includes(name);
+      check(allowedTools,available?name:`${name} (unavailable — remove to repair)`,toolOptions.selected.includes(name),enabled=>{role.tools=enabled?[...new Set([...toolOptions.selected,name])]:toolOptions.selected.filter(t=>t!==name);policy.toolInheritance='restricted';});
+    }
+    const contracts=disclosure(body,'Role contracts');jsonField(contracts,'Input schema',role.inputSchema,value=>{role.inputSchema=value;});jsonField(contracts,'Output schema',role.outputSchema,value=>{role.outputSchema=value;});
+    const remove=el('button','Remove role');remove.onclick=()=>mutate(()=>{set({roles:policy.roles.filter(r=>r!==role)});},true);body.append(remove);
+  }
+  const add=el('button','Add role');add.onclick=()=>mutate(()=>{set({roles:[...(policy.roles||[]),{id:`role-${crypto.randomUUID().slice(0,8)}`,name:'Repository Researcher',instruction:'Research the bounded task and return findings.',capabilities:{...effectiveCaps(node),filesystem:effectiveCaps(node).filesystem==='none'?'none':'read',shell:effectiveCaps(node).shell==='disabled'?'disabled':'read-only',git:effectiveCaps(node).git==='none'?'none':'read'}}]});},true);roles.append(add);
+}
+function renderControlInspector(parent,node) {
+  if(node.type==='join')choice(parent,'Wait for branches',node.join?.mode||'all',['all','any'],value=>{node.join={mode:value};});
+  if(node.type==='loop')field(parent,'Maximum loop iterations',node.loop?.maxIterations??3,value=>{node.loop={maxIterations:value};},{type:'number',min:1});
+  if(node.type==='condition') {
+    choice(parent,'Source node',node.condition?.source||'', [{value:'',label:'Choose a predecessor'},...Object.values(state.graph.nodes).filter(n=>n.id!==node.id).map(n=>({value:n.id,label:n.name}))],value=>{node.condition={path:'',equals:true,...node.condition,source:value};});
+    field(parent,'Output field path',node.condition?.path||'',value=>{node.condition={source:'',equals:true,...node.condition,path:value};});
+    jsonField(parent,'Equals',node.condition?.equals??true,value=>{node.condition={source:'',path:'',...node.condition,equals:value};});
+  }
+  if(node.type==='action') {choice(parent,'Action',node.action?.kind||'command',['command','tests','git'],value=>{node.action={command:'',...node.action,kind:value};});field(parent,'Command',node.action?.command||'',value=>{node.action={kind:'command',...node.action,command:value};},{multiline:true,maxLength:100000});}
+  if(node.type==='parallel')parent.append(el('p','All completed connections become ready. A Parallel node is optional for ordinary outcome fan-out.', 'help'));
+  if(node.type==='approval')parent.append(el('p','The CLI asks for approval. Route approved and rejected separately.', 'help'));
+}
+function setAgentModifier(node, kind, value) {
+  const before = outcomes(node);
+  node.modifiers = {...node.modifiers};
+  if (value === undefined) delete node.modifiers[kind]; else node.modifiers[kind] = value;
+  if (!Object.keys(node.modifiers).length) delete node.modifiers;
+  const after = outcomes(node);
+  if (kind === 'condition' || kind === 'loop') {
+    state.graph.edges = state.graph.edges.flatMap(edge => {
+      if (edge.source !== node.id || after.includes(edgeOutcome(edge))) return [edge];
+      if (before.length === 1 || (!value && edgeOutcome(edge) === 'true')) return [{...edge, outcome:after[0]}];
+      return [];
+    });
+  }
+}
+function scalarField(parent, label, value, update) {
+  const input = field(parent, label, JSON.stringify(value ?? true), () => {});
+  input.onchange = () => {
+    try {
+      const parsed = JSON.parse(input.value);
+      if (!['string','number','boolean'].includes(typeof parsed)) throw new Error();
+      input.setCustomValidity(''); mutate(() => update(parsed));
+    } catch { input.setCustomValidity('Enter a JSON string, number, or boolean, for example true or "approved".'); input.reportValidity(); }
+  };
+}
+function renderModifiers(parent, node) {
+  if (node.agentRole === 'orchestrator') return;
+  const group = disclosure(parent, 'Modifiers', Boolean(node.modifiers && Object.keys(node.modifiers).length));
+  group.append(el('p','Add behavior to this agent without extra control nodes.','help'));
+  check(group, 'Condition modifier', Boolean(node.modifiers?.condition), enabled => setAgentModifier(node,'condition',enabled ? {path:'approved',equals:true} : undefined));
+  if (node.modifiers?.condition) {
+    const config = node.modifiers.condition;
+    field(group,'Output field to check',config.path,value=>{config.path=value.trim();});
+    scalarField(group,'Expected value (JSON)',config.equals,value=>{config.equals=value;});
+    group.append(el('p','After this agent finishes, route matching output to true and nonmatching output to false. Configure both connections below. Changing this modifier removes incompatible routes; Undo restores them.','help'));
+  }
+  check(group, 'Loop modifier', Boolean(node.modifiers?.loop), enabled => setAgentModifier(node,'loop',enabled ? {maxIterations:3,until:{outcome:node.completion?.mode==='outcomes' ? node.completion.outcomes[0] : node.completion?.outcome || 'completed'}} : undefined));
+  if (node.modifiers?.loop) {
+    const config = node.modifiers.loop;
+    field(group,'Maximum attempts',config.maxIterations,value=>{config.maxIterations=value;},{type:'number',min:1,max:100});
+    choice(group,'Exit when',config.until.outcome!==undefined?'outcome':'output',[{value:'outcome',label:'Agent returns an outcome'},{value:'output',label:'Output field matches a value'}],value=>{setAgentModifier(node,'loop',{...config,until:value==='outcome'?{outcome:node.completion?.mode==='outcomes'?node.completion.outcomes[0]:node.completion?.outcome||'completed'}:{path:'finished',equals:true}});});
+    if (config.until.outcome !== undefined) choice(group,'Exit outcome',config.until.outcome,node.completion?.mode==='outcomes'?node.completion.outcomes:[node.completion?.outcome||'completed'],value=>{setAgentModifier(node,'loop',{...config,until:{outcome:value}});});
+    else { field(group,'Exit output field',config.until.path,value=>{config.until.path=value.trim();}); scalarField(group,'Exit value (JSON)',config.until.equals,value=>{config.until.equals=value;}); }
+    group.append(el('p','Repeat this agent until the exit condition matches. If the attempt limit is reached, stop with an exhausted result instead of continuing as if successful.','help'));
+  }
+  choice(group,'Parallel modifier',node.modifiers?.parallel?.mode||'off',[{value:'off',label:'Off'},{value:'branches',label:'Connected downstream agents'},{value:'copies',label:'Copies of this agent'}],mode=>setAgentModifier(node,'parallel',mode==='off'?undefined:{mode,maxConcurrent:2,...(mode==='copies'?{copies:2}:{})}));
+  if (node.modifiers?.parallel) {
+    const config = node.modifiers.parallel;
+    field(group,'Maximum concurrent agents',config.maxConcurrent,value=>{config.maxConcurrent=value;},{type:'number',min:1,max:16});
+    if (config.mode==='copies') { field(group,'Number of copies',config.copies,value=>{config.copies=value;},{type:'number',min:1,max:16}); group.append(el('p','Copies perform independent read-only work. Set read-only permissions under Advanced. Downstream output contains a results array with every copy\'s result.','help')); }
+    else group.append(el('p','Connect this agent directly to the Agent branches to run concurrently. Each branch can then connect to End or Join. Add a Join when later work needs all branch results.','help'));
+  }
+}
+function hasRetryCycle(graph) {
+  const active = new Set(), visited = new Set();
+  const visit = id => {
+    if (active.has(id)) return true;
+    if (visited.has(id)) return false;
+    active.add(id); visited.add(id);
+    for (const edge of graph.edges.filter(edge => edge.source === id)) if (visit(edge.target)) return true;
+    active.delete(id); return false;
+  };
+  return Object.keys(graph.nodes).some(visit);
+}
+function retryLimitHelp(parent, graph) {
+  if (!hasRetryCycle(graph) || graph.limits?.maxNodeVisits || graph.limits?.wallTimeMs) return;
+  const box = el('div', undefined, 'cycle-help');
+  box.append(el('strong', 'This graph includes a retry cycle'), el('p', 'A return connection can run the same agents repeatedly, so the run needs a ceiling: set a maximum number of visits per node, or give the run a wall clock. Without one the cycle never ends.'));
+  const fix = el('button', 'Limit each node to 3 visits');
+  fix.onclick = () => mutate(() => { graph.limits = {...graph.limits, maxNodeVisits:3}; }, true);
+  const clock = el('button', 'Give the run 30 minutes');
+  clock.onclick = () => mutate(() => { graph.limits = {...graph.limits, wallTimeMs:30 * 60_000}; }, true);
+  box.append(fix, clock); parent.append(box);
+}
+function renderInspector() {
+  // A redraw replaces a full-screen prompt editor, so its backdrop goes with it.
+  document.body?.classList?.remove?.('prompt-fullscreen'); for (const backdrop of document.querySelectorAll?.('.prompt-backdrop') ?? []) backdrop.remove();
+  const parent = $('inspector-body'); parent.replaceChildren(); const graph = state.graph; if (!graph) { parent.append(el('p', 'Create a graph or choose a preset.', 'help')); return; }
+  if (state.selectedEdge && !graph.edges.includes(state.selectedEdge)) state.selectedEdge = null;
+  const node = graph.nodes[state.selected]; $('inspector-title').textContent = node ? 'Node settings' : 'Graph settings';
+  retryLimitHelp(parent, graph);
+  if (state.selectedEdge) renderEdgeInspector(parent, state.selectedEdge);
+  else if (selectedNodes().length > 1) renderBulkInspector(parent,selectedNodes());
+  else if (!node) {
+    const panels = inspectorTabs(parent, ['general', 'behavior', 'advanced']); const general = panels.general;
+    field(general, 'Graph name', graph.name, value => { graph.name = value; renderList(); }, {maxLength:200});
+    general.append(el('p', `${graph.id} - Revision ${graph.revision}`, 'mono'));
+    if (graph.id === 'default') general.append(el('p', 'Duplicate this bundled preset to save your customization.', 'help'));
+    const start = field(general,'Starting node',graph.nodes[graph.entry]?.name || '',()=>{}); start.disabled=true; explain(start,'The Orchestrator is optional. Deleting the starting node promotes its first remaining connected successor, or the first remaining node if none is connected.');
+    field(general, 'Description', graph.metadata?.description, value => {graph.metadata={...graph.metadata,description:value};}, {multiline:true,maxLength:2000});
+    const widgetGroup = disclosure(panels.behavior, 'Widgets', true);
+    widgetGroup.append(el('p','Widgets appear as sections beside the run plan. Each description tells the agents what belongs in the widget; during runs the agents keep its value current.','help'));
+    for (const [index, widget] of (graph.widgets ?? []).entries()) {
+      const label = `Widget ${index + 1} name`;
+      field(widgetGroup, label, widget.name, value => { widget.name = value; }, {maxLength:80,refresh:true});
+      field(widgetGroup, `Widget ${index + 1} description`, widget.description, value => { widget.description = value; }, {multiline:true,maxLength:1000});
+      const remove = el('button','Remove widget','danger');
+      remove.onclick = () => mutate(() => { graph.widgets = (graph.widgets ?? []).filter(item => item !== widget); if (!graph.widgets.length) delete graph.widgets; }, true);
+      widgetGroup.append(remove);
+    }
+    if ((graph.widgets ?? []).length < 5) {
+      const add = el('button','Add widget');
+      add.onclick = () => mutate(() => { graph.widgets = [...(graph.widgets ?? []), { id: `widget-${crypto.randomUUID().slice(0,8)}`, name: '', description: '' }]; }, true);
+      widgetGroup.append(add);
+      widgetGroup.append(el('p','Up to 5 widgets per graph. Names and descriptions are required before saving.','help'));
+    } else widgetGroup.append(el('p','Widget limit reached (5).','help'));
+    const visits = field(panels.behavior, 'Maximum visits per node', graph.limits?.maxNodeVisits ?? 0, value => {graph.limits={...graph.limits}; if(value===undefined || value===0) delete graph.limits.maxNodeVisits; else graph.limits.maxNodeVisits=value;}, {type:'number',optional:true,min:0,max:100,refresh:true});
+    explain(visits,'0 means unlimited, which is the default. A return connection repeats a node, so a graph with one needs a ceiling: a visit limit, or a wall clock. An agent Loop modifier has its own attempt limit.');
+    // Per-graph desktop settings render here; a browser-launched studio has no host bridge and skips them.
+    window.AndorraEmbed?.inspector?.(general);
+    const advanced = panels.advanced; jsonField(advanced, 'Run limits', graph.limits, value => {graph.limits=value;}); jsonField(advanced,'Run input schema',graph.inputSchema,value=>{graph.inputSchema=value;}); jsonField(advanced,'Run state schema',graph.stateSchema,value=>{graph.stateSchema=value;});
+  } else {
+    const panels = inspectorTabs(parent, node.type === 'agent' ? ['general', 'model', 'behavior', 'advanced'] : outcomes(node).length ? ['general', 'behavior', 'advanced'] : ['general', 'advanced']);
+    const general = panels.general; field(general, 'Name', node.name, value => {node.name=value;}, {maxLength:200});
+    if (node.type === 'agent') {
+      if(node.agentRole==='orchestrator'){general.append(el('p','Orchestrator - optional starting Agent for research, clarification and handoff. Remove it to start directly at the next node.','help'));explain(field(general,'Max subagents',node.maxSubagents,value=>{if(value===undefined)delete node.maxSubagents;else node.maxSubagents=value;},{type:'number',optional:true,min:0,max:100}),'Optional ceiling, not a target. Leave blank to use the configured subagent policy default. Zero disables internal subagents; this does not control top-level graph concurrency.');}
+      const prompt = promptField(general, 'Prompt', node.instruction ?? node.prompt ?? '', value => {node.instruction=value; delete node.prompt;});
+      explain(prompt, 'Edit the instructions for this agent. Save the graph to use this prompt in future runs. This replaces this node\'s instructions; project guidance, advanced system instructions and runtime permissions still apply.');
+      explain(check(general, 'Jev decisions', node.jevEnabled === true, value => { if (value) node.jevEnabled = true; else delete node.jevEnabled; }), 'Off unless ticked. When Jev is on, it assists this agent with routing decisions. The coding model still implements the task; sign-in, quota and runtime permissions apply.');
+      const model = panels.model;
+      modelFields(model, node, value => {node.provider=value.provider; node.model=value.model;});
+      const conversation = choice(model, 'Conversation', node.contextPolicy?.conversation ?? 'reuse', [{value:'reuse',label:'Reuse with the same provider and model'}, {value:'isolate',label:'Start an isolated conversation'}], value => {node.contextPolicy={...node.contextPolicy,conversation:value};});
+      explain(conversation, 'Reuse continues from the preceding Agent with this node\'s instructions and permissions. Different providers or models start fresh. Branches receive separate copies of their shared history. Provider caching and token savings depend on the model service.');
+      const skills = choice(model, 'Skill inheritance', node.contextPolicy?.skillInheritance ?? 'inherit', [{value:'inherit',label:'Inherit active workflow skills'}, {value:'none',label:'Do not inherit skills'}], value => {node.contextPolicy={...node.contextPolicy,skillInheritance:value};});
+      explain(skills, 'Inherits skills activated earlier in this graph, even when the conversation is isolated or the model changes. Each Agent loads the skill for its own role. Opting out also isolates predecessor conversation text to avoid leaking loaded skills; it never changes tool or approval permissions.');
+      renderCompletion(section(panels.behavior, node.agentRole === 'orchestrator' ? 'Routing' : 'Outcomes and conditions'), node);
+      renderModifiers(panels.behavior, node);
+      const advanced = panels.advanced;
+      const caps = disclosure(advanced, 'Permissions'); capabilities(caps,node.capabilities,value=>{node.capabilities=value;}); caps.append(el('p', 'Restricted filesystem or Git policies disable the unsandboxed host shell. Read-only Agents use filesystem tools and supported Git read operations. Browser and deployment access require compatible runtime tools; configuration does not supply credentials.', 'help'));
+      const context = disclosure(advanced, 'Context sharing'); check(context,'Include previous task summaries',node.contextPolicy?.history??false,value=>{node.contextPolicy={...node.contextPolicy,history:value};}); choice(context,'Visible predecessor state',node.contextPolicy?.predecessors||'none',['none','direct','all'],value=>{node.contextPolicy={...node.contextPolicy,predecessors:value};}); field(context,'Maximum context characters',node.contextPolicy?.maxChars??32000,value=>{node.contextPolicy={...node.contextPolicy,maxChars:value};},{type:'number',min:1}); jsonField(context, 'Input mapping', node.inputs, value=>{node.inputs=value;});
+      renderSubagents(disclosure(advanced,'Subagents'),node);
+      const limits = disclosure(advanced,'Execution limits');
+      for (const [key,label,defaultValue] of [['maxContextChars','Context characters',120000],['maxCompletionRepairs','Completion repair attempts',2]]) field(limits,label,node.limits?.[key] ?? defaultValue,value=>{node.limits={...node.limits,[key]:value}; delete node.limits.maxTokens;},{type:'number',min:key==='maxCompletionRepairs'?0:1});
+      // Iterations and wall time default to blank, and blank means unlimited. The editor must
+      // not invent a bound the author never chose: a task that legitimately runs for hours
+      // should not be cut short, and a person answering a question is never on the clock.
+      // Clearing the field removes the limit rather than writing a zero, which the runtime
+      // accepts as the same thing but which reads to a human as "no time at all".
+      field(limits,'Iterations (blank = unlimited)',node.limits?.maxIterations ?? node.maxIterations,value=>{node.limits={...node.limits,maxIterations:value}; delete node.limits.maxTokens; if(value===undefined){delete node.limits.maxIterations; delete node.maxIterations;} else node.maxIterations=value;},{type:'number',min:0,max:1000,optional:true,placeholder:'Unlimited'});
+      field(limits,'Wall time, milliseconds (blank = unlimited)',node.limits?.wallTimeMs,value=>{node.limits={...node.limits,wallTimeMs:value}; delete node.limits.maxTokens; if(value===undefined)delete node.limits.wallTimeMs;},{type:'number',min:0,optional:true,placeholder:'Unlimited'});
+      // Tool calls default to blank, and blank means unlimited: an absent limit is only
+      // written when the field is cleared, so a node keeps its ceiling once one is set.
+      field(limits,'Tool calls (blank = unlimited)',node.limits?.maxToolCalls,value=>{node.limits={...node.limits,maxToolCalls:value}; if(value===undefined)delete node.limits.maxToolCalls;},{type:'number',min:0,optional:true,placeholder:'Unlimited'});
+      field(advanced,'System prompt',node.systemPrompt ?? node.prompt,value=>{node.systemPrompt=value; delete node.prompt;},{multiline:true,maxLength:100000}); jsonField(advanced,'Input schema (JSON Schema)',node.inputSchema,value=>{node.inputSchema=value;}); jsonField(advanced,'Output schema (JSON Schema)',node.outputSchema,value=>{node.outputSchema=value;}); field(advanced,'Retry attempts',node.retry?.maxAttempts??1,value=>{node.retry={...node.retry,maxAttempts:value};},{type:'number',min:1}); const fallback=disclosure(advanced,'Fallback model'); modelFields(fallback,node.retry?.fallback||{},value=>{node.retry={maxAttempts:1,...node.retry,fallback:value.provider?{provider:value.provider,model:value.model}:undefined};});
+      field(advanced,'Executor','react-basic',()=>{}).disabled=true;
+      const tools = disclosure(advanced,'Tool allowlist');
+      for (const name of [...new Set([...state.tools.map(t=>typeof t==='string'?t:t.name||t.id),...(node.tools||[])])]) check(tools,name,node.tools===undefined||node.tools.includes(name),enabled=>{const all=state.tools.map(t=>typeof t==='string'?t:t.name||t.id); node.tools=enabled?[...new Set([...(node.tools??all),name])]:(node.tools??all).filter(t=>t!==name);});
+      const saveDefinition = el('button','Save agent variant'); saveDefinition.onclick=()=>saveAgentVariant(node); general.append(saveDefinition);
+    } else { general.append(el('p', 'This control node does not call a model and has no agent prompt.', 'help')); renderControlInspector(general,node); }
+    if (panels.behavior) routes(panels.behavior,node);
+    const layout = disclosure(panels.advanced,'Position'); const p=position(node,Object.keys(graph.nodes).indexOf(node.id)); field(layout,'X',p.x,value=>{node.position={...p,x:value};},{type:'number',min:-100000,max:100000,refresh:true});field(layout,'Y',p.y,value=>{node.position={...p,y:value};},{type:'number',min:-100000,max:100000,refresh:true});
+    const remove=el('button','Remove node','danger');remove.disabled=Object.keys(graph.nodes).length===1;remove.onclick=()=>{void askConfirm({title:`Remove ${node.name}?`,message:'The node and its connections are removed from this graph. Undo brings them back.',confirmLabel:'Remove node',tone:'danger'}).then(confirmed=>{if(confirmed&&state.graph?.nodes?.[node.id])removeNodes(new Set([node.id]));});};panels.advanced.append(remove);
+  }
+  const validation=section(parent,'Validation');validation.id='validation';renderValidation();
+  window.AndorraStudio?.inspector?.(parent, node);
+}
+function render() { renderHeading(); renderList(); renderLibrary(); renderCanvas(); renderInspector(); scheduleValidation(); queueDraft(); }
+async function openGraph(id) {
+  if (state.saving) { status('Wait for the current save before opening another graph.'); return; }
+  if (state.dirty && !await askConfirm(DISCARD_QUESTION)) return;
+  try { state.graph = dropLegacyTokenFields(await api(`/api/graphs/${encodeURIComponent(id)}`)); state.dirty = state.graph.editorMigration === true; delete state.graph.editorMigration; clearSelection(); state.undo = []; state.redo = []; state.pendingProviderNodes = null; render(); fit(); status(state.dirty ? 'Legacy graph upgraded in editor - Save to persist a new revision' : 'Graph loaded'); } catch (error) { status(error.message, true); }
+}
+function newId() { return `graph-${crypto.randomUUID()}`; }
+function newGraph(duplicate = false, discarded = false) {
+  if (state.saving) { status('Wait for the current save before creating another graph.'); return; }
+  if (!canCreateGraph()) { status(FREE_CREATE_TIP, true); return; }
+  // Unsaved edits are asked about first; a clean graph is replaced at once.
+  if (state.dirty && !discarded) { void askConfirm(DISCARD_QUESTION).then(discard => { if (discard) newGraph(duplicate, true); }); return; }
+  if (duplicate) state.graph={...copy(state.graph),id:newId(),name:`${state.graph.name} copy`,revision:0};
+  else if (freeTier()) {
+    // A free graph starts from the Software Engineer alone: the Orchestrator is a Premium node.
+    const engineerPreset=state.definitions.find(definition=>definition.id==='software-engineer')?.node;
+    if(!engineerPreset){status('Starting presets are unavailable. Reload the Graph Builder and try again.',true);return;}
+    state.graph={schemaVersion:3,id:newId(),name:'Untitled graph',revision:0,entry:'engineer',nodes:{engineer:{...copy(engineerPreset),id:'engineer',position:{x:0,y:0}},done:{id:'done',name:'Done',type:'end',position:{x:320,y:0}}},edges:[{id:'engineer-done',source:'engineer',target:'done',outcome:'completed'}]};
+  }
+  else {
+    const orchestratorPreset=state.definitions.find(definition=>definition.node.agentRole==='orchestrator')?.node;
+    const engineerPreset=state.definitions.find(definition=>definition.id==='software-engineer')?.node;
+    if(!orchestratorPreset || !engineerPreset){status('Starting presets are unavailable. Reload the Graph Builder and try again.',true);return;}
+    const orchestrator={...copy(orchestratorPreset),id:'orchestrator',position:{x:0,y:0}};
+    const engineer={...copy(engineerPreset),id:'engineer',position:{x:320,y:0}};
+    const inputMapping={originalTask:'$run.input.task'};
+    for(const key of ['taskInstruction','requirements','acceptanceCriteria','designConsiderations','codebaseFindings']) inputMapping[key]=`$source.output.${key}`;
+    state.graph={schemaVersion:3,id:newId(),name:'Untitled graph',revision:0,entry:'orchestrator',nodes:{orchestrator,engineer,done:{id:'done',name:'Done',type:'end',position:{x:640,y:0}}},edges:[{id:'orchestrator-engineer',source:'orchestrator',target:'engineer',outcome:'completed',inputMapping},{id:'engineer-done',source:'engineer',target:'done',outcome:'completed'}]};
+  }
+  // A duplicate copies the open graph, providerless nodes included, so its unmet provider
+  // requirements travel with it; an unrelated new graph starts without any.
+  state.dirty = true; clearSelection(); state.undo = []; state.redo = [];
+  state.pendingProviderNodes = duplicate ? new Set(state.pendingProviderNodes ?? []) : null;
+  render(); fit(); status('New graph - Customize your agent and save your first revision');
+}
+// The settings a new Agent starts from, whether it is dropped on the canvas or added to the list.
+function blankAgentSettings() {
+  return { executor: 'react-basic', instruction: '', contextPolicy: {history: false, predecessors: 'none'}, completion: { mode: 'single', outcome: 'completed' }, subagents: { enabled: false } };
+}
+function nodeLimit(graph, definition) {
+  return graph.schemaVersion === 3 && (definition?.agentRole === 'orchestrator' || Object.values(graph.nodes).some(node => node.agentRole === 'orchestrator')) ? 101 : 100;
+}
+function addNode(type, definition, dropPosition) {
+  const refusal = freeNodeRefusal([{ type, agentRole: definition?.agentRole }]);
+  if (refusal) { status(refusal, true); return; }
+  if (definition?.agentRole === 'orchestrator') {
+    // Compare canonically: saved variants may carry either the retired spellings or the
+    // canonical tool names, and the server canonicalizes tool lists on validation.
+    const researchTools = (definition.tools ?? []).map(canonicalToolName);
+    const canResearch = definition.capabilities?.filesystem !== 'none' &&
+      (definition.tools === undefined || ['Read','Glob','Grep','repo_explore'].some(tool => researchTools.includes(tool)));
+    if (!canResearch) {
+      status('Cannot apply this Orchestrator variant: enable filesystem read access and at least one research tool (Read, Glob, Grep, or repo_explore), then save the variant again. Choose another Orchestrator variant to continue.', true);
+      return;
+    }
+    // Saved definitions can predate intake's required research and clarification.
+    // Normalize a copy for both insertion and replacement, preserving unlimited ceilings.
+    definition = copy(definition);
+    // Completion guarantees these declared fields even in older optional schemas.
+    if (definition.outputSchema?.properties) {
+      const runtimeFields = ['originalTask','taskInstruction','requirements','acceptanceCriteria','designConsiderations','codebaseFindings'];
+      definition.outputSchema.required = [...new Set([...(definition.outputSchema.required || []), ...runtimeFields.filter(key => Object.hasOwn(definition.outputSchema.properties, key))])];
+    }
+    if (definition.inputSchema?.required?.includes('originalTask') && !Object.hasOwn(definition.inputs || {}, 'originalTask')) {
+      definition.inputs = {...definition.inputs, originalTask:'$run.input.task'};
+    }
+    if (definition.maxIterations > 0) definition.maxIterations = Math.max(definition.maxIterations, 3);
+    if (definition.limits?.maxIterations > 0) definition.limits.maxIterations = Math.max(definition.limits.maxIterations, 3);
+    if (definition.limits?.maxToolCalls !== undefined) definition.limits.maxToolCalls = Math.max(definition.limits.maxToolCalls, 2);
+    const existing = Object.values(state.graph?.nodes || {}).find(node => node.agentRole === 'orchestrator');
+    if (existing) {
+      mutate(() => {
+        const replacement = {...copy(definition), id:existing.id, position:existing.position, type:'agent', executor:'react-basic'};
+        state.graph.nodes[existing.id] = replacement;
+        state.graph.edges = state.graph.edges.filter(edge => edge.source !== existing.id || outcomes(replacement).includes(edgeOutcome(edge)));
+        clearSelection(); state.selected = existing.id; state.selectedIds = [existing.id];
+      }, true);
+      showInspector();
+      status('Starting Orchestrator definition applied. Matching routes and handoffs were kept; validate mappings before saving. Undo restores the previous definition.');
+      return;
+    }
+  }
+  if (!state.graph || Object.keys(state.graph.nodes).length >= nodeLimit(state.graph, definition)) return;
+  mutate(() => {
+    const id = `${type}-${crypto.randomUUID().slice(0, 8)}`;
+    if (!dropPosition) { dropPosition = {x:(120-state.x)/state.zoom,y:(180-state.y)/state.zoom}; for (let attempts=0; attempts<100 && Object.values(state.graph.nodes).some((node,index)=>{const p=position(node,index);return Math.abs(p.x-dropPosition.x)<45 && Math.abs(p.y-dropPosition.y)<45;});attempts++) {dropPosition.x+=48;dropPosition.y+=48;} }
+    state.graph.schemaVersion = 3;
+    // A new Agent starts with no iteration ceiling, matching the runtime default. Seeding it
+    // with 40 would silently reinstate the legacy limit the runtime no longer applies.
+    state.graph.nodes[id] = { ...(definition ? copy(definition) : type === 'agent' ? blankAgentSettings() : {}), id, type, ...(type==='join'?{join:{mode:'all'}}:type==='loop'?{loop:{maxIterations:3}}:type==='condition'?{condition:{source:state.graph.entry,path:'result',equals:true}}:{}), name: definition?.name || (type === 'agent' ? 'New Agent' : type.charAt(0).toUpperCase() + type.slice(1)), position: dropPosition || { x: (120 - state.x) / state.zoom, y: (180 - state.y) / state.zoom } };
+    if (definition?.agentRole === 'orchestrator') {
+      const previousEntry = state.graph.entry;
+      // Keep the direct-start graph's tool budget available after intake uses its
+      // required research and clarification calls. An absent ceiling stays unlimited.
+      if (state.graph.limits?.maxToolCalls !== undefined) state.graph.limits.maxToolCalls = Math.min(1_000_000_000, state.graph.limits.maxToolCalls + 2);
+      const outcome = outcomes(state.graph.nodes[id])[0];
+      const bootstrap = state.graph.nodes[previousEntry]?.type === 'join' && state.graph.edges.some(edge => edge.target === previousEntry);
+      if (previousEntry && outcome) {
+        const targetNode = state.graph.nodes[previousEntry];
+        const handoff = {originalTask:'$run.input.task'};
+        for (const key of ['taskInstruction','requirements','acceptanceCriteria','designConsiderations','codebaseFindings']) handoff[key] = `$source.output.${key}`;
+        const inputMapping = Object.fromEntries(Object.entries(handoff).filter(([key]) => {
+          if (Object.hasOwn(targetNode.inputs || {}, key)) return false;
+          const target = targetNode.inputSchema?.properties?.[key];
+          if (!target) return targetNode.inputSchema?.additionalProperties !== false;
+          const sourceSchema = key === 'originalTask' ? state.graph.inputSchema : state.graph.nodes[id].outputSchema;
+          // Intake owns these output types even when a saved variant omits its schema.
+          const runtimeSource = key === 'originalTask' || key === 'taskInstruction' ? {type:'string'} : {type:'array',items:{type:'string'}};
+          const declaredSource = sourceSchema?.properties?.[key === 'originalTask' ? 'task' : key];
+          const source = declaredSource?.type === 'array' && !declaredSource.items && runtimeSource.type === 'array'
+            ? {...declaredSource, items:runtimeSource.items} : declaredSource ?? runtimeSource;
+          return target.type === source.type && (source.type !== 'array' || !target.items || !source.items || target.items.type === source.items.type);
+        }));
+        state.graph.edges.unshift({...(bootstrap ? {bootstrap:true} : {}),id:`edge-${crypto.randomUUID().slice(0,8)}`,source:id,target:previousEntry,outcome,inputMapping});
+      }
+      state.graph.entry = id;
+    }
+    clearSelection(); state.selected = id; state.selectedIds=[id];
+    $('inspector').classList.remove('hidden');
+  }, true);
+}
+function libraryDialog(title, fields, submit, submitLabel = 'Save') {
+  const dialog = el('dialog', undefined, 'library-dialog'), form = el('form');
+  form.append(el('h3', title));
+  for (const [label, input] of fields) { const row = el('label', label); row.append(input); form.append(row); }
+  const error = el('p', '', 'help'), actions = el('div', undefined, 'library-dialog-actions');
+  const cancel = el('button', 'Cancel'); cancel.type = 'button'; cancel.onclick = () => dialog.close();
+  const save = el('button', submitLabel); save.type = 'submit'; actions.append(cancel, save); form.append(error, actions);
+  form.onsubmit = async event => { event.preventDefault(); save.disabled = true; try { await submit(); dialog.close(); } catch (failure) { error.textContent = failure.message; } finally { save.disabled = false; } };
+  dialog.onclose = () => dialog.remove(); dialog.append(form); document.body.append(dialog); dialog.showModal(); fields[0]?.[1].focus();
+}
+// The browser's `required` accepts whitespace, so a name that only trims to nothing is
+// refused here instead of being sent as a request that can only fail.
+function requireAgentName(input) {
+  const value = input.value.trim();
+  if (!value) throw new Error('Enter an Agent name.');
+  return value;
+}
+function saveAgentVariant(node) {
+  const name = el('input'); name.value = node.name; name.required = true; name.maxLength = 200;
+  const snapshot = copy(node), id = `definition-${crypto.randomUUID()}`;
+  libraryDialog('Save Agent variant', [['Variant name', name]], async () => {
+    const agentName = requireAgentName(name);
+    await writeDefinition({schemaVersion:2, id, name:agentName, description:'', revision:0, node:{...snapshot,name:agentName}}, 'Agent variant saved');
+  });
+}
+// Truncation counts the field's own unit (UTF-16 code units) but must not cut between the two
+// halves of an astral character: a split pair still passes the length check while showing as a
+// replacement character. Walk whole code points and stop before the budget is exceeded.
+function truncateToUnits(value, limit) {
+  let kept = '';
+  for (const character of value) {
+    if (kept.length + character.length > limit) break;
+    kept += character;
+  }
+  return kept;
+}
+// A saved Agent is never edited in place, so copying always writes a new definition.
+function copyAgent(definition) {
+  // The suffix must not push a long source name past the field's own limit, which would
+  // prefill an invalid default the browser then refuses to submit.
+  const suffix = ' copy', source = definition.name.trim(), id = `definition-${crypto.randomUUID()}`;
+  const name = el('input'); name.value = `${truncateToUnits(source, 200 - suffix.length)}${suffix}`; name.required = true; name.maxLength = 200;
+  libraryDialog(`Clone ${definition.name}`, [['Agent name', name]], async () => {
+    const agentName = requireAgentName(name);
+    await writeDefinition({schemaVersion:2, id, name:agentName, description:definition.description || '', revision:0, node:{...copy(definition.node),name:agentName}}, `Agent ${agentName} created`);
+  });
+}
+// Add agent appends a new Agent to the list from a name, an optional description and its
+// instructions; the rest of its settings start as a blank canvas Agent's do. Deeper settings are
+// edited on the canvas and kept with Save Agent variant.
+function addAgent() {
+  const name = el('input'); name.required = true; name.maxLength = 200;
+  const description = el('input'); description.maxLength = 2000;
+  const instruction = el('textarea'); instruction.maxLength = 100000; instruction.rows = 5;
+  const id = `definition-${crypto.randomUUID()}`;
+  libraryDialog('Add agent', [['Agent name', name], ['Description', description], ['Instructions', instruction]], async () => {
+    const agentName = requireAgentName(name);
+    await writeDefinition({schemaVersion:2, id, name:agentName, description:description.value.trim(), revision:0, node:{id:'agent', type:'agent', name:agentName, ...blankAgentSettings(), instruction:instruction.value.trim()}}, `Agent ${agentName} added`);
+  }, 'Add agent');
+}
+// The server's 512 KiB limit applies to the import request, not the file: Share pretty-prints its
+// file, so a file over that limit can still make a request under it. The request is measured
+// exactly; files far beyond anything that could fit are refused before they are read.
+const AGENT_REQUEST_LIMIT = 512 * 1024;
+const AGENT_FILE_LIMIT = 4 * AGENT_REQUEST_LIMIT;
+// Import accepts only a file made by Share. The server checks the format marker and version and
+// validates the Agent like any saved one, so this dialog only reads the file.
+function importAgent() {
+  const file = el('input'); file.type = 'file'; file.accept = '.json,application/json';
+  const id = `definition-${crypto.randomUUID()}`;
+  libraryDialog('Import agent', [['Agent JSON file shared from Andorra Code', file]], async () => {
+    const chosen = file.files?.[0];
+    if (!chosen) throw new Error('Choose an Agent JSON file.');
+    if (chosen.size > AGENT_FILE_LIMIT) throw new Error('The file is larger than an Agent export can be.');
+    let parsed;
+    try { parsed = JSON.parse(await chosen.text()); }
+    catch { throw new Error('The file is not valid JSON, so it is not an Andorra Code Agent export.'); }
+    if (new TextEncoder().encode(JSON.stringify({ id, file: parsed })).length > AGENT_REQUEST_LIMIT) throw new Error('This Agent is larger than the 512 KiB Andorra Code can import.');
+    await importDefinition(id, parsed);
+  }, 'Import');
+}
+// Like writeDefinition, a committed import whose response was lost is confirmed from the store by
+// the id this dialog minted, so a retry never adds the Agent twice.
+async function importDefinition(id, file) {
+  let stored;
+  try { stored = await api('/api/definitions/import', { id, file }); }
+  catch (error) {
+    stored = (await readDefinitions().catch(() => undefined))?.find(definition => definition.id === id);
+    if (!stored) throw error;
+    const expected = typeof file?.agent?.name === 'string' ? file.agent.name.trim() : undefined;
+    if (expected !== undefined && stored.name !== expected) throw new Error(`An earlier import from this dialog is already saved as "${stored.name}". Close the dialog and import again.`);
+  }
+  state.libraryExpanded.agents = true;
+  const saved = `Agent ${stored.name} imported`;
+  try { await readDefinitions(); renderLibrary(); status(saved); }
+  catch (error) { status(`${saved}, but the library did not refresh: ${error.message}`, true); }
+}
+// Share writes the Agent's export file. In the desktop host only the id crosses the frame and the
+// host writes the file to Downloads; a plain browser downloads it directly.
+async function shareAgent(definition) {
+  if (window.AndorraEmbed?.hostChrome?.() && window.AndorraEmbed.exportAgent) { await window.AndorraEmbed.exportAgent(definition.id); return; }
+  downloadJson(await api(`/api/definitions/${encodeURIComponent(definition.id)}/export`), exportFileName(definition));
+  status(`Agent ${definition.name} shared as a JSON file`);
+}
+// Built-in Agents have no Delete. Graphs that already use a deleted Agent keep their own copy.
+async function deleteAgent(definition) {
+  if (definition.preset) return;
+  if (!confirm(`Delete the Agent "${definition.name}"? Graphs that already use it keep their own copy. This cannot be undone.`)) return;
+  try { await api(`/api/definitions/${encodeURIComponent(definition.id)}`, undefined, { method: 'DELETE' }); }
+  catch (error) {
+    // A lost response can still have deleted it, so the refreshed list decides what is reported.
+    const remaining = (await readDefinitions().catch(() => undefined))?.some(item => item.id === definition.id);
+    if (remaining !== false) { if (remaining) renderLibrary(); status(error.message, true); return; }
+  }
+  try { await readDefinitions(); renderLibrary(); status(`Agent ${definition.name} deleted`); }
+  catch (error) { status(`Agent ${definition.name} deleted, but the library did not refresh: ${error.message}`, true); }
+}
+// The same menu opens from a right-click (or the keyboard's context-menu key) on the row and from
+// the row's More actions button.
+function showAgentMenu(definition, use, x, y) {
+  showMenuAt(x, y, `${definition.name} actions`, [
+    { label: 'Use', icon: 'plus', run: use },
+    { label: 'Clone', icon: 'copy', run: () => copyAgent(definition) },
+    { label: 'Share', icon: 'share', run: () => { shareAgent(definition).catch(error => status(error.message, true)); } },
+    ...(definition.preset ? [] : [{ label: 'Delete', icon: 'trash', danger: true, run: () => { void deleteAgent(definition); } }]),
+  ]);
+}
+async function readDefinitions() {
+  const data = await api('/api/bootstrap'); state.definitions = data.definitions || []; return state.definitions;
+}
+// The id is fixed for the dialog's lifetime and a committed write is confirmed from the store
+// before any failure is reported: a dropped response or a failed refresh must not turn the
+// author's second Save into a duplicate Agent. A refresh failure after a committed write is
+// reported instead of rethrown, because the Agent is saved either way.
+async function writeDefinition(payload, saved) {
+  try { await api('/api/definitions', payload); }
+  catch (error) {
+    // A lost response can still have committed the write, so confirm it from the store. The
+    // confirmation must be the record the author asked for: a form edited after that commit is a
+    // different Agent, and reporting it as created would hide that the stored name differs.
+    const existing = (await readDefinitions().catch(() => undefined))?.find(definition => definition.id === payload.id);
+    if (!existing) throw error;
+    if (existing.name !== payload.name) throw new Error(`This Agent is already saved as "${existing.name}". Reload the library to see it, then copy again for a different name.`);
+  }
+  state.libraryExpanded.agents = true;
+  try { await readDefinitions(); renderLibrary(); status(saved); }
+  catch (error) { status(`${saved}, but the library did not refresh: ${error.message}`, true); }
+}
+function renderLibrary() {
+  const container = $('node-library'); container.replaceChildren();
+  const query = $('node-search').value.toLowerCase();
+  const definitionItem = d => ({name:d.name,type:'agent',description:d.preset ? 'Editable Agent preset' : `Saved variant - r${d.revision}`,node:d.node,definition:d});
+  const addItem = (parent, item) => {
+    // A library item drags onto the canvas; a click, Enter or Space adds it, so the library stays
+    // usable without a pointer. The type icon is placed first by the stylesheet's grid.
+    const row = el('div', undefined, 'library-row'), button = el('button', undefined, 'library-item'); button.append(el('b', item.name), el('span', item.description));
+    // Add agent and Import agent manage the list itself: a click opens their dialog, and they are
+    // neither draggable nor given the Agent menu.
+    if (item.action) {
+      const actionGlyph = globalThis.AndorraIcons?.icon?.(item.icon);
+      if (actionGlyph) button.append(actionGlyph);
+      button.type = 'button'; button.title = item.title; button.setAttribute('data-library-action', item.id); button.onclick = item.action;
+      if (item.last) row.className = 'library-row library-actions-end';
+      row.append(button); parent.append(row); return;
+    }
+    const glyph = globalThis.AndorraIcons?.icon?.(globalThis.AndorraIcons.nodeIcon({type:item.type, agentRole:item.node?.agentRole}));
+    if (glyph) button.append(glyph);
+    button.setAttribute('data-node-type', item.type);
+    button.title = `Drag onto the canvas, or press Enter to add ${item.name}`;
+    const cannotAdd = !state.graph || (Object.keys(state.graph.nodes).length >= nodeLimit(state.graph, item.node) && !(item.node?.agentRole === 'orchestrator' && Object.values(state.graph.nodes).some(node => node.agentRole === 'orchestrator')));
+    // A free-tier refusal leaves the item clickable, so a click explains the limit rather than doing nothing.
+    const freeRefusal = freeNodeRefusal([{ type: item.type, agentRole: item.node?.agentRole }]);
+    if (freeRefusal) button.title = freeRefusal;
+    button.disabled = cannotAdd && !item.definition; button.draggable = !button.disabled && !freeRefusal;
+    button.onclick = () => { if (cannotAdd) { status(state.graph ? 'Graph node limit reached.' : 'Open a graph to add this Agent.', true); return; } addNode(item.type, item.node); };
+    button.ondragstart = event => { event.dataTransfer.setData('application/andorra-node', JSON.stringify({name:item.name,type:item.type,node:item.node})); event.dataTransfer.effectAllowed = 'copy'; };
+    row.append(button);
+    // An Agent's actions are secondary, so they open from a right-click on the row (which the
+    // keyboard's context-menu key and Shift+F10 also raise) or from a quiet icon that shows on the
+    // row's hover or focus rather than a pill on every row.
+    if (item.definition) {
+      const openMenu = (x, y) => showAgentMenu(item.definition, () => button.onclick(), x, y);
+      row.oncontextmenu = event => { event.preventDefault(); openMenu(event.clientX, event.clientY); };
+      // Not every host raises a contextmenu event for the keyboard's own menu keys, so they open
+      // the menu directly beneath the focused row; preventing the default avoids a second opening.
+      button.onkeydown = event => {
+        if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')) return;
+        event.preventDefault();
+        const box = button.getBoundingClientRect?.();
+        openMenu(box ? box.left + 24 : 0, box ? box.bottom : 0);
+      };
+      const more = el('button', undefined, 'library-more icon-button'); more.type = 'button';
+      more.title = `Actions for ${item.name}`; more.setAttribute('aria-label', `More actions for ${item.name}`); more.setAttribute('aria-haspopup', 'menu');
+      const moreGlyph = globalThis.AndorraIcons?.icon?.('more', 14); if (moreGlyph) more.append(moreGlyph);
+      more.onclick = event => { const box = more.getBoundingClientRect?.(); openMenu(box ? box.left : event?.clientX ?? 0, box ? box.bottom : event?.clientY ?? 0); };
+      row.append(more);
+    }
+    parent.append(row);
+  };
+  const section = (parent, id, name, entries) => {
+    const matching = entries.filter(item => `${name} ${item.name} ${item.description}`.toLowerCase().includes(query));
+    if (query && !matching.length && !name.toLowerCase().includes(query)) return;
+    const group = el('details', undefined, 'library-group');
+    group.open = !!query || (state.libraryExpanded[id] ?? true); group.append(el('summary', name));
+    group.ontoggle = () => { if (!query) state.libraryExpanded[id] = group.open; };
+    for (const item of matching) addItem(group, item);
+    parent.append(group); return group;
+  };
+  const agents = section(container, 'agents', 'Agents', [
+    {id:'add', name:'Add agent', description:'Create a new Agent in this list', icon:'plus', title:'Create a new Agent and add it to this list', action:addAgent},
+    {id:'import', name:'Import agent', description:'Add an Agent from a shared JSON file', icon:'upload', title:'Import an Agent shared from Andorra Code', action:importAgent, last:true},
+    ...state.definitions.filter(d=>d.preset).map(definitionItem),
+    ...state.definitions.filter(d=>!d.preset).map(definitionItem),
+  ]);
+  if (agents) agents.append(el('p','Select an Agent to configure Condition, Loop, and Parallel modifiers.','help'));
+  section(container,'control','Control',['join'].map(type=>({name:type.charAt(0).toUpperCase()+type.slice(1),type,description:{condition:'Branch on run state',loop:'Bounded repetition',parallel:'Explicit fan-out',join:'Wait for all or any branches'}[type]})));
+  section(container,'actions','Actions',[{name:'Run command',type:'action',node:{name:'Run command',action:{kind:'command',command:''}},description:'Execute a shell command'},{name:'Run tests',type:'action',node:{name:'Run tests',action:{kind:'tests',command:'npm test'}},description:'Execute project tests'},{name:'Git operation',type:'action',node:{name:'Git operation',action:{kind:'git',command:'git status'}},description:'Run a Git operation'}]);
+  section(container,'flow','Flow',[{name:'Human approval',type:'approval',description:'Pause for a decision'},{name:'End',type:'end',description:'Finish this graph path'}]);
+}
+function fit() {
+  if (!state.graph) return; const nodes = Object.values(state.graph.nodes); if (!nodes.length) return;
+  const positions = nodes.map(position), minX = Math.min(...positions.map(p => p.x)), minY = Math.min(...positions.map(p => p.y)), maxX = Math.max(...positions.map(p => p.x)) + 210, maxY = Math.max(...positions.map(p => p.y)) + Math.max(...nodes.map(n => 94 + outcomes(n).length * 25));
+  state.zoom = Math.min(1, Math.max(.2, Math.min(($('canvas').clientWidth - 90) / (maxX - minX), ($('canvas').clientHeight - 170) / (maxY - minY))));
+  state.x = ($('canvas').clientWidth - (maxX - minX) * state.zoom) / 2 - minX * state.zoom; state.y = ($('canvas').clientHeight - (maxY - minY) * state.zoom) / 2 - minY * state.zoom; transform();
+}
+function zoom(factor, x = $('canvas').clientWidth / 2, y = $('canvas').clientHeight / 2) { const next = Math.max(.2, Math.min(2, state.zoom * factor)); state.x = x - (x - state.x) * next / state.zoom; state.y = y - (y - state.y) * next / state.zoom; state.zoom = next; transform(); }
+// A keyboard-activated click carries no pointer coordinates, so the menu falls back to the
+// window corner rather than refusing to open.
+$('new-graph').onclick = event => showNewGraphMenu(event?.clientX ?? 0, event?.clientY ?? 0); $('duplicate').onclick = () => newGraph(true); $('search').oninput = renderList;
+$('node-search').oninput = renderLibrary;
+$('graph-settings').onclick = () => { clearSelection(); renderCanvas(); renderInspector(); };
+$('toggle-inspector').onclick = () => { const hidden = $('inspector').classList.toggle('hidden'); $('toggle-inspector').setAttribute('aria-expanded', String(!hidden)); };
+$('undo').onclick = () => { if (!state.undo.length) return; state.redo.push(copy(state.graph)); state.graph = state.undo.pop(); clearSelection(); state.dirty = true; render(); status('Change undone'); };
+$('redo').onclick = () => { if (!state.redo.length) return; state.undo.push(copy(state.graph)); state.graph = state.redo.pop(); clearSelection(); state.dirty = true; render(); status('Change restored'); };
+// A refused Save briefly pulses the outlined nodes, so the eye finds the cards it must fix
+// before the run can be saved. No re-render happens on that early return, so the class lives.
+function pulseErrorNodes() {
+  for (const element of document.querySelectorAll?.('.node.node-error') ?? []) element.classList.add('node-error-pulse');
+  setTimeout(() => { for (const element of document.querySelectorAll?.('.node.node-error-pulse') ?? []) element.classList.remove('node-error-pulse'); }, 1300);
+}
+// After a successful save, a requirement is retired only if its node is gone or now has a
+// provider: edits made while the save was in flight (a providerless clipboard paste) keep
+// theirs, since the submitted snapshot never covered them.
+function retireSatisfiedProviderRequirements() {
+  if (!state.pendingProviderNodes?.size) return;
+  const stillOwed = new Set();
+  for (const id of state.pendingProviderNodes) {
+    const node = state.graph?.nodes[id];
+    if (node?.type === 'agent' && !node.provider) stillOwed.add(id);
+  }
+  state.pendingProviderNodes = stillOwed.size ? stillOwed : null;
+  syncImportRequirementsMarker();
+}
+$('save').onclick = async () => {
+  if (state.saving) return;
+  const invalid = document.querySelector('textarea:invalid, input:invalid'); if (invalid) { revealInspectorControl(invalid); invalid.reportValidity(); return; } const errors = issues(); if (errors.length) { status(errors[0].message, true); pulseErrorNodes(); return; }
+  state.saving = true; renderHeading(); renderList();
+  try { const submitted = dropLegacyTokenFields(copy(state.graph)); const graph = await api('/api/graphs', submitted); if (state.graph.id === submitted.id) {
+    // The draft marker is editor state, not graph content, so a difference in it alone is not an edit.
+    const liveView = { ...state.graph }; delete liveView.pendingProviderNodes;
+    const edited = JSON.stringify(liveView) !== JSON.stringify(submitted); if (edited) { state.graph.revision = graph.revision; state.undo = []; state.redo = []; } else { state.graph = graph; state.dirty = false; state.undo = []; state.redo = []; } retireSatisfiedProviderRequirements(); } const index = state.graphs.findIndex(g => g.id === graph.id); const summary = { id: graph.id, name: graph.name, revision: graph.revision }; if (index >= 0) state.graphs[index] = summary; else state.graphs.push(summary); render(); status(`Saved revision ${graph.revision}${state.dirty ? ' - You have newer unsaved changes' : ''}`); } catch (error) { status(error.message, true); } finally { state.saving = false; renderHeading(); renderList(); }
+};
+$('canvas-hint-close').onclick = dismissCanvasHint;
+$('fit').onclick = fit; $('zoom-in').onclick = () => zoom(1.2); $('zoom-out').onclick = () => zoom(1 / 1.2);
+$('layout').onclick = () => mutate(() => {
+  const levels = new Map([[state.graph.entry, 0]]), queue = [state.graph.entry];
+  while (queue.length) { const id = queue.shift(); for (const edge of state.graph.edges.filter(e => e.source === id)) if (!levels.has(edge.target)) { levels.set(edge.target, levels.get(id) + 1); queue.push(edge.target); } }
+  const rows = new Map(); for (const node of Object.values(state.graph.nodes)) { const level = levels.get(node.id) ?? 0, row = rows.get(level) || 0; node.position = { x: level * 300, y: row * 220 }; rows.set(level, row + 1); } fit();
+}, true);
+$('canvas').addEventListener('wheel', event => { if (event.target.closest('button, .node, path')) return; event.preventDefault(); dismissCanvasHint(); const bounds = $('canvas').getBoundingClientRect(); zoom(Math.exp(-event.deltaY * .001), event.clientX - bounds.left, event.clientY - bounds.top); }, { passive: false });
+$('canvas').ondragover = event => {
+  const types = Array.from(event.dataTransfer?.types || []);
+  if ((state.graph && !state.saving && types.includes('application/andorra-node')) || types.includes('Files')) {event.preventDefault();event.dataTransfer.dropEffect='copy';}
+};
+$('canvas').ondrop = event => {
+  const raw=event.dataTransfer?.getData('application/andorra-node');
+  if (raw) {
+    if(!state.graph || state.saving)return;event.preventDefault();
+    try {const item=JSON.parse(raw);if(!item || typeof item.type!=='string')return;const bounds=$('canvas').getBoundingClientRect();addNode(item.type,item.node,{x:Math.round((event.clientX-bounds.left-state.x)/state.zoom),y:Math.round((event.clientY-bounds.top-state.y)/state.zoom)});} catch(error){status('This library item could not be added: '+error.message,true);}
+    return;
+  }
+  // An OS file dropped onto the canvas imports as a new graph (the desktop host hands drops
+  // over through its own frame channel, so this path only serves a browser-opened studio).
+  const file = Array.from(event.dataTransfer?.files || []).find(item => /\.json$/i.test(item.name) || item.type === 'application/json');
+  if (file) { event.preventDefault(); void window.AndorraStudio?.importGraphFile?.(file)?.catch(error => status(error.message, true)); }
+};
+$('canvas').onpointerdown = event => { if (event.button !== 0 || event.target.closest('button, .node, path, .canvas-hint')) return; dismissCanvasHint(); const start = { x: event.clientX - state.x, y: event.clientY - state.y }; $('canvas').setPointerCapture(event.pointerId); $('canvas').onpointermove = e => { state.x = e.clientX - start.x; state.y = e.clientY - start.y; transform(); }; $('canvas').onpointerup = () => { $('canvas').onpointermove = null; }; };
+$('resize').onpointerdown = event => { $('resize').setPointerCapture(event.pointerId); $('resize').onpointermove = e => { document.documentElement.style.setProperty('--panel', `${Math.max(360, Math.min(720, innerWidth - e.clientX))}px`); }; $('resize').onpointerup = () => { $('resize').onpointermove = null; }; };
+$('resize').onkeydown = event => { if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) return; event.preventDefault(); const width = $('inspector').getBoundingClientRect().width + (event.key === 'ArrowLeft' ? 20 : -20); document.documentElement.style.setProperty('--panel', `${Math.max(360, Math.min(720, width))}px`); };
+$('export').onclick = () => { if (!state.graph) return; downloadGraph(state.graph); };
+// A change of appearance repaints the connections, whose colours are read from the tokens.
+if (typeof document.addEventListener === 'function') {
+  document.addEventListener('andorra:themechange', () => { if (state.graph) renderCanvas(); });
+}
+window.addEventListener('beforeunload', event => { document.activeElement?.blur(); if (state.dirty) { event.preventDefault(); event.returnValue = ''; } });
+window.addEventListener('keydown', event => { if(event.key==='Delete' && !document.querySelector('dialog[open]') && !event.target?.closest('input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])') && !event.isComposing) {event.preventDefault();deleteSelection();return;} if(event.key==='Escape' && state.routePick){event.preventDefault();cancelRoutePick();return;} if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') { event.preventDefault(); document.activeElement?.blur(); if (!$('save').disabled) $('save').click(); } });
+async function refreshCloudState() {
+  if (!token) return;
+  try {
+    const sync = await api('/api/sync');
+    if ($('sync-status')) $('sync-status').textContent = sync.detail;
+    await refreshDrafts();
+    const data = await api('/api/bootstrap'); state.plan = data.plan; state.graphs = data.graphs; applyProviderRegistry(data); renderList();
+  } catch (error) { if ($('sync-status')) $('sync-status').textContent = 'Cloud sync unavailable: ' + error.message; }
+  setTimeout(refreshCloudState, 10000);
+}
+// First sync check after one second; subsequent status/list refreshes remain periodic.
+if (token) setTimeout(refreshCloudState, 1000);
+
+/* CLI run activity: this tab mirrors the live run state of the CLI sharing this installation.
+   A spinner favicon turns while the CLI works; an exclamation favicon, a title prefix, and a
+   system notification (a Windows toast) fire when the CLI waits on the user. Every browser
+   entry point is feature-detected because this module also loads into partial-DOM harnesses.
+   The idle favicon is the published Andorra Labs logo; the two busy states are status markers
+   rather than the brand, so they keep their own artwork. */
+const baseTitle = document.title || 'Graph studio - Andorra Code';
+const faviconHref = svg => 'data:image/svg+xml,' + encodeURIComponent(svg);
+const FAVICONS = {
+  idle: '/andorra-logo.png',
+  running: faviconHref('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="11" fill="none" stroke="#8d8d96" stroke-width="4" opacity="0.45"/><g><path d="M16 5a11 11 0 0 1 11 11" fill="none" stroke="#5b5b63" stroke-width="4" stroke-linecap="round"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 16 16" to="360 16 16" dur="0.9s" repeatCount="indefinite"/></g></svg>'),
+  'awaiting-input': faviconHref('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#D97706"/><rect x="14" y="7" width="4" height="13" rx="2" fill="#fff"/><circle cx="16" cy="24.5" r="2.4" fill="#fff"/></svg>'),
+};
+function setFavicon(activity) {
+  try {
+    let link = document.querySelector('link[rel="icon"]');
+    if (!link) {
+      link = document.createElement('link');
+      link.setAttribute('rel', 'icon');
+      (document.head || document.body).append(link);
+    }
+    const href = FAVICONS[activity] || FAVICONS.idle;
+    link.setAttribute('type', href.startsWith('data:') ? 'image/svg+xml' : 'image/png');
+    link.setAttribute('href', href);
+  } catch { /* A partial DOM cannot host a favicon. */ }
+}
+let lastActivityKey;
+function applyActivity(value) {
+  if (!value) return;
+  // Feature-detected: the run-activity block is exercised in partial-DOM harnesses where the
+  // provider registry lives outside the evaluated slice.
+  if (typeof applyProviderRegistry === 'function') applyProviderRegistry(value);
+  if (!Object.hasOwn(FAVICONS, value.state)) return;
+  setFavicon(value.state);
+  document.title = value.state === 'running' ? `Running · ${baseTitle}` : value.state === 'awaiting-input' ? `Input needed · ${baseTitle}` : baseTitle;
+  const activityKey = JSON.stringify([value.state, value.runId, value.updatedAt, value.kind, value.detail]);
+  // Native-app notifications are requested by the top-level Tauri window. Browsers
+  // deny permission requests from cross-origin iframes, so relay only safe status.
+  window.AndorraEmbed?.activity?.(value);
+  if ((!window.parent || window.parent === window) && value.state === 'awaiting-input' &&
+      lastActivityKey !== activityKey && typeof Notification === 'function' && Notification.permission === 'granted') {
+    try { new Notification('Andorra Code needs your input', { body: value.detail || 'Open the terminal to answer.', tag: 'andorra-activity' }); } catch { /* The favicon and title still changed. */ }
+  }
+  lastActivityKey = activityKey;
+}
+// Browsers want a user gesture before showing the permission prompt, so ask on the first click
+// or keypress; until then the favicon and title carry the state without notifications.
+function requestActivityNotifications() {
+  try { if (typeof Notification === 'function' && Notification.permission === 'default') void Notification.requestPermission(); } catch { /* Denied or unsupported. */ }
+  window.removeEventListener('pointerdown', requestActivityNotifications);
+  window.removeEventListener('keydown', requestActivityNotifications);
+}
+function watchActivity() {
+  let pollFailures = 0;
+  const poll = async () => {
+    try {
+      applyActivity(await api('/api/activity'));
+      pollFailures = 0;
+    } catch {
+      // A dead server must not leave the fallback path claiming a run forever: after the same
+      // 20-second grace the stream path uses (four failed five-second polls), clear to idle
+      // and keep polling quietly in case a server comes back.
+      if (++pollFailures === 4) applyActivity({ state: 'idle' });
+    }
+    setTimeout(poll, 5000);
+  };
+  // Prefer a server-sent event stream: background tabs throttle timers, and a throttled poll
+  // could report an input request minutes late. EventSource cannot send the Authorization
+  // header, so the stream accepts the session token in the query string.
+  if (typeof EventSource !== 'function' || !token) { setTimeout(poll, 1000); return; }
+  let source;
+  try { source = new EventSource(`/api/activity/stream?token=${encodeURIComponent(token)}`); }
+  catch { setTimeout(poll, 1000); return; }
+  // The CLI that hosts this tab's server can exit mid-run, and a dead stream must not leave the
+  // tab claiming a run forever. EventSource retries silently, so only clear the state after the
+  // retries have had a real grace period; polling then takes over if a server ever returns.
+  let staleTimer;
+  source.onmessage = event => {
+    clearTimeout(staleTimer);
+    staleTimer = undefined;
+    try { applyActivity(JSON.parse(event.data)); } catch { /* Ignore a malformed frame. */ }
+  };
+  source.onerror = () => {
+    if (staleTimer !== undefined) return;
+    staleTimer = setTimeout(() => { try { source.close(); } catch { /* Already closed. */ } applyActivity({ state: 'idle' }); poll(); }, 20000);
+  };
+}
+setFavicon('idle');
+if (token) watchActivity();
+try { if ((!window.parent || window.parent === window) && typeof Notification === 'function' && Notification.permission === 'default') { window.addEventListener('pointerdown', requestActivityNotifications); window.addEventListener('keydown', requestActivityNotifications); } } catch { /* Partial DOM. */ }
+
+(async () => { renderHeading(); if (!token) { status('Session token missing. Open this app using andorra graph.', true); return; } try { const data = await api('/api/bootstrap'); state.plan = data.plan; state.graphs = data.graphs; applyProviderRegistry(data); state.tools = data.tools || []; state.definitions = data.definitions || []; renderLibrary(); renderList(); const wantsNew = new URLSearchParams(location.search).get('new') === '1'; if (wantsNew && canCreateGraph()) newGraph(); else if (state.graphs.length) { await openGraph((freeTier() && state.plan.freeGraphId) || state.graphs[0].id); if (wantsNew) status(FREE_CREATE_TIP, true); } else { render(); status('Create your first graph'); } window.AndorraEmbed?.ready?.(); if (data.graphMigrationErrors?.length) status('Some saved graphs could not be opened: ' + data.graphMigrationErrors.map(item => item.name + ' (' + item.id + '): ' + item.error).join('; ') + '. Their saved revisions are unchanged.', true); } catch (error) { status(error.message, true); } })();