@abot-ai/runtime 1.4.0 → 1.6.0

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

@@ -0,0 +1,166 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { readSchemaLiteralValue, renderSchemaLiteralInput, schemaFieldName,
+  schemaLiteralHint } from "./schema-literal-inputs.js";
+
+function bindingText(binding) {
+  if (!binding) return "";
+  if (binding.kind === "literal")
+    return typeof binding.value === "string" ? binding.value : JSON.stringify(binding.value ?? "");
+  if (binding.kind === "run_input") return binding.input || "";
+  if (binding.kind === "run_file") return binding.fileName || "";
+  if (binding.kind === "source_file") return String(binding.index ?? 0);
+  if (binding.kind === "node_result") return binding.nodeId || "";
+  if (binding.kind === "branch_results") return binding.parallelNodeId || "";
+  return "";
+}
+
+function bindingKindOptions(selected, toolInput, optional) {
+  const options = [
+    ["literal", toolInput ? "Enter a value" : "Literal"], ["run_input", "Run input"],
+    ["run_file", "New file for this run"],
+    ["source_files", "Input files"], ["source_file", "One input file"],
+    ["node_result", "Earlier step"], ["branch_results", "Parallel results"],
+  ];
+  if (optional) options.unshift(["unset", "Not set"]);
+  return options.filter(([kind]) => !toolInput || !["source_files", "branch_results"].includes(kind) || selected === kind)
+    .map(([kind, label]) => `<option value="${kind}"${selected === kind ? " selected" : ""}>${label}${toolInput && ["source_files", "branch_results"].includes(kind) ? " · unavailable for tool inputs" : ""}</option>`).join("");
+}
+
+function renderEarlierStepChoice(binding, producers) {
+  const selectedId = binding?.nodeId || "";
+  const steps = producers.filter((producer) => producer.kind === "agent" || producer.kind === "tool");
+  const isAvailable = steps.some((producer) => producer.id === selectedId);
+  const options = steps.map((producer) => `<option value="${escapeHtml(producer.id)}"${producer.id === selectedId ? " selected" : ""}>${escapeHtml(producer.title || (producer.kind === "agent" ? "Agent step" : "Tool step"))} · ${escapeHtml(producer.id)}</option>`).join("");
+  const missing = selectedId && !isAvailable
+    ? `<option value="${escapeHtml(selectedId)}" selected>Unavailable step · ${escapeHtml(selectedId)}</option>` : "";
+  return `<label>Step<select data-binding-value aria-label="Source step"><option value=""${!selectedId ? " selected" : ""}>Choose an earlier step</option>${options}${missing}</select></label>
+    ${missing ? `<span class="automation-node-error">This step is no longer available before the current step.</span>` : ""}`;
+}
+
+function renderParallelGroupChoice(binding, producers) {
+  const selectedId = binding?.parallelNodeId || "";
+  const groups = producers.filter((producer) => producer.kind === "parallel");
+  const isAvailable = groups.some((group) => group.id === selectedId);
+  const options = groups.map((group) => `<option value="${escapeHtml(group.id)}"${group.id === selectedId ? " selected" : ""}>${escapeHtml(group.title)} · ${escapeHtml(group.id)}</option>`).join("");
+  const missing = selectedId && !isAvailable
+    ? `<option value="${escapeHtml(selectedId)}" selected>Unavailable parallel group · ${escapeHtml(selectedId)}</option>` : "";
+  return `<label>Parallel group<select data-binding-value aria-label="Parallel group"><option value=""${!selectedId ? " selected" : ""}>Choose a completed parallel group</option>${options}${missing}</select></label>
+    ${missing ? `<span class="automation-node-error">This parallel group is no longer available before the current step.</span>` : ""}`;
+}
+
+function renderBindingValue(kind, binding, producers, literalOptions) {
+  if (kind === "unset") return `<small class="automation-muted">Not sent to the tool. Its default applies, if any.</small>`;
+  if (kind === "literal" && literalOptions.property)
+    return renderSchemaLiteralInput(literalOptions.property, binding?.value, literalOptions);
+  if (kind === "node_result") return renderEarlierStepChoice(binding, producers);
+  if (kind === "branch_results") return renderParallelGroupChoice(binding, producers);
+  if (kind === "source_files") return "";
+  if (kind === "run_file") return `<label>File name<input data-binding-value value="${escapeHtml(bindingText(binding))}" aria-label="File name" placeholder="result.md" maxlength="120"></label><small class="automation-muted">File name only. Each run gets its own folder inside the working directory.</small>`;
+  return `<label>Value<input data-binding-value value="${escapeHtml(bindingText(binding))}" aria-label="Binding value"></label>`;
+}
+
+export function renderBindingRow(key, binding, { removable = false, required = false, optional = false, property = null, producers = [], literalType: savedLiteralType, drafts = {}, toolInput = false, multiline = false, literalDraft } = {}) {
+  const defaultKind = optional ? "unset" : "literal";
+  const kind = binding?.kind || defaultKind;
+  const literalType = property?.type === "array" ? "json" : property?.type || savedLiteralType ||
+    (typeof binding?.value === "string" || binding?.value === undefined ? "string" : "json");
+  const typed = toolInput && property;
+  const literalOptions = { property: typed ? property : null, key, draft: literalDraft, multiline };
+  return `<div class="automation-binding-row${typed ? " automation-schema-binding" : ""}" data-binding-row data-binding-current-kind="${escapeHtml(kind)}" data-binding-schema-type="${escapeHtml(property?.type || "")}" data-binding-schema="${escapeHtml(JSON.stringify(property))}" data-binding-multiline="${multiline}" data-binding-required="${required}" data-binding-optional="${optional}" data-binding-tool-input="${toolInput}" data-binding-drafts="${escapeHtml(JSON.stringify(drafts))}">
+    ${typed ? `<div class="automation-schema-heading"><strong>${escapeHtml(schemaFieldName(key))}</strong><span class="automation-required">${required ? "Required" : "Optional"}</span><input type="hidden" data-binding-key value="${escapeHtml(key)}"><small>${escapeHtml(schemaLiteralHint(property))}</small></div>` : `<label>Field<input data-binding-key value="${escapeHtml(key)}" ${removable ? "" : "readonly"} aria-label="Binding field"></label>`}
+    <label>${typed ? "Value source" : "From"}<select data-binding-kind>${bindingKindOptions(kind, toolInput, optional)}</select></label>
+    ${renderBindingValue(kind, binding, producers, literalOptions)}
+    ${toolInput && ["source_files", "branch_results"].includes(kind) ? `<span class="automation-node-error">This saved source cannot be used by a tool input. Choose another source before saving.</span>` : ""}
+    ${property || kind !== "literal" ? `<input type="hidden" data-binding-literal-type value="${escapeHtml(literalType)}">` : `<label>Literal type<select data-binding-literal-type><option value="string"${literalType === "string" ? " selected" : ""}>Text</option><option value="number"${literalType === "number" ? " selected" : ""}>Number</option><option value="boolean"${literalType === "boolean" ? " selected" : ""}>Boolean</option><option value="json"${literalType === "json" ? " selected" : ""}>JSON</option></select></label>`}
+    ${kind === "node_result" ? `<label>Output<select data-binding-output><option value="text"${binding.select === "text" ? " selected" : ""}>Text</option><option value="data"${binding.select === "data" ? " selected" : ""}>Data</option></select></label>` : ""}
+    ${kind === "node_result" ? `<label>JSON pointer · optional<input data-binding-pointer value="${escapeHtml(binding.pointer || "")}" placeholder="/total"></label>` : ""}
+    ${kind === "source_file" ? `<label>File field<select data-binding-file-field><option value="snapshot_path">Snapshot path</option><option value="original_path"${binding.field === "original_path" ? " selected" : ""}>Original path</option><option value="version"${binding.field === "version" ? " selected" : ""}>Version</option></select></label>` : ""}
+    ${required && !typed ? `<span class="automation-required">Required</span>` : ""}
+    ${removable ? `<button type="button" data-remove-binding aria-label="Remove binding">Remove</button>` : ""}
+  </div>`;
+}
+
+export function renderBindingFields(bindings, schema = null, { name = "inputs", allowAdd = false, producers = [] } = {}) {
+  const properties = schema?.properties || {};
+  const names = schema
+    ? [...Object.keys(properties), ...Object.keys(bindings || {}).filter((key) => !(key in properties))]
+    : Object.keys(bindings || {});
+  return `<fieldset class="automation-binding-fields" data-binding-fields="${escapeHtml(name)}"><legend>${name === "controls" ? "Operation inputs" : name === "payload" ? "Raw payload" : "Step inputs"}</legend>
+    ${names.map((key) => renderBindingRow(key, bindings?.[key], {
+      removable: !schema || !(key in properties),
+      required: schema?.required?.includes(key),
+      optional: isOptionalSchemaInput(schema, key),
+      property: properties[key],
+      producers,
+      toolInput: name !== "inputs",
+      multiline: name === "payload",
+    })).join("")}
+    ${allowAdd ? `<div data-binding-actions>
+      ${producers.length ? `<label>Receive output from<select data-connect-result-source><option value="">Choose an earlier step or parallel group</option>${producers.map((producer) => `<option value="${escapeHtml(producer.id)}">${escapeHtml(producer.title || "Step")} · ${escapeHtml(producer.id)}</option>`).join("")}</select></label><button type="button" data-add-result-binding>Connect output</button>` : ""}
+      <button type="button" data-add-binding="${escapeHtml(name)}">Add input</button></div>` : ""}
+  </fieldset>`;
+}
+
+function isOptionalSchemaInput(schema, key) {
+  if (!schema?.properties) return false;
+  if (!(key in schema.properties)) return false;
+  return !schema.required?.includes(key);
+}
+
+function literalValue(row) {
+  if (row.querySelector("[data-schema-literal]")) return readSchemaLiteralValue(row);
+  const value = row.querySelector("[data-binding-value]").value;
+  const type = row.querySelector("[data-binding-literal-type]").value;
+  if (type === "boolean") {
+    if (value !== "true" && value !== "false") throw new Error("Enter true or false for the selected input.");
+    return value === "true";
+  }
+  if (type === "json") {
+    try { return JSON.parse(value); }
+    catch { throw new Error("Enter valid JSON for the selected input."); }
+  }
+  if (type === "number" || type === "integer") {
+    if (!value.trim()) throw new Error("Enter a valid number for the selected input.");
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) throw new Error("Enter a valid number for the selected input.");
+    if (type === "integer" && !Number.isInteger(numeric)) throw new Error("Enter a whole number for the selected input.");
+    return numeric;
+  }
+  return value;
+}
+
+function readBinding(row) {
+  const kind = row.querySelector("[data-binding-kind]").value;
+  const value = row.querySelector("[data-binding-value]")?.value.trim() || "";
+  if (kind === "literal") return { kind, value: literalValue(row) };
+  if (kind === "run_input") return { kind, input: value };
+  if (kind === "run_file") return { kind, fileName: value };
+  if (kind === "source_files") return { kind };
+  if (kind === "source_file") {
+    const index = Number(value);
+    if (!Number.isInteger(index) || index < 0) throw new Error("Choose a valid input-file index.");
+    return { kind, index, field: row.querySelector("[data-binding-file-field]")?.value || "snapshot_path" };
+  }
+  if (kind === "node_result") {
+    const pointer = row.querySelector("[data-binding-pointer]")?.value.trim();
+    return { kind, nodeId: value, select: row.querySelector("[data-binding-output]")?.value || "text", ...(pointer ? { pointer } : {}) };
+  }
+  return { kind: "branch_results", parallelNodeId: value };
+}
+
+export function readBindingFields(form, name) {
+  const fieldset = form.querySelector(`[data-binding-fields="${name}"]`);
+  if (!fieldset) return {};
+  const result = {};
+  for (const row of fieldset.querySelectorAll("[data-binding-row]")) {
+    if (hasUnsetBinding(row)) continue;
+    const key = row.querySelector("[data-binding-key]").value.trim();
+    if (!key) continue;
+    result[key] = readBinding(row);
+  }
+  return result;
+}
+
+function hasUnsetBinding(row) {
+  return row.querySelector("[data-binding-kind]").value === "unset";
+}

package/dist/src/web-ui/app/components/automations/chat-run-projection.js

@@ -0,0 +1,280 @@
+import { createEventRefresh } from "../../lib/event-refresh.js";
+import { createAutomationLiveView } from "./live-view.js";
+import { renderAutomationRun } from "./run.js";
+import { focusSelectedAutomationStep } from "./run-steps-view.js";
+import { selectedAutomationRunStepId } from "./run-step-selection.js";
+
+function errorText(error) {
+  const code = typeof error?.code === "string" ? `${error.code} · ` : "";
+  return `${code}${error instanceof Error ? error.message : String(error)}`;
+}
+
+function isRunChange(message, environmentId, runId) {
+  if (message?.type !== "event" || message.environment !== environmentId) return false;
+  if (typeof message.name !== "string" || !message.name.startsWith("automation.")) return false;
+  return typeof message.runId !== "string" || !message.runId || message.runId === runId;
+}
+
+function hasSelectedStepEvidence(response, runId, nodeId) {
+  return response?.evidence?.runId === runId && response.evidence.nodeId === nodeId;
+}
+
+export function createAutomationChatRunProjection({
+  dom, client, getEnvironmentId, onNavigationChange, returnToStudio,
+  isVisible = () => document.visibilityState !== "hidden",
+}) {
+  const liveView = createAutomationLiveView(dom.automationChatRunPanel);
+  let runId = "";
+  let run = null;
+  let error = "";
+  let loading = false;
+  let selectedNodeId = "";
+  let stepEvidence = null;
+  let stepEvidenceLoading = false;
+  let stepEvidenceError = "";
+  let fullEvidenceRequested = false;
+  let evidenceRevision = 0;
+  let chatActive = false;
+  let readRevision = 0;
+  let pendingWhileBusy = false;
+  let activeBackgroundReads = 0;
+
+  function resumePendingRefresh() {
+    if (!pendingWhileBusy || loading || stepEvidenceLoading) return;
+    pendingWhileBusy = false;
+    eventRefresh.schedule();
+  }
+
+  function render() {
+    const showing = chatActive && Boolean(runId);
+    dom.app.classList.toggle("automation-run-chat", showing);
+    dom.automationChatRunPanel.hidden = !showing;
+    dom.automationChatRunPanel.inert = !showing;
+    if (chatActive) {
+      dom.chatPanel.hidden = showing;
+      dom.chatPanel.inert = showing || dom.app.classList.contains("sessions-open");
+      const sessionsVisible = !showing &&
+        (dom.app.classList.contains("sessions-docked") || dom.app.classList.contains("sessions-open"));
+      dom.sessionsPanel.hidden = !sessionsVisible;
+      dom.sessionsPanel.inert = !sessionsVisible;
+      dom.sessionsToggleButton.hidden = showing || dom.app.classList.contains("sessions-docked");
+    }
+    if (!showing) {
+      liveView.clear();
+      return;
+    }
+    dom.automationChatRunPanel.setAttribute("aria-busy", String(loading));
+    liveView.update(runId, renderAutomationRun({
+      automations: [], selectedAutomationId: run?.automationId || "",
+      selectedRunId: runId, selectedNodeId, runs: [], run, error,
+      stepEvidence, stepEvidenceLoading, stepEvidenceError,
+      feedback: loading ? "Loading saved run…" : "",
+    }, { locked: true }));
+  }
+
+  function clear({ notify = true } = {}) {
+    if (!runId) return;
+    readRevision += 1;
+    runId = "";
+    run = null;
+    error = "";
+    loading = false;
+    selectedNodeId = "";
+    evidenceRevision += 1;
+    stepEvidence = null;
+    stepEvidenceLoading = false;
+    stepEvidenceError = "";
+    fullEvidenceRequested = false;
+    pendingWhileBusy = false;
+    eventRefresh.cancel();
+    render();
+    if (notify) onNavigationChange();
+  }
+
+  function matchesRead(selected, environmentId, revision) {
+    return revision === readRevision && selected === runId &&
+      environmentId === getEnvironmentId();
+  }
+
+  function matchesEvidence(selected, environmentId, revision, nodeId, evidenceRead) {
+    return matchesRead(selected, environmentId, revision) &&
+      nodeId === selectedNodeId && evidenceRead === evidenceRevision;
+  }
+
+  function loadInitialRun(loadedRun) {
+    run = loadedRun;
+    selectedNodeId = selectedAutomationRunStepId(run, selectedNodeId);
+    error = "";
+    loading = false;
+    if (selectedNodeId) return loadStepEvidence(run.id, selectedNodeId, fullEvidenceRequested);
+    render();
+    resumePendingRefresh();
+    return true;
+  }
+
+  async function reload({ background = false } = {}) {
+    if (!runId) return false;
+    const selected = runId;
+    const environmentId = getEnvironmentId();
+    const revision = ++readRevision;
+    const nodeId = selectedNodeId;
+    const full = fullEvidenceRequested;
+    const evidenceRead = ++evidenceRevision;
+    const isInitialRunRead = !run;
+    if (background) activeBackgroundReads += 1;
+    if (!background && !run) {
+      loading = true;
+      error = "";
+      render();
+    }
+    try {
+      const response = await client.getAutomationRun(selected, environmentId);
+      if (!matchesRead(selected, environmentId, revision)) return false;
+      if (!response?.run || response.run.id !== selected)
+        throw new Error("The selected automation run is unavailable.");
+      if (isInitialRunRead) return await loadInitialRun(response.run);
+      const evidenceNodeId = selectedAutomationRunStepId(response.run, nodeId);
+      let evidenceResponse = null;
+      if (evidenceNodeId) {
+        evidenceResponse = await client.getAutomationStepEvidence(
+          selected, evidenceNodeId, environmentId, full,
+        );
+      }
+      if (!matchesEvidence(selected, environmentId, revision, nodeId, evidenceRead)) return false;
+      if (evidenceNodeId && !hasSelectedStepEvidence(evidenceResponse, selected, evidenceNodeId))
+        throw new Error("The selected step evidence is unavailable.");
+      run = response.run;
+      selectedNodeId = evidenceNodeId;
+      stepEvidence = evidenceNodeId ? evidenceResponse.evidence : null;
+      stepEvidenceLoading = false;
+      stepEvidenceError = "";
+      error = "";
+      loading = false;
+      render();
+      resumePendingRefresh();
+      return true;
+    } catch (cause) {
+      if (!matchesEvidence(selected, environmentId, revision, nodeId, evidenceRead)) return false;
+      error = errorText(cause);
+      loading = false;
+      stepEvidenceLoading = false;
+      render();
+      resumePendingRefresh();
+      return false;
+    } finally {
+      if (background) activeBackgroundReads -= 1;
+    }
+  }
+
+  async function loadStepEvidence(selectedRunId, nodeId, full = false) {
+    const revision = ++evidenceRevision;
+    const read = readRevision;
+    const environmentId = getEnvironmentId();
+    if (activeBackgroundReads > 0) pendingWhileBusy = true;
+    if (stepEvidence?.runId !== selectedRunId || stepEvidence.nodeId !== nodeId)
+      stepEvidence = null;
+    stepEvidenceError = "";
+    stepEvidenceLoading = true;
+    render();
+    try {
+      const response = await client.getAutomationStepEvidence(selectedRunId, nodeId, environmentId, full);
+      if (!matchesEvidence(selectedRunId, environmentId, read, nodeId, revision)) return false;
+      if (!hasSelectedStepEvidence(response, selectedRunId, nodeId))
+        throw new Error("The selected step evidence is unavailable.");
+      stepEvidence = response.evidence;
+      return true;
+    } catch (cause) {
+      if (matchesEvidence(selectedRunId, environmentId, read, nodeId, revision))
+        stepEvidenceError = errorText(cause);
+      return false;
+    } finally {
+      if (matchesEvidence(selectedRunId, environmentId, read, nodeId, revision)) {
+        stepEvidenceLoading = false;
+        render();
+        resumePendingRefresh();
+      }
+    }
+  }
+
+  async function open(selected) {
+    if (!selected) { clear(); return true; }
+    if (selected !== runId) {
+      eventRefresh.cancel();
+      runId = selected;
+      run = null;
+      error = "";
+      loading = false;
+      selectedNodeId = "";
+      evidenceRevision += 1;
+      stepEvidence = null;
+      stepEvidenceLoading = false;
+      stepEvidenceError = "";
+      fullEvidenceRequested = false;
+      pendingWhileBusy = false;
+      liveView.clear();
+      onNavigationChange();
+    }
+    return reload();
+  }
+
+  async function stop() {
+    if (!run || !["pending", "running"].includes(run.status)) return;
+    const selected = runId;
+    const environmentId = getEnvironmentId();
+    try {
+      await client.stopAutomationRun(selected, environmentId);
+      if (selected === runId && environmentId === getEnvironmentId())
+        await reload({ background: true });
+    } catch (cause) {
+      if (selected !== runId || environmentId !== getEnvironmentId()) return;
+      error = errorText(cause);
+      render();
+    }
+  }
+
+  dom.automationChatRunPanel.addEventListener("click", (event) => {
+    const button = event.target.closest("button");
+    if (!button) return;
+    if (button.dataset.action === "stop") void stop();
+    if (button.dataset.action === "return-studio") returnToStudio(run);
+    if (button.dataset.action === "show-full-step-output" && selectedNodeId) {
+      fullEvidenceRequested = true;
+      void loadStepEvidence(runId, selectedNodeId, true);
+    }
+    if (button.dataset.automationNode !== undefined) {
+      selectedNodeId = button.dataset.automationNode;
+      evidenceRevision += 1;
+      stepEvidence = null;
+      stepEvidenceLoading = false;
+      stepEvidenceError = "";
+      fullEvidenceRequested = false;
+      if (selectedNodeId) void loadStepEvidence(runId, selectedNodeId);
+      else render();
+      focusSelectedAutomationStep(dom.automationChatRunPanel);
+    }
+  });
+  const eventRefresh = createEventRefresh({
+    canRefresh: () => chatActive && Boolean(runId) && isVisible(),
+    refresh: () => {
+      if (loading || stepEvidenceLoading) {
+        pendingWhileBusy = true;
+        return false;
+      }
+      return reload({ background: true });
+    },
+  });
+  render();
+  return {
+    open, clear, runId: () => runId,
+    workspaceChanged(workspace) {
+      chatActive = workspace === "chat";
+      if (!chatActive) clear({ notify: false });
+      render();
+    },
+    handleRealtime(message) {
+      if (isRunChange(message, getEnvironmentId(), runId)) eventRefresh.schedule();
+    },
+    reconnect: () => eventRefresh.schedule(),
+    visibilityChanged: () => eventRefresh.schedule(),
+  };
+}

package/dist/src/web-ui/app/components/automations/draft-recovery-actions.js

@@ -0,0 +1,28 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { renderAutomationEditorIcon } from "./editor-action-icons.js";
+
+export function renderAutomationDraftRecovery(snapshot) {
+  const undo = snapshot.draftUndo;
+  const undoTitle = undo ? `Undo the latest move of ${undo.title}. ${undo.count} saved move${undo.count === 1 ? "" : "s"} can be undone.`
+    : "Move a step to enable Undo. Move history is kept during this session.";
+  const published = snapshot.publishedDefinition;
+  const canRestore = published?.automationId === snapshot.selectedAutomationId &&
+    Number.isSafeInteger(published?.revision);
+  return `<button type="button" class="automation-editor-action" data-action="undo-draft-move" title="${escapeHtml(undoTitle)}"${!undo || snapshot.mutation ? " disabled" : ""}>${renderAutomationEditorIcon("undo")}<span>Undo move</span></button>
+    ${canRestore ? `<button type="button" class="automation-editor-action" data-action="restore-published-draft"${snapshot.mutation ? " disabled" : ""}>${renderAutomationEditorIcon("restore")}<span>Reset draft to published</span></button>` : ""}`;
+}
+
+export function createAutomationDraftRecoveryCommands({ actions, requireSavedGraph,
+  confirmDiscard, onRestored }) {
+  return {
+    "undo-draft-move": () => { if (requireSavedGraph()) return actions.undoDraftMove(); },
+    "restore-published-draft": async () => {
+      if (!requireSavedGraph()) return false;
+      const restored = await actions.restorePublishedDraft(({ title, publishedRevision }) => confirmDiscard(
+        `Replace the current draft of “${title}” with published revision ${publishedRevision}? Unpublished draft changes will be discarded. The published version, schedule, permissions, and existing runs will stay unchanged.`,
+      ));
+      if (restored) onRestored();
+      return restored;
+    },
+  };
+}

package/dist/src/web-ui/app/components/automations/editor-action-icons.js

@@ -0,0 +1,18 @@
+const EDITOR_ACTION_ICONS = {
+  save: '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12l4 4v12a2 2 0 0 1-2 2Z"/><path d="M7 3v6h10V3M7 21v-8h10v8"/>',
+  build: '<path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z"/>',
+  check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+  publish: '<path d="M12 16V3m-5 5 5-5 5 5M4 15v5h16v-5"/>',
+  run: '<path d="m8 4 12 8-12 8V4Z"/>',
+  activate: '<path d="M12 2v10M6 5a9 9 0 1 0 12 0"/>',
+  pause: '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
+  archive: '<rect x="3" y="3" width="18" height="4" rx="1"/><path d="M5 7v14h14V7M9 11h6"/>',
+  restore: '<path d="M3 11a9 9 0 1 1 2.6 7.4M3 4v7h7"/>',
+  undo: '<path d="m9 4-6 6 6 6M3 10h11a7 7 0 0 1 7 7v3"/>',
+  delete: '<path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/>',
+  manage: '<path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="2"/><circle cx="15" cy="17" r="2"/>',
+};
+
+export function renderAutomationEditorIcon(name) {
+  return `<svg class="automation-editor-action-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${EDITOR_ACTION_ICONS[name] || ""}</svg>`;
+}

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

@@ -0,0 +1,57 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { renderAutomationDraftRecovery } from "./draft-recovery-actions.js";
+import { renderAutomationEditorIcon } from "./editor-action-icons.js";
+
+function editorAction(action, label, icon, { className = "", disabled = false, busy = false, title = "" } = {}) {
+  return `<button type="button" class="automation-editor-action ${className}" data-action="${action}"${disabled ? " disabled" : ""}${busy ? ' aria-busy="true"' : ""}${title ? ` title="${escapeHtml(title)}"` : ""}>${renderAutomationEditorIcon(icon)}<span>${label}</span></button>`;
+}
+
+function renderDraftActions() {
+  return `<div class="automation-editor-action-group" role="group" aria-label="Draft actions">
+    <span class="automation-editor-action-label">Draft</span><div class="automation-actions">
+      ${editorAction("save-draft", "Save draft", "save", { title: "Save automation settings to the draft" })}
+      ${editorAction("describe", "Build with ABot", "build")}
+      ${editorAction("validate", "Check", "check", { title: "Check the draft before publishing" })}
+      ${editorAction("publish", "Publish", "publish", { className: "automation-primary", title: "Publish this draft for future runs" })}
+    </div></div>`;
+}
+
+function renderExecutionActions(snapshot, current, runUnavailable, activateUnavailable) {
+  const active = current.status === "active";
+  const runPending = Boolean(snapshot.runStartPending);
+  const runActionDisabled = runUnavailable || runPending || snapshot.loading || Boolean(snapshot.mutation);
+  return `<div class="automation-editor-action-group automation-editor-execution" role="group" aria-label="Execution actions">
+    <span class="automation-editor-action-label">Execution <span class="automation-editor-state" data-state="${active ? "active" : "paused"}">${active ? "Active" : "Paused"}</span></span>
+    <div class="automation-actions">
+      ${editorAction("run", runPending ? "Starting…" : "Run now", "run", { disabled: runActionDisabled, busy: runPending,
+        title: runUnavailable ? current.runUnavailableReason || "Run unavailable" : "Run the published version once" })}
+      ${editorAction("toggle-active", active ? "Pause" : "Activate", active ? "pause" : "activate", {
+        className: active ? "automation-editor-pause" : "automation-editor-activate", disabled: activateUnavailable,
+        title: activateUnavailable ? current.activateUnavailableReason || "Activation unavailable"
+          : active ? "Pause automatic triggers" : "Enable automatic triggers for the published version" })}
+    </div></div>`;
+}
+
+function renderManagementActions(snapshot, published, canDeleteDraft) {
+  const archive = published ? editorAction("archive", "Archive automation", "archive", { className: "automation-editor-archive" })
+    : canDeleteDraft ? editorAction("delete-draft", "Delete draft", "delete", { className: "automation-stop" }) : "";
+  return `<details class="automation-editor-management"><summary>${renderAutomationEditorIcon("manage")}<span>Manage automation</span></summary>
+    <div class="automation-editor-management-body">
+      <div class="automation-editor-action-group" role="group" aria-label="Draft recovery">
+        <span class="automation-editor-action-label">Draft recovery</span><div class="automation-actions">${renderAutomationDraftRecovery(snapshot)}</div>
+      </div>
+      ${archive ? `<div class="automation-editor-archive-group"><span class="automation-editor-action-label">${published ? "Archive" : "Delete draft"}</span><div class="automation-actions">${archive}</div>
+        <p>${published ? "Pause its schedule and move it to the archive. Runs and reports stay available." : "Permanently remove this unpublished draft."}</p></div>` : ""}
+    </div></details>`;
+}
+
+export function renderAutomationEditorActions(snapshot, { current, canDeleteDraft, runUnavailable, activateUnavailable }) {
+  if (current?.status === "archived") {
+    return `<div class="automation-editor-actionbar automation-actions">${editorAction("restore", "Restore automation", "restore", { className: "automation-primary" })}</div>`;
+  }
+  const published = Boolean(current?.publishedRevision);
+  return `<div class="automation-editor-actionbar" aria-label="Automation actions">
+    <div class="automation-editor-action-groups">${renderDraftActions()}${published ? renderExecutionActions(snapshot, current, runUnavailable, activateUnavailable) : ""}</div>
+    ${renderManagementActions(snapshot, published, canDeleteDraft)}
+  </div>`;
+}