@abot-ai/runtime 1.5.0 → 1.7.0

package/dist/src/web-ui/app/components/automations/timeline.js

@@ -0,0 +1,141 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { renderAutomationToolIdentity } from "./tool-identity.js";
+import { renderAutomationFailure } from "./failure-presentation.js";
+
+const CARD_WIDTH = 300;
+const BRANCH_GAP = 12;
+
+function graphChildren(node) {
+  return Array.isArray(node?.children) ? node.children : [];
+}
+
+function graphWidth(node) {
+  if (node?.kind === "parallel") {
+    const branches = Array.isArray(node.branches) ? node.branches : [];
+    return Math.max(CARD_WIDTH, branches.reduce((width, branch) => width + graphWidth(branch), 0)
+      + Math.max(0, branches.length - 1) * BRANCH_GAP);
+  }
+  if (node?.kind === "sequence")
+    return Math.max(CARD_WIDTH, ...graphChildren(node).map(graphWidth));
+  return CARD_WIDTH;
+}
+
+export function findAutomationNode(root, nodeId) {
+  if (!root || !nodeId) return null;
+  if (root.id === nodeId) return root;
+  const descendants = root.kind === "parallel" ? root.branches : root.children;
+  for (const child of Array.isArray(descendants) ? descendants : []) {
+    const found = findAutomationNode(child, nodeId);
+    if (found) return found;
+  }
+  return null;
+}
+
+function nodeRunState(run, nodeId) {
+  if (!Array.isArray(run?.nodes)) return null;
+  return run.nodes.find((record) => record.nodeId === nodeId) || null;
+}
+
+function nodeIsRunning(node, run) {
+  if (!node) return false;
+  if (nodeRunState(run, node.id)?.status === "running") return true;
+  const descendants = node.kind === "parallel" ? node.branches : node.children;
+  return Array.isArray(descendants) && descendants.some((child) => nodeIsRunning(child, run));
+}
+
+function nodeMetadata(node) {
+  if (node.kind === "agent") {
+    return [node.modelProfileId || "Model not selected", node.agentMode || ""].filter(Boolean).join(" · ");
+  }
+  return [node.operation?.toolName, node.operation?.operationId].filter(Boolean).join(" · ") || "Operation not selected";
+}
+
+function leafMarkup(node, context) {
+  const record = nodeRunState(context.run, node.id);
+  const state = context.run ? record?.status || "pending" : "draft";
+  const selected = context.selectedNodeId === node.id;
+  const kind = node.kind === "agent" ? "Agent" : "Tool";
+  const title = node.title || (node.kind === "agent" ? "New agent" : "New tool step");
+  const footer = context.run
+    ? state.replaceAll("_", " ")
+    : `${node.onFailure === "skip" ? "Skip step" : "Stop process"} on failure`;
+  const expanded = selected && Boolean(context.inspectorMarkup);
+  return `<button type="button" class="automation-node" data-automation-node="${escapeHtml(node.id)}" data-kind="${kind.toLowerCase()}" data-state="${escapeHtml(state)}" aria-pressed="${selected}"${context.editable ? ` draggable="true" aria-expanded="${expanded}"` : ""}${expanded ? ` aria-controls="automation-step-settings"` : ""}>
+    <span class="automation-node-top"><span>${kind}</span><span>${escapeHtml(state)}</span></span>
+    <strong dir="auto">${escapeHtml(title)}</strong>${node.kind === "tool"
+      ? renderAutomationToolIdentity(node.operation, context.catalog)
+      : `<small dir="auto">${escapeHtml(nodeMetadata(node))}</small>`}
+    <span class="automation-node-foot">${escapeHtml(footer)}</span></button>`;
+}
+
+function connectorMarkup(sequenceId, index, context, nextNode = null, firstStep = false) {
+  if (!context.editable)
+    return `<span class="automation-connector" data-active="${nodeIsRunning(nextNode, context.run)}" aria-hidden="true"></span>`;
+  if (firstStep)
+    return `<button type="button" class="automation-connector automation-drop-target automation-first-step" data-insert-parent="${escapeHtml(sequenceId)}" data-insert-index="${index}" aria-label="Choose a tool or agent for the first step" aria-pressed="false"><span class="automation-first-step-icon" aria-hidden="true">+</span><span class="automation-first-step-copy"><strong>Add first step</strong><small data-insert-help>Choose from Tools or Agents, or drag here</small></span></button>`;
+  return `<button type="button" class="automation-connector automation-drop-target" data-insert-parent="${escapeHtml(sequenceId)}" data-insert-index="${index}" aria-label="Add step at position ${index + 1}"><span aria-hidden="true">+</span></button>`;
+}
+
+function sequenceMarkup(sequence, context, branch = false) {
+  const children = graphChildren(sequence);
+  if (!children.length) return `<div class="automation-sequence${branch ? " automation-branch-sequence" : ""}">${connectorMarkup(sequence.id, 0, context, null, !branch)}</div>`;
+  return `<div class="automation-sequence${branch ? " automation-branch-sequence" : ""}">${children.map((child, index) => {
+    const markup = child.kind === "parallel"
+      ? parallelMarkup(child, context)
+      : leafMarkup(child, context);
+    const inspector = context.editable && context.inspectorMarkup && child.kind !== "parallel" && child.id === context.selectedNodeId
+      ? `<div class="automation-inline-inspector-frame"><div class="automation-inline-inspector-clip">${context.inspectorMarkup}</div></div>` : "";
+    const side = index % 2 === 0 ? "left" : "right";
+    return `${index === 0 ? connectorMarkup(sequence.id, 0, context, child) : ""}<div class="automation-sequence-item" data-graph-item="${escapeHtml(child.id)}" data-graph-kind="${escapeHtml(child.kind)}" data-side="${side}">${markup}${inspector}</div>${connectorMarkup(sequence.id, index + 1, context, children[index + 1])}`;
+  }).join("")}</div>`;
+}
+
+function parallelMarkup(group, context) {
+  const branches = Array.isArray(group.branches) ? group.branches : [];
+  const widths = context.editable ? branches.map(graphWidth) : [];
+  const totalWidth = widths.reduce((width, branchWidth) => width + branchWidth, 0)
+    + Math.max(0, widths.length - 1) * BRANCH_GAP;
+  const groupStyle = context.editable ? ` style="width:${Math.max(CARD_WIDTH, totalWidth)}px"` : "";
+  const branchStyle = context.editable
+    ? ` style="grid-template-columns:${widths.map((width) => `${width}px`).join(" ")};--first-branch-width:${widths[0] || CARD_WIDTH}px;--last-branch-width:${widths.at(-1) || CARD_WIDTH}px"`
+    : ` style="--automation-branch-count:${branches.length}"`;
+  return `<div class="automation-parallel" role="group" aria-label="Parallel steps, all branches join before continuing"${groupStyle}>
+    <span class="automation-fork" aria-hidden="true"></span>
+    <div class="automation-branches-viewport" data-branches-for="${escapeHtml(group.id)}"><div class="automation-branches"${branchStyle}>${branches.map((branch, index) =>
+      `<div class="automation-branch" role="group" aria-label="Branch ${index + 1} of ${branches.length}"><span class="automation-branch-label">Branch ${index + 1}</span>${sequenceMarkup(branch, context, true)}</div>`
+    ).join("")}</div></div>
+    <div class="automation-join">Join · after every branch</div>
+  </div>`;
+}
+
+export function renderAutomationTimeline(definition, options = {}) {
+  const body = definition?.body;
+  if (!body || body.kind !== "sequence") return `<p class="automation-empty-graph">No steps have been added.</p>`;
+  const trigger = definition.trigger?.kind || "manual";
+  const context = { run: options.run || null, selectedNodeId: options.selectedNodeId || "", editable: options.editable === true, inspectorMarkup: options.inspectorMarkup || "", catalog: options.catalog };
+  const timeline = `<div class="automation-timeline${context.editable ? " automation-camera-scene" : ""}" data-mode="${context.run ? "run" : "editor"}"${context.editable ? ` data-camera-scene data-scene-min-width="${graphWidth(body)}"` : ""}>
+    <div class="automation-origin">Start · ${escapeHtml(trigger)}</div>
+    ${sequenceMarkup(body, context)}
+    <div class="automation-finish">Final report</div>
+  </div>`;
+  if (!context.editable) return timeline;
+  return `<div class="automation-camera"><span class="automation-camera-level" data-camera-level aria-live="polite">100%</span><div class="automation-camera-viewport" data-camera-viewport tabindex="0" aria-label="Workflow canvas. Use the mouse wheel or plus and minus keys to zoom, drag empty space to pan, and press zero to reset.">${timeline}</div></div>`;
+}
+
+export function renderAutomationNodeDetails(node, run = null) {
+  if (!node) return `<div class="automation-inspector-empty">Select a step to see its details.</div>`;
+  const record = nodeRunState(run, node.id);
+  const operation = node.kind === "tool"
+    ? `<dt>Operation</dt><dd>${escapeHtml(nodeMetadata(node))}</dd>`
+    : `<dt>Model</dt><dd>${escapeHtml(node.modelProfileId || "Not selected")}</dd><dt>Role</dt><dd>${escapeHtml(node.agentMode || "Not selected")}</dd>`;
+  const prompt = node.kind === "agent" && node.prompt
+    ? `<div class="automation-inspector-prompt"><strong>Prompt</strong><p dir="auto">${escapeHtml(node.prompt)}</p></div>`
+    : "";
+  const error = record?.errorCode
+    ? `${renderAutomationFailure(record.errorCode, run)}<details class="automation-effect-diagnostics"><summary>Technical error</summary><code>${escapeHtml(record.errorCode)}</code></details>`
+    : "";
+  return `<div class="automation-inspector-summary"><h3 dir="auto">${escapeHtml(node.title || "Untitled step")}</h3>
+    <dl><dt>Type</dt><dd>${node.kind === "agent" ? "Agent" : "Tool"}</dd>${operation}
+    <dt>Failure</dt><dd>${node.onFailure === "skip" ? "Skip step" : "Stop process"}</dd>
+    ${run ? `<dt>Status</dt><dd>${escapeHtml(record?.status || "Pending")}</dd>` : ""}</dl>${prompt}${error}</div>`;
+}

package/dist/src/web-ui/app/components/automations/tool-identity.js

@@ -0,0 +1,25 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function toolDisplayName(name) {
+  return String(name || "").split(/[_\s-]+/u).filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1)).join(" ");
+}
+
+export function automationCatalogOperation(reference, catalog) {
+  const operations = catalog?.grantableOperations || catalog?.operations || [];
+  return operations.find((item) => item.toolName === reference?.toolName &&
+    item.operationId === reference?.operationId && item.contractVersion === reference?.contractVersion) || null;
+}
+
+/** Keep configured identity distinct from the user-authored step name. */
+export function renderAutomationToolIdentity(reference, catalog, { showPlugin = false } = {}) {
+  const operation = automationCatalogOperation(reference, catalog);
+  const tool = toolDisplayName(reference?.toolName) || "Tool not selected";
+  const action = toolDisplayName(reference?.operationId) || "Choose an operation";
+  const exact = [reference?.toolName, reference?.operationId].filter(Boolean).join(" · ");
+  return `<span class="automation-tool-identity" title="${escapeHtml(exact)}">
+    <span class="automation-tool-identity-name" dir="auto">${escapeHtml(tool)}</span>
+    <span class="automation-tool-identity-operation" dir="auto">${escapeHtml(action)}</span>
+    ${showPlugin && operation?.pluginName ? `<span class="automation-tool-identity-plugin" dir="auto">${escapeHtml(toolDisplayName(operation.pluginName))}</span>` : ""}
+  </span>`;
+}

package/dist/src/web-ui/app/components/automations/workspace.js

@@ -0,0 +1,462 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { renderAutomationList } from "./list.js";
+import { createAutomationArchiveCommands } from "./archive-actions.js";
+import { createAutomationDraftRecoveryCommands } from "./draft-recovery-actions.js";
+import { activateAutomationLibraryTab, automationLibraryTabForKey, renderAutomationLibraryTabs } from "./library-tabs.js";
+import { readAutomationDefinitionPatch, renderAutomationEditor, renderAutomationToolResults, toolDisplayName } from "./editor.js";
+import { createAutomationStepEditorDialog } from "./step-editor-dialog.js";
+import { focusSelectedAutomationStep } from "./run-steps-view.js";
+import { renderAutomationRun } from "./run.js";
+import { findAutomationPosition } from "../../lib/automation-graph-position.js";
+import { canWrapAutomationSequence } from "../../lib/automation-parallel-depth.js";
+import { createAutomationTimelineCamera } from "./timeline-camera.js";
+import { createAutomationLiveView } from "./live-view.js";
+import { automationRerunConfirmation } from "./rerun-confirmation.js";
+import { matchesAutomationGrant, requiresFullPlus, selectedAutomationOperations } from "./permission-selection.js";
+
+const DRAG_TYPE = "application/x-abot-automation-step";
+
+export function paletteNode(target, catalog) {
+  if (target.kind === "tool") {
+    const items = Array.isArray(catalog?.grantableOperations)
+      ? catalog.grantableOperations : catalog?.operations || [];
+    const item = items.find((entry) => entry.toolName === target.id);
+    if (!item) return null;
+    return { kind: "tool", title: toolDisplayName(item.toolName), onFailure: "stop",
+      operation: { toolName: item.toolName, operationId: "", contractVersion: item.contractVersion }, controls: {} };
+  }
+  if (target.kind !== "agent") return null;
+  const saved = catalog?.savedAgents?.find((entry) => (entry.agentId || entry.id) === target.id);
+  if (!saved && target.id !== "new") return null;
+  if (saved && !saved.agent) return null;
+  const agent = saved?.agent || {};
+  return {
+    kind: "agent", title: agent.title || "New agent", onFailure: agent.onFailure || "stop",
+    modelProfileId: agent.modelProfileId || "", agentMode: agent.agentMode || "fast",
+    roleInstructions: agent.roleInstructions || "", prompt: agent.prompt || "",
+    inputs: agent.inputs || {}, tools: agent.tools || [], result: agent.result || { kind: "text" },
+    ...(Array.isArray(agent.acceptance) ? { acceptance: agent.acceptance } : {}),
+    ...(saved ? { savedAgentOrigin: { agentId: saved.agentId || saved.id, revision: saved.revision } } : {}),
+  };
+}
+
+function permissionDialogMarkup(selection, purpose, revision) {
+  const action = purpose === "publish" ? "publish" : "activate";
+  return `<form method="dialog" class="automation-permission-dialog"><h3>Confirm ${action}</h3>
+    <p>${selection.operations.length ? `Only these ${selection.operations.length} selected operation${selection.operations.length === 1 ? "" : "s"} will be granted to this automation.` : "This automation has no selected tool operations."} ${purpose === "publish" ? `Draft revision ${escapeHtml(revision)} will be published.` : `Published revision ${escapeHtml(revision)} will be activated.`}</p>
+    ${selection.mode === "full_plus" ? `<p class="automation-full-plus-notice">FULL+ access is required by a selected operation. Confirming grants FULL+ only to this automation and only for the operations below.</p>` : ""}
+    <div class="automation-grant-options">${selection.details.map((item) => `<div class="automation-grant-operation"><strong>${escapeHtml(toolDisplayName(item.toolName))} · ${escapeHtml(toolDisplayName(item.operationId))}</strong><small>${requiresFullPlus(item) ? "FULL+" : "Full"} · ${escapeHtml(item.label || "")}</small></div>`).join("") || `<p>No tool operations need permission.</p>`}</div>
+    <p class="automation-permission-feedback" role="status" aria-live="polite"></p>
+    <div class="automation-actions"><button type="button" data-close-permission>Cancel</button><button type="submit" class="automation-primary">${selection.mode === "full_plus" ? "Grant FULL+ and " : "Confirm and "}${escapeHtml(action)}</button></div></form>`;
+}
+
+export function createAutomationsWorkspace({
+  root, actions, documentRoot = document,
+  confirmDiscard = (message) => window.confirm(message),
+}) {
+  let current = actions.snapshot();
+  let definitionDirty = false;
+  let insertion = null;
+  let permissionDialog = null;
+  let paletteQuery = "";
+  let paletteSelectedTool = "";
+  let detailsCollapsed = false;
+  let activeLibraryTab = "studio";
+  let showArchived = false;
+  let renderedNodeId = current.selectedNodeId || "";
+  const stepEditor = createAutomationStepEditorDialog({ root, actions, documentRoot,
+    onAction: (name) => command[name]?.() });
+  const camera = createAutomationTimelineCamera(root, {
+    isEditing: () => Boolean(current.selectedNodeId) || stepEditor.isOpen(),
+  });
+  const liveView = createAutomationLiveView(root);
+
+  function isDirty() { return definitionDirty || stepEditor.isDirty(); }
+
+  function notify(message) {
+    const status = root.querySelector(".automation-feedback");
+    if (status) status.textContent = message;
+  }
+
+  function prepareLeave() {
+    if (!stepEditor.prepareLeave()) return false;
+    if (permissionDialog?.open) permissionDialog.close();
+    if (!isDirty()) return true;
+    if (!confirmDiscard("Discard unsaved automation changes?")) return false;
+    definitionDirty = false;
+    return true;
+  }
+
+  function requireSavedGraph() {
+    if (!isDirty()) return true;
+    notify("Save the current draft or step before changing the graph.");
+    return false;
+  }
+
+  function markInsertion() {
+    for (const button of root.querySelectorAll("[data-insert-parent]")) {
+      const selected = insertion?.parentSequenceId === button.dataset.insertParent
+        && insertion.index === Number(button.dataset.insertIndex);
+      button.dataset.insertionSelected = String(selected);
+      if (button.hasAttribute("aria-pressed")) button.setAttribute("aria-pressed", String(selected));
+      const help = button.querySelector("[data-insert-help]");
+      if (help) help.textContent = selected
+        ? "Position selected · choose from Tools or Agents"
+        : "Choose from Tools or Agents, or drag here";
+    }
+  }
+
+  function updateDetailsVisibility() {
+    const details = root.querySelector("#automation-editor-details");
+    const toggle = root.querySelector('[data-action="toggle-details"]');
+    if (!details || !toggle) return;
+    details.hidden = detailsCollapsed;
+    root.querySelector(".automation-definition-panel").dataset.detailsCollapsed = String(detailsCollapsed);
+    toggle.setAttribute("aria-expanded", String(!detailsCollapsed));
+    toggle.querySelector("[data-details-label]").textContent = detailsCollapsed
+      ? "Expand details" : "Collapse details";
+  }
+
+  function render(snapshot) {
+    stepEditor.sync(snapshot);
+    const waitingForSelectedView = snapshot.loading && snapshot.selectedAutomationId &&
+      (snapshot.selectedRunId ? !snapshot.run : !snapshot.draft);
+    if (waitingForSelectedView && root.querySelector(".automation-workspace-content")) {
+      current = snapshot;
+      root.setAttribute("aria-busy", "true");
+      const content = root.querySelector(".automation-workspace-content");
+      content.setAttribute("aria-busy", "true");
+      content.inert = true;
+      return;
+    }
+    const previousNodeId = renderedNodeId;
+    const viewIdentity = `${snapshot.selectedAutomationId}/${snapshot.selectedRunId || "editor"}`;
+    const sameEditor = snapshot.selectedAutomationId === current.selectedAutomationId && !snapshot.selectedRunId;
+    if (!liveView.isCurrent(viewIdentity)) { paletteQuery = ""; paletteSelectedTool = ""; insertion = null; detailsCollapsed = false; camera.resetState(); }
+    else camera.capture();
+    const retainedDefinition = definitionDirty && sameEditor
+      ? root.querySelector("[data-automation-definition-form]") : null;
+    current = snapshot;
+    renderedNodeId = snapshot.selectedNodeId || "";
+    if (snapshot.selectedAutomationId) activeLibraryTab = "studio";
+    const markup = !snapshot.selectedAutomationId ? renderAutomationList(snapshot, { archived: showArchived })
+      : snapshot.selectedRunId ? renderAutomationRun(snapshot)
+        : renderAutomationEditor(snapshot, { query: paletteQuery, selectedToolName: paletteSelectedTool });
+    const changed = liveView.update(viewIdentity, renderAutomationLibraryTabs(snapshot, markup, activeLibraryTab));
+    if (changed && retainedDefinition) root.querySelector("[data-automation-definition-form]")?.replaceWith(retainedDefinition);
+    markInsertion();
+    updateDetailsVisibility();
+    camera.restore();
+    if (snapshot.selectedNodeId && snapshot.selectedNodeId !== previousNodeId && !stepEditor.isOpen())
+      camera.revealNode(snapshot.selectedNodeId);
+    root.setAttribute("aria-busy", String(snapshot.loading || Boolean(snapshot.mutation)));
+  }
+
+  function refreshToolPalette() {
+    const results = root.querySelector("[data-automation-tool-results]");
+    if (results) results.innerHTML = renderAutomationToolResults(current.catalog,
+      { query: paletteQuery, selectedToolName: paletteSelectedTool });
+  }
+
+  async function selectLibraryTab(name, focus = false) {
+    if (name === activeLibraryTab) return;
+    if (name === "templates" && current.selectedAutomationId) {
+      if (!prepareLeave() || !await actions.openRoute("", "")) return;
+    }
+    activeLibraryTab = name;
+    activateAutomationLibraryTab(root, name, { focus });
+  }
+
+  async function saveDefinition() {
+    const form = root.querySelector("[data-automation-definition-form]");
+    if (!form || !current.draft?.definition) return;
+    try {
+      const patch = readAutomationDefinitionPatch(form, current.draft.definition);
+      const saved = await actions.saveDefinition(patch);
+      if (!saved) return;
+      definitionDirty = false;
+      render(actions.snapshot());
+    } catch (error) { notify(error instanceof Error ? error.message : String(error)); }
+  }
+
+  async function addPaletteStep(target, location = insertion) {
+    if (!requireSavedGraph()) return;
+    const definition = current.draft?.definition;
+    if (!definition) return;
+    const nodeWithoutId = paletteNode(target, current.catalog);
+    if (!nodeWithoutId) { notify("This step is unavailable under the current permission."); return; }
+    const rootSequence = definition.body;
+    const parentSequenceId = location?.parentSequenceId || rootSequence.id;
+    const index = location?.index ?? rootSequence.children.length;
+    const saved = await actions.mutateDraft({ kind: "add_node", parentSequenceId, index, nodeWithoutId });
+    if (saved) { insertion = null; markInsertion(); }
+  }
+
+  function selectedPosition() {
+    return findAutomationPosition(current.draft?.definition?.body, current.selectedNodeId);
+  }
+
+  async function moveStep(delta) {
+    if (!requireSavedGraph()) return;
+    const position = selectedPosition();
+    if (!position) return;
+    const index = position.index + (delta > 0 ? 2 : -1);
+    if (index < 0 || index > position.count) return;
+    await actions.mutateDraft({ kind: "move_node", nodeId: current.selectedNodeId, parentSequenceId: position.parentSequenceId, index });
+  }
+
+  async function moveToSlot() {
+    if (!requireSavedGraph() || !insertion || !current.selectedNodeId) return;
+    const moved = await actions.mutateDraft({
+      kind: "move_node", nodeId: current.selectedNodeId,
+      parentSequenceId: insertion.parentSequenceId, index: insertion.index,
+    });
+    if (moved) { insertion = null; markInsertion(); }
+  }
+
+  async function wrapParallel() {
+    if (!requireSavedGraph()) return;
+    const position = selectedPosition();
+    if (!position?.next || !["agent", "tool"].includes(position.next.kind)) {
+      notify("Select a step with another tool or agent immediately after it.");
+      return;
+    }
+    if (!canWrapAutomationSequence(current.draft?.definition?.body, position.parentSequenceId)) {
+      notify("This runtime supports at most two nested Parallel groups. Move these steps to a shallower branch before merging.");
+      return;
+    }
+    await actions.mutateDraft({ kind: "wrap_parallel", nodeIds: [current.selectedNodeId, position.next.id] });
+  }
+
+  async function removeStep() {
+    if (!requireSavedGraph()) return;
+    if (!confirmDiscard("Remove this step from the draft?")) return;
+    const removed = await actions.mutateDraft({ kind: "remove_node", nodeId: current.selectedNodeId });
+    if (removed) actions.selectNode("");
+  }
+
+  function openPermissionDialog(purpose) {
+    if (permissionDialog?.open) return;
+    const selectedAutomation = current.automations.find((item) => item.id === current.selectedAutomationId);
+    const definition = purpose === "activate" ? current.publishedDefinition : current.draft?.definition;
+    if (!definition || (purpose === "activate" && definition.revision !== selectedAutomation?.publishedRevision)) {
+      notify("The published revision is unavailable. Refresh ABot Studio before activating.");
+      return;
+    }
+    const selection = selectedAutomationOperations(definition, current.catalog);
+    if (selection.missing.length) {
+      notify("A selected operation is no longer configured. Update the step before continuing.");
+      return;
+    }
+    const automationId = current.selectedAutomationId;
+    const revision = definition.revision;
+    const dialog = documentRoot.createElement("dialog");
+    permissionDialog = dialog;
+    dialog.className = "automation-permission-modal";
+    dialog.innerHTML = permissionDialogMarkup(selection, purpose, revision);
+    documentRoot.body.append(dialog);
+    dialog.addEventListener("close", () => {
+      permissionDialog = null;
+      dialog.remove();
+    }, { once: true });
+    dialog.querySelector("[data-close-permission]").addEventListener("click", () => dialog.close());
+    const form = dialog.querySelector("form");
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const submit = form.querySelector('[type="submit"]');
+      submit.disabled = true;
+      const latest = actions.snapshot();
+      const stillSame = latest.selectedAutomationId === automationId &&
+        (purpose === "activate" ? latest.publishedDefinition?.revision : latest.draft?.revision) === revision;
+      let completed = false;
+      if (!stillSame) {
+        dialog.querySelector(".automation-permission-feedback").textContent = "The revision changed. Refresh and confirm again.";
+      } else {
+        const granted = (selection.operations.length === 0 && !latest.grant) ||
+          matchesAutomationGrant(latest.grant, selection) ||
+          await actions.setPermission(selection.mode, selection.operations);
+        if (granted) completed = purpose === "publish" ? await actions.publishDefinition()
+          : purpose === "activate" ? await actions.setActive(true) : true;
+        if (!completed) dialog.querySelector(".automation-permission-feedback").textContent =
+          actions.snapshot().error || "This action could not be completed.";
+      }
+      if (completed) dialog.close();
+      else submit.disabled = false;
+    });
+    dialog.showModal();
+  }
+
+  const command = {
+    ...createAutomationDraftRecoveryCommands({ actions, requireSavedGraph, confirmDiscard,
+      onRestored: () => { definitionDirty = false; insertion = null; } }),
+    ...createAutomationArchiveCommands({ actions, getCurrent: () => current, requireSavedGraph,
+      confirmDiscard, onFilterChange: (archived) => { showArchived = archived; } }),
+    "show-full-step-output": () => actions.showFullStepOutput(),
+    refresh: () => actions.refresh(), create: () => actions.create(),
+    describe: () => actions.openAuthoringChat(current.selectedAutomationId, current.draft?.revision),
+    back: () => { if (prepareLeave()) return actions.openRoute("", ""); },
+    "save-draft": saveDefinition,
+    "edit-step": () => stepEditor.open(root.querySelector('[data-action="edit-step"]')),
+    "toggle-details": () => { detailsCollapsed = !detailsCollapsed; updateDetailsVisibility(); },
+    "delete-draft": async () => {
+      if (!current.draft || current.publishedDefinition ||
+          current.automations.find((item) => item.id === current.selectedAutomationId)?.publishedRevision) return;
+      if (!confirmDiscard("Delete this unpublished automation draft and all its steps? This cannot be undone.")) return;
+      if (await actions.deleteDraft()) { definitionDirty = false; insertion = null; }
+    },
+    "save-agent": () => { if (requireSavedGraph()) return actions.saveAgent(); },
+    validate: () => { if (requireSavedGraph()) return actions.validate(); },
+    publish: async () => {
+      if (!requireSavedGraph() || !await actions.validate()) return;
+      if (actions.snapshot().validation?.issues?.length) return;
+      openPermissionDialog("publish");
+    },
+    run: () => { if (requireSavedGraph()) return actions.startRun(); },
+    "toggle-active": () => current.automations.find((item) => item.id === current.selectedAutomationId)?.status === "active"
+      ? actions.setActive(false) : openPermissionDialog("activate"),
+    "show-runs": () => { if (prepareLeave()) return current.runs[0] ? actions.openRun(current.runs[0].id) : notify("No runs yet."); },
+    editor: () => { if (prepareLeave()) return actions.openRoute(current.selectedAutomationId, ""); },
+    stop: () => actions.stopRun(),
+    rerun: () => current.run &&
+      confirmDiscard(automationRerunConfirmation(current.run)) && actions.rerun(),
+    "open-chat-run": () => actions.showChatRun(current.selectedRunId),
+    "move-up": () => moveStep(-1), "move-down": () => moveStep(1),
+    "move-to-slot": moveToSlot,
+    parallel: wrapParallel, "remove-node": removeStep,
+  };
+
+  root.addEventListener("input", (event) => {
+    if (event.target.matches("[data-tool-search]")) {
+      paletteQuery = event.target.value;
+      refreshToolPalette();
+      return;
+    }
+    if (event.target.closest("[data-automation-definition-form]")) definitionDirty = true;
+  });
+  root.addEventListener("change", (event) => {
+    if (event.target.closest("[data-automation-definition-form]")) definitionDirty = true;
+  });
+  root.addEventListener("click", (event) => {
+    const element = event.target.closest("button");
+    if (!element || !root.contains(element)) return;
+    if (element.dataset.automationListFilter) {
+      showArchived = element.dataset.automationListFilter === "archived";
+      render(actions.snapshot());
+      return;
+    }
+    if (element.dataset.automationLibraryTab) {
+      void selectLibraryTab(element.dataset.automationLibraryTab);
+      return;
+    }
+    if (element.dataset.action && command[element.dataset.action]) {
+      void command[element.dataset.action]();
+      return;
+    }
+    if (element.dataset.selectAutomation !== undefined) {
+      if (prepareLeave()) void actions.openRoute(element.dataset.selectAutomation, "");
+      return;
+    }
+    if (element.dataset.templateId !== undefined) {
+      if (prepareLeave()) void actions.createTemplate(element.dataset.templateId);
+      return;
+    }
+    if (element.dataset.selectRun !== undefined) {
+      if (prepareLeave()) void actions.openRun(element.dataset.selectRun);
+      return;
+    }
+    if (element.dataset.selectNode !== undefined || element.dataset.automationNode !== undefined) {
+      if (!prepareLeave()) return;
+      const nodeId = element.dataset.selectNode || element.dataset.automationNode || "";
+      if (nodeId === current.selectedNodeId || !nodeId) { actions.selectNode(""); return; }
+      const nodeButton = element.dataset.automationNode !== undefined ? element
+        : [...root.querySelectorAll("[data-automation-node]")]
+          .find((item) => item.dataset.automationNode === nodeId);
+      if (element.dataset.selectNode !== undefined)
+        nodeButton?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+      actions.selectNode(nodeId);
+      if (current.selectedRunId) focusSelectedAutomationStep(root);
+      return;
+    }
+    if (element.dataset.insertParent !== undefined) {
+      insertion = { parentSequenceId: element.dataset.insertParent, index: Number(element.dataset.insertIndex) };
+      markInsertion();
+      const moveButton = root.querySelector('[data-action="move-to-slot"]');
+      moveButton.hidden = !current.selectedNodeId;
+      (current.selectedNodeId ? moveButton : root.querySelector("[data-palette-agent]"))?.focus();
+      return;
+    }
+    if (element.dataset.paletteSelectTool !== undefined) {
+      paletteSelectedTool = paletteSelectedTool === element.dataset.paletteSelectTool
+        ? "" : element.dataset.paletteSelectTool;
+      const focusedTool = element.dataset.paletteSelectTool;
+      refreshToolPalette();
+      [...root.querySelectorAll("[data-palette-select-tool]")]
+        .find((button) => button.dataset.paletteSelectTool === focusedTool)?.focus();
+      return;
+    }
+    if (element.dataset.paletteAddTool !== undefined)
+      void addPaletteStep({ kind: "tool", id: element.dataset.paletteAddTool });
+    if (element.dataset.paletteAgent !== undefined) void addPaletteStep({ kind: "agent", id: element.dataset.paletteAgent });
+  });
+  root.addEventListener("wheel", (event) => {
+    const viewport = event.target.closest("[data-camera-viewport]");
+    if (!viewport || !root.contains(viewport) || event.shiftKey ||
+        event.target.closest(".automation-inline-inspector-frame")) return;
+    if (camera.wheel(event)) event.preventDefault();
+  }, { passive: false });
+  root.addEventListener("keydown", (event) => {
+    const tab = event.target.closest("[data-automation-library-tab]");
+    if (tab) {
+      const next = automationLibraryTabForKey(event.key, tab.dataset.automationLibraryTab === "studio" ? 0 : 1);
+      if (next) { event.preventDefault(); void selectLibraryTab(next, true); }
+      return;
+    }
+    if (!event.target.closest("[data-camera-viewport]")) return;
+    if (["input", "textarea", "select"].some((tag) => event.target.closest(tag))) return;
+    if (camera.keyboard(event)) event.preventDefault();
+  });
+  root.addEventListener("pointerdown", (event) => {
+    if (camera.startPan(event)) event.preventDefault();
+  });
+  root.addEventListener("pointermove", (event) => {
+    if (camera.movePan(event)) event.preventDefault();
+  });
+  root.addEventListener("pointerup", (event) => camera.endPan(event));
+  root.addEventListener("pointercancel", (event) => camera.endPan(event));
+  root.addEventListener("dragstart", (event) => {
+    const item = event.target.closest("[data-palette-tool], [data-palette-agent], [data-automation-node][draggable]");
+    if (!item) return;
+    const target = item.dataset.automationNode !== undefined
+      ? { kind: "existing", id: item.dataset.automationNode }
+      : item.dataset.paletteTool !== undefined
+      ? { kind: "tool", id: item.dataset.paletteTool }
+      : { kind: "agent", id: item.dataset.paletteAgent };
+    event.dataTransfer?.setData(DRAG_TYPE, JSON.stringify(target));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy";
+  });
+  root.addEventListener("dragover", (event) => {
+    const target = event.target.closest("[data-insert-parent]");
+    if (!target || !event.dataTransfer?.types.includes(DRAG_TYPE)) return;
+    event.preventDefault();
+    target.dataset.dragOver = "true";
+  });
+  root.addEventListener("dragleave", (event) => {
+    event.target.closest("[data-insert-parent]")?.removeAttribute("data-drag-over");
+  });
+  root.addEventListener("drop", (event) => {
+    const target = event.target.closest("[data-insert-parent]");
+    if (!target) return;
+    event.preventDefault();
+    target.removeAttribute("data-drag-over");
+    try {
+      const payload = JSON.parse(event.dataTransfer?.getData(DRAG_TYPE) || "null");
+      const location = { parentSequenceId: target.dataset.insertParent, index: Number(target.dataset.insertIndex) };
+      if (payload?.kind === "existing" && payload.id) {
+        if (requireSavedGraph()) void actions.mutateDraft({ kind: "move_node", nodeId: payload.id, ...location });
+      } else void addPaletteStep(payload, location);
+    } catch { notify("This step cannot be added here."); }
+  });
+
+  render(current);
+  return { render, prepareLeave, isDirty };
+}