@abot-ai/runtime 1.5.0 → 1.7.0

package/dist/src/web-ui/app/components/automations/run-report-view.js

@@ -0,0 +1,224 @@
+import { escapeHtml, formatTime } from "../../lib/text-format.js";
+import { renderAutomationSavedOutput } from "./run-output-view.js";
+import { automationFailurePresentation, automationRunFailureCause, renderAutomationFailure, renderAutomationRunFailure } from "./failure-presentation.js";
+
+function measured(value) {
+  return Number.isFinite(value) ? String(value) : "Not measured";
+}
+
+const OUTCOME_LABELS = {
+  succeeded: "Completed", completed_with_skips: "Completed with skips",
+  failed: "Failed", cancelled: "Stopped", interrupted: "Interrupted", missed: "Missed",
+  rejected: "Rejected", uncertain: "Uncertain", pending: "Pending",
+};
+
+function outcomeLabel(outcome) {
+  return OUTCOME_LABELS[outcome] || String(outcome || "Unknown").replaceAll("_", " ");
+}
+
+function duration(startedAt, finishedAt) {
+  const start = Date.parse(startedAt || "");
+  const finish = Date.parse(finishedAt || "");
+  if (!Number.isFinite(start) || !Number.isFinite(finish) || finish < start) return "Not measured";
+  const seconds = Math.floor((finish - start) / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+
+function stepCounts(results) {
+  const counts = new Map();
+  for (const result of results) counts.set(result.status, (counts.get(result.status) || 0) + 1);
+  return ["succeeded", "skipped", "failed", "cancelled", "interrupted"]
+    .filter((status) => counts.has(status))
+    .map((status) => `<span><strong>${counts.get(status)}</strong> ${escapeHtml(outcomeLabel(status).toLowerCase())}</span>`)
+    .join("");
+}
+
+function rawAction(action) {
+  return `<li><code>${escapeHtml(action.type)}</code>${action.target ? ` · <span dir="auto">${escapeHtml(action.target)}</span>` : ""}</li>`;
+}
+
+function diagnostics(report, run) {
+  const results = Array.isArray(report.nodeResults) ? report.nodeResults : [];
+  const uncertain = Array.isArray(report.uncertainEffects) ? report.uncertainEffects : [];
+  const artifacts = Array.isArray(report.artifacts) ? report.artifacts : [];
+  const effects = Array.isArray(report.effectSummary?.entries) ? report.effectSummary.entries : [];
+  return `<details class="automation-run-diagnostics" data-disclosure-id="run-diagnostics"><summary>Diagnostics</summary>
+    <dl><dt>Run ID</dt><dd><code>${escapeHtml(run.id)}</code></dd>
+      <dt>Revision</dt><dd>${escapeHtml(report.definitionRevision ?? run.definitionRevision ?? "Unavailable")}</dd>
+      ${run.error ? `<dt>Run error</dt><dd><code>${escapeHtml(run.error)}</code></dd>` : ""}</dl>
+    ${results.length ? `<h5>Step records</h5><ul>${results.map((item) => `<li>${escapeHtml(item.title || item.nodeId)} · <code>${escapeHtml(item.nodeId)}</code> · ${escapeHtml(item.status)}${item.errorCode ? ` · <code>${escapeHtml(item.errorCode)}</code>` : ""}${item.resultRef ? ` · result <code>${escapeHtml(item.resultRef)}</code>` : ""}</li>`).join("")}</ul>` : ""}
+    ${effects.length ? `<h5>Tool receipts</h5><ul>${effects.map((item) => `<li><code>${escapeHtml(item.attemptId)}</code> · ${escapeHtml(item.operation?.toolName || "Tool")} / ${escapeHtml(item.operation?.operationId || "Unknown operation")} · ${escapeHtml(item.outcome)}${item.effect ? ` · ${escapeHtml(item.effect)}` : ""}${item.errorCode ? ` · <code>${escapeHtml(item.errorCode)}</code>` : ""}${item.actions?.length ? `<ul>${item.actions.map(rawAction).join("")}</ul>` : ""}</li>`).join("")}</ul>` : ""}
+    ${uncertain.length ? `<h5>Uncertain attempts</h5><ul>${uncertain.map((item) => `<li><code>${escapeHtml(item.nodeId)}</code> · <code>${escapeHtml(item.attemptId)}</code></li>`).join("")}</ul>` : ""}
+    ${artifacts.length ? `<h5>Saved artifact records</h5><ul>${artifacts.map((item) => `<li>${escapeHtml(item.kind)} · <code>${escapeHtml(item.id)}</code></li>`).join("")}</ul>` : ""}
+  </details>`;
+}
+
+function isConfirmedFileWrite(action, outcome, effect) {
+  return outcome === "succeeded" && action.type === "write_file" &&
+    (effect === "mutating" || effect === "mixed");
+}
+
+function targetLabel(action, outcome, effect) {
+  if (isConfirmedFileWrite(action, outcome, effect)) return "Saved file";
+  if (outcome !== "succeeded") return "Receipt target · not confirmed";
+  return "Recorded target";
+}
+
+function recordedTarget(action, outcome, effect) {
+  if (!action.target) return "";
+  const label = targetLabel(action, outcome, effect);
+  return `<li><span>${label}</span><strong dir="auto">${escapeHtml(action.target)}</strong></li>`;
+}
+
+function renderReportEffects(report, run) {
+  const summary = report.effectSummary;
+  const late = Array.isArray(report.lateEvidence) ? report.lateEvidence : [];
+  const lateNotice = late.length
+    ? `<p class="automation-report-warning">Later evidence arrived for ${late.length} uncertain attempt${late.length === 1 ? "" : "s"}; it does not change the original run outcome.</p>`
+    : "";
+  if (!summary) return `<section class="automation-report-outputs"><h5>Recorded output targets</h5><p>Verified effect details were not retained in this report.${run.detailsExpiredAt ? " The original step records have expired." : " Select a step to inspect any retained evidence."}</p>${lateNotice}</section>`;
+  const entries = Array.isArray(summary.entries) ? summary.entries : [];
+  const actions = entries.flatMap((entry) => entry.outcome === "succeeded"
+    ? (Array.isArray(entry.actions) ? entry.actions.map((action) => ({ action, effect: entry.effect })) : []) : []);
+  const targets = actions.map(({ action, effect }) => recordedTarget(action, "succeeded", effect)).filter(Boolean);
+  const omittedActions = entries.reduce((total, entry) => total + (entry.omittedActions || 0), 0);
+  const partial = summary.omitted > 0 || omittedActions > 0;
+  const omitted = [
+    summary.omitted > 0 ? `${summary.omitted} further effect record${summary.omitted === 1 ? "" : "s"}` : "",
+    omittedActions > 0 ? `${omittedActions} action${omittedActions === 1 ? "" : "s"}` : "",
+  ].filter(Boolean).join(" and ");
+  return `<section class="automation-report-outputs" aria-label="Recorded output targets"><h5>Recorded output targets</h5>
+    ${targets.length ? `<ul class="automation-recorded-targets">${targets.join("")}</ul>` : `<p>No confirmed output target was recorded${partial ? " in the displayed entries" : ""}.</p>`}
+    <p class="automation-report-effect-meta">${escapeHtml(summary.verifiedExecutions)} verified tool execution${summary.verifiedExecutions === 1 ? "" : "s"} · ${escapeHtml(actions.length)} confirmed completion action${actions.length === 1 ? "" : "s"}</p>
+    ${summary.unresolvedAttempts ? `<p class="automation-report-warning">${escapeHtml(summary.unresolvedAttempts)} unresolved tool attempt${summary.unresolvedAttempts === 1 ? "" : "s"}; its outcome is not confirmed.</p>` : ""}
+    ${partial ? `<p class="automation-report-warning">${escapeHtml(omitted)} omitted from this compact view.</p>` : ""}
+    ${lateNotice}</section>`;
+}
+
+function renderRunResults(run) {
+  const summary = run.outputSummary;
+  const entries = Array.isArray(summary?.entries) ? summary.entries : [];
+  const title = entries.length > 1 ? "Saved results" : "Saved result";
+  const fallback = run.detailsExpiredAt
+    ? "The saved step outputs have expired. The compact run report is still available."
+    : "No final-step output is available here. Select a step below to inspect any retained result.";
+  return `<section class="automation-report-results" aria-label="Saved results"><h4>${title}</h4>
+    ${entries.length ? entries.map((entry) => {
+      const hasSavedOutput = entry.availability === "available" && Boolean(entry.output);
+      const unavailable = entry.availability === "expired"
+        ? "This saved result has expired."
+        : "No saved output is available for this step.";
+      return `<article class="automation-report-result"><header class="automation-result-heading"><h5 dir="auto">${escapeHtml(entry.title || "Final step")}</h5>
+        <span class="automation-result-status" data-outcome="${escapeHtml(entry.stepStatus)}">${escapeHtml(outcomeLabel(entry.stepStatus))}</span></header>
+        ${hasSavedOutput ? renderAutomationSavedOutput(entry.output, { disclosureId: `run-result-${entry.nodeId}` }) : `<p class="automation-output-notice">${unavailable}</p>`}
+        <footer class="automation-result-footer"><button type="button" data-automation-node="${escapeHtml(entry.nodeId)}">Inspect step</button>
+          ${entry.errorCode ? `<span class="automation-report-warning">${escapeHtml(automationFailurePresentation(entry.errorCode, run).title)}</span>` : ""}</footer></article>`;
+    }).join("") : `<p class="automation-output-notice">${fallback}</p>`}
+    ${summary?.omitted > 0 ? `<p class="automation-output-notice">${escapeHtml(summary.omitted)} further final-step result${summary.omitted === 1 ? " is" : "s are"} not shown here. Select a step to inspect its result.</p>` : ""}
+  </section>`;
+}
+
+function executionDetails(report, run, results, inputs) {
+  return `<details class="automation-report-execution" data-disclosure-id="run-execution"><summary>Execution details</summary>
+    <div class="automation-report-stats" aria-label="Run measures">
+      <div><span>Duration</span><strong>${duration(report.startedAt || run.startedAt, report.finishedAt || run.finishedAt)}</strong></div>
+      <div><span>Steps</span><strong>${results.length ? escapeHtml(results.length) : "Not recorded"}</strong></div>
+      <div><span>Tool calls</span><strong>${measured(report.toolCalls)}</strong><small class="automation-muted">Verified executions</small></div>
+      <div><span>Model calls</span><strong>${measured(report.modelCalls)}</strong><small class="automation-muted">All admitted model invocations</small></div>
+      <div><span>Tool attempts admitted</span><strong>${measured(report.toolAttempts)}</strong><small class="automation-muted">Counted against the tool limit</small></div></div>
+    <div class="automation-report-counts" aria-label="Step counts">${stepCounts(results) || "No step results recorded"}</div>
+    <div class="automation-report-times"><span>Started · ${escapeHtml(formatTime(report.startedAt || run.startedAt) || "Unavailable")}</span>
+      <span>Finished · ${escapeHtml(formatTime(report.finishedAt || run.finishedAt) || "Unavailable")}</span></div>
+    ${inputs.length ? `<details data-disclosure-id="run-selected-files"><summary>Selected files (${inputs.length})</summary><ul>${inputs.map((item) => `<li><span dir="auto">${escapeHtml(item.canonicalPath || item.inputId)}</span></li>`).join("")}</ul></details>` : ""}
+    ${diagnostics(report, run)}</details>`;
+}
+
+export function renderAutomationReport(run) {
+  const report = run.report;
+  if (!report) {
+    const message = run.reportState === "expired" ? "The saved report has expired." :
+      ["pending", "running", "stopping"].includes(run.status)
+        ? "The report will appear when this run finishes." : "The saved report is unavailable.";
+    const failureCode = automationRunFailureCause(run)?.error;
+    return `<section class="automation-run-report" aria-label="Run report"><h4>Run report</h4>${renderAutomationRunFailure(run)}<p>${message}</p>
+      ${failureCode ? `<details class="automation-run-diagnostics" data-disclosure-id="run-diagnostics"><summary>Diagnostics</summary><code>${escapeHtml(failureCode)}</code></details>` : ""}</section>`;
+  }
+  const results = Array.isArray(report.nodeResults) ? report.nodeResults : [];
+  const inputs = Array.isArray(report.inputVersions) ? report.inputVersions : [];
+  const outcome = report.outcome || run.status;
+  return `<section class="automation-run-report" aria-label="Saved run report">
+    <div class="automation-report-heading"><div class="automation-report-title"><div class="automation-report-title-line"><h4>Run report</h4><span class="automation-report-status" data-outcome="${escapeHtml(outcome)}">Execution · ${escapeHtml(outcomeLabel(outcome))}</span></div>
+      ${run.definition?.objective ? `<p dir="auto" class="automation-report-goal">${escapeHtml(run.definition.objective)}</p>` : ""}</div></div>
+    ${renderAutomationRunFailure(run)}
+    ${renderRunResults(run)}
+    ${renderReportEffects(report, run)}
+    ${executionDetails(report, run, results, inputs)}
+  </section>`;
+}
+
+function renderInputs(inputs) {
+  if (!inputs.length) return `<p>No input bindings configured for this step.</p>`;
+  return `<p class="automation-input-notice">Values below are reconstructed from the frozen definition and saved producer records. The exact materialized step input was not stored separately.</p>
+    <ul class="automation-step-inputs">${inputs.map((item, index) => `<li><strong>${escapeHtml(item.name)}</strong><span>${escapeHtml(item.source)}</span>
+      ${item.status === "unavailable" ? `<small>Value unavailable</small>` : `<small>${item.status === "metadata" ? "Selected file metadata" : "Reconstructed value"}</small>${item.preview ? renderAutomationSavedOutput({ text: item.preview, full: false }, { disclosureId: `step-input-${index}` }) : ""}`}</li>`).join("")}</ul>`;
+}
+
+function missingOutputMessage(evidence) {
+  if (evidence.savedOutcome?.kind === "rejected")
+    return `Tool invocation was rejected before output was saved${evidence.savedOutcome.errorCode ? ` · ${escapeHtml(evidence.savedOutcome.errorCode)}` : ""}.`;
+  if (evidence.savedOutcome?.kind === "uncertain")
+    return `The tool outcome is uncertain${evidence.savedOutcome.errorCode ? ` · ${escapeHtml(evidence.savedOutcome.errorCode)}` : ""}; no output was saved.`;
+  if (evidence.stepStatus === "running" || evidence.stepStatus === "pending")
+    return "No output saved yet.";
+  return "No output was saved for this step.";
+}
+
+function renderEffects(effects) {
+  if (!effects.length) return `<p>No tool attempt was recorded for this step.</p>`;
+  return `<ul class="automation-step-effects">${effects.map((item) => {
+    const operation = item.operation?.operationId
+      ? item.operation.operationId.replaceAll("_", " ").replace(/^./, (first) => first.toUpperCase())
+      : "Tool attempt";
+    const actions = Array.isArray(item.actions) ? item.actions : [];
+    const targets = actions.map((action) => recordedTarget(action, item.outcome, item.effect)).filter(Boolean);
+    return `<li><div class="automation-effect-heading"><strong>${escapeHtml(operation)}</strong><span data-outcome="${escapeHtml(item.outcome)}">${escapeHtml(outcomeLabel(item.outcome))}</span></div>
+      ${targets.length ? `<ul class="automation-recorded-targets">${targets.join("")}</ul>` : ""}
+      ${item.errorCode ? `<p class="automation-report-warning">${escapeHtml(outcomeLabel(item.outcome))} · ${escapeHtml(item.errorCode)}</p>` : ""}
+      ${item.omittedActions ? `<p class="automation-report-warning">${item.omittedActions} further action${item.omittedActions === 1 ? "" : "s"} omitted from this view.</p>` : ""}
+      ${item.lateEvidence ? `<p class="automation-report-warning">Later evidence: ${escapeHtml(outcomeLabel(item.lateEvidence.status))}; original outcome remains ${escapeHtml(outcomeLabel(item.outcome))}.</p>` : ""}
+      <details class="automation-effect-diagnostics" data-disclosure-id="effect-${escapeHtml(item.attemptId)}"><summary>Technical details</summary><dl>
+        <dt>Tool</dt><dd>${escapeHtml(item.operation?.toolName || "Unavailable")}</dd>
+        <dt>Operation</dt><dd>${escapeHtml(item.operation?.operationId || "Unavailable")}</dd>
+        <dt>Attempt</dt><dd><code>${escapeHtml(item.attemptId || "Unavailable")}</code></dd>
+        <dt>Effect</dt><dd>${escapeHtml(item.effect || "Unavailable")}</dd></dl>
+        ${actions.length ? `<ul>${actions.map(rawAction).join("")}</ul>` : ""}</details></li>`;
+  }).join("")}</ul>`;
+}
+
+export function renderAutomationStepEvidence(snapshot) {
+  if (!snapshot.selectedNodeId) return "";
+  const evidence = snapshot.stepEvidence;
+  const matching = evidence?.runId === snapshot.run?.id &&
+    evidence?.nodeId === snapshot.selectedNodeId;
+  if (snapshot.stepEvidenceLoading && !matching)
+    return `<section class="automation-step-evidence" aria-label="Step evidence"><h4>Step result</h4><p>Loading saved evidence…</p></section>`;
+  if (snapshot.stepEvidenceError && !matching)
+    return `<section class="automation-step-evidence" aria-label="Step evidence"><h4>Step result</h4><p role="alert">${escapeHtml(snapshot.stepEvidenceError)}</p></section>`;
+  if (!matching) return "";
+  if (evidence.availability === "expired")
+    return `<section class="automation-step-evidence" aria-label="Step evidence"><h4>Step result</h4><p>The detailed inputs, output, and effects for this run have expired. The compact run report remains available while retained.</p></section>`;
+  const output = evidence.output;
+  const record = snapshot.run?.nodes?.find((item) => item.nodeId === evidence.nodeId)
+    || snapshot.run?.report?.nodeResults?.find((item) => item.nodeId === evidence.nodeId);
+  return `<section class="automation-step-evidence" aria-label="Step evidence"><h4>Step result · ${escapeHtml(evidence.title || "Selected step")}</h4>
+    ${snapshot.stepEvidenceError ? `<p role="alert">${escapeHtml(snapshot.stepEvidenceError)}</p>` : ""}
+    ${renderAutomationFailure(record?.errorCode, snapshot.run)}
+    ${output ? renderAutomationSavedOutput(output, { disclosureId: `step-output-${evidence.nodeId}`, showFullButton: true }) : `<p>${missingOutputMessage(evidence)}</p>`}
+    ${record?.errorCode ? `<details class="automation-step-disclosure" data-disclosure-id="step-error-${escapeHtml(evidence.nodeId)}"><summary>Technical error</summary><code>${escapeHtml(record.errorCode)}</code></details>` : ""}
+    <details class="automation-step-disclosure" data-disclosure-id="step-effects-${escapeHtml(evidence.nodeId)}"><summary>Tool effects (${Array.isArray(evidence.effects) ? evidence.effects.length : 0})</summary>${renderEffects(Array.isArray(evidence.effects) ? evidence.effects : [])}</details>
+    <details class="automation-step-disclosure" data-disclosure-id="step-inputs-${escapeHtml(evidence.nodeId)}"><summary>Configured inputs</summary>${renderInputs(Array.isArray(evidence.inputs) ? evidence.inputs : [])}</details>
+  </section>`;
+}

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

@@ -0,0 +1,7 @@
+import { workflowSteps } from "./run-steps-view.js";
+
+/** Open the first displayable step while retaining an explicit selection on refresh. */
+export function selectedAutomationRunStepId(run, selectedNodeId = "") {
+  if (selectedNodeId) return selectedNodeId;
+  return workflowSteps(run?.definition?.body)[0]?.id || "";
+}

package/dist/src/web-ui/app/components/automations/run-steps-view.js

@@ -0,0 +1,33 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function workflowSteps(node) {
+  if (!node) return [];
+  if (node.kind === "tool" || node.kind === "agent") return [node];
+  const children = node.kind === "parallel" ? node.branches : node.children;
+  return (Array.isArray(children) ? children : []).flatMap(workflowSteps);
+}
+
+/** Preserve workflow order while showing the recorded state of each step. */
+export function renderAutomationRunSteps(run, selectedNodeId, detailId) {
+  const states = new Map((run.nodes || run.report?.nodeResults || []).map((node) => [node.nodeId, node]));
+  const steps = workflowSteps(run.definition?.body);
+  if (!steps.length) return "";
+  return `<section class="automation-run-steps" aria-label="Run steps"><h4>Steps</h4>
+    <p class="automation-muted">Select a step to read its result and inspect its inputs.</p>
+    <ol class="automation-run-step-list">${steps.map((node, index) => {
+      const state = states.get(node.id)?.status || "pending";
+      return `<li><button type="button" data-automation-node="${escapeHtml(node.id)}" data-state="${escapeHtml(state)}" aria-pressed="${node.id === selectedNodeId}" aria-controls="${escapeHtml(detailId)}">
+        <span class="automation-run-step-index" aria-hidden="true">${index + 1}</span>
+        <span class="automation-run-step-copy"><strong dir="auto">${escapeHtml(node.title || "Untitled step")}</strong>
+          <small>${node.kind === "agent" ? "Agent" : "Tool"} · ${escapeHtml(state.replaceAll("_", " "))}</small></span>
+        <span class="automation-run-step-open" aria-hidden="true">→</span></button></li>`;
+    }).join("")}</ol></section>`;
+}
+
+/** Only a deliberate result-selection action moves focus; live refresh never does. */
+export function focusSelectedAutomationStep(root) {
+  const detail = root.querySelector("[data-selected-step-result]");
+  if (!detail) return;
+  detail.scrollTop = 0;
+  detail.focus({ preventScroll: true });
+}

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

@@ -0,0 +1,38 @@
+import { escapeHtml, formatTime } from "../../lib/text-format.js";
+import { findAutomationNode, renderAutomationNodeDetails, renderAutomationTimeline } from "./timeline.js";
+import { renderAutomationReport, renderAutomationStepEvidence } from "./run-report-view.js";
+import { renderAutomationRunSteps } from "./run-steps-view.js";
+
+function runIsActive(run) {
+  return ["running", "stopping", "pending"].includes(run?.status);
+}
+
+function renderRunChoices(snapshot) {
+  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
+  if (!runs.length) return `<p class="automation-muted">No runs yet.</p>`;
+  return `<div class="automation-run-choices" aria-label="Recent runs">${runs.map((run) => `<button type="button" data-select-run="${escapeHtml(run.id)}" aria-current="${run.id === snapshot.selectedRunId}">${escapeHtml(formatTime(run.startedAt || run.createdAt) || "Run")} · ${escapeHtml(run.status || "Unknown")}</button>`).join("")}</div>`;
+}
+
+export function renderAutomationRun(snapshot, { locked = false } = {}) {
+  const run = snapshot.run;
+  const current = snapshot.automations.find((item) => item.id === snapshot.selectedAutomationId);
+  const title = run?.definition?.title || current?.title || "Automation";
+  const definitionRevision = run?.definitionRevision ?? run?.target?.definitionRevision ?? run?.definition?.revision;
+  const selectedNode = run?.definition ? findAutomationNode(run.definition.body, snapshot.selectedNodeId) : null;
+  const detailId = `automation-step-result-${locked ? "chat" : "studio"}-${run?.id || "none"}`;
+  const runPending = Boolean(snapshot.runStartPending);
+  const rerunDisabled = runPending || snapshot.loading || Boolean(snapshot.mutation);
+  return `<div class="automation-workspace" data-automation-view="run">
+    <div class="automation-heading"><div><button type="button" class="automation-text-button" data-action="${locked ? "return-studio" : "editor"}">← ${locked ? "ABot Studio" : "Editor"}</button><h3 dir="auto">${escapeHtml(title)}</h3><p>${run ? `Read-only run${definitionRevision ? ` · Revision ${escapeHtml(definitionRevision)}` : ""}` : "Select a saved run"}</p></div>
+      <div class="automation-actions">${!locked && run ? `<button type="button" data-action="open-chat-run">Open read-only view</button>` : ""}${runIsActive(run) && run?.status !== "stopping" ? `<button type="button" class="automation-stop" data-action="stop">Stop run</button>` : ""}${!locked && run && !runIsActive(run) && current?.status !== "archived" ? `<button type="button" data-action="rerun"${rerunDisabled ? " disabled" : ""}${runPending ? ' aria-busy="true"' : ""}>${runPending ? "Starting…" : "Run again"}</button>` : ""}</div></div>
+    <p class="automation-feedback" role="status" aria-live="polite" data-tone="${snapshot.error ? "error" : ""}">${escapeHtml(snapshot.error || snapshot.feedback || (run ? "Run details loaded." : "Open a run to see its timeline and report."))}</p>
+    ${locked ? "" : `<div class="automation-tabs" role="tablist"><button type="button" role="tab" aria-selected="false" data-action="editor">Editor</button><button type="button" role="tab" aria-selected="true">Runs</button></div>${renderRunChoices(snapshot)}`}
+    ${run ? `${renderAutomationReport(run)}
+      <div class="automation-run-explorer">${renderAutomationRunSteps(run, snapshot.selectedNodeId, detailId)}
+      ${selectedNode ? `<section class="automation-run-detail" id="${escapeHtml(detailId)}" data-selected-step-result tabindex="-1" aria-label="Selected step result">
+        ${renderAutomationStepEvidence(snapshot)}
+        <details data-disclosure-id="step-configuration-${escapeHtml(selectedNode.id)}"><summary>Step configuration</summary>${renderAutomationNodeDetails(selectedNode, run)}</details></section>` : `<p class="automation-run-step-hint">Choose a step to explore its saved result.</p>`}</div>
+      <details class="automation-run-workflow" data-disclosure-id="run-workflow"><summary>Workflow diagram</summary>
+        <section class="automation-canvas" aria-label="Run timeline">${run.definition ? renderAutomationTimeline(run.definition, { run, selectedNodeId: snapshot.selectedNodeId }) : `<p class="automation-empty-graph">The frozen graph is unavailable for this run.</p>`}</section></details>` : ""}
+  </div>`;
+}

package/dist/src/web-ui/app/components/automations/schema-literal-inputs.js

@@ -0,0 +1,212 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function schemaFieldName(key) {
+  const words = String(key).replace(/([a-z\d])([A-Z])/gu, "$1 $2").replace(/[_-]+/gu, " ");
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+function rangeHint(minimum, maximum, unit) {
+  if (minimum !== undefined && maximum !== undefined) return `${minimum}–${maximum} ${unit}`;
+  if (minimum !== undefined) return `At least ${minimum} ${unit}`;
+  if (maximum !== undefined) return `Up to ${maximum} ${unit}`;
+  return "";
+}
+
+export function schemaLiteralHint(property) {
+  if (property.type === "array") {
+    const count = rangeHint(property.minItems, property.maxItems, "items");
+    const item = property.items ? `Each item: ${schemaLiteralHint(property.items)}` : "";
+    return ["List", count, item].filter(Boolean).join(" · ");
+  }
+  if (property.enum) return `Choose one of ${property.enum.length} options`;
+  if (property.type === "boolean") return "True or false";
+  if (property.type === "number" || property.type === "integer")
+    return [property.type === "integer" ? "Whole number" : "Number",
+      rangeHint(property.minimum, property.maximum, "")].filter(Boolean).join(" · ").trim();
+  return ["Text", rangeHint(property.minLength, property.maxLength, "characters")]
+    .filter(Boolean).join(" · ");
+}
+
+function hasScalarType(value, property) {
+  if (property.type === "integer" || property.type === "number")
+    return typeof value === "number" && Number.isFinite(value);
+  return typeof value === property.type;
+}
+
+function scalarDraft(value, property) {
+  if (value === undefined) return { value: "", unset: true };
+  if (!hasScalarType(value, property)) return { value: JSON.stringify(value), invalid: true };
+  return { value: String(value) };
+}
+
+function initialLiteralDraft(property, value) {
+  if (property.type !== "array") return scalarDraft(value, property);
+  if (value !== undefined && !Array.isArray(value))
+    return { value: JSON.stringify(value), invalid: true };
+  if (!property.items) return { value: JSON.stringify(value ?? []), invalid: true };
+  const items = value ?? Array.from({ length: property.minItems ?? 0 }, () => undefined);
+  return { items: items.map((item) => scalarDraft(item, property.items)) };
+}
+
+function constraintAttribute(name, value) {
+  return value === undefined ? "" : ` ${name}="${escapeHtml(value)}"`;
+}
+
+export function readBindingSchema(row) {
+  if (row.dataset.bindingSchema) return JSON.parse(row.dataset.bindingSchema);
+  if (row.dataset.bindingSchemaType) return { type: row.dataset.bindingSchemaType };
+  return null;
+}
+
+function renderEnum(property, draft, common) {
+  const choices = property.enum;
+  const index = draft.unset ? -1 : choices.indexOf(draft.value);
+  const unavailable = !draft.unset && index < 0;
+  return `<select ${common} data-schema-enum="${escapeHtml(JSON.stringify(choices))}" data-schema-enum-saved="${escapeHtml(draft.value ?? "")}"><option value=""${draft.unset ? " selected" : ""}>Choose a value</option>${unavailable ? `<option value="saved" selected>Unavailable value · ${escapeHtml(draft.value)}</option>` : ""}${choices.map((choice, position) => `<option value="${position}"${position === index ? " selected" : ""}>${escapeHtml(choice || "Empty text")}</option>`).join("")}</select>`;
+}
+
+function renderTextarea(common, value, attributes = "") {
+  const rendered = value.replace(/\r\n?/gu, "\n");
+  return `<textarea ${common}${attributes} dir="auto" data-schema-original="${escapeHtml(JSON.stringify(value))}" data-schema-rendered="${escapeHtml(JSON.stringify(rendered))}" rows="5">\n${escapeHtml(value)}</textarea>`;
+}
+
+function renderScalar(property, draft, label, { item = false, multiline = false } = {}) {
+  const marker = item ? "data-schema-item-value" : "data-binding-value";
+  const value = draft.value ?? "";
+  const common = `${marker} aria-label="${escapeHtml(label)}"`;
+  if (draft.invalid)
+    return `<label class="automation-schema-invalid">Saved value (JSON)${renderTextarea(common, value, ' data-schema-invalid="true" spellcheck="false"')}<small>The saved value has the wrong type. Correct its JSON value before saving.</small></label>`;
+  if (property.enum) return renderEnum(property, draft, common);
+  if (property.type === "boolean")
+    return `<select ${common}><option value=""${value === "" ? " selected" : ""}>Choose a value</option>${["true", "false"].map((choice) => `<option value="${choice}"${choice === value ? " selected" : ""}>${choice}</option>`).join("")}</select>`;
+  if (property.type === "number" || property.type === "integer")
+    return `<input type="number" ${common} value="${escapeHtml(value)}" step="${property.type === "integer" ? "1" : "any"}"${constraintAttribute("min", property.minimum)}${constraintAttribute("max", property.maximum)}>`;
+  const lengths = constraintAttribute("minlength", property.minLength) + constraintAttribute("maxlength", property.maxLength);
+  if (multiline || /[\r\n]/u.test(value)) return renderTextarea(common, value, lengths);
+  return `<input type="text" ${common} dir="auto" value="${escapeHtml(value)}"${lengths}>`;
+}
+
+function listCountIssue(property, count) {
+  if (property.minItems !== undefined && count < property.minItems)
+    return `add at least ${property.minItems} items.`;
+  if (property.maxItems !== undefined && count > property.maxItems)
+    return `use at most ${property.maxItems} items.`;
+  return "";
+}
+
+function renderArray(property, items, label) {
+  const minimum = property.minItems ?? 0;
+  const atMaximum = property.maxItems !== undefined && items.length >= property.maxItems;
+  return `<div class="automation-schema-items">${items.map((draft, index) => `<div class="automation-schema-item" data-schema-item><span class="automation-schema-item-number">${index + 1}</span>${renderScalar(property.items, draft, `${label} · item ${index + 1}`, { item: true })}<button type="button" data-schema-remove="${index}" aria-label="Remove item ${index + 1}"${items.length <= minimum ? " disabled" : ""}>Remove</button></div>`).join("")}</div>
+    <div class="automation-schema-list-actions"><button type="button" data-schema-add${atMaximum ? " disabled" : ""}>Add item</button><small>${items.length} item${items.length === 1 ? "" : "s"}</small></div>${listCountIssue(property, items.length) ? `<small class="automation-node-error">${escapeHtml(label)}: ${escapeHtml(listCountIssue(property, items.length))}</small>` : ""}`;
+}
+
+export function renderSchemaLiteralInput(property, value, { key, draft, multiline = false }) {
+  const current = draft ?? initialLiteralDraft(property, value);
+  const label = schemaFieldName(key);
+  if (property.type === "array" && !current.invalid)
+    return `<div class="automation-schema-literal" data-schema-literal data-schema-list>${renderArray(property, current.items, label)}</div>`;
+  return `<div class="automation-schema-literal" data-schema-literal>${renderScalar(property, current, label, { multiline })}</div>`;
+}
+
+function captureScalarDraft(input) {
+  if (input.dataset.schemaEnum) {
+    const choices = JSON.parse(input.dataset.schemaEnum);
+    if (input.value === "") return { value: "", unset: true };
+    if (input.value === "saved") return { value: input.dataset.schemaEnumSaved };
+    return { value: choices[Number(input.value)] };
+  }
+  let value = input.value;
+  if (input.dataset.schemaRendered && value === JSON.parse(input.dataset.schemaRendered))
+    value = JSON.parse(input.dataset.schemaOriginal);
+  return { value, ...(input.dataset.schemaInvalid === "true" ? { invalid: true } : {}) };
+}
+
+export function captureSchemaLiteralDraft(row) {
+  const container = row.querySelector("[data-schema-literal]");
+  if (!container) return undefined;
+  if (container.hasAttribute("data-schema-list"))
+    return { items: [...container.querySelectorAll("[data-schema-item-value]")].map(captureScalarDraft) };
+  return captureScalarDraft(container.querySelector("[data-binding-value]"));
+}
+
+function parseJsonDraft(draft, label) {
+  try { return JSON.parse(draft.value); }
+  catch { throw new Error(`${label}: enter valid JSON to correct the saved value.`); }
+}
+
+function parseScalarDraft(draft, property, label) {
+  if (draft.invalid) return parseJsonDraft(draft, label);
+  if (property.enum && draft.unset) throw new Error(`${label}: choose one of the available options.`);
+  if (property.type === "boolean") {
+    if (draft.value === "true") return true;
+    if (draft.value === "false") return false;
+    throw new Error(`${label}: choose true or false.`);
+  }
+  if (property.type === "integer" || property.type === "number") {
+    if (!draft.value.trim()) throw new Error(`${label}: Enter a valid number.`);
+    const value = Number(draft.value);
+    if (!Number.isFinite(value)) throw new Error(`${label}: Enter a valid number.`);
+    return value;
+  }
+  return draft.value;
+}
+
+function validateSchemaLiteralValue(value, property, label) {
+  if (property.type === "array") {
+    if (!Array.isArray(value)) throw new Error(`${label}: enter a list of items.`);
+    const countIssue = listCountIssue(property, value.length);
+    if (countIssue) throw new Error(`${label}: ${countIssue}`);
+    if (!property.items) throw new Error(`${label}: the item schema is unavailable.`);
+    value.forEach((item, index) => validateSchemaLiteralValue(item, property.items, `${label} · item ${index + 1}`));
+    return;
+  }
+  if (!hasScalarType(value, property)) throw new Error(`${label}: expected ${property.type}.`);
+  if (property.enum && !property.enum.includes(value)) throw new Error(`${label}: choose one of the available options.`);
+  if (property.type === "integer" && !Number.isSafeInteger(value)) throw new Error(`${label}: enter a supported whole number.`);
+  if (property.minimum !== undefined && value < property.minimum) throw new Error(`${label}: minimum is ${property.minimum}.`);
+  if (property.maximum !== undefined && value > property.maximum) throw new Error(`${label}: maximum is ${property.maximum}.`);
+  if (property.minLength !== undefined && value.length < property.minLength)
+    throw new Error(`${label}: enter at least ${property.minLength} characters.`);
+  if (property.maxLength !== undefined && value.length > property.maxLength)
+    throw new Error(`${label}: use at most ${property.maxLength} characters.`);
+}
+
+function parseLiteralDraft(draft, property, label) {
+  if (draft.invalid) return parseJsonDraft(draft, label);
+  if (property.type === "array") return draft.items.map((item, index) =>
+    parseScalarDraft(item, property.items, `${label} · item ${index + 1}`));
+  return parseScalarDraft(draft, property, label);
+}
+
+export function readSchemaLiteralValue(row) {
+  const property = readBindingSchema(row);
+  const label = schemaFieldName(row.querySelector("[data-binding-key]").value);
+  const value = parseLiteralDraft(captureSchemaLiteralDraft(row), property, label);
+  validateSchemaLiteralValue(value, property, label);
+  return value;
+}
+
+export function handleSchemaLiteralClick(element) {
+  const adding = element.dataset.schemaAdd !== undefined;
+  const removing = element.dataset.schemaRemove !== undefined;
+  if (!adding && !removing) return false;
+  const row = element.closest("[data-binding-row]");
+  const list = row?.querySelector("[data-schema-list]");
+  if (!list) return false;
+  const property = readBindingSchema(row);
+  const draft = captureSchemaLiteralDraft(row);
+  const items = draft.items;
+  if (adding && property.maxItems !== undefined && items.length >= property.maxItems) return true;
+  if (removing && items.length <= (property.minItems ?? 0)) return true;
+  if (adding) items.push({ value: "", unset: true });
+  if (removing) {
+    const index = Number(element.dataset.schemaRemove);
+    if (!Number.isInteger(index) || index < 0 || index >= items.length) return true;
+    items.splice(index, 1);
+  }
+  const label = schemaFieldName(row.querySelector("[data-binding-key]").value);
+  list.innerHTML = renderArray(property, items, label);
+  if (adding) list.querySelectorAll("[data-schema-item-value]")[items.length - 1]?.focus();
+  return true;
+}