@abot-ai/runtime 1.9.0 → 2.0.0

package/dist/src/web-ui/app/components/appearance-dialog.js

@@ -0,0 +1,79 @@
+import { COLOR_PALETTES } from "../lib/color-palettes.js";
+
+const paletteIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 3.5a8.5 8.5 0 0 0 0 17v-17Z"/><path d="M12 8h5m-5 4h7m-7 4h5"/></svg>';
+
+export function createAppearanceDialog({ mount, onOpen, onSelect, onSelectNavigation, onSave, onClose }) {
+  const doc = mount.ownerDocument;
+  const launcher = doc.createElement("button");
+  launcher.type = "button";
+  launcher.className = "rail-button appearance-launcher";
+  launcher.title = "Appearance";
+  launcher.setAttribute("aria-label", "Appearance");
+  launcher.setAttribute("aria-haspopup", "dialog");
+  launcher.innerHTML = `<span class="rail-icon">${paletteIcon}</span><span class="rail-button-label">Appearance</span>`;
+  launcher.addEventListener("click", onOpen);
+  mount.append(launcher);
+
+  const dialog = doc.createElement("dialog");
+  dialog.className = "appearance-dialog";
+  dialog.setAttribute("aria-labelledby", "appearance-title");
+  dialog.innerHTML = `<form class="appearance-form">
+    <header class="appearance-heading">
+      <h2 id="appearance-title">Appearance</h2>
+      <button type="button" class="appearance-close" aria-label="Close appearance">×</button>
+    </header>
+    <p class="appearance-description">Choose your workspace colors and sidebar layout.</p>
+    <fieldset class="appearance-palettes"><legend class="sr-only">Color palette</legend></fieldset>
+    <fieldset class="appearance-navigation"><legend>Sidebar layout</legend>
+      <label><input type="radio" name="navigation-display" value="labels"><span>Icons and text</span></label>
+      <label><input type="radio" name="navigation-display" value="icons"><span>Icons only</span></label>
+    </fieldset>
+    <p class="appearance-status" role="status" aria-live="polite"></p>
+    <footer class="appearance-footer"><button type="button" class="appearance-cancel">Cancel</button>
+      <button type="submit" class="appearance-save">Apply</button></footer>
+  </form>`;
+  const choices = dialog.querySelector(".appearance-palettes");
+  for (const palette of COLOR_PALETTES) {
+    const card = doc.createElement("label");
+    card.className = "appearance-palette";
+    card.style.setProperty("--preview-bg", palette.background);
+    card.style.setProperty("--preview-panel", palette.panel);
+    card.style.setProperty("--preview-accent", palette.accent);
+    card.innerHTML = `<input type="radio" name="color-palette" value="${palette.id}">
+      <span class="appearance-preview" aria-hidden="true"><span class="appearance-preview-rail"></span>
+        <span class="appearance-preview-content"><i></i><i></i><i></i><b></b></span></span>
+      <span class="appearance-palette-heading"><strong>${palette.name}</strong><span class="appearance-check" aria-hidden="true">✓</span></span>
+      <span class="appearance-palette-caption">${palette.description}</span>`;
+    card.querySelector("input").addEventListener("change", () => onSelect(palette.id));
+    choices.append(card);
+  }
+  const close = dialog.querySelector(".appearance-close");
+  const navigation = dialog.querySelector(".appearance-navigation");
+  for (const input of navigation.querySelectorAll("input"))
+    input.addEventListener("change", () => onSelectNavigation(input.value));
+  const cancel = dialog.querySelector(".appearance-cancel");
+  const save = dialog.querySelector(".appearance-save");
+  const status = dialog.querySelector(".appearance-status");
+  close.addEventListener("click", onClose);
+  cancel.addEventListener("click", onClose);
+  dialog.addEventListener("cancel", (event) => { event.preventDefault(); onClose(); });
+  dialog.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); onSave(); });
+  doc.body.append(dialog);
+  return {
+    render(state) {
+      for (const input of choices.querySelectorAll("input")) input.checked = input.value === state.selectedId;
+      for (const input of navigation.querySelectorAll("input")) input.checked = input.value === state.selectedNavigationMode;
+      choices.disabled = state.pending;
+      navigation.disabled = state.pending;
+      close.disabled = state.pending;
+      cancel.disabled = state.pending;
+      save.disabled = state.pending;
+      save.textContent = state.pending ? "Saving…" : "Apply";
+      status.textContent = state.error || "Previewing now. Apply to save across conversations.";
+      status.classList.toggle("is-error", Boolean(state.error));
+      if (state.open && !dialog.open) dialog.showModal();
+      if (!state.open && dialog.open) dialog.close();
+    },
+    destroy() { dialog.remove(); launcher.remove(); },
+  };
+}

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

@@ -1,13 +1,15 @@
 export function createAutomationArchiveCommands({ actions, getCurrent, requireSavedGraph,
-  confirmDiscard, onFilterChange }) {
+  confirmations, onFilterChange }) {
   return {
     archive: async () => {
       if (!requireSavedGraph()) return;
       const current = getCurrent();
       const selected = current.automations.find((item) => item.id === current.selectedAutomationId);
       if (!selected?.publishedRevision || selected.status === "archived") return;
-      if (!confirmDiscard("Archive this automation? Its schedule will pause, and its runs and reports will remain available.")) return;
-      if (await actions.archive()) onFilterChange(true);
+      const archived = await confirmations.run(
+        "Archive this automation? Its schedule will pause, and its runs and reports will remain available.",
+        { title: "Archive automation", confirmLabel: "Archive", tone: "danger" }, () => actions.archive());
+      if (archived) onFilterChange(true);
     },
     restore: async () => {
       if (!requireSavedGraph()) return;

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

@@ -1,3 +1,5 @@
+import { confirmDialog } from "../confirmation-dialog.js";
+
 export function automationAuthoringStarter(automationId = "", revision = 0) {
   const draftOnlyScope = "Design the future workflow; do not carry out its steps now. Leave permission grants, publication and execution to me.";
   const hasExactDraftRevision = automationId && Number.isInteger(revision) && revision > 0;
@@ -7,16 +9,33 @@ export function automationAuthoringStarter(automationId = "", revision = 0) {
 }
 
 /** Opens a normal editable chat; the visible message is the only draft association. */
-export function openAutomationAuthoringChat({
-  dom, shell, automationId = "", revision = 0,
-  confirmReplace = (message) => globalThis.confirm(message),
+export async function openAutomationAuthoringChat({
+  dom, shell, automationId = "", revision = 0, startNewConversation,
+  getEnvironmentId = () => "", isCurrent = () => true, confirmReplace = confirmDialog,
 }) {
   const composer = dom.composerInput;
-  if (!composer || !dom.newSessionButton) return false;
-  if (composer.value.trim() && !confirmReplace("Replace your unsent chat message with an automation starter?"))
-    return false;
-  dom.newSessionButton.click();
+  if (!composer || typeof startNewConversation !== "function") return false;
+  const draft = composer.value;
+  const environmentId = getEnvironmentId();
+  function canReplaceComposerDraft() {
+    if (environmentId !== getEnvironmentId()) return false;
+    if (!isCurrent()) return false;
+    return composer.value === draft;
+  }
+  if (draft.trim()) {
+    let approved;
+    try {
+      approved = await confirmReplace("Replace your unsent chat message with an automation starter?",
+        { title: "Replace unsent message", confirmLabel: "Replace" });
+    } catch { return false; }
+    if (approved !== true) return false;
+  }
+  if (!canReplaceComposerDraft()) return false;
+  if (await startNewConversation({ canCommit: canReplaceComposerDraft }) !== true) return false;
+  if (environmentId !== getEnvironmentId()) return false;
+  if (!isCurrent()) return false;
   if (shell.activeWorkspace() !== "chat") return false;
+  if (composer.value !== draft && composer.value !== "") return false;
   composer.value = automationAuthoringStarter(automationId, revision);
   const EventType = composer.ownerDocument?.defaultView?.Event || globalThis.Event;
   composer.dispatchEvent(new EventType("input", { bubbles: true }));

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

@@ -0,0 +1,78 @@
+import { confirmDialog } from "../confirmation-dialog.js";
+import { automationRerunConfirmation } from "./rerun-confirmation.js";
+
+function automationConfirmationIdentity(snapshot) {
+  const selected = snapshot.automations?.find((item) => item.id === snapshot.selectedAutomationId);
+  return JSON.stringify([snapshot.selectedAutomationId, snapshot.selectedRunId, snapshot.selectedNodeId,
+    snapshot.draft?.revision, snapshot.publishedDefinition?.revision, selected?.publishedRevision,
+    selected?.status, snapshot.run?.id, snapshot.run?.status, snapshot.mutation]);
+}
+
+/** An approval belongs to the exact view, revision and local edits that requested it. */
+export function captureAutomationConfirmationScope({ actions, getCurrent, getEditRevision = () => 0 }) {
+  const ownsView = actions.captureActionScope?.() || (() => true);
+  const identity = automationConfirmationIdentity(getCurrent());
+  const editRevision = getEditRevision();
+  return () => {
+    if (!ownsView()) return false;
+    if (editRevision !== getEditRevision()) return false;
+    return identity === automationConfirmationIdentity(getCurrent());
+  };
+}
+
+export function createAutomationConfirmations({ actions, getCurrent, getEditRevision, confirm = confirmDialog }) {
+  let requestRevision = 0;
+  async function prepare(message, options, operation) {
+    const revision = ++requestRevision;
+    const ownsScope = captureAutomationConfirmationScope({ actions, getCurrent, getEditRevision });
+    const isCurrent = () => revision === requestRevision && ownsScope();
+    let approved;
+    try { approved = await confirm(message, options); }
+    catch { return false; }
+    if (approved !== true || !isCurrent()) return false;
+    const commit = () => isCurrent() ? operation() : false;
+    commit.canCommit = isCurrent;
+    return commit;
+  }
+  return {
+    invalidate() { requestRevision += 1; },
+    prepare,
+    async run(message, options, operation) {
+      const commit = await prepare(message, options, operation);
+      return commit ? commit() : false;
+    },
+  };
+}
+
+export function createAutomationDestructiveCommands({ actions, getCurrent, requireSavedGraph,
+  confirmations, onDraftDeleted }) {
+  return {
+    "remove-node": () => {
+      if (!requireSavedGraph()) return false;
+      const nodeId = getCurrent().selectedNodeId;
+      return confirmations.run("Remove this step from the draft?",
+        { title: "Remove step", confirmLabel: "Remove", tone: "danger" }, async () => {
+          const removed = await actions.mutateDraft({ kind: "remove_node", nodeId });
+          if (removed) actions.selectNode("");
+          return removed;
+        });
+    },
+    "delete-draft": () => {
+      const current = getCurrent();
+      if (!current.draft || current.publishedDefinition) return false;
+      if (current.automations.find((item) => item.id === current.selectedAutomationId)?.publishedRevision) return false;
+      return confirmations.run("Delete this unpublished automation draft and all its steps? This cannot be undone.",
+        { title: "Delete draft", confirmLabel: "Delete", tone: "danger" }, async () => {
+          const deleted = await actions.deleteDraft();
+          if (deleted) onDraftDeleted();
+          return deleted;
+        });
+    },
+    rerun: () => {
+      const run = getCurrent().run;
+      if (!run) return false;
+      return confirmations.run(automationRerunConfirmation(run),
+        { title: "Run automation again", confirmLabel: "Run again" }, () => actions.rerun());
+    },
+  };
+}

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

@@ -20,6 +20,7 @@ export function createAutomationDraftRecoveryCommands({ actions, requireSavedGra
       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.`,
+        { title: "Reset draft", confirmLabel: "Reset draft", tone: "danger" },
       ));
       if (restored) onRestored();
       return restored;

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

@@ -1,3 +1,4 @@
+import { readReasoningPreferenceField } from "../../lib/reasoning-preference.js";
 import { renderReasoningModeField, retainedReasoningMode } from "../../lib/reasoning-controls.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { readBindingFields, renderBindingFields } from "./binding-fields.js";
@@ -135,7 +136,7 @@ function renderAgentEditor(node, catalog, producers) {
   return `${producers.length ? `<p class="automation-input-notice" data-input-connection="${connected ? "connected" : "none"}"${connected ? " hidden" : ""}>No earlier step output is connected. Connect an output below if this agent should use it.</p>` : ""}
     ${renderBindingFields(node.inputs, null, { name: "inputs", allowAdd: true, producers })}
     ${renderModelChoice(node, catalog)}
-    ${renderReasoningModeField(node.agentMode || "fast", catalog?.models?.find((model) => model.id === node.modelProfileId))}
+    ${renderReasoningModeField(node.agentMode || "fast", catalog?.models?.find((model) => model.id === node.modelProfileId), undefined, node.reasoningPreference)}
     <label>Role instructions<textarea name="roleInstructions" dir="auto">${escapeHtml(node.roleInstructions || "")}</textarea></label>
     <label>Prompt<textarea name="prompt" dir="auto" required>${escapeHtml(node.prompt || "")}</textarea></label>
     <details class="automation-node-contract"><summary>Result contract · ${node.result?.kind === "json" ? "Structured JSON" : "Text"}</summary>
@@ -219,6 +220,9 @@ export function readAutomationNodePatch(form, node, catalog) {
   if (node.kind === "agent") {
     patch.modelProfileId = String(fields.get("modelProfileId") || "");
     patch.agentMode = retainedReasoningMode(form, node.agentMode || "fast");
+    const preference = readReasoningPreferenceField(form);
+    if (preference) patch.reasoningPreference = preference;
+    else if (node.reasoningPreference) patch.reasoningPreference = null;
     patch.roleInstructions = String(fields.get("roleInstructions") || "");
     patch.prompt = String(fields.get("prompt") || "");
     patch.inputs = readBindingFields(form, "inputs");

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

@@ -1,4 +1,4 @@
-import { syncReasoningModeField } from "../../lib/reasoning-controls.js";
+import { clearReasoningOffForMode, syncReasoningModeField } from "../../lib/reasoning-controls.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { listAvailableAutomationProducers } from "../../lib/automation-binding-producers.js";
 import { findAutomationNode } from "./timeline.js";
@@ -165,7 +165,9 @@ export function createAutomationStepEditorDialog({ root, actions, documentRoot,
     if (target.matches("[data-agent-tool-search]")) { updateAgentToolPicker(form); return; }
     if (!form.contains(target) || entry.saving) return;
     entry.dirty = true;
-    if (event.type === "change" && target.matches('[name="modelProfileId"]'))
+    if (event.type === "change" && target.matches("[data-reasoning-mode]"))
+      clearReasoningOffForMode(form, entry.catalog?.models);
+    if (event.type === "change" && target.matches('[name="modelProfileId"], [data-reasoning-preference-mode]'))
       syncReasoningModeField(form, entry.catalog?.models);
     if (target.matches("[data-agent-tool]")) updateAgentToolPicker(form);
     if (event.type === "change" && target.matches('[name="toolOperation"]')) {

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

@@ -46,7 +46,7 @@ function nodeIsRunning(node, run) {
 
 function nodeMetadata(node) {
   if (node.kind === "agent") {
-    return [node.modelProfileId || "Model not selected", displayReasoningMode(node.agentMode) || ""].filter(Boolean).join(" · ");
+    return [node.modelProfileId || "Model not selected", displayReasoningMode(node.agentMode, node.reasoningPreference) || ""].filter(Boolean).join(" · ");
   }
   return [node.operation?.toolName, node.operation?.operationId].filter(Boolean).join(" · ") || "Operation not selected";
 }
@@ -128,7 +128,7 @@ export function renderAutomationNodeDetails(node, run = null) {
   const record = nodeRunState(run, node.id);
   const operation = node.kind === "tool"
     ? `<dt>Operation</dt><dd>${escapeHtml(nodeMetadata(node))}</dd>`
-    : `<dt>Model</dt><dd>${escapeHtml(node.modelProfileId || "Not selected")}</dd><dt>Role</dt><dd>${escapeHtml(displayReasoningMode(node.agentMode) || "Not selected")}</dd>`;
+    : `<dt>Model</dt><dd>${escapeHtml(node.modelProfileId || "Not selected")}</dd><dt>Role</dt><dd>${escapeHtml(displayReasoningMode(node.agentMode, node.reasoningPreference) || "Not selected")}</dd>`;
   const prompt = node.kind === "agent" && node.prompt
     ? `<div class="automation-inspector-prompt"><strong>Prompt</strong><p dir="auto">${escapeHtml(node.prompt)}</p></div>`
     : "";

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

@@ -0,0 +1,37 @@
+import { captureAutomationConfirmationScope } from "./confirmation-actions.js";
+import { focusSelectedAutomationStep } from "./run-steps-view.js";
+
+/** Clean navigation stays synchronous; an async discard approval is never truthy permission. */
+export function createAutomationWorkspaceNavigation({ actions, getCurrent, getEditRevision, prepareLeave, root }) {
+  let requestRevision = 0;
+  function leave(operation) {
+    const revision = ++requestRevision;
+    const isCurrent = captureAutomationConfirmationScope({ actions, getCurrent, getEditRevision });
+    function commit(approved) {
+      if (approved !== true && typeof approved !== "function") return false;
+      if (revision !== requestRevision) return false;
+      if (!isCurrent()) return false;
+      if (approved?.canCommit?.() === false) return false;
+      if (typeof approved === "function" && approved() === false) return false;
+      return operation();
+    }
+    const approved = prepareLeave();
+    if (typeof approved?.then === "function") return Promise.resolve(approved).then(commit);
+    return commit(approved);
+  }
+  function selectNode(element) {
+    return leave(() => {
+      const current = getCurrent();
+      const nodeId = element.dataset.selectNode || element.dataset.automationNode || "";
+      if (nodeId === current.selectedNodeId || !nodeId) { actions.selectNode(""); return; }
+      const nodeButton = element.dataset.automationNode !== undefined ? element
+        : [...root.querySelectorAll("[data-automation-node]")]
+          .find((item) => item.dataset.automationNode === nodeId);
+      if (element.dataset.selectNode !== undefined)
+        nodeButton?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+      actions.selectNode(nodeId);
+      if (current.selectedRunId) focusSelectedAutomationStep(root);
+    });
+  }
+  return { leave, selectNode };
+}

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

@@ -5,14 +5,14 @@ import { createAutomationDraftRecoveryCommands } from "./draft-recovery-actions.
 import { activateAutomationLibraryTab, automationLibraryTabForKey, renderAutomationLibraryTabs } from "./library-tabs.js";
 import { readAutomationDefinitionPatch, renderAutomationEditor, renderAutomationToolResults, toolDisplayName } from "./editor.js";
 import { createAutomationStepEditorDialog } from "./step-editor-dialog.js";
-import { focusSelectedAutomationStep } from "./run-steps-view.js";
 import { renderAutomationRun } from "./run.js";
 import { createAutomationRunHistoryControls } from "./run-history-controls.js";
 import { findAutomationPosition } from "../../lib/automation-graph-position.js";
 import { canWrapAutomationSequence } from "../../lib/automation-parallel-depth.js";
 import { createAutomationTimelineCamera } from "./timeline-camera.js";
 import { createAutomationLiveView } from "./live-view.js";
-import { automationRerunConfirmation } from "./rerun-confirmation.js";
+import { createAutomationConfirmations, createAutomationDestructiveCommands } from "./confirmation-actions.js";
+import { createAutomationWorkspaceNavigation } from "./workspace-navigation.js";
 import { matchesAutomationGrant, requiresFullPlus, selectedAutomationOperations } from "./permission-selection.js";
 
 const DRAG_TYPE = "application/x-abot-automation-step";
@@ -34,6 +34,7 @@ export function paletteNode(target, catalog) {
   return {
     kind: "agent", title: agent.title || "New agent", onFailure: agent.onFailure || "stop",
     modelProfileId: agent.modelProfileId || "", agentMode: agent.agentMode || "fast",
+    ...(agent.reasoningPreference ? { reasoningPreference: { ...agent.reasoningPreference } } : {}),
     roleInstructions: agent.roleInstructions || "", prompt: agent.prompt || "",
     inputs: agent.inputs || {}, tools: agent.tools || [], result: agent.result || { kind: "text" },
     ...(Array.isArray(agent.acceptance) ? { acceptance: agent.acceptance } : {}),
@@ -53,10 +54,11 @@ function permissionDialogMarkup(selection, purpose, revision) {
 
 export function createAutomationsWorkspace({
   root, actions, documentRoot = document,
-  confirmDiscard = (message) => window.confirm(message),
+  confirmDiscard,
 }) {
   let current = actions.snapshot();
   let definitionDirty = false;
+  let editRevision = 0;
   let insertion = null;
   let permissionDialog = null;
   let paletteQuery = "";
@@ -72,6 +74,9 @@ export function createAutomationsWorkspace({
   });
   const liveView = createAutomationLiveView(root);
   const runHistory = createAutomationRunHistoryControls({ root, actions });
+  const confirmationScope = { actions, getCurrent: () => current, getEditRevision: () => editRevision };
+  const confirmations = createAutomationConfirmations({ ...confirmationScope, confirm: confirmDiscard });
+  const navigation = createAutomationWorkspaceNavigation({ ...confirmationScope, prepareLeave, root });
 
   function isDirty() { return definitionDirty || stepEditor.isDirty(); }
 
@@ -83,10 +88,12 @@ export function createAutomationsWorkspace({
   function prepareLeave() {
     if (!stepEditor.prepareLeave()) return false;
     if (permissionDialog?.open) permissionDialog.close();
-    if (!isDirty()) return true;
-    if (!confirmDiscard("Discard unsaved automation changes?")) return false;
-    definitionDirty = false;
-    return true;
+    if (!isDirty()) { confirmations.invalidate(); return true; }
+    return confirmations.prepare("Discard unsaved automation changes?",
+      { title: "Discard changes", confirmLabel: "Discard", tone: "danger" }, () => {
+        definitionDirty = false;
+        return true;
+      });
   }
 
   function requireSavedGraph() {
@@ -166,7 +173,7 @@ export function createAutomationsWorkspace({
   async function selectLibraryTab(name, focus = false) {
     if (name === activeLibraryTab) return;
     if (name === "templates" && current.selectedAutomationId) {
-      if (!prepareLeave() || !await actions.openRoute("", "")) return;
+      if (!await navigation.leave(() => actions.openRoute("", ""))) return;
     }
     activeLibraryTab = name;
     activateAutomationLibraryTab(root, name, { focus });
@@ -233,13 +240,6 @@ export function createAutomationsWorkspace({
     await actions.mutateDraft({ kind: "wrap_parallel", nodeIds: [current.selectedNodeId, position.next.id] });
   }
 
-  async function removeStep() {
-    if (!requireSavedGraph()) return;
-    if (!confirmDiscard("Remove this step from the draft?")) return;
-    const removed = await actions.mutateDraft({ kind: "remove_node", nodeId: current.selectedNodeId });
-    if (removed) actions.selectNode("");
-  }
-
   function openPermissionDialog(purpose) {
     if (permissionDialog?.open) return;
     const selectedAutomation = current.automations.find((item) => item.id === current.selectedAutomationId);
@@ -292,23 +292,20 @@ export function createAutomationsWorkspace({
   }
 
   const command = {
-    ...createAutomationDraftRecoveryCommands({ actions, requireSavedGraph, confirmDiscard,
+    ...createAutomationDraftRecoveryCommands({ actions, requireSavedGraph,
+      confirmDiscard: (message, options) => confirmations.run(message, options, () => true),
       onRestored: () => { definitionDirty = false; insertion = null; } }),
     ...createAutomationArchiveCommands({ actions, getCurrent: () => current, requireSavedGraph,
-      confirmDiscard, onFilterChange: (archived) => { showArchived = archived; } }),
+      confirmations, onFilterChange: (archived) => { showArchived = archived; } }),
+    ...createAutomationDestructiveCommands({ actions, getCurrent: () => current, requireSavedGraph,
+      confirmations, onDraftDeleted: () => { definitionDirty = false; insertion = null; } }),
     "show-full-step-output": () => actions.showFullStepOutput(),
     refresh: () => actions.refresh(), create: () => actions.create(),
     describe: () => actions.openAuthoringChat(current.selectedAutomationId, current.draft?.revision),
-    back: () => { if (prepareLeave()) return actions.openRoute("", ""); },
+    back: () => navigation.leave(() => actions.openRoute("", "")),
     "save-draft": saveDefinition,
     "edit-step": () => stepEditor.open(root.querySelector('[data-action="edit-step"]')),
     "toggle-details": () => { detailsCollapsed = !detailsCollapsed; updateDetailsVisibility(); },
-    "delete-draft": async () => {
-      if (!current.draft || current.publishedDefinition ||
-          current.automations.find((item) => item.id === current.selectedAutomationId)?.publishedRevision) return;
-      if (!confirmDiscard("Delete this unpublished automation draft and all its steps? This cannot be undone.")) return;
-      if (await actions.deleteDraft()) { definitionDirty = false; insertion = null; }
-    },
     "save-agent": () => { if (requireSavedGraph()) return actions.saveAgent(); },
     validate: () => { if (requireSavedGraph()) return actions.validate(); },
     publish: async () => {
@@ -319,19 +316,16 @@ export function createAutomationsWorkspace({
     run: () => { if (requireSavedGraph()) return actions.startRun(); },
     "toggle-active": () => current.automations.find((item) => item.id === current.selectedAutomationId)?.status === "active"
       ? actions.setActive(false) : openPermissionDialog("activate"),
-    "show-runs": () => {
-      if (!prepareLeave()) return;
+    "show-runs": () => navigation.leave(() => {
       const runId = current.runs[0]?.id || current.lastViewedRunId;
       return runId ? actions.openRun(runId) : notify("No runs yet.");
-    },
-    editor: () => { if (prepareLeave()) return actions.openRoute(current.selectedAutomationId, ""); },
+    }),
+    editor: () => navigation.leave(() => actions.openRoute(current.selectedAutomationId, "")),
     stop: () => actions.stopRun(),
-    rerun: () => current.run &&
-      confirmDiscard(automationRerunConfirmation(current.run)) && actions.rerun(),
     "open-chat-run": () => actions.showChatRun(current.selectedRunId),
     "move-up": () => moveStep(-1), "move-down": () => moveStep(1),
     "move-to-slot": moveToSlot,
-    parallel: wrapParallel, "remove-node": removeStep,
+    parallel: wrapParallel,
   };
 
   root.addEventListener("input", (event) => {
@@ -340,10 +334,10 @@ export function createAutomationsWorkspace({
       refreshToolPalette();
       return;
     }
-    if (event.target.closest("[data-automation-definition-form]")) definitionDirty = true;
+    if (event.target.closest("[data-automation-definition-form]")) { definitionDirty = true; editRevision += 1; }
   });
   root.addEventListener("change", (event) => {
-    if (event.target.closest("[data-automation-definition-form]")) definitionDirty = true;
+    if (event.target.closest("[data-automation-definition-form]")) { definitionDirty = true; editRevision += 1; }
   });
   root.addEventListener("click", (event) => {
     const element = event.target.closest("button");
@@ -362,28 +356,19 @@ export function createAutomationsWorkspace({
       return;
     }
     if (element.dataset.selectAutomation !== undefined) {
-      if (prepareLeave()) void actions.openRoute(element.dataset.selectAutomation, "");
+      void navigation.leave(() => actions.openRoute(element.dataset.selectAutomation, ""));
       return;
     }
     if (element.dataset.templateId !== undefined) {
-      if (prepareLeave()) void actions.createTemplate(element.dataset.templateId);
+      void navigation.leave(() => actions.createTemplate(element.dataset.templateId));
       return;
     }
     if (element.dataset.selectRun !== undefined) {
-      if (prepareLeave()) void actions.openRun(element.dataset.selectRun);
+      void navigation.leave(() => actions.openRun(element.dataset.selectRun));
       return;
     }
     if (element.dataset.selectNode !== undefined || element.dataset.automationNode !== undefined) {
-      if (!prepareLeave()) return;
-      const nodeId = element.dataset.selectNode || element.dataset.automationNode || "";
-      if (nodeId === current.selectedNodeId || !nodeId) { actions.selectNode(""); return; }
-      const nodeButton = element.dataset.automationNode !== undefined ? element
-        : [...root.querySelectorAll("[data-automation-node]")]
-          .find((item) => item.dataset.automationNode === nodeId);
-      if (element.dataset.selectNode !== undefined)
-        nodeButton?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
-      actions.selectNode(nodeId);
-      if (current.selectedRunId) focusSelectedAutomationStep(root);
+      void navigation.selectNode(element);
       return;
     }
     if (element.dataset.insertParent !== undefined) {

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

@@ -1,3 +1,5 @@
+import { parseReasoningBudgetMode } from "./reasoning-budget.js";
+import { parseReasoningModeBudgets } from "./reasoning-mode-budgets.js";
 import {
   malformedConfigRaw,
   configRequiresRawRepair,
@@ -292,6 +294,10 @@ export function createConfigWorkspaceModel() {
     const type = input.dataset.valueType || "string";
     if (type === "boolean") return input.checked;
     if (type === "number") return parseNumericConfigInputValue(input);
+    if (type === "reasoning-budget-mode")
+      return parseReasoningBudgetMode(input.value, getConfigPathValue(file.config, path));
+    if (type === "reasoning-mode-budgets")
+      return parseReasoningModeBudgets(input.value, getConfigPathValue(file.config, path));
     if (type === "execution-policy") {
       return executionPolicyValueForConfig(
         input.value,

package/dist/src/web-ui/app/components/config-workspace/model-removal.js

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../confirmation-dialog.js";
 function isDefinitiveModelRemovalRejection(error) {
   const status = error?.status;
   if (!Number.isInteger(status)) return false;
@@ -24,7 +25,7 @@ export function createModelRemovalController({
   refreshRuntimeConfig,
   onSaved,
   setStatus,
-  confirmRemoval = (message) => window.confirm(message),
+  confirmRemoval = (message) => confirmDialog(message, { title: "Remove model", confirmLabel: "Remove model", tone: "danger" }),
 }) {
   let pending = false;
 
@@ -78,11 +79,12 @@ export function createModelRemovalController({
     pending = true;
     try {
       if (
-        !confirmRemoval(
+        !await confirmRemoval(
           `Remove ${label || profileId} from configured models? Its model file, provider and credentials will be kept.`,
         )
       )
         return false;
+      if (environmentId !== getEnvironmentId()) return false;
       try {
         await removeModel({ profileId, expectedRevision }, environmentId);
       } catch (error) {

package/dist/src/web-ui/app/components/config-workspace/model-rendering.js

@@ -1,3 +1,5 @@
+import { isTokenBudgetModel, renderReasoningBudget, renderReasoningEffort } from "./reasoning-budget.js";
+import { renderReasoningModeBudgets } from "./reasoning-mode-budgets.js";
 import { configRequiresRawRepair } from "./raw-config-repair.js";
 import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
 import { isConfigObject } from "./config-model.js";
@@ -128,22 +130,9 @@ export function createConfigModelRendering({
               [...basePath, "generation", "topP"],
               { type: "number", step: "0.01" },
             )}</label>
-            <label><span>Reasoning</span>${renderConfigInput(
-              file,
-              [...basePath, "generation", "reasoningEffort"],
-              {
-                type: "select",
-                values: [
-                  "",
-                  "none",
-                  "minimal",
-                  "low",
-                  "medium",
-                  "high",
-                  "xhigh",
-                ],
-              },
-            )}</label>
+            ${renderReasoningBudget(file, [...basePath, "generation"], renderConfigInput, { supported: isTokenBudgetModel(file, state.configDashboard, profile), dashboard: state.configDashboard })}
+            ${renderReasoningEffort(file, [...basePath, "generation"], renderConfigInput)}
+            ${renderReasoningModeBudgets(file, [...basePath, "generation"], renderConfigInput, { supported: isTokenBudgetModel(file, state.configDashboard, profile) })}
           </div>
           <button
             class="config-icon-button config-calibration-remove"
@@ -239,6 +228,9 @@ export function createConfigModelRendering({
               ["contextWindowTokens"],
               { type: "number", min: "1", step: "1" },
             )}</label>
+            ${isTokenBudgetModel(model, state.configDashboard) ? renderReasoningEffort(model, ["generation"], renderConfigInput) : ""}
+            ${renderReasoningBudget(model, ["generation"], renderConfigInput, { supported: isTokenBudgetModel(model, state.configDashboard), dashboard: state.configDashboard })}
+            ${renderReasoningModeBudgets(model, ["generation"], renderConfigInput, { supported: isTokenBudgetModel(model, state.configDashboard) })}
           </div>
           ${renderExecutionRoute(model)}
         </div>