@abot-ai/runtime 1.8.1 → 2.0.0

package/dist/src/web-ui/app/app.js

@@ -1,7 +1,9 @@
+import { createAppearanceFeature } from "./appearance-feature.js";
 import { createComposerFeature } from "./controllers/composer-feature.js";
 import { isWorkspaceChange } from "./lib/workspace-change.js";
 import { prepareEnvironmentWorkspaceChanges } from "./controllers/environment-workspace-preparation.js";
 import { createAppState } from "./app-state.js";
+import { createSkillsFeature } from "./skills-feature.js";
 import { createProjectsFeature } from "./projects-feature.js";
 import { createComposerSurfaceController } from "./controllers/composer-surface-controller.js";
 import { startWebApp } from "./app-bootstrap.js";
@@ -45,6 +47,7 @@ const dom = findAppDom();
 
 const storage = await initializeWorkspaceState();
 const preferences = createClientPreferences(storage);
+createAppearanceFeature({ mount: dom.appearanceRoot, storage });
 const runtimeClient = createRuntimeWebClient({
   getConfig: () => state.config,
   getEnvironmentId: selectedEnvironmentId,
@@ -66,6 +69,7 @@ let runtimeSelection;
 let projectsFeature;
 let workspaceRoutes;
 let notifications;
+let skills;
 const operationsController = createOperationsController({
   onSummaryChange: () => configWorkspace?.syncSummary(),
   dom,
@@ -102,6 +106,7 @@ const shell = createWorkspaceShell({
   dom,
   onNavigationChange: () => { configWorkspace?.syncSummary(); workspaceRoutes?.sync(); },
   isWorkspaceAvailable: (destination) => {
+    if (skills?.isWorkspaceAvailable(destination) === false) return false;
     if (!notifications?.isWorkspaceAvailable(destination)) return false;
     return schedulesFeature?.isWorkspaceAvailable(destination) ?? false;
   },
@@ -130,6 +135,7 @@ const shell = createWorkspaceShell({
     return configWorkspace.prepareDiscardChanges("leave configuration");
   },
 });
+skills = createSkillsFeature({ dom, client: runtimeClient, shell, getEnvironmentId: selectedEnvironmentId });
 notifications = createNotificationsFeature({
   dom, state, client: runtimeClient, shell, getEnvironmentId: selectedEnvironmentId, send: sendRealtime,
 });
@@ -176,8 +182,8 @@ passiveLearning = createPassiveLearningFeature({
   learningRoot: dom.learningRoot,
   openLearning: () => shell.activateWorkspace("learning"),
   openComputerAccess: () => configWorkspace?.openComputerSetup(),
-  showActivityMemories: () => {
-    if (shell.activateWorkspace("memory"))
+  showActivityMemories: async () => {
+    if (await shell.activateWorkspace("memory"))
       configWorkspace?.showActivityMemories();
   },
 });
@@ -230,6 +236,7 @@ const sessionController = createSessionController({
   onSidebarChange: renderSessions,
   sessionActionsMenu,
   renderGroups: (input) => projectsFeature?.renderSessionGroups(input) ?? false,
+  getDeletedProjectIds: () => projectsFeature?.getDeletedProjectIds() ?? [],
   shell,
   preferences,
   client: runtimeClient,
@@ -324,7 +331,7 @@ composerFeature = createComposerFeature({
   ensureSession: () => conversationSession.ensureSession(),
   getSettings: () => {
     rememberCurrentModelSelection();
-    return { agentMode: state.agentMode, toolPermissionMode: currentToolPermissionMode(), modelPreference: selectedModelPreference() };
+    return { agentMode: state.agentMode, toolPermissionMode: currentToolPermissionMode(), modelPreference: selectedModelPreference(), reasoningPreference: runtimeSelection.selectedReasoningPreference() };
   },
   steer: steerController.steer, composerActions,
   selectedModelSupportsImageInput: () => runtimeSelection.selectedModelSupportsImageInput(
@@ -340,6 +347,7 @@ composerAttachments = composerFeature.attachments;
 composerQueueController = composerFeature.queue;
 composerSubmitController = composerFeature.submit;
 projectsFeature = createProjectsFeature({
+  preferences,
   isRuntimeReady: runtimeOnboarding.isReady,
   onSessionCreated: (sessionId) =>
     runtimeSelection.initializeSessionMode(sessionId),
@@ -385,6 +393,7 @@ const modelSelector = createModelSelector({
   menu: dom.modelSelectMenu,
   onOpen: () => {
     state.agentModeMenuOpen = false;
+    state.reasoningBudgetMenuOpen = false;
     state.permissionModeMenuOpen = false;
     renderAgentModeControl();
     renderPermissionModeControl();
@@ -440,7 +449,7 @@ const appEventBindings = createAppEventBindings({
     subscribeSession,
     renderMessages,
     renderAgentPicker,
-    beforeEnvironmentChange: () => prepareEnvironmentWorkspaceChanges(schedulesFeature, configWorkspace),
+    beforeEnvironmentChange: () => prepareEnvironmentWorkspaceChanges(schedulesFeature, configWorkspace, skills),
     saveEnvironmentId,
     loadModels,
     loadAgentMode,
@@ -662,6 +671,7 @@ void startWebApp({
   dashboard: dashboardFeature,
   learning: passiveLearning,
   notifications,
+  skills,
   schedules: schedulesFeature,
   projects: projectsFeature,
   selection: runtimeSelection,

package/dist/src/web-ui/app/appearance-feature.js

@@ -0,0 +1,28 @@
+import { createAppearanceController } from "./controllers/appearance-controller.js";
+import { createAppearanceDialog } from "./components/appearance-dialog.js";
+import { COLOR_PALETTES } from "./lib/color-palettes.js";
+
+export function createAppearanceFeature({ mount, storage }) {
+  if (!mount) return;
+  const doc = mount.ownerDocument;
+  let view;
+  const controller = createAppearanceController({
+    storage,
+    applyNavigationMode(mode) { doc.documentElement.dataset.navigation = mode; },
+    applyPalette(id) {
+      doc.documentElement.dataset.palette = id;
+      const theme = doc.querySelector('meta[name="theme-color"]');
+      if (theme) theme.content = COLOR_PALETTES.find((palette) => palette.id === id).background;
+    },
+    onChange: (state) => view?.render(state),
+  });
+  view = createAppearanceDialog({
+    mount,
+    onOpen: () => controller.open(),
+    onSelect: (id) => controller.select(id),
+    onSelectNavigation: (mode) => controller.selectNavigationMode(mode),
+    onSave: () => { void controller.save(); },
+    onClose: () => controller.close(),
+  });
+  return { destroy() { controller.destroy(); view.destroy(); } };
+}

package/dist/src/web-ui/app/automations-feature.js

@@ -4,7 +4,7 @@ import { createAutomationChatRunProjection } from "./components/automations/chat
 import { openAutomationAuthoringChat } from "./components/automations/authoring-entry.js";
 
 export function createAutomationsFeature({
-  dom, client, shell, realtime, getEnvironmentId, onNavigationChange,
+  dom, client, shell, realtime, getEnvironmentId, onNavigationChange, startNewConversation,
   documentRoot = document,
 }) {
   if (!dom.automationsRoot || !dom.automationsWorkspaceButton || !dom.automationChatRunPanel) {
@@ -25,10 +25,15 @@ export function createAutomationsFeature({
   });
   const chatRun = createAutomationChatRunProjection({
     dom, client, getEnvironmentId, onNavigationChange,
-    returnToStudio: (run) => {
+    returnToStudio: async (run) => {
+      const environmentId = getEnvironmentId(), runId = chatRun.runId();
+      const isCurrent = controller.captureActionScope();
+      const activate = await shell.prepareWorkspaceActivation("automations");
+      if (!activate || !isCurrent()) return;
+      if (environmentId !== getEnvironmentId() || runId !== chatRun.runId()) return;
+      if (activate.canCommit?.() === false || activate() === false) return;
       chatRun.clear();
-      if (!shell.activateWorkspace("automations")) return;
-      void controller.openRoute(run?.automationId || "", run?.id || "");
+      await controller.openRoute(run?.automationId || "", run?.id || "");
     },
   });
   view = createAutomationsWorkspace({
@@ -36,10 +41,14 @@ export function createAutomationsFeature({
     actions: {
       ...controller,
       openAuthoringChat(automationId, revision) {
-        return openAutomationAuthoringChat({ dom, shell, automationId, revision });
+        return openAutomationAuthoringChat({ dom, shell, automationId, revision, startNewConversation,
+          getEnvironmentId, isCurrent: controller.captureActionScope() });
       },
-      showChatRun(runId) {
-        if (!shell.activateWorkspace("chat")) return false;
+      async showChatRun(runId) {
+        const isCurrent = controller.captureActionScope();
+        const activate = await shell.prepareWorkspaceActivation("chat");
+        if (!activate || !isCurrent()) return false;
+        if (activate.canCommit?.() === false || activate() === false) return false;
         return chatRun.open(runId);
       },
     },
@@ -93,10 +102,10 @@ export function createAutomationsFeature({
     },
     prepareRouteChange(route) {
       if (shell.activeWorkspace() !== "automations") return true;
-      const changesIdentity = route.workspace !== "automations" ||
-        route.automation !== controller.selectedAutomationId() ||
-        route.run !== controller.selectedRunId() ||
-        route.environment !== getEnvironmentId();
+      const changesEnvironment = Boolean(route.environment) && route.environment !== getEnvironmentId();
+      if (route.workspace !== "automations" && !changesEnvironment) return true;
+      const changesIdentity = changesEnvironment || route.automation !== controller.selectedAutomationId() ||
+        route.run !== controller.selectedRunId();
       return !changesIdentity || view.prepareLeave();
     },
   };

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/run-history-controls.js

@@ -0,0 +1,77 @@
+import { revealSelectedAutomationRun } from "./run-history.js";
+
+function readFilterFields(form) {
+  return Object.fromEntries(["status", "from", "to"].map((name) =>
+    [name, form.querySelector(`[name="${name}"]`)?.value || ""]));
+}
+
+function canScrollForMore(snapshot, list) {
+  if (!snapshot.runsNextCursor || snapshot.runsLoading || snapshot.runsError) return false;
+  if (list.clientHeight <= 0) return false;
+  return list.scrollHeight - list.scrollTop - list.clientHeight <= 80;
+}
+
+export function createAutomationRunHistoryControls({ root, actions }) {
+  let current = {};
+  let appliedKey = "";
+  let filterDraft = null;
+  let pendingLoad = null;
+  let resetScroll = false;
+
+  async function loadMore() {
+    if (pendingLoad || current.runsLoading) return;
+    const pending = {};
+    pendingLoad = pending;
+    try {
+      if (current.runsError) await actions.retryRunHistory();
+      else await actions.loadMoreRuns();
+    } finally { if (pendingLoad === pending) pendingLoad = null; }
+  }
+
+  function captureFilters(event) {
+    const form = event.target.closest("[data-run-history-filters]");
+    if (form) filterDraft = readFilterFields(form);
+  }
+  root.addEventListener("input", captureFilters);
+  root.addEventListener("change", captureFilters);
+  root.addEventListener("submit", (event) => {
+    const form = event.target.closest("[data-run-history-filters]");
+    if (!form) return;
+    event.preventDefault();
+    filterDraft = readFilterFields(form);
+    resetScroll = true;
+    void actions.setRunFilters(filterDraft);
+  });
+  root.addEventListener("click", (event) => {
+    if (event.target.closest("[data-load-more-runs]")) void loadMore();
+    if (event.target.closest("[data-reset-run-history]")) {
+      filterDraft = null;
+      resetScroll = true;
+      void actions.resetRunHistory();
+    }
+  });
+  root.addEventListener("scroll", (event) => {
+    const list = root.querySelector("#automation-run-history-list");
+    if (event.target !== list || !list) return;
+    if (canScrollForMore(current, list)) void loadMore();
+  }, true);
+
+  function sync(snapshot, { viewChanged = false, focus = false } = {}) {
+    current = snapshot;
+    const nextKey = JSON.stringify([snapshot.selectedAutomationId, snapshot.runsFilters || {}]);
+    const filtersChanged = nextKey !== appliedKey;
+    if (filtersChanged) { filterDraft = null; pendingLoad = null; appliedKey = nextKey; }
+    const form = root.querySelector("[data-run-history-filters]");
+    if (form && filterDraft) {
+      for (const [name, value] of Object.entries(filterDraft)) {
+        const input = form.querySelector(`[name="${name}"]`);
+        if (input) input.value = value;
+      }
+    }
+    const list = root.querySelector("#automation-run-history-list");
+    if (list && (filtersChanged || resetScroll)) list.scrollTop = 0;
+    resetScroll = false;
+    if (viewChanged) revealSelectedAutomationRun(root, { focus });
+  }
+  return { sync };
+}

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

@@ -0,0 +1,55 @@
+import { escapeHtml, formatTime } from "../../lib/text-format.js";
+
+const RUN_STATUSES = ["pending", "running", "stopping", "succeeded", "completed_with_skips", "failed", "cancelled", "interrupted", "missed"];
+
+function renderHistoryFilters(snapshot) {
+  const filters = snapshot.runsFilters || {};
+  return `<form class="automation-run-filters" data-run-history-filters id="automation-run-history-filters">
+    <label>Status<select name="status" id="automation-run-status-filter"><option value="">All statuses</option>${RUN_STATUSES.map((status) => `<option value="${status}"${filters.status === status ? " selected" : ""}>${escapeHtml(status.replaceAll("_", " "))}</option>`).join("")}</select></label>
+    <label>Scheduled from<input type="date" name="from" id="automation-run-date-from" value="${escapeHtml(filters.from || "")}" aria-describedby="automation-run-date-help"></label>
+    <label>Through<input type="date" name="to" id="automation-run-date-to" value="${escapeHtml(filters.to || "")}" aria-describedby="automation-run-date-help"></label>
+    <button type="submit"${snapshot.runsLoading ? " disabled" : ""}>Apply</button>
+    <button type="button" data-reset-run-history${snapshot.runsLoading ? " disabled" : ""}>Newest</button>
+    <small id="automation-run-date-help">Scheduled dates in your local time.</small>
+  </form>`;
+}
+
+function renderHistoryRow(run, selectedRunId) {
+  const status = run.status || "unknown";
+  return `<button type="button" data-select-run="${escapeHtml(run.id)}" data-run-id="${escapeHtml(run.id)}" aria-current="${run.id === selectedRunId}">
+    <span class="automation-run-time">${escapeHtml(formatTime(run.scheduledAt || run.startedAt || run.createdAt) || "Run")}</span>
+    <span class="automation-run-status" data-status="${escapeHtml(status)}">${escapeHtml(status.replaceAll("_", " "))}</span>
+  </button>`;
+}
+
+export function renderAutomationRunHistory(snapshot) {
+  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
+  const filtered = Object.values(snapshot.runsFilters || {}).some(Boolean);
+  const empty = snapshot.runsLoading ? "Loading runs…" : filtered ? "No runs match these filters." : "No runs yet.";
+  const canLoadMore = snapshot.runsNextCursor || snapshot.runsError;
+  return `<section class="automation-run-history" aria-labelledby="automation-run-history-heading">
+    <h4 id="automation-run-history-heading">Run history <span>${runs.length} loaded</span></h4>
+    ${renderHistoryFilters(snapshot)}
+    ${snapshot.runsFilterError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsFilterError)}</p>` : ""}
+    <div class="automation-run-choices" id="automation-run-history-list" aria-busy="${Boolean(snapshot.runsLoading)}">${runs.map((run) => renderHistoryRow(run, snapshot.selectedRunId)).join("") || `<p class="automation-muted">${empty}</p>`}</div>
+    ${snapshot.selectedRunId && !runs.some((run) => run.id === snapshot.selectedRunId) ? `<p class="automation-muted">The selected report is outside these results and remains open below.</p>` : ""}
+    <div class="automation-run-history-footer">
+      <span role="status">${snapshot.runsLoading ? "Loading…" : snapshot.runsNextCursor ? "Scroll for older runs" : runs.length ? "All matching runs loaded" : ""}</span>
+      ${canLoadMore ? `<button type="button" data-load-more-runs${snapshot.runsLoading ? " disabled" : ""}>${snapshot.runsError ? "Retry" : "Load more"}</button>` : ""}
+    </div>
+    ${snapshot.runsError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsError)}</p>` : ""}
+  </section>`;
+}
+
+export function revealSelectedAutomationRun(root, { focus = false } = {}) {
+  const list = root.querySelector("#automation-run-history-list");
+  const selected = list?.querySelector('[aria-current="true"]');
+  if (!selected) return;
+  if (focus) selected.focus({ preventScroll: true });
+  const viewport = list.getBoundingClientRect();
+  const row = selected.getBoundingClientRect();
+  const top = viewport.top + list.clientTop;
+  const bottom = top + list.clientHeight;
+  if (row.top < top) list.scrollTop += row.top - top;
+  else if (row.bottom > bottom) list.scrollTop += row.bottom - bottom;
+}

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

@@ -1,18 +1,13 @@
-import { escapeHtml, formatTime } from "../../lib/text-format.js";
+import { escapeHtml } 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";
+import { renderAutomationRunHistory } from "./run-history.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);
@@ -26,7 +21,7 @@ export function renderAutomationRun(snapshot, { locked = false } = {}) {
     <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)}`}
+    ${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>${renderAutomationRunHistory(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">

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"]')) {