@abot-ai/runtime 1.4.0 → 1.6.0

package/dist/src/web-ui/app/components/automations/step-editor-dialog.js

@@ -0,0 +1,243 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { listAvailableAutomationProducers } from "../../lib/automation-binding-producers.js";
+import { findAutomationNode } from "./timeline.js";
+import { workflowSteps } from "./run-steps-view.js";
+import { renderAutomationToolIdentity } from "./tool-identity.js";
+import { operationIdentity, readAutomationNodePatch, renderAutomationNodeInspector,
+  renderAutomationToolInputs, updateAgentToolPicker } from "./node-inspector.js";
+import { changeAutomationBindingKind, handleAutomationBindingClick,
+  refreshAutomationInputNotice } from "./binding-editor.js";
+
+function dialogMarkup(node, catalog, producers, steps) {
+  const index = steps.findIndex((step) => step.id === node.id);
+  return `<div class="automation-step-dialog-heading"><div><p>${node.kind === "agent" ? "Agent" : "Tool"} step</p>
+    <h2 id="automation-step-dialog-title" dir="auto">${escapeHtml(node.title || "Edit step")}</h2>
+    ${node.kind === "tool" ? `<div data-step-tool-identity>${renderAutomationToolIdentity(node.operation, catalog, { showPlugin: true })}</div>` : ""}</div>
+    <div class="automation-step-dialog-navigation" role="group" aria-label="Navigate workflow steps">
+      <button type="button" data-step-direction="-1" aria-label="Previous step" title="Previous step"${index <= 0 ? " disabled" : ""}><span aria-hidden="true">←</span></button>
+      <span class="automation-step-position" aria-live="polite" aria-label="Step ${index + 1} of ${steps.length}">${index + 1} / ${steps.length}</span>
+      <button type="button" data-step-direction="1" aria-label="Next step" title="Next step"${index >= steps.length - 1 ? " disabled" : ""}><span aria-hidden="true">→</span></button>
+      <button type="button" class="automation-text-button" data-step-close aria-label="Close step editor">Close</button></div></div>
+    <p class="automation-step-dialog-feedback" role="status" aria-live="polite"></p>
+    <section class="automation-step-discard" data-step-discard hidden aria-label="Unsaved step changes">
+      <p>Save your changes before closing?</p><div class="automation-actions">
+      <button type="button" data-step-save data-step-guard-save>Save changes</button><button type="button" data-step-discard-confirm>Discard</button>
+      <button type="button" data-step-keep>Keep editing</button></div></section>
+    <div class="automation-step-dialog-content automation-inspector">${renderAutomationNodeInspector(node, catalog, null, producers, { dialog: true })}</div>
+    <div class="automation-step-dialog-footer"><span>Changes are saved to the draft. Publishing is separate.</span>
+      <div class="automation-actions"><button type="button" data-step-close>Cancel</button>
+      <button type="button" class="automation-primary" data-step-save>Save step</button></div></div>`;
+}
+
+/** Own the editable DOM outside the live timeline; refreshes never replace it. */
+export function createAutomationStepEditorDialog({ root, actions, documentRoot, onAction }) {
+  let active = null;
+
+  function sameContext(entry, snapshot = actions.snapshot()) {
+    return snapshot.selectedAutomationId === entry.automationId && !snapshot.selectedRunId &&
+      snapshot.selectedNodeId === entry.node.id &&
+      (actions.navigationRevision?.() || 0) === entry.navigationRevision;
+  }
+
+  function feedback(entry, message) {
+    entry.dialog.querySelector(".automation-step-dialog-feedback").textContent = message;
+  }
+
+  function close() {
+    const entry = active;
+    if (!entry) return;
+    active = null;
+    entry.dialog.close();
+    entry.dialog.remove();
+    const trigger = root.contains(entry.trigger) ? entry.trigger :
+      [...root.querySelectorAll("[data-automation-node]")].find((item) => item.dataset.automationNode === entry.node.id);
+    trigger?.focus({ preventScroll: true });
+  }
+
+  function requestClose() {
+    return requestTransition(null);
+  }
+
+  function requestTransition(target) {
+    const entry = active;
+    if (!entry) return true;
+    if (entry.saving) return false;
+    if (!entry.dirty) return finishTransition(entry, target);
+    entry.pending = target;
+    const guard = entry.dialog.querySelector("[data-step-discard]");
+    guard.hidden = false;
+    guard.querySelector("p").textContent = target ? "Save your changes before moving to another step?" : "Save your changes before closing?";
+    guard.querySelector("[data-step-guard-save]").textContent = target ? "Save & continue" : "Save changes";
+    guard.querySelector("[data-step-discard-confirm]").textContent = target ? "Discard & continue" : "Discard";
+    guard.querySelector("[data-step-keep]").focus({ preventScroll: true });
+    return false;
+  }
+
+  function makeEntry(snapshot, node, dialog, trigger) {
+    return { dialog, trigger, node, catalog: snapshot.catalog || {},
+      producers: listAvailableAutomationProducers(snapshot.draft.definition.body, node.id),
+      automationId: snapshot.selectedAutomationId, revision: snapshot.draft.revision,
+      navigationRevision: actions.navigationRevision?.() || 0, dirty: false, saving: false, pending: null };
+  }
+
+  function finishTransition(entry, target) {
+    if (!target) { close(); return true; }
+    const snapshot = actions.snapshot();
+    const steps = workflowSteps(snapshot.draft?.definition?.body);
+    const node = steps.find((step) => step.id === target.nodeId);
+    if (!sameContext(entry, snapshot) || snapshot.draft?.revision !== entry.revision || !node) {
+      feedback(entry, "The draft changed. Keep your changes here, or close and reopen before moving to another step.");
+      return false;
+    }
+    const next = makeEntry(snapshot, node, entry.dialog, null);
+    active = next;
+    actions.selectNode(node.id);
+    if (active !== next) return false;
+    entry.dialog.innerHTML = dialogMarkup(node, next.catalog, next.producers, steps);
+    entry.dialog.querySelector(".automation-step-dialog-content").scrollTop = 0;
+    const arrow = entry.dialog.querySelector(`[data-step-direction="${target.direction}"]`);
+    (arrow?.disabled ? entry.dialog.querySelector('[name="title"]') : arrow)?.focus({ preventScroll: true });
+    return true;
+  }
+
+  function requestStep(direction) {
+    const entry = active, snapshot = actions.snapshot();
+    if (!entry || entry.saving) return;
+    if (!sameContext(entry, snapshot) || snapshot.draft?.revision !== entry.revision) {
+      feedback(entry, "The draft changed. Close and reopen this step before navigating.");
+      return;
+    }
+    const steps = workflowSteps(snapshot.draft?.definition?.body);
+    const index = steps.findIndex((step) => step.id === entry.node.id);
+    const next = steps[index + direction];
+    if (index < 0 || !next) return;
+    requestTransition({ nodeId: next.id, direction });
+  }
+
+  function setSaving(entry, saving) {
+    entry.saving = saving;
+    entry.dialog.querySelector("form").inert = saving;
+    const steps = workflowSteps(actions.snapshot().draft?.definition?.body);
+    const index = steps.findIndex((node) => node.id === entry.node.id);
+    for (const button of entry.dialog.querySelectorAll("button")) {
+      const unavailableDirection = button.hasAttribute("data-step-direction") &&
+        (index < 0 || !steps[index + Number(button.dataset.stepDirection)]);
+      button.disabled = saving || unavailableDirection;
+    }
+    entry.dialog.setAttribute("aria-busy", String(saving));
+  }
+
+  async function save() {
+    const entry = active;
+    if (!entry || entry.saving) return false;
+    const snapshot = actions.snapshot();
+    if (!sameContext(entry, snapshot)) { close(); return false; }
+    if (snapshot.draft?.revision !== entry.revision) {
+      feedback(entry, "The draft changed while you were editing. Copy your changes, then close and reopen this step before saving.");
+      return false;
+    }
+    const form = entry.dialog.querySelector("form");
+    if (!form.reportValidity()) return false;
+    try {
+      const patch = readAutomationNodePatch(form, entry.node, entry.catalog);
+      setSaving(entry, true);
+      const saved = await actions.saveNode(entry.node.id, patch);
+      if (active !== entry || !sameContext(entry)) return false;
+      if (saved) {
+        entry.dirty = false;
+        entry.revision = actions.snapshot().draft?.revision;
+        setSaving(entry, false);
+        return finishTransition(entry, entry.pending);
+      }
+      feedback(entry, actions.snapshot().error || "The step could not be saved. Your changes are still here.");
+    } catch (error) {
+      if (active === entry) feedback(entry, error.message || "The step could not be saved.");
+    } finally {
+      if (active === entry) setSaving(entry, false);
+    }
+    return false;
+  }
+
+  function updateFields(entry, event) {
+    const target = event.target;
+    const form = entry.dialog.querySelector("form");
+    if (target.matches("[data-agent-tool-search]")) { updateAgentToolPicker(form); return; }
+    if (!form.contains(target) || entry.saving) return;
+    entry.dirty = true;
+    if (target.matches("[data-agent-tool]")) updateAgentToolPicker(form);
+    if (event.type === "change" && target.matches('[name="toolOperation"]')) {
+      const operations = entry.catalog?.grantableOperations || entry.catalog?.operations || [];
+      const operation = operations.find((item) => operationIdentity(item) === target.value);
+      form.querySelector("[data-automation-tool-inputs]").innerHTML =
+        renderAutomationToolInputs(operation, {}, undefined, entry.producers);
+      entry.dialog.querySelector("[data-step-tool-identity]").innerHTML = renderAutomationToolIdentity(
+        operation || { ...entry.node.operation, operationId: "" }, entry.catalog, { showPlugin: true });
+    }
+    if (event.type === "change" && target.matches("[data-binding-kind]"))
+      changeAutomationBindingKind(target, entry.producers, documentRoot);
+    refreshAutomationInputNotice(form);
+  }
+
+  async function command(entry, element) {
+    if (entry.saving) return;
+    if (element.hasAttribute("data-step-direction")) { requestStep(Number(element.dataset.stepDirection)); return; }
+    if (element.hasAttribute("data-step-close")) { requestClose(); return; }
+    if (element.hasAttribute("data-step-save")) { await save(); return; }
+    if (element.hasAttribute("data-step-discard-confirm")) { finishTransition(entry, entry.pending); return; }
+    if (element.hasAttribute("data-step-keep")) {
+      entry.dialog.querySelector("[data-step-discard]").hidden = true;
+      entry.pending = null;
+      entry.dialog.querySelector('[name="title"]').focus();
+      return;
+    }
+    if (handleAutomationBindingClick(element, entry.producers, documentRoot)) { entry.dirty = true; return; }
+    if (!element.dataset.action) return;
+    if (entry.dirty) { feedback(entry, "Save the step before changing its position or saving an agent template."); return; }
+    if (!sameContext(entry) || actions.snapshot().draft?.revision !== entry.revision) {
+      feedback(entry, "The draft changed. Close and reopen this step to continue.");
+      return;
+    }
+    await onAction(element.dataset.action);
+    if (active !== entry) return;
+    if (actions.snapshot().draft?.revision !== entry.revision) { close(); return; }
+    feedback(entry, actions.snapshot().error || actions.snapshot().feedback || "");
+  }
+
+  function open(trigger) {
+    if (active) { active.dialog.querySelector('[name="title"]').focus(); return; }
+    const snapshot = actions.snapshot();
+    const node = findAutomationNode(snapshot.draft?.definition?.body, snapshot.selectedNodeId);
+    const archived = snapshot.draft?.archivedAt || snapshot.automations?.some((item) =>
+      item.id === snapshot.selectedAutomationId && item.status === "archived");
+    if (!node || !["agent", "tool"].includes(node.kind) || snapshot.selectedRunId || archived) return;
+    const dialog = documentRoot.createElement("dialog");
+    dialog.className = "automation-step-dialog";
+    dialog.setAttribute("aria-labelledby", "automation-step-dialog-title");
+    const entry = makeEntry(snapshot, node, dialog, trigger);
+    dialog.innerHTML = dialogMarkup(node, entry.catalog, entry.producers, workflowSteps(snapshot.draft.definition.body));
+    active = entry;
+    dialog.addEventListener("cancel", (event) => { event.preventDefault(); requestClose(); });
+    dialog.addEventListener("input", (event) => { if (active?.dialog === dialog) updateFields(active, event); });
+    dialog.addEventListener("change", (event) => { if (active?.dialog === dialog) updateFields(active, event); });
+    dialog.addEventListener("click", (event) => {
+      const element = event.target.closest("button");
+      if (element && dialog.contains(element) && active?.dialog === dialog) void command(active, element);
+    });
+    dialog.addEventListener("submit", (event) => { event.preventDefault(); void save(); });
+    documentRoot.body.append(dialog);
+    dialog.showModal();
+    dialog.querySelector('[name="title"]').focus({ preventScroll: true });
+  }
+
+  function sync(snapshot) {
+    if (!active) return;
+    if (!sameContext(active, snapshot) || !findAutomationNode(snapshot.draft?.definition?.body, active.node.id)) {
+      close();
+      return;
+    }
+    if (!active.saving && snapshot.draft.revision !== active.revision)
+      feedback(active, "The draft changed while you were editing. Your unsaved changes are preserved here; close and reopen before saving.");
+  }
+
+  return { open, sync, prepareLeave: requestClose, isDirty: () => Boolean(active?.dirty), isOpen: () => Boolean(active) };
+}

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

@@ -0,0 +1,48 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { automationCatalogOperation, renderAutomationToolIdentity } from "./tool-identity.js";
+
+function compact(value, limit = 180) {
+  const text = String(value ?? "").replace(/\s+/gu, " ").trim();
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+function sourceLabel(binding, producers) {
+  if (!binding) return "Not configured";
+  const producer = producers.find((item) => item.id === (binding.nodeId || binding.parallelNodeId));
+  if (binding.kind === "node_result")
+    return `${producer?.title || "Unavailable step"} · ${binding.select === "data" ? "data" : "text"}${binding.pointer ? ` · ${binding.pointer}` : ""}`;
+  if (binding.kind === "branch_results") return `${producer?.title || "Parallel group"} · all branch results`;
+  if (binding.kind === "run_input") return `Run input · ${binding.input}`;
+  if (binding.kind === "run_file") return `New file each run · ${binding.fileName}`;
+  if (binding.kind === "source_files") return "All input files";
+  if (binding.kind === "source_file") return `Input file ${Number(binding.index || 0) + 1}`;
+  if (binding.kind === "literal")
+    return compact(typeof binding.value === "string" ? binding.value : JSON.stringify(binding.value), 90) || "Empty value";
+  return "Not configured";
+}
+
+function inputPreview(node, producers) {
+  const entries = Object.entries(node.kind === "agent" ? node.inputs || {} : node.controls || {});
+  if (node.kind === "tool" && node.payload) entries.push(["Payload", node.payload]);
+  if (!entries.length) return `<p class="automation-muted">No inputs configured.</p>`;
+  return `<dl class="automation-step-preview-inputs">${entries.slice(0, 3).map(([name, binding]) =>
+    `<dt dir="auto">${escapeHtml(name)}</dt><dd dir="auto">${escapeHtml(sourceLabel(binding, producers))}</dd>`).join("")}</dl>
+    ${entries.length > 3 ? `<p class="automation-muted">+${entries.length - 3} more inputs in the editor</p>` : ""}`;
+}
+
+export function renderAutomationStepPreview(node, catalog, producers = []) {
+  if (!node || !["agent", "tool"].includes(node.kind)) return "";
+  const operation = node.kind === "tool" ? automationCatalogOperation(node.operation, catalog) : null;
+  const description = node.kind === "agent" ? node.prompt || "Add instructions for this agent." : operation?.toolDescription;
+  const output = node.kind === "agent" ? node.result?.kind === "json" ? "Structured JSON" : "Text" : "Tool result";
+  const checks = node.acceptance?.length || 0;
+  return `<section class="automation-inspector automation-inline-inspector automation-step-preview" id="automation-step-settings" aria-labelledby="automation-step-preview-title">
+    <div class="automation-inline-inspector-heading"><h4 id="automation-step-preview-title">Step preview</h4><button type="button" class="automation-text-button" data-select-node="" aria-label="Close step preview">Close</button></div>
+    ${node.kind === "tool" ? renderAutomationToolIdentity(node.operation, catalog, { showPlugin: true }) : ""}
+    ${description ? `<p class="automation-step-preview-description" dir="auto">${escapeHtml(compact(description))}</p>` : ""}
+    <h5>Inputs</h5>${inputPreview(node, producers)}
+    <div class="automation-step-preview-output"><strong>Output</strong><span>${escapeHtml(output)}${checks ? ` · ${checks} acceptance check${checks === 1 ? "" : "s"}` : ""}</span></div>
+    ${node.kind === "agent" ? `<p class="automation-muted">${node.tools?.length || 0} tool operations available</p>` : ""}
+    <button type="button" class="automation-primary automation-step-edit-button" data-action="edit-step" aria-haspopup="dialog">Edit step</button>
+  </section>`;
+}

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

@@ -0,0 +1,74 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { toolDisplayName } from "./editor.js";
+
+function isAdvancedTemplate(template) {
+  return template.level === "advanced";
+}
+
+function templateTextItems(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item) => typeof item === "string" && item.trim());
+}
+
+function templateCountLabel(value, singular, plural = `${singular}s`) {
+  if (!Number.isInteger(value) || value < 0) return "";
+  return `${value} ${value === 1 ? singular : plural}`;
+}
+
+function renderTemplateFacts(template) {
+  const counts = [templateCountLabel(template.stepCount, "step"),
+    templateCountLabel(template.agentCount, "agent")];
+  if (template.parallelGroupCount > 0) {
+    counts.push(templateCountLabel(template.parallelGroupCount, "parallel group"));
+  }
+  return counts.filter(Boolean).map((label) => `<span>${escapeHtml(label)}</span>`).join("");
+}
+
+function renderTemplateDetails(label, items, className) {
+  if (!items.length) return "";
+  return `<span class="automation-template-detail ${className}">
+    <span class="automation-template-detail-label">${label}</span>
+    ${items.map((item) => `<span class="automation-template-detail-item">${escapeHtml(item)}</span>`).join("")}
+  </span>`;
+}
+
+function renderTemplateCard(template) {
+  return `<button type="button" class="automation-template-card${isAdvancedTemplate(template) ? " automation-template-card-advanced" : ""}" data-template-id="${escapeHtml(template.id)}" aria-label="Use ${escapeHtml(template.title)} template">
+    <span class="automation-template-meta">${escapeHtml(template.category)}</span>
+    <strong>${escapeHtml(template.title)}</strong>
+    <span class="automation-template-description">${escapeHtml(template.description)}</span>
+    <span class="automation-template-facts">${renderTemplateFacts(template)}</span>
+    ${renderTemplateDetails("What you'll explore", templateTextItems(template.highlights), "automation-template-learning")}
+    ${renderTemplateDetails("Saved outputs", templateTextItems(template.outputFiles), "automation-template-outputs")}
+    ${template.setup ? `<span class="automation-template-setup"><span class="automation-template-detail-label">Before running</span>${escapeHtml(template.setup)}</span>` : ""}
+    <span class="automation-template-tools">${templateTextItems(template.toolNames).map((name) => escapeHtml(toolDisplayName(name))).join(" · ")}</span>
+    <span class="automation-template-action">Use template <span aria-hidden="true">→</span></span>
+  </button>`;
+}
+
+function renderTemplateSection(templates, level, title, description) {
+  if (!templates.length) return "";
+  return `<section class="automation-template-section" aria-labelledby="automation-templates-${level}-title">
+    <div class="automation-template-section-heading"><h5 id="automation-templates-${level}-title">${title}</h5><p>${description}</p></div>
+    <div class="automation-template-grid automation-template-grid-${level}">${templates.map(renderTemplateCard).join("")}</div>
+  </section>`;
+}
+
+export function renderAutomationTemplateGallery(snapshot) {
+  const templates = Array.isArray(snapshot.templateCatalog?.templates)
+    ? snapshot.templateCatalog.templates : [];
+  const advanced = templates.filter(isAdvancedTemplate);
+  const starters = templates.filter((template) => !isAdvancedTemplate(template));
+  const emptyMessage = snapshot.templateCatalogError || (!snapshot.templateCatalog
+    ? "Finding templates for your available tools…"
+    : "No templates match the tools currently available in this environment.");
+  return `<section class="automation-templates" aria-labelledby="automation-templates-title">
+    <div class="automation-template-heading"><div><span class="automation-kicker">BUILD AND LEARN</span>
+      <h4 id="automation-templates-title">Start from a template</h4>
+      <p>Only templates supported by your current tools appear here. Each opens an editable draft; review its inputs, model, and permissions before publishing.</p></div>
+      ${templates.length ? `<span class="automation-template-count">${templates.length} available</span>` : ""}</div>
+    ${renderTemplateSection(advanced, "advanced", "Explore complete workflows", "Follow multiple agents, parallel branches, and saved results through a complete workflow.")}
+    ${renderTemplateSection(starters, "starter", "Start small", "Learn one pattern at a time, then adapt it to your own automation.")}
+    ${templates.length ? "" : `<p class="automation-template-empty">${escapeHtml(emptyMessage)}</p>`}
+  </section>`;
+}

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

@@ -0,0 +1,219 @@
+const MIN_ZOOM = 0.65;
+const MAX_ZOOM = 2;
+const WHEEL_SENSITIVITY = 0.0015;
+const KEYBOARD_ZOOM_STEP = 1.2;
+const PAN_BLOCKED_SELECTORS = [
+  "button", "input", "textarea", "select", "option", "label", "a", "summary",
+  "[draggable]", "[contenteditable]", ".automation-inline-inspector-frame",
+];
+
+function boundedZoom(value) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, value));
+}
+
+export function wheelZoomLevel(currentZoom, deltaY, deltaMode = 0, viewportHeight = 600) {
+  const unit = deltaMode === 1 ? 16 : deltaMode === 2 ? viewportHeight : 1;
+  const movement = Math.max(-60, Math.min(60, deltaY * unit));
+  return boundedZoom(currentZoom * Math.exp(-movement * WHEEL_SENSITIVITY));
+}
+
+export function canPanFromCanvasTarget(target) {
+  return !PAN_BLOCKED_SELECTORS.some((selector) => target.closest(selector));
+}
+
+export function createAutomationTimelineCamera(root, { isEditing } = {}) {
+  let zoom = 1;
+  let scrollLeft = 0;
+  let scrollTop = 0;
+  let sceneWidth = 800;
+  let hasPosition = false;
+  const branchScroll = new Map();
+  let pan = null;
+
+  function elements() {
+    return {
+      viewport: root.querySelector("[data-camera-viewport]"),
+      scene: root.querySelector("[data-camera-scene]"),
+    };
+  }
+
+  function hasOpenStepEditor() {
+    if (isEditing) return isEditing();
+    return Boolean(root.querySelector(".automation-inline-inspector-frame"));
+  }
+
+  function updateLevel() {
+    const label = root.querySelector("[data-camera-level]");
+    if (label) label.textContent = `${Math.round(zoom * 100)}%`;
+  }
+
+  function setSceneZoom(scene) {
+    scene.setAttribute("style", `width:${sceneWidth}px;zoom:${zoom}`);
+    updateLevel();
+  }
+
+  function capture() {
+    const { viewport } = elements();
+    if (!viewport) return;
+    scrollLeft = viewport.scrollLeft || 0;
+    scrollTop = viewport.scrollTop || 0;
+    hasPosition = true;
+    branchScroll.clear();
+    for (const branch of root.querySelectorAll("[data-branches-for]"))
+      branchScroll.set(branch.dataset.branchesFor, { left: branch.scrollLeft || 0, top: branch.scrollTop || 0 });
+  }
+
+  function restore() {
+    const { viewport, scene } = elements();
+    if (!viewport || !scene) return;
+    const fittedWidth = Math.min(800, viewport.clientWidth || viewport.getBoundingClientRect?.().width || 800);
+    const nextWidth = Math.max(Number(scene.dataset.sceneMinWidth) || 0, fittedWidth);
+    if (hasPosition) scrollLeft = Math.max(0, scrollLeft + (nextWidth - sceneWidth) * zoom / 2);
+    sceneWidth = nextWidth;
+    setSceneZoom(scene);
+    if (!hasPosition) scrollLeft = Math.max(0, (sceneWidth * zoom - viewport.clientWidth) / 2);
+    viewport.scrollLeft = scrollLeft;
+    viewport.scrollTop = scrollTop;
+    hasPosition = true;
+    for (const branch of root.querySelectorAll("[data-branches-for]")) {
+      const position = branchScroll.get(branch.dataset.branchesFor);
+      if (!position) continue;
+      branch.scrollLeft = position.left;
+      branch.scrollTop = position.top;
+    }
+  }
+
+  function revealNode(nodeId) {
+    const { viewport } = elements();
+    if (!viewport || !nodeId) return;
+    const node = [...root.querySelectorAll("[data-automation-node]")]
+      .find((candidate) => candidate.dataset.automationNode === nodeId);
+    const item = node?.closest("[data-graph-item]");
+    if (!item?.getBoundingClientRect) return;
+    for (let parent = item.parentElement; parent && viewport.contains(parent); parent = parent.parentElement) {
+      if (parent !== viewport && !parent.matches("[data-branches-for]")) continue;
+      const bounds = parent.getBoundingClientRect();
+      const itemBounds = item.getBoundingClientRect();
+      const scale = bounds.width / (parent.clientWidth || bounds.width || 1);
+      const margin = Math.min(8, Math.max(0, (bounds.width - itemBounds.width) / 2));
+      const visibleLeft = bounds.left + margin;
+      const visibleRight = bounds.right - margin;
+      let movement = 0;
+      if (itemBounds.width > visibleRight - visibleLeft) movement = itemBounds.left - bounds.left;
+      else if (itemBounds.left < visibleLeft) movement = itemBounds.left - visibleLeft;
+      else if (itemBounds.right > visibleRight) movement = itemBounds.right - visibleRight;
+      if (movement) parent.scrollLeft += movement / scale;
+    }
+    capture();
+  }
+
+  function resetState() {
+    pan = null;
+    zoom = 1;
+    scrollLeft = 0;
+    scrollTop = 0;
+    hasPosition = false;
+    branchScroll.clear();
+  }
+
+  function zoomAt(nextZoom, clientX, clientY) {
+    const { viewport, scene } = elements();
+    if (!viewport || !scene) return false;
+    const bounded = boundedZoom(nextZoom);
+    if (Math.abs(bounded - zoom) < 0.001) return false;
+    if (hasOpenStepEditor()) return false;
+    const bounds = viewport.getBoundingClientRect();
+    const pointerX = Math.max(0, Math.min(clientX - bounds.left, viewport.clientWidth || bounds.width));
+    const pointerY = Math.max(0, Math.min(clientY - bounds.top, viewport.clientHeight || bounds.height));
+    const worldX = ((viewport.scrollLeft || 0) + pointerX) / zoom;
+    const worldY = ((viewport.scrollTop || 0) + pointerY) / zoom;
+    zoom = bounded;
+    setSceneZoom(scene);
+    viewport.scrollLeft = Math.max(0, worldX * zoom - pointerX);
+    viewport.scrollTop = Math.max(0, worldY * zoom - pointerY);
+    capture();
+    return true;
+  }
+
+  function wheel(event) {
+    const { viewport } = elements();
+    if (!viewport || !Number.isFinite(event.deltaY) || event.deltaY === 0) return false;
+    const height = viewport.clientHeight || viewport.getBoundingClientRect().height;
+    return zoomAt(wheelZoomLevel(zoom, event.deltaY, event.deltaMode, height), event.clientX, event.clientY);
+  }
+
+  function zoomBy(factor) {
+    const { viewport } = elements();
+    if (!viewport) return false;
+    const bounds = viewport.getBoundingClientRect();
+    return zoomAt(zoom * factor, bounds.left + bounds.width / 2, bounds.top + bounds.height / 2);
+  }
+
+  function reset() {
+    const { viewport, scene } = elements();
+    if (!viewport || !scene) return false;
+    if (hasOpenStepEditor()) return false;
+    zoom = 1;
+    setSceneZoom(scene);
+    viewport.scrollLeft = 0;
+    viewport.scrollTop = 0;
+    for (const branch of root.querySelectorAll("[data-branches-for]")) {
+      branch.scrollLeft = 0;
+      branch.scrollTop = 0;
+    }
+    capture();
+    return true;
+  }
+
+  function keyboard(event) {
+    if (["+", "="].includes(event.key)) return zoomBy(KEYBOARD_ZOOM_STEP);
+    if (event.key === "-") return zoomBy(1 / KEYBOARD_ZOOM_STEP);
+    if (event.key === "0") return reset();
+    return false;
+  }
+
+  function scrollableAncestor(target, viewport, axis) {
+    for (let current = target; current && viewport.contains(current); current = current.parentElement) {
+      if (current === viewport) return viewport;
+      if (!current.matches("[data-branches-for]")) continue;
+      const overflow = axis === "x"
+        ? current.scrollWidth - current.clientWidth
+        : current.scrollHeight - current.clientHeight;
+      if (overflow > 1) return current;
+    }
+    return viewport;
+  }
+
+  function startPan(event) {
+    const { viewport } = elements();
+    if (!viewport?.contains(event.target) || !canPanFromCanvasTarget(event.target)) return false;
+    if (event.pointerType === "touch" || (event.button !== undefined && event.button !== 0)) return false;
+    const xTarget = scrollableAncestor(event.target, viewport, "x");
+    const yTarget = scrollableAncestor(event.target, viewport, "y");
+    pan = { pointerId: event.pointerId, x: event.clientX, y: event.clientY,
+      xTarget, yTarget, left: xTarget.scrollLeft || 0, top: yTarget.scrollTop || 0 };
+    viewport.focus?.({ preventScroll: true });
+    viewport.setPointerCapture?.(event.pointerId);
+    viewport.dataset.panning = "true";
+    return true;
+  }
+
+  function movePan(event) {
+    if (!pan || event.pointerId !== pan.pointerId) return false;
+    pan.xTarget.scrollLeft = pan.left - (event.clientX - pan.x);
+    pan.yTarget.scrollTop = pan.top - (event.clientY - pan.y);
+    capture();
+    return true;
+  }
+
+  function endPan(event) {
+    if (!pan || event.pointerId !== pan.pointerId) return false;
+    const { viewport } = elements();
+    if (viewport?.hasPointerCapture?.(event.pointerId)) viewport.releasePointerCapture(event.pointerId);
+    viewport?.removeAttribute("data-panning");
+    pan = null;
+    return true;
+  }
+
+  return { capture, restore, revealNode, resetState, wheel, keyboard, reset, startPan, movePan, endPan };
+}