@abot-ai/runtime 1.4.0 → 1.5.0

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

@@ -3,12 +3,14 @@ import {
   normalizeWorkspaceDestination,
   toggleWorkspaceSheet,
 } from "../ui-behavior.js";
+import { createOnboardingWorkspaceAccess } from "./onboarding-workspace-access.js";
 import { textOf } from "../lib/text-format.js";
 import {
   CONVERSATION_SIDEBAR_MEDIA_QUERY,
   resolveConversationSidebarLayout,
 } from "./conversation-sidebar-layout.js";
 import { createOperationsSection } from "./operations-section.js";
+import { isConfigurationWorkspace, renderConfigurationPageHeading } from "../lib/configuration-pages.js";
 
 export function createWorkspaceShell({
   dom,
@@ -17,18 +19,26 @@ export function createWorkspaceShell({
   beforeWorkspaceChange = () => true,
   isWorkspaceAvailable = () => true,
   onWorkspaceChange = () => {},
+  onNavigationChange = () => {},
 }) {
+  const workspaceAccess = createOnboardingWorkspaceAccess({ dom, backendAllows: isWorkspaceAvailable });
   const shellState = {
     ...createInitialWorkspaceShellState(),
     toastTimer: 0,
     bound: false,
   };
+  let navigationRevision = 0;
+  function noteShellNavigation() {
+    navigationRevision += 1;
+    onNavigationChange();
+  }
   const sidebarViewport = viewport.matchMedia?.(
     CONVERSATION_SIDEBAR_MEDIA_QUERY,
   );
   const operationsSection = createOperationsSection({
     buttons: dom.operationsTabButtons,
     pages: dom.operationsTabPages,
+    onNavigationChange: noteShellNavigation,
   });
 
   function sidebarLayout() {
@@ -49,10 +59,14 @@ export function createWorkspaceShell({
   }
 
   function syncShell() {
+    workspaceAccess.render();
     const homeWorkspace = shellState.workspace === "home";
     const chatWorkspace = shellState.workspace === "chat";
-    const configWorkspace = shellState.workspace === "config";
+    const configWorkspace = isConfigurationWorkspace(shellState.workspace);
     const schedulesWorkspace = shellState.workspace === "schedules";
+    const learningWorkspace = shellState.workspace === "learning";
+    const memoryWorkspace = shellState.workspace === "memory";
+    const notificationsWorkspace = shellState.workspace === "notifications";
     const sessions = sidebarLayout();
     const showSessionsToggle = chatWorkspace && !sessions.docked;
 
@@ -61,7 +75,10 @@ export function createWorkspaceShell({
     if (dom.homeWorkspacePanel) {
       dom.homeWorkspacePanel.hidden = !homeWorkspace;
       dom.homeWorkspacePanel.inert = !homeWorkspace;
-      dom.homeWorkspacePanel.setAttribute("aria-hidden", String(!homeWorkspace));
+      dom.homeWorkspacePanel.setAttribute(
+        "aria-hidden",
+        String(!homeWorkspace),
+      );
     }
     dom.app.classList.toggle("schedules-workspace", schedulesWorkspace);
     dom.app.classList.toggle("sessions-open", sessions.drawerOpen);
@@ -75,6 +92,7 @@ export function createWorkspaceShell({
       "aria-hidden",
       configWorkspace ? "false" : "true",
     );
+    renderConfigurationPageHeading(dom.configWorkspacePanel, shellState.workspace);
 
     if (dom.schedulesWorkspacePanel) {
       dom.schedulesWorkspacePanel.hidden = !schedulesWorkspace;
@@ -84,6 +102,24 @@ export function createWorkspaceShell({
         String(!schedulesWorkspace),
       );
     }
+    dom.learningWorkspacePanel.hidden = !learningWorkspace;
+    dom.learningWorkspacePanel.inert = !learningWorkspace;
+    dom.learningWorkspacePanel.setAttribute(
+      "aria-hidden",
+      String(!learningWorkspace),
+    );
+    dom.memoryWorkspacePanel.hidden = !memoryWorkspace;
+    dom.memoryWorkspacePanel.inert = !memoryWorkspace;
+    dom.memoryWorkspacePanel.setAttribute(
+      "aria-hidden",
+      String(!memoryWorkspace),
+    );
+    if (dom.notificationsWorkspacePanel) {
+      dom.notificationsWorkspacePanel.hidden = !notificationsWorkspace;
+      dom.notificationsWorkspacePanel.inert = !notificationsWorkspace;
+      dom.notificationsWorkspacePanel.setAttribute("aria-hidden", String(!notificationsWorkspace));
+    }
+    setCurrentPage(dom.notificationsWorkspaceButton, notificationsWorkspace);
     dom.sessionsPanel.hidden = !sessions.visible;
     dom.sessionsPanel.inert = !sessions.visible;
     dom.sessionsPanel.setAttribute(
@@ -103,8 +139,12 @@ export function createWorkspaceShell({
 
     setCurrentPage(dom.chatWorkspaceButton, chatWorkspace);
     setCurrentPage(dom.homeWorkspaceButton, homeWorkspace);
-    setCurrentPage(dom.configWorkspaceButton, configWorkspace);
+    setCurrentPage(dom.configWorkspaceButton, shellState.workspace === "config");
+    setCurrentPage(dom.modelsWorkspaceButton, shellState.workspace === "models");
+    setCurrentPage(dom.pluginsWorkspaceButton, shellState.workspace === "plugins");
     setCurrentPage(dom.schedulesWorkspaceButton, schedulesWorkspace);
+    setCurrentPage(dom.learningWorkspaceButton, learningWorkspace);
+    setCurrentPage(dom.memoryWorkspaceButton, memoryWorkspace);
 
     dom.panelBackdrop.classList.toggle("visible", sessions.drawerOpen);
     dom.panelBackdrop.tabIndex = sessions.drawerOpen ? 0 : -1;
@@ -158,7 +198,7 @@ export function createWorkspaceShell({
 
   function prepareWorkspaceTransition(destination) {
     const nextWorkspace = normalizeWorkspaceDestination(destination);
-    if (!isWorkspaceAvailable(nextWorkspace)) return null;
+    if (!workspaceAccess.isAvailable(nextWorkspace)) return null;
     if (nextWorkspace === shellState.workspace) {
       return { nextWorkspace, commitBeforeChange: () => {} };
     }
@@ -175,7 +215,7 @@ export function createWorkspaceShell({
   }
 
   function commitWorkspaceActivation(preparedTransition, options = {}) {
-    if (!isWorkspaceAvailable(preparedTransition.nextWorkspace)) return false;
+    if (!workspaceAccess.isAvailable(preparedTransition.nextWorkspace)) return false;
     preparedTransition.commitBeforeChange();
     const nextWorkspace = preparedTransition.nextWorkspace;
     const previousWorkspace = shellState.workspace;
@@ -184,6 +224,7 @@ export function createWorkspaceShell({
     shellState.activeSheet = "";
     syncShell();
     onWorkspaceChange(nextWorkspace);
+    noteShellNavigation();
 
     if (options.focus === false) return true;
     if (nextWorkspace === "home") {
@@ -193,11 +234,16 @@ export function createWorkspaceShell({
     if (nextWorkspace !== "chat") {
       viewport.requestAnimationFrame(() => {
         if (shellState.workspace !== nextWorkspace) return;
-        const closeButton =
-          nextWorkspace === "schedules"
-            ? dom.closeSchedulesWorkspaceButton
-            : dom.closeConfigWorkspaceButton;
-        closeButton?.focus();
+        const closeButtons = {
+          notifications: dom.closeNotificationsWorkspaceButton,
+          schedules: dom.closeSchedulesWorkspaceButton,
+          learning: dom.closeLearningWorkspaceButton,
+          memory: dom.closeMemoryWorkspaceButton,
+          config: dom.closeConfigWorkspaceButton,
+          models: dom.closeConfigWorkspaceButton,
+          plugins: dom.closeConfigWorkspaceButton,
+        };
+        closeButtons[nextWorkspace]?.focus();
       });
       return true;
     }
@@ -234,6 +280,7 @@ export function createWorkspaceShell({
     shellState.activeSheet = useDrawer ? "sessions" : "";
     syncShell();
     onWorkspaceChange("chat");
+    noteShellNavigation();
 
     if (options.focus === false) return true;
     if (open) {
@@ -271,7 +318,7 @@ export function createWorkspaceShell({
       setSessionsDrawerOpen(false, { restoreFocus: true });
       return true;
     }
-    if (["config", "schedules"].includes(shellState.workspace)) {
+    if (["config", "models", "plugins", "schedules", "learning", "memory", "notifications"].includes(shellState.workspace)) {
       return activateWorkspace("chat");
     }
     return false;
@@ -280,6 +327,8 @@ export function createWorkspaceShell({
   function bind() {
     if (shellState.bound) return;
     shellState.bound = true;
+    dom.notificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("notifications"));
+    dom.closeNotificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
     dom.homeWorkspaceButton?.addEventListener("click", () => {
       activateWorkspace("home");
     });
@@ -289,9 +338,26 @@ export function createWorkspaceShell({
     dom.configWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("config");
     });
+    dom.modelsWorkspaceButton?.addEventListener("click", () => activateWorkspace("models"));
+    dom.pluginsWorkspaceButton?.addEventListener("click", () => activateWorkspace("plugins"));
     dom.schedulesWorkspaceButton?.addEventListener("click", () =>
       activateWorkspace("schedules"),
     );
+    dom.learningWorkspaceButton.addEventListener("click", () =>
+      activateWorkspace("learning"),
+    );
+    dom.memoryWorkspaceButton.addEventListener("click", () =>
+      activateWorkspace("memory"),
+    );
+    dom.openMemoryRestartControlsButton?.addEventListener("click", () =>
+      activateWorkspace("config"),
+    );
+    dom.closeLearningWorkspaceButton.addEventListener("click", () =>
+      activateWorkspace("chat"),
+    );
+    dom.closeMemoryWorkspaceButton.addEventListener("click", () =>
+      activateWorkspace("chat"),
+    );
     dom.closeSchedulesWorkspaceButton?.addEventListener("click", () =>
       activateWorkspace("chat"),
     );
@@ -311,6 +377,12 @@ export function createWorkspaceShell({
     operationsSection.bind();
   }
 
+  function runtimeAvailabilityChanged(availability) {
+    workspaceAccess.update(availability);
+    if (!workspaceAccess.isAvailable(shellState.workspace))
+      activateWorkspace("home", { focus: false });
+  }
+
   function load() {
     Object.assign(shellState, createInitialWorkspaceShellState());
     operationsSection.activateTab("runtime");
@@ -319,6 +391,12 @@ export function createWorkspaceShell({
 
   return {
     activeWorkspace: () => shellState.workspace,
+    isWorkspaceSupportedByBackend: isWorkspaceAvailable,
+    isWorkspaceAvailable: workspaceAccess.isAvailable,
+    runtimeAvailabilityChanged,
+    workspaceUnavailableMessage: workspaceAccess.unavailableMessage,
+    navigationRevision: () => navigationRevision,
+    activeOperationsTab: operationsSection.activeTab,
     activateOperationsTab: operationsSection.activateTab,
     activateWorkspace,
     bind,

package/dist/src/web-ui/app/computer-access-feature.js

@@ -0,0 +1,67 @@
+import { createSystemHostConnectionManager } from "./components/system-host/manager.js";
+import { createSystemHostSetupNotice } from "./components/system-host/setup-notice.js";
+
+/** One connection owner, always first on Home and shared with the chat notice. */
+export function createComputerAccessFeature({
+  dom,
+  runtimeClient,
+  onChange = () => {},
+}) {
+  const documentRoot = dom.homeDashboardRoot?.ownerDocument;
+  const root = documentRoot?.createElement("section");
+  let notice;
+  const connection = createSystemHostConnectionManager({
+    documentRoot,
+    compact: true,
+    loadConnection: () => runtimeClient.getSystemHostConnection(),
+    connectLocal: () => runtimeClient.connectLocalSystemHost(),
+    createPairing: () => runtimeClient.createSystemHostPairing(),
+    downloadSetup: (platform) =>
+      runtimeClient.downloadSystemHostSetup(platform),
+    revokeConnection: () => runtimeClient.revokeSystemHostConnection(),
+    supportsConnection: () => runtimeClient.supportsSystemHostConnection(),
+    onChange: () => {
+      notice?.render();
+      onChange();
+    },
+  });
+
+  function open() {
+    dom.homeWorkspaceButton?.click();
+    if (dom.homeWorkspacePanel?.hidden !== false || !root) return false;
+    connection.openManagement();
+    root.scrollIntoView?.({ block: "start", behavior: "smooth" });
+    root.focus({ preventScroll: true });
+    return true;
+  }
+
+  notice = createSystemHostSetupNotice({
+    container: dom.chatPanel?.querySelector(".composer-dock"),
+    conversationRegion: dom.messagesList,
+    getConnectionState: () => connection.state,
+    supportsConnection: () => runtimeClient.supportsSystemHostConnection(),
+    refreshConnection: () => connection.load(true),
+    onOpen: open,
+  });
+  if (root) {
+    root.className = "home-computer-access";
+    root.setAttribute("tabindex", "-1");
+    root.setAttribute("aria-label", "Computer access");
+    dom.homeDashboardRoot.parentElement?.insertBefore(
+      root,
+      dom.homeDashboardRoot,
+    );
+    connection.mount(root);
+    connection.setActive(true);
+  }
+  return {
+    state: connection.state,
+    load: connection.load,
+    open,
+    dispose() {
+      notice.dispose();
+      connection.dispose();
+      root?.remove();
+    },
+  };
+}

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

@@ -1,11 +1,13 @@
 import { createModelSetupWizard } from "./components/model-setup/wizard.js";
 import { createRuntimeConfigActivation } from "./components/runtime-config-activation.js";
 import { createPluginManager } from "./components/plugins/manager.js";
-import { createSystemHostConnectionManager } from "./components/system-host/manager.js";
-import { createSystemHostSetupNotice } from "./components/system-host/setup-notice.js";
+import { createComputerAccessFeature } from "./computer-access-feature.js";
+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 { 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";
 
 export function createConfigurationFeature({
@@ -13,12 +15,16 @@ export function createConfigurationFeature({
   runtimeClient,
   selectedEnvironmentId,
   recordControlEvent,
+  onNavigationChange = () => {},
   onConfigurationApplied = async () => {},
   onConfigurationSettled = () => true,
+  getLearningSnapshot = () => null,
+  isRuntimeReady = () => true,
 }) {
   let configWorkspace;
   let activation;
   let modelSetup;
+  let modelRemoval;
   const longTermMemorySetup = createLongTermMemorySetup({
     getEnvironmentId: selectedEnvironmentId,
     loadStatus: (environmentId) =>
@@ -28,13 +34,19 @@ export function createConfigurationFeature({
         environmentId,
         providerId,
       }),
-    enableMemory: (input, environmentId) =>
-      runtimeClient.enableLongTermMemory({
+    enableMemory: async (input, environmentId) => {
+      const result = await runtimeClient.enableLongTermMemory({
         environmentId,
         ...input,
-      }),
-    disableMemory: (environmentId) =>
-      runtimeClient.disableLongTermMemory(environmentId),
+      });
+      activation?.markPending();
+      return result;
+    },
+    disableMemory: async (environmentId) => {
+      const result = await runtimeClient.disableLongTermMemory(environmentId);
+      activation?.markPending();
+      return result;
+    },
     recordControlEvent,
     beginRuntimeMutation: () =>
       configWorkspace?.beginExternalRuntimeMutation() ?? false,
@@ -53,6 +65,11 @@ export function createConfigurationFeature({
   longTermMemoryManager = createLongTermMemoryManager({
     actions: longTermMemoryController,
   });
+  longTermMemorySetup.mount(dom.memorySetupRoot);
+  longTermMemoryManager.mount(dom.memoryManagementRoot);
+  const memoryWorkspace = createMemoryWorkspace({
+    root: dom.memoryWorkspacePanel,
+  });
 
   const pluginManager = createPluginManager({
     getEnvironmentId: selectedEnvironmentId,
@@ -68,29 +85,40 @@ export function createConfigurationFeature({
     recordControlEvent,
   });
 
-  let hostSetupNotice;
-  const hostConnection = createSystemHostConnectionManager({
-    loadConnection: () => runtimeClient.getSystemHostConnection(),
-    downloadSetup: (platform) =>
-      runtimeClient.downloadSystemHostSetup(platform),
-    revokeConnection: () => runtimeClient.revokeSystemHostConnection(),
-    supportsConnection: () => runtimeClient.supportsSystemHostConnection(),
-    onChange: () => hostSetupNotice?.render(),
+  let homeSetupSuggestion;
+  const computerAccess = createComputerAccessFeature({
+    dom,
+    runtimeClient,
+    onChange: () => homeSetupSuggestion?.render(),
   });
-  hostSetupNotice = createSystemHostSetupNotice({
-    container: dom.chatPanel?.querySelector(".composer-dock"),
-    conversationRegion: dom.messagesList,
-    getConnectionState: () => hostConnection.state,
-    supportsConnection: () => runtimeClient.supportsSystemHostConnection(),
-    refreshConnection: () => hostConnection.load(true),
-    onOpen: () => {
-      dom.configWorkspaceButton?.click();
-      if (dom.configWorkspacePanel?.hidden === false)
-        configWorkspace.activateCategory("computer");
+  homeSetupSuggestion = createHomeGuidance({
+    container: dom.homeDashboardRoot?.querySelector(".home-workspace-content"),
+    homeRegion: dom.homeWorkspacePanel,
+    client: runtimeClient,
+    getEnvironmentId: selectedEnvironmentId,
+    getLearningSnapshot,
+    isRuntimeReady,
+    // Computer access is permanently visible above the Home suggestions.
+    getConnectionState: () => null,
+    supportsConnection: () => false,
+    refreshConnection: () => {},
+    onOpen: (id) => {
+      if (id === "coworker") return dom.learningWorkspaceButton?.click();
+      if (id === "memory") {
+        dom.memoryWorkspaceButton?.click();
+        if (dom.memoryWorkspacePanel?.hidden === false)
+          memoryWorkspace.activate("setup");
+        return;
+      }
+      dom.pluginsWorkspaceButton?.click();
     },
   });
-
   configWorkspace = createConfigWorkspace({
+    onNavigationChange,
+    onRemoveModel: (model) => {
+      if (modelSetup?.isOpen()) return;
+      return modelRemoval.remove(model);
+    },
     dom: {
       refreshConfigButton: dom.refreshConfigButton,
       configStatus: dom.configStatus,
@@ -122,7 +150,6 @@ export function createConfigurationFeature({
     },
     memorySetup: longTermMemorySetup,
     pluginManagement: pluginManager,
-    hostConnection,
     memoryManagement: {
       load: () => longTermMemoryController.load(),
       mount: (root) => longTermMemoryManager.mount(root),
@@ -144,6 +171,20 @@ export function createConfigurationFeature({
       return refreshed;
     },
   });
+  modelRemoval = createModelRemovalController({
+    removeModel: (input, environmentId) =>
+      runtimeClient.removeRuntimeModel(input, environmentId),
+    loadDashboard: (environmentId) =>
+      runtimeClient.loadConfigDashboard(environmentId, { settled: true }),
+    getEnvironmentId: selectedEnvironmentId,
+    beginRuntimeMutation: (subject) =>
+      configWorkspace.beginExternalRuntimeMutation(subject),
+    endRuntimeMutation: () => configWorkspace.endExternalRuntimeMutation(),
+    refreshRuntimeConfig: (prefix) =>
+      configWorkspace.refreshAfterExternalRuntimeMutation(prefix),
+    onSaved: () => activation.markPending(),
+    setStatus: (...args) => configWorkspace.setStatus(...args),
+  });
   modelSetup = createModelSetupWizard({
     root: dom.configDashboard.parentElement,
     getEnvironmentId: selectedEnvironmentId,
@@ -156,6 +197,14 @@ export function createConfigurationFeature({
       configWorkspace.beginExternalRuntimeMutation("model setup"),
     endRuntimeMutation: () => configWorkspace.endExternalRuntimeMutation(),
     onSaved: () => activation.markPending(),
+    onDeferred: async (model) => {
+      const refreshed =
+        await configWorkspace.refreshAfterExternalRuntimeMutation(
+          "Model saved; refresh required",
+        );
+      if (!refreshed) return false;
+      return configWorkspace.selectModel(model.profileId);
+    },
     onComplete: async (model) => {
       activation.markApplied();
       try {
@@ -181,6 +230,14 @@ export function createConfigurationFeature({
   const prepareDiscardChanges = configWorkspace.prepareDiscardChanges;
   return {
     ...configWorkspace,
+    openComputerSetup: computerAccess.open,
+    refreshComputerAccess: computerAccess.load,
+    renderHomeGuidance: () => homeSetupSuggestion.render(),
+    showActivityMemories: () => {
+      memoryWorkspace.activate("memories");
+      void longTermMemoryController.setOriginFilter("passive_observation");
+      longTermMemoryManager.focus();
+    },
     prepareDiscardChanges: (...args) => {
       if (modelSetup.isOpen()) {
         dom.configStatus.textContent =

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

@@ -13,7 +13,86 @@ export function createAppEventBindings({
   actions,
   documentRoot = document,
   onSessionCreated = () => {},
+  onNavigationChange = () => {},
 }) {
+  let environmentChangeRevision = 0;
+  let environmentChanging = false;
+
+  async function changeEnvironment(
+    nextEnvironmentId,
+    { restoreSession = true, notifyEnvironmentChange = true } = {},
+  ) {
+    const previousEnvironmentId = actions.savedEnvironmentId?.() || "";
+    const recoveryEnvironmentId =
+      state.activeComposerQueueRecovery?.scope.environmentId ?? "";
+    const restoreEnvironmentSelection = () => {
+      dom.environmentSelect.value =
+        previousEnvironmentId || recoveryEnvironmentId;
+      state.agentPickerOpen = false;
+      actions.renderAgentPicker();
+    };
+    if (nextEnvironmentId === previousEnvironmentId) {
+      state.agentPickerOpen = false;
+      actions.renderAgentPicker();
+      return true;
+    }
+    dom.environmentSelect.value = nextEnvironmentId;
+    const preparedEnvironmentChange = actions.beforeEnvironmentChange
+      ? actions.beforeEnvironmentChange({
+          from: previousEnvironmentId,
+          to: nextEnvironmentId,
+        })
+      : true;
+    if (environmentChangeWasDeclined(preparedEnvironmentChange)) {
+      restoreEnvironmentSelection();
+      return false;
+    }
+    if (!actions.suspendQueueRecovery()) {
+      restoreEnvironmentSelection();
+      return false;
+    }
+    const revision = ++environmentChangeRevision;
+    environmentChanging = true;
+    if (typeof preparedEnvironmentChange === "function")
+      preparedEnvironmentChange();
+    actions.invalidateSessionLoads?.();
+    state.agentPickerOpen = false;
+    actions.renderAgentPicker();
+    actions.saveEnvironmentId(nextEnvironmentId);
+    state.currentSessionId = "";
+    state.messages = [];
+    actions.clearAttachments();
+    actions.resetLiveRequestView();
+    dom.sessionTitle.textContent = "New conversation";
+    actions.applyConversationChrome();
+    actions.renderMessages();
+    try {
+      const loading = Promise.allSettled([
+        actions.loadModels(),
+        actions.loadAgentMode(),
+        actions.loadRuntimeConfig({
+          protectUnsaved: false,
+          clearBeforeLoad: true,
+        }),
+      ]);
+      if (notifyEnvironmentChange) {
+        const ChangeEvent =
+          dom.environmentSelect.ownerDocument?.defaultView?.Event ?? Event;
+        dom.environmentSelect.dispatchEvent(new ChangeEvent("change"));
+      }
+      await loading;
+      if (revision !== environmentChangeRevision) return false;
+      if (dom.environmentSelect.value !== nextEnvironmentId) return false;
+      if (restoreSession) await actions.restoreLastSession();
+      return dom.environmentSelect.value === nextEnvironmentId;
+    } finally {
+      if (revision === environmentChangeRevision) {
+        environmentChanging = false;
+        onNavigationChange();
+      }
+    }
+  }
+
   function bind() {
     dom.sessionSearchInput.addEventListener("input", () => {
       state.sessionQuery = dom.sessionSearchInput.value;
@@ -50,63 +129,9 @@ export function createAppEventBindings({
       dom.composerInput.focus();
     });
     dom.environmentSelect.addEventListener("change", () => {
-      const previousEnvironmentId = actions.savedEnvironmentId?.() || "";
-      const nextEnvironmentId = dom.environmentSelect.value;
-      const recoveryEnvironmentId =
-        state.activeComposerQueueRecovery?.scope.environmentId ?? "";
-      const restoreEnvironmentSelection = () => {
-        dom.environmentSelect.value =
-          previousEnvironmentId || recoveryEnvironmentId;
-        state.agentPickerOpen = false;
-        actions.renderAgentPicker();
-      };
-      if (nextEnvironmentId === previousEnvironmentId) {
-        state.agentPickerOpen = false;
-        actions.renderAgentPicker();
-        return;
-      }
-      const preparedEnvironmentChange = actions.beforeEnvironmentChange
-        ? actions.beforeEnvironmentChange({
-            from: previousEnvironmentId,
-            to: nextEnvironmentId,
-          })
-        : true;
-      if (
-        preparedEnvironmentChange === false ||
-        preparedEnvironmentChange === null
-      ) {
-        restoreEnvironmentSelection();
-        return;
-      }
-      if (!actions.suspendQueueRecovery()) {
-        restoreEnvironmentSelection();
-        return;
-      }
-      if (typeof preparedEnvironmentChange === "function") {
-        preparedEnvironmentChange();
-      }
-      actions.invalidateSessionLoads?.();
-      state.agentPickerOpen = false;
-      actions.renderAgentPicker();
-      actions.saveEnvironmentId(nextEnvironmentId);
-      state.currentSessionId = "";
-      state.messages = [];
-      actions.clearAttachments();
-      actions.resetLiveRequestView();
-      dom.sessionTitle.textContent = "New conversation";
-      actions.applyConversationChrome();
-      actions.renderMessages();
-      void (async () => {
-        await Promise.allSettled([
-          actions.loadModels(),
-          actions.loadAgentMode(),
-          actions.loadRuntimeConfig({
-            protectUnsaved: false,
-            clearBeforeLoad: true,
-          }),
-        ]);
-        await actions.restoreLastSession();
-      })();
+      void changeEnvironment(dom.environmentSelect.value, {
+        notifyEnvironmentChange: false,
+      });
     });
     dom.agentPickerButton.addEventListener("click", (event) => {
       event.stopPropagation();
@@ -315,5 +340,14 @@ export function createAppEventBindings({
     );
   }
 
-  return { bind };
+  return {
+    bind,
+    changeEnvironment,
+    isEnvironmentChanging: () => environmentChanging,
+  };
+}
+
+function environmentChangeWasDeclined(preparedChange) {
+  if (preparedChange === false) return true;
+  return preparedChange === null;
 }

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

@@ -75,5 +75,5 @@ export function createChatRequestController({
     conversationSession.activateRequestForScope(scope, requestId);
   }
 
-  return { postChatMessage, sendMessage };
+  return { postChatMessage, sendMessage, stopRequest: (scope) => client.stopChatRequest(scope) };
 }

package/dist/src/web-ui/app/controllers/composer-queue-controller.d.ts

@@ -10,7 +10,7 @@ export type ComposerScope = Readonly<{
 }>;
 
 export type ComposerQueueDrainScope = ComposerScope &
-  Readonly<{ terminalRequestId: string }>;
+  Readonly<{ terminalRequestId: string; cancelled?: boolean }>;
 
 export interface ComposerQueueRecovery {
   scope: ComposerScope;
@@ -62,7 +62,7 @@ export interface ComposerQueuePostChatRequest {
 export interface ComposerQueueControlEvent {
   type: "control";
   name: string;
-  tone: "failed";
+  tone: "failed" | "neutral";
   summary: string;
 }