@abot-ai/runtime 1.8.1 → 2.0.0

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

@@ -1,6 +1,5 @@
 import {
   createInitialWorkspaceShellState,
-  normalizeWorkspaceDestination,
   toggleWorkspaceSheet,
 } from "../ui-behavior.js";
 import { createOnboardingWorkspaceAccess } from "./onboarding-workspace-access.js";
@@ -10,6 +9,8 @@ import {
   resolveConversationSidebarLayout,
 } from "./conversation-sidebar-layout.js";
 import { createOperationsSection } from "./operations-section.js";
+import { createWorkspaceTransitions } from "./workspace-transitions.js";
+import { captureSessionListViewport, restoreSessionListViewport } from "./session-list-viewport.js";
 import { isConfigurationWorkspace, renderConfigurationPageHeading } from "../lib/configuration-pages.js";
 
 export function createWorkspaceShell({
@@ -31,6 +32,12 @@ export function createWorkspaceShell({
   const workspaceListeners = new Set();
   const runtimeAvailabilityListeners = new Set();
   const workspaceGuards = new Set();
+  const transitions = createWorkspaceTransitions({
+    getWorkspace: () => shellState.workspace,
+    getNavigationRevision: () => navigationRevision,
+    isAvailable: workspaceAccess.isAvailable,
+    getGuards: () => [beforeWorkspaceChange, ...workspaceGuards],
+  });
   function notifyWorkspaceListeners(workspace) {
     onWorkspaceChange(workspace);
     for (const listener of workspaceListeners) listener(workspace);
@@ -66,6 +73,7 @@ export function createWorkspaceShell({
   }
 
   function syncShell() {
+    captureSessionListViewport(dom.sessionsList);
     workspaceAccess.render();
     const homeWorkspace = shellState.workspace === "home";
     const chatWorkspace = shellState.workspace === "chat";
@@ -74,6 +82,7 @@ export function createWorkspaceShell({
     const automationsWorkspace = shellState.workspace === "automations";
     const learningWorkspace = shellState.workspace === "learning";
     const memoryWorkspace = shellState.workspace === "memory";
+    const skillsWorkspace = shellState.workspace === "skills";
     const notificationsWorkspace = shellState.workspace === "notifications";
     const sessions = sidebarLayout();
     const showSessionsToggle = chatWorkspace && !sessions.docked;
@@ -128,6 +137,12 @@ export function createWorkspaceShell({
       "aria-hidden",
       String(!memoryWorkspace),
     );
+    if (dom.skillsWorkspacePanel) {
+      dom.skillsWorkspacePanel.hidden = !skillsWorkspace;
+      dom.skillsWorkspacePanel.inert = !skillsWorkspace;
+      dom.skillsWorkspacePanel.setAttribute("aria-hidden", String(!skillsWorkspace));
+    }
+    setCurrentPage(dom.skillsWorkspaceButton, skillsWorkspace);
     if (dom.notificationsWorkspacePanel) {
       dom.notificationsWorkspacePanel.hidden = !notificationsWorkspace;
       dom.notificationsWorkspacePanel.inert = !notificationsWorkspace;
@@ -135,6 +150,7 @@ export function createWorkspaceShell({
     }
     setCurrentPage(dom.notificationsWorkspaceButton, notificationsWorkspace);
     dom.sessionsPanel.hidden = !sessions.visible;
+    restoreSessionListViewport(dom.sessionsList);
     dom.sessionsPanel.inert = !sessions.visible;
     dom.sessionsPanel.setAttribute(
       "aria-hidden",
@@ -176,7 +192,7 @@ export function createWorkspaceShell({
       dom.closeSessionsButton.focus();
       return;
     }
-    const sidebarControl = dom.sessionSearchInput ?? dom.refreshSessionsButton;
+    const sidebarControl = dom.sessionSearchToggleButton ?? dom.refreshSessionsButton;
     (sidebarControl ?? dom.chatWorkspaceButton).focus();
   }
 
@@ -211,35 +227,9 @@ export function createWorkspaceShell({
     visibleNavigationButton.focus();
   }
 
-  function prepareWorkspaceTransition(destination) {
-    const nextWorkspace = normalizeWorkspaceDestination(destination);
-    if (!workspaceAccess.isAvailable(nextWorkspace)) return null;
-    if (nextWorkspace === shellState.workspace) {
-      return { nextWorkspace, commitBeforeChange: () => {} };
-    }
-    const preparedChange = beforeWorkspaceChange({
-      from: shellState.workspace,
-      to: nextWorkspace,
-    });
-    if (preparedChange === false || preparedChange === null) return null;
-    const additionalChanges = [];
-    for (const guard of workspaceGuards) {
-      const change = guard({ from: shellState.workspace, to: nextWorkspace });
-      if (change === false || change === null) return null;
-      if (typeof change === "function") additionalChanges.push(change);
-    }
-    return {
-      nextWorkspace,
-      commitBeforeChange() {
-        if (typeof preparedChange === "function") preparedChange();
-        for (const change of additionalChanges) change();
-      },
-    };
-  }
-
   function commitWorkspaceActivation(preparedTransition, options = {}) {
     if (!workspaceAccess.isAvailable(preparedTransition.nextWorkspace)) return false;
-    preparedTransition.commitBeforeChange();
+    if (!preparedTransition.commitBeforeChange()) return false;
     const nextWorkspace = preparedTransition.nextWorkspace;
     const previousWorkspace = shellState.workspace;
     const previousSheet = shellState.activeSheet;
@@ -263,6 +253,7 @@ export function createWorkspaceShell({
           automations: dom.closeAutomationsWorkspaceButton,
           learning: dom.closeLearningWorkspaceButton,
           memory: dom.closeMemoryWorkspaceButton,
+          skills: dom.closeSkillsWorkspaceButton,
           config: dom.closeConfigWorkspaceButton,
           models: dom.closeConfigWorkspaceButton,
           plugins: dom.closeConfigWorkspaceButton,
@@ -277,27 +268,34 @@ export function createWorkspaceShell({
     return true;
   }
 
-  function prepareWorkspaceActivation(destination, options = {}) {
-    const preparedTransition = prepareWorkspaceTransition(destination);
+  async function prepareWorkspaceActivation(destination, options = {}) {
+    const preparedTransition = await transitions.prepare(destination);
     if (!preparedTransition) return null;
     let committed = false;
-    return () => {
+    const activate = () => {
       if (committed) return true;
       const activated = commitWorkspaceActivation(preparedTransition, options);
       committed = activated;
       return activated;
     };
+    activate.canCommit = () => committed || preparedTransition.canCommit();
+    return activate;
   }
 
-  function activateWorkspace(destination, options = {}) {
-    const preparedActivation = prepareWorkspaceActivation(destination, options);
+  async function activateWorkspace(destination, options = {}) {
+    const preparedActivation = await prepareWorkspaceActivation(destination, options);
     return preparedActivation ? preparedActivation() : false;
   }
 
   function setSessionsDrawerOpen(open, options = {}) {
-    const preparedTransition = prepareWorkspaceTransition("chat");
-    if (!preparedTransition) return false;
-    preparedTransition.commitBeforeChange();
+    if (shellState.workspace === "chat") return commitSessionsDrawer(open, options);
+    return transitions.prepare("chat").then((prepared) => {
+      if (!prepared?.commitBeforeChange()) return false;
+      return commitSessionsDrawer(open, options);
+    });
+  }
+
+  function commitSessionsDrawer(open, options) {
     const wasOpen = shellState.activeSheet === "sessions";
     shellState.workspace = "chat";
     const useDrawer = open && sidebarViewport?.matches !== true;
@@ -342,8 +340,9 @@ export function createWorkspaceShell({
       setSessionsDrawerOpen(false, { restoreFocus: true });
       return true;
     }
-    if (["config", "models", "plugins", "schedules", "automations", "learning", "memory", "notifications"].includes(shellState.workspace)) {
-      return activateWorkspace("chat");
+    if (["config", "models", "plugins", "schedules", "automations", "learning", "memory", "skills", "notifications"].includes(shellState.workspace)) {
+      void activateWorkspace("chat");
+      return true;
     }
     return false;
   }
@@ -351,6 +350,8 @@ export function createWorkspaceShell({
   function bind() {
     if (shellState.bound) return;
     shellState.bound = true;
+    dom.skillsWorkspaceButton?.addEventListener("click", () => activateWorkspace("skills"));
+    dom.closeSkillsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
     dom.notificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("notifications"));
     dom.closeNotificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
     dom.homeWorkspaceButton?.addEventListener("click", () => {
@@ -423,6 +424,7 @@ export function createWorkspaceShell({
     runtimeAvailabilityChanged,
     workspaceUnavailableMessage: workspaceAccess.unavailableMessage,
     navigationRevision: () => navigationRevision,
+    navigationRequestRevision: transitions.requestRevision,
     subscribeRuntimeAvailabilityChange(listener) {
       runtimeAvailabilityListeners.add(listener);
       return () => runtimeAvailabilityListeners.delete(listener);

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

@@ -0,0 +1,42 @@
+import { normalizeWorkspaceDestination } from "../ui-behavior.js";
+
+export function createWorkspaceTransitions({ getWorkspace, getNavigationRevision, isAvailable, getGuards }) {
+  let requestRevision = 0;
+  async function prepare(destination) {
+    const request = ++requestRevision;
+    const from = getWorkspace();
+    const revision = getNavigationRevision();
+    const nextWorkspace = normalizeWorkspaceDestination(destination);
+    const changes = [];
+    function isCurrentTransitionRequest() {
+      if (request !== requestRevision) return false;
+      if (from !== getWorkspace()) return false;
+      if (revision !== getNavigationRevision()) return false;
+      return isAvailable(nextWorkspace);
+    }
+    function canCommitTransition() {
+      if (!isCurrentTransitionRequest()) return false;
+      return changes.every((change) => change?.canCommit?.() !== false);
+    }
+    if (!isCurrentTransitionRequest()) return null;
+    const guards = nextWorkspace === from ? [] : getGuards();
+    for (const guard of guards) {
+      const change = await guard({ from, to: nextWorkspace });
+      if (!canCommitTransition()) return null;
+      if (change === false || change === null) return null;
+      changes.push(change);
+    }
+    if (!canCommitTransition()) return null;
+    return {
+      nextWorkspace, canCommit: canCommitTransition,
+      commitBeforeChange() {
+        if (!canCommitTransition()) return false;
+        for (const change of changes) {
+          if (typeof change === "function" && change() === false) return false;
+        }
+        return true;
+      },
+    };
+  }
+  return { prepare, requestRevision: () => requestRevision };
+}

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

@@ -6,6 +6,7 @@ import { createHomeGuidance } from "./components/home-guidance/home-guidance.js"
 import { createConfigWorkspace } from "./components/config-workspace.js";
 import { createModelRemovalController } from "./components/config-workspace/model-removal.js";
 import { createLongTermMemorySetup } from "./components/long-term-memory-setup.js";
+import { createMemoryEmbeddingConnectionFeature } from "./components/long-term-memory/embedding-connection-feature.js";
 import { createLongTermMemoryManager } from "./components/long-term-memory/manager.js";
 import { createMemoryWorkspace } from "./components/long-term-memory/workspace.js";
 import { createLongTermMemoryController } from "./controllers/long-term-memory/controller.js";
@@ -28,7 +29,24 @@ export function createConfigurationFeature({
   let activation;
   let modelSetup;
   let modelRemoval;
+  const memoryConnection = createMemoryEmbeddingConnectionFeature({
+    root: dom.memoryWorkspacePanel,
+    runtimeClient,
+    getEnvironmentId: selectedEnvironmentId,
+    getWorkspace: () => configWorkspace,
+    canOpen: () => !modelSetup?.isOpen() && !pluginManager.hasConfigurationDraft(),
+    refreshMemory: () => longTermMemorySetup.load({ preserveInputs: false }),
+    onSaved: () => activation?.markPending(),
+    onApplied: async () => {
+      activation?.markApplied();
+      pluginManager.markApplied?.();
+      await onConfigurationApplied();
+    },
+    onClosed: () => onConfigurationSettled(),
+  });
   const longTermMemorySetup = createLongTermMemorySetup({
+    onAddConnection: (options) => memoryConnection.open(options),
+    onEnvironmentChanged: () => memoryConnection.environmentChanged(),
     getEnvironmentId: selectedEnvironmentId,
     loadStatus: (environmentId) =>
       runtimeClient.loadLongTermMemoryStatus(environmentId),
@@ -45,6 +63,10 @@ export function createConfigurationFeature({
       activation?.markPending();
       return result;
     },
+    saveProfile: (input, environmentId) =>
+      runtimeClient.saveMemoryEmbeddingProfile(input, environmentId),
+    removeProfile: (input, environmentId) =>
+      runtimeClient.removeMemoryEmbeddingProfile(input, environmentId),
     disableMemory: async (environmentId) => {
       const result = await runtimeClient.disableLongTermMemory(environmentId);
       activation?.markPending();
@@ -67,6 +89,7 @@ export function createConfigurationFeature({
   });
   longTermMemoryManager = createLongTermMemoryManager({
     actions: longTermMemoryController,
+    getEnvironmentId: selectedEnvironmentId,
   });
   longTermMemorySetup.mount(dom.memorySetupRoot);
   longTermMemoryManager.mount(dom.memoryManagementRoot);
@@ -140,7 +163,7 @@ export function createConfigurationFeature({
     getOperationsSummary,
     onNavigationChange,
     onRemoveModel: (model) => {
-      if (modelSetup?.isOpen()) return;
+      if (modelSetup?.isOpen() || memoryConnection.isOpen()) return;
       return modelRemoval.remove(model);
     },
     dom: {
@@ -164,7 +187,7 @@ export function createConfigurationFeature({
       return result;
     },
     onAddModel: async (options) => {
-      if (modelSetup?.isOpen()) return;
+      if (modelSetup?.isOpen() || memoryConnection.isOpen()) return;
       if (!configWorkspace.beginExternalRuntimeMutation("model setup")) return;
       configWorkspace.endExternalRuntimeMutation();
       try {
@@ -215,6 +238,7 @@ export function createConfigurationFeature({
     root: dom.configDashboard.parentElement,
     getEnvironmentId: selectedEnvironmentId,
     loadSetup: () => runtimeClient.loadModelSetup(selectedEnvironmentId()),
+    inspectConnection: (input) => runtimeClient.inspectModelConnection(input, selectedEnvironmentId()),
     saveModel: (input) =>
       runtimeClient.addRuntimeModel(input, selectedEnvironmentId()),
     applySetup: () =>
@@ -269,7 +293,7 @@ export function createConfigurationFeature({
       void longTermMemoryController.setOriginFilter("passive_observation");
       longTermMemoryManager.focus();
     },
-    prepareDiscardChanges: (...args) => {
+    prepareDiscardChanges: async (...args) => {
       if (pluginManager.hasConfigurationDraft()) {
         dom.configStatus.textContent =
           "Finish or cancel plugin configuration before leaving.";
@@ -280,12 +304,18 @@ export function createConfigurationFeature({
           "Finish or cancel model setup before leaving configuration.";
         return null;
       }
-      const prepared = prepareDiscardChanges(...args);
+      if (memoryConnection.isOpen()) {
+        dom.configStatus.textContent =
+          "Finish or cancel embedding connection setup before leaving.";
+        return null;
+      }
+      const prepared = await prepareDiscardChanges(...args);
       if (typeof prepared !== "function") return prepared;
       const commit = () => prepared();
       commit.canCommit = () => {
         if (pluginManager.hasConfigurationDraft()) return false;
         if (modelSetup.isOpen()) return false;
+        if (memoryConnection.isOpen()) return false;
         return prepared.canCommit?.() !== false;
       };
       return commit;

package/dist/src/web-ui/app/controllers/app-event-bindings.js

@@ -1,3 +1,5 @@
+import { bindSessionSearchDisclosure } from "../components/session-search-disclosure.js";
+import { bindReasoningBudgetMenu } from "./reasoning-budget-menu-events.js";
 import { beginConversationNavigation, canNavigateConversation } from "./conversation-navigation-intent.js";
 import {
   focusSelectedMenuItem,
@@ -34,6 +36,7 @@ export function createAppEventBindings({
     }
     const isCurrentNavigation = beginConversationNavigation(state);
     const navigationRevision = shell.navigationRevision?.();
+    const navigationRequest = shell.navigationRequestRevision?.();
     const environment = actions.selectedEnvironmentId?.();
     const session = state.currentSessionId;
     const prepared = await prepareQueueRecovery();
@@ -43,6 +46,7 @@ export function createAppEventBindings({
     if (prepared?.canCommit?.() === false) return false;
     const hasCurrentWorkspaceNavigation = navigationRevision === shell.navigationRevision?.();
     if (!hasCurrentWorkspaceNavigation) return false;
+    if (navigationRequest !== shell.navigationRequestRevision?.()) return false;
     if (actions.selectedEnvironmentId?.() !== environment) return false;
     if (state.currentSessionId !== session) return false;
     return () => {
@@ -57,7 +61,42 @@ export function createAppEventBindings({
     };
   }
 
+  async function newConversation({ canCommit = () => true } = {}) {
+    if (!canCommit()) return false;
+    const recovery = await prepareCurrentQueueRecovery();
+    if (!recovery || !canCommit()) return false;
+    const preparedWorkspaceActivation = await shell.prepareWorkspaceActivation(
+      "chat",
+      { focus: false },
+    );
+    if (!preparedWorkspaceActivation || !canCommit()) return false;
+    if (preparedWorkspaceActivation.canCommit?.() === false) return false;
+    if (recovery() === false) return false;
+    if (preparedWorkspaceActivation() === false) return false;
+    state.currentSessionId = createWebSessionId();
+    onSessionCreated(state.currentSessionId);
+    actions.saveSessionId(
+      actions.selectedEnvironmentId(),
+      state.currentSessionId,
+    );
+    actions.rememberModelSelection();
+    state.messages = [];
+    actions.resetLiveRequestView();
+    actions.setCurrentSessionTitle(state.currentSessionId);
+    actions.applyConversationChrome();
+    actions.subscribeSession(state.currentSessionId);
+    actions.renderSessions();
+    actions.renderMessages();
+    shell.setSessionsDrawerOpen(false);
+    dom.composerInput.focus();
+    return true;
+  }
+
   function bind() {
+    bindReasoningBudgetMenu({ state, dom, actions, modelSelector, documentRoot });
+    bindSessionSearchDisclosure({
+      toggle: dom.sessionSearchToggleButton, field: dom.sessionSearchField, input: dom.sessionSearchInput,
+    });
     let searchTimer;
     dom.sessionSearchInput.addEventListener("input", () => {
       state.sessionQuery = dom.sessionSearchInput.value;
@@ -69,33 +108,7 @@ export function createAppEventBindings({
       "click",
       () => void actions.loadSessions(),
     );
-    dom.newSessionButton.addEventListener("click", async () => {
-      const recovery = await prepareCurrentQueueRecovery();
-      if (!recovery) return;
-      const preparedWorkspaceActivation = shell.prepareWorkspaceActivation(
-        "chat",
-        { focus: false },
-      );
-      if (!preparedWorkspaceActivation) return;
-      if (recovery() === false) return;
-      if (preparedWorkspaceActivation() === false) return;
-      state.currentSessionId = createWebSessionId();
-      onSessionCreated(state.currentSessionId);
-      actions.saveSessionId(
-        actions.selectedEnvironmentId(),
-        state.currentSessionId,
-      );
-      actions.rememberModelSelection();
-      state.messages = [];
-      actions.resetLiveRequestView();
-      actions.setCurrentSessionTitle(state.currentSessionId);
-      actions.applyConversationChrome();
-      actions.subscribeSession(state.currentSessionId);
-      actions.renderSessions();
-      actions.renderMessages();
-      shell.setSessionsDrawerOpen(false);
-      dom.composerInput.focus();
-    });
+    dom.newSessionButton.addEventListener("click", () => newConversation());
     dom.environmentSelect.addEventListener("change", environmentTransition.onSelectChange, true);
     dom.agentPickerButton.addEventListener("click", (event) => {
       event.stopPropagation();
@@ -199,7 +212,9 @@ export function createAppEventBindings({
         actions.renderPermissionMode();
       }
       actions.renderAgentMode();
-      if (state.agentModeMenuOpen) focusSelectedMenuItem(dom.agentModeMenu);
+      if (state.agentModeMenuOpen) {
+        focusSelectedMenuItem(dom.agentModeMenu);
+      }
     });
     dom.agentModeButton.addEventListener("keydown", (event) => {
       if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
@@ -218,7 +233,7 @@ export function createAppEventBindings({
       event.stopPropagation(),
     );
     dom.agentModeMenu.addEventListener("keydown", (event) => {
-      handleMenuNavigation(event, dom.agentModeMenu);
+      if (event.target.closest?.("[data-mode]")) handleMenuNavigation(event, dom.agentModeMenu);
     });
     documentRoot.addEventListener("click", (event) => {
       if (
@@ -306,6 +321,7 @@ export function createAppEventBindings({
 
   return {
     bind,
+    newConversation,
     ...environmentTransition,
   };
 }

package/dist/src/web-ui/app/controllers/appearance-controller.js

@@ -0,0 +1,105 @@
+import { isColorPaletteId, PALETTE_PREFERENCE_KEY, savedColorPalette } from "../lib/color-palettes.js";
+import { isNavigationMode, NAVIGATION_PREFERENCE_KEY, savedNavigationMode } from "../lib/navigation-display.js";
+
+export function createAppearanceController({ storage, applyPalette, applyNavigationMode = () => {}, onChange = () => {} }) {
+  let savedId = savedColorPalette(storage);
+  let selectedId = savedId;
+  let savedNavigation = savedNavigationMode(storage);
+  let selectedNavigation = savedNavigation;
+  let open = false;
+  let pending = false;
+  let error = "";
+  const state = () => ({ savedId, selectedId, savedNavigationMode: savedNavigation, selectedNavigationMode: selectedNavigation, open, pending, error });
+  const render = () => onChange(state());
+  const canPreviewAppearance = () => open && !pending;
+  applyPalette(savedId);
+  applyNavigationMode(savedNavigation);
+
+  function restoreAcknowledgedAppearance() {
+    savedId = savedColorPalette(storage);
+    selectedId = savedId;
+    savedNavigation = savedNavigationMode(storage);
+    selectedNavigation = savedNavigation;
+    applyPalette(savedId);
+    applyNavigationMode(savedNavigation);
+  }
+
+  const unsubscribe = storage.subscribe?.(() => {
+    const previousSavedId = savedId;
+    const previousSavedNavigation = savedNavigation;
+    savedId = savedColorPalette(storage);
+    savedNavigation = savedNavigationMode(storage);
+    if (followsSavedAppearance(open, selectedId, previousSavedId)) {
+      selectedId = savedId;
+      applyPalette(savedId);
+    }
+    if (followsSavedAppearance(open, selectedNavigation, previousSavedNavigation)) {
+      selectedNavigation = savedNavigation;
+      applyNavigationMode(savedNavigation);
+    }
+    render();
+  });
+
+  return {
+    state,
+    open() {
+      if (open) return;
+      restoreAcknowledgedAppearance();
+      error = "";
+      open = true;
+      render();
+    },
+    select(id) {
+      if (!canPreviewAppearance()) return;
+      if (!isColorPaletteId(id)) return;
+      selectedId = id;
+      error = "";
+      applyPalette(id);
+      render();
+    },
+    selectNavigationMode(mode) {
+      if (!canPreviewAppearance()) return;
+      if (!isNavigationMode(mode)) return;
+      selectedNavigation = mode;
+      error = "";
+      applyNavigationMode(mode);
+      render();
+    },
+    close() {
+      if (pending) return false;
+      open = false;
+      restoreAcknowledgedAppearance();
+      render();
+      return true;
+    },
+    async save() {
+      if (!canPreviewAppearance()) return;
+      const paletteToSave = selectedId;
+      const navigationToSave = selectedNavigation;
+      pending = true;
+      error = "";
+      render();
+      try {
+        if (paletteToSave !== savedColorPalette(storage))
+          await storage.setItem(PALETTE_PREFERENCE_KEY, paletteToSave);
+        if (navigationToSave !== savedNavigationMode(storage))
+          await storage.setItem(NAVIGATION_PREFERENCE_KEY, navigationToSave);
+        open = false;
+      } catch (failure) {
+        error = failure?.message || "Could not save appearance settings. Reload and try again.";
+      } finally {
+        pending = false;
+        restoreAcknowledgedAppearance();
+        render();
+      }
+    },
+    destroy() {
+      unsubscribe?.();
+      restoreAcknowledgedAppearance();
+    },
+  };
+}
+
+function followsSavedAppearance(open, selected, previouslySaved) {
+  return !open || selected === previouslySaved;
+}

package/dist/src/web-ui/app/controllers/automation-read-projection.js

@@ -1,3 +1,5 @@
+import { automationRunPage } from "./automation-run-history.js";
+
 export function validationResult(value) {
   if (Array.isArray(value)) return { issues: value };
   if (Array.isArray(value?.issues)) return value;
@@ -17,11 +19,12 @@ export async function readAutomationList(client, environmentId) {
   };
 }
 
-export async function readAutomationSelection(client, automationId, runId, environmentId) {
+export async function readAutomationSelection(client, automationId, runId, environmentId,
+  { runsQuery = { limit: 50 } } = {}) {
   const [draftResponse, catalog, runsResponse, runResponse] = await Promise.all([
     client.getAutomationDraft(automationId, environmentId),
     client.getAutomationCatalog(automationId, environmentId),
-    client.listAutomationRuns(automationId, environmentId),
+    runsQuery ? client.listAutomationRuns(automationId, environmentId, runsQuery) : Promise.resolve(null),
     runId ? client.getAutomationRun(runId, environmentId) : Promise.resolve(null),
   ]);
   if (runResponse?.run && runResponse.run.automationId !== automationId)
@@ -32,7 +35,7 @@ export async function readAutomationSelection(client, automationId, runId, envir
     grant: draftResponse.grant || null,
     validation: validationResult(draftResponse.validation),
     catalog,
-    runs: Array.isArray(runsResponse.runs) ? runsResponse.runs : [],
+    ...(runsResponse ? automationRunPage(runsResponse) : {}),
     run: runResponse?.run || null,
   };
 }
@@ -41,7 +44,8 @@ export async function readAutomationBackgroundProjection(client, identity) {
   const [list, selected, evidenceResponse] = await Promise.all([
     readAutomationList(client, identity.environmentId),
     identity.automationId
-      ? readAutomationSelection(client, identity.automationId, identity.runId, identity.environmentId)
+      ? readAutomationSelection(client, identity.automationId, identity.runId, identity.environmentId,
+        { runsQuery: identity.runsQuery })
       : Promise.resolve(null),
     identity.runId && identity.nodeId
       ? client.getAutomationStepEvidence(identity.runId, identity.nodeId,

package/dist/src/web-ui/app/controllers/automation-run-actions.js

@@ -1,5 +1,5 @@
 /** Async run commands retain the view that authorized them through every read. */
-export function createAutomationRunActions({ client, mutation, publish, loadSelected, openRun,
+export function createAutomationRunActions({ client, mutation, publish, loadSelected, refreshRunHistory, openRun,
   captureView }) {
   const pendingStarts = new Set();
   const runStartKey = (view) => JSON.stringify([view.environmentId, view.automationId]);
@@ -10,6 +10,8 @@ export function createAutomationRunActions({ client, mutation, publish, loadSele
     const continuation = view.captureContinuation();
     const refreshed = await loadSelected(view.automationId, "", continuation.isCurrent);
     if (!refreshed || !continuation.isCurrent()) return false;
+    await refreshRunHistory(continuation.isCurrent);
+    if (!continuation.isCurrent()) return false;
     return openRun(result.run.id, continuation.ownsMutation);
   }