@abot-ai/runtime 1.0.0 → 1.2.0

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

@@ -2,48 +2,61 @@ import {
   createInitialWorkspaceShellState,
   normalizeWorkspaceDestination,
   toggleWorkspaceSheet,
-  wrappedIndex,
 } from "../ui-behavior.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";
 
 export function createWorkspaceShell({
   dom,
   viewport = window,
   documentRoot = document,
+  beforeWorkspaceChange = () => true,
 }) {
   const shellState = {
     ...createInitialWorkspaceShellState(),
-    activeOperationsTab: "runtime",
     toastTimer: 0,
     bound: false,
   };
+  const sidebarViewport = viewport.matchMedia?.(
+    CONVERSATION_SIDEBAR_MEDIA_QUERY,
+  );
+  const operationsSection = createOperationsSection({
+    buttons: dom.operationsTabButtons,
+    pages: dom.operationsTabPages,
+  });
+
+  function sidebarLayout() {
+    return resolveConversationSidebarLayout(
+      shellState.workspace,
+      shellState.activeSheet,
+      sidebarViewport?.matches === true,
+    );
+  }
 
   function setCurrentPage(button, active) {
     if (active) {
       button.setAttribute("aria-current", "page");
-    } else {
-      button.removeAttribute("aria-current");
+      return;
     }
+    button.removeAttribute("aria-current");
   }
 
   function syncShell() {
     const chatWorkspace = shellState.workspace === "chat";
-    const operationsWorkspace = shellState.workspace === "operations";
     const configWorkspace = shellState.workspace === "config";
-    const sessionsOpen = chatWorkspace && shellState.activeSheet === "sessions";
+    const sessions = sidebarLayout();
+    const showSessionsToggle = chatWorkspace && !sessions.docked;
 
-    dom.app.classList.toggle("operations-workspace", operationsWorkspace);
     dom.app.classList.toggle("config-workspace", configWorkspace);
-    dom.app.classList.toggle("sessions-open", sessionsOpen);
+    dom.app.classList.toggle("sessions-open", sessions.drawerOpen);
+    dom.app.classList.toggle("sessions-docked", sessions.docked);
 
     dom.chatPanel.hidden = !chatWorkspace;
-    dom.chatPanel.inert = !chatWorkspace || sessionsOpen;
-    dom.operationsWorkspacePanel.hidden = !operationsWorkspace;
-    dom.operationsWorkspacePanel.inert = !operationsWorkspace;
-    dom.operationsWorkspacePanel.setAttribute(
-      "aria-hidden",
-      operationsWorkspace ? "false" : "true",
-    );
+    dom.chatPanel.inert = !chatWorkspace || sessions.drawerOpen;
     dom.configWorkspacePanel.hidden = !configWorkspace;
     dom.configWorkspacePanel.inert = !configWorkspace;
     dom.configWorkspacePanel.setAttribute(
@@ -51,69 +64,145 @@ export function createWorkspaceShell({
       configWorkspace ? "false" : "true",
     );
 
-    dom.sessionsPanel.hidden = !sessionsOpen;
-    dom.sessionsPanel.inert = !sessionsOpen;
+    dom.sessionsPanel.hidden = !sessions.visible;
+    dom.sessionsPanel.inert = !sessions.visible;
     dom.sessionsPanel.setAttribute(
       "aria-hidden",
-      sessionsOpen ? "false" : "true",
+      sessions.visible ? "false" : "true",
     );
     dom.sessionsToggleButton.setAttribute(
       "aria-expanded",
-      sessionsOpen ? "true" : "false",
+      sessions.visible ? "true" : "false",
     );
     dom.sessionsToggleButton.setAttribute(
       "aria-label",
-      sessionsOpen ? "Close conversations" : "Open conversations",
+      sessions.drawerOpen ? "Close conversations" : "Open conversations",
     );
+    dom.sessionsToggleButton.hidden = !showSessionsToggle;
+    dom.closeSessionsButton.hidden = sessions.docked;
 
     setCurrentPage(dom.chatWorkspaceButton, chatWorkspace);
-    setCurrentPage(dom.operationsWorkspaceButton, operationsWorkspace);
     setCurrentPage(dom.configWorkspaceButton, configWorkspace);
 
-    dom.panelBackdrop.classList.toggle("visible", sessionsOpen);
-    dom.panelBackdrop.tabIndex = sessionsOpen ? 0 : -1;
+    dom.panelBackdrop.classList.toggle("visible", sessions.drawerOpen);
+    dom.panelBackdrop.tabIndex = sessions.drawerOpen ? 0 : -1;
     dom.panelBackdrop.setAttribute(
       "aria-hidden",
-      sessionsOpen ? "false" : "true",
+      sessions.drawerOpen ? "false" : "true",
     );
   }
 
-  function workspaceBackButton(destination) {
-    return destination === "operations"
-      ? dom.closeOperationsWorkspaceButton
-      : dom.closeConfigWorkspaceButton;
+  function focusVisibleSessionsControl() {
+    const sessions = sidebarLayout();
+    if (!sessions.visible) return;
+    if (sessions.drawerOpen) {
+      dom.closeSessionsButton.focus();
+      return;
+    }
+    const sidebarControl = dom.sessionSearchInput ?? dom.refreshSessionsButton;
+    (sidebarControl ?? dom.chatWorkspaceButton).focus();
   }
 
-  function activateWorkspace(destination, options = {}) {
+  function sidebarFocusNeedsRestoration(activeElement, sessions) {
+    if (!activeElement) return false;
+    if (activeElement === dom.sessionsToggleButton) {
+      return dom.sessionsToggleButton.hidden;
+    }
+    if (activeElement === dom.closeSessionsButton) {
+      return dom.closeSessionsButton.hidden;
+    }
+    if (activeElement === dom.panelBackdrop) return !sessions.drawerOpen;
+    if (sessions.visible) return false;
+    return Boolean(activeElement.closest?.(".sessions-panel"));
+  }
+
+  function syncSidebarViewport() {
+    const activeElement = documentRoot.activeElement;
+    shellState.activeSheet = "";
+    syncShell();
+    const sessions = sidebarLayout();
+    if (!sidebarFocusNeedsRestoration(activeElement, sessions)) return;
+    if (sessions.docked) {
+      focusVisibleSessionsControl();
+      return;
+    }
+    const visibleNavigationButton = dom.sessionsToggleButton.hidden
+      ? dom.chatWorkspaceButton
+      : dom.sessionsToggleButton;
+    visibleNavigationButton.focus();
+  }
+
+  function prepareWorkspaceTransition(destination) {
     const nextWorkspace = normalizeWorkspaceDestination(destination);
+    if (nextWorkspace === shellState.workspace) {
+      return { nextWorkspace, commitBeforeChange: () => {} };
+    }
+    const preparedChange = beforeWorkspaceChange({
+      from: shellState.workspace,
+      to: nextWorkspace,
+    });
+    if (preparedChange === false || preparedChange === null) return null;
+    return {
+      nextWorkspace,
+      commitBeforeChange:
+        typeof preparedChange === "function" ? preparedChange : () => {},
+    };
+  }
+
+  function commitWorkspaceActivation(preparedTransition, options = {}) {
+    preparedTransition.commitBeforeChange();
+    const nextWorkspace = preparedTransition.nextWorkspace;
     const previousWorkspace = shellState.workspace;
     const previousSheet = shellState.activeSheet;
     shellState.workspace = nextWorkspace;
     shellState.activeSheet = "";
     syncShell();
 
-    if (options.focus === false) return;
+    if (options.focus === false) return true;
     if (nextWorkspace !== "chat") {
-      viewport.requestAnimationFrame(() =>
-        workspaceBackButton(nextWorkspace)?.focus(),
-      );
-      return;
+      viewport.requestAnimationFrame(() => {
+        if (shellState.workspace !== nextWorkspace) return;
+        dom.closeConfigWorkspaceButton.focus();
+      });
+      return true;
     }
     if (previousWorkspace !== "chat" || previousSheet) {
       dom.chatWorkspaceButton.focus();
     }
+    return true;
+  }
+
+  function prepareWorkspaceActivation(destination, options = {}) {
+    const preparedTransition = prepareWorkspaceTransition(destination);
+    if (!preparedTransition) return null;
+    let committed = false;
+    return () => {
+      if (committed) return true;
+      const activated = commitWorkspaceActivation(preparedTransition, options);
+      committed = activated;
+      return activated;
+    };
+  }
+
+  function activateWorkspace(destination, options = {}) {
+    const preparedActivation = prepareWorkspaceActivation(destination, options);
+    return preparedActivation ? preparedActivation() : false;
   }
 
   function setSessionsDrawerOpen(open, options = {}) {
+    const preparedTransition = prepareWorkspaceTransition("chat");
+    if (!preparedTransition) return false;
+    preparedTransition.commitBeforeChange();
     const wasOpen = shellState.activeSheet === "sessions";
     shellState.workspace = "chat";
-    shellState.activeSheet = open ? "sessions" : "";
+    const useDrawer = open && sidebarViewport?.matches !== true;
+    shellState.activeSheet = useDrawer ? "sessions" : "";
     syncShell();
 
-    if (options.focus === false) return;
+    if (options.focus === false) return true;
     if (open) {
-      viewport.requestAnimationFrame(() => dom.closeSessionsButton?.focus());
-      return;
+      viewport.requestAnimationFrame(focusVisibleSessionsControl);
+      return true;
     }
     if (
       wasOpen &&
@@ -122,6 +211,7 @@ export function createWorkspaceShell({
     ) {
       dom.sessionsToggleButton.focus();
     }
+    return true;
   }
 
   function toggleSessionsDrawer() {
@@ -131,26 +221,6 @@ export function createWorkspaceShell({
     });
   }
 
-  function activateOperationsTab(tabName) {
-    const availableTabs = new Set(
-      dom.operationsTabButtons.map((button) => textOf(button.dataset.tab)),
-    );
-    const normalized = textOf(tabName, "runtime") || "runtime";
-    const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
-    shellState.activeOperationsTab = nextTab;
-    for (const button of dom.operationsTabButtons) {
-      const active = button.dataset.tab === nextTab;
-      button.classList.toggle("active", active);
-      button.setAttribute("aria-selected", active ? "true" : "false");
-      button.tabIndex = active ? 0 : -1;
-    }
-    for (const page of dom.operationsTabPages) {
-      const active = page.id === `${nextTab}Tab`;
-      page.classList.toggle("active", active);
-      page.hidden = !active;
-    }
-  }
-
   function showToast(message, tone = "") {
     viewport.clearTimeout(shellState.toastTimer);
     dom.toastRegion.textContent = textOf(message);
@@ -166,8 +236,7 @@ export function createWorkspaceShell({
       return true;
     }
     if (shellState.workspace !== "chat") {
-      activateWorkspace("chat");
-      return true;
+      return activateWorkspace("chat");
     }
     return false;
   }
@@ -178,15 +247,9 @@ export function createWorkspaceShell({
     dom.chatWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("chat");
     });
-    dom.operationsWorkspaceButton.addEventListener("click", () => {
-      activateWorkspace("operations");
-    });
     dom.configWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("config");
     });
-    dom.closeOperationsWorkspaceButton.addEventListener("click", () => {
-      activateWorkspace("chat");
-    });
     dom.closeConfigWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("chat");
     });
@@ -199,37 +262,23 @@ export function createWorkspaceShell({
         setSessionsDrawerOpen(false, { restoreFocus: true });
       }
     });
-    for (const button of dom.operationsTabButtons) {
-      button.addEventListener("click", () => {
-        activateOperationsTab(button.dataset.tab);
-      });
-      button.addEventListener("keydown", (event) => {
-        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-        event.preventDefault();
-        const currentIndex = dom.operationsTabButtons.indexOf(button);
-        const delta = event.key === "ArrowRight" ? 1 : -1;
-        const next =
-          dom.operationsTabButtons[
-            wrappedIndex(currentIndex, delta, dom.operationsTabButtons.length)
-          ];
-        next?.focus();
-        activateOperationsTab(next?.dataset.tab);
-      });
-    }
+    sidebarViewport?.addEventListener("change", syncSidebarViewport);
+    operationsSection.bind();
   }
 
   function load() {
     Object.assign(shellState, createInitialWorkspaceShellState());
-    activateOperationsTab("runtime");
+    operationsSection.activateTab("runtime");
     syncShell();
   }
 
   return {
-    activateOperationsTab,
+    activateOperationsTab: operationsSection.activateTab,
     activateWorkspace,
     bind,
     closeOverlaysOnEscape,
     load,
+    prepareWorkspaceActivation,
     setSessionsDrawerOpen,
     showToast,
   };

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

@@ -23,8 +23,13 @@ export function createAppEventBindings({
       () => void actions.loadSessions(),
     );
     dom.newSessionButton.addEventListener("click", () => {
+      const preparedWorkspaceActivation = shell.prepareWorkspaceActivation(
+        "chat",
+        { focus: false },
+      );
+      if (!preparedWorkspaceActivation) return;
       if (!actions.suspendQueueRecovery()) return;
-      shell.activateWorkspace("chat", { focus: false });
+      if (preparedWorkspaceActivation() === false) return;
       state.currentSessionId = createWebSessionId();
       actions.saveSessionId(
         actions.selectedEnvironmentId(),
@@ -43,16 +48,45 @@ 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()) {
-        if (recoveryEnvironmentId)
-          dom.environmentSelect.value = recoveryEnvironmentId;
+        restoreEnvironmentSelection();
         return;
       }
+      if (typeof preparedEnvironmentChange === "function") {
+        preparedEnvironmentChange();
+      }
+      actions.invalidateSessionLoads?.();
       state.agentPickerOpen = false;
       actions.renderAgentPicker();
-      actions.saveEnvironmentId(dom.environmentSelect.value);
+      actions.saveEnvironmentId(nextEnvironmentId);
       state.currentSessionId = "";
       state.messages = [];
       actions.clearAttachments();
@@ -61,10 +95,13 @@ export function createAppEventBindings({
       actions.applyConversationChrome();
       actions.renderMessages();
       void (async () => {
-        await actions.loadModels();
         await Promise.allSettled([
+          actions.loadModels(),
           actions.loadAgentMode(),
-          actions.loadRuntimeConfig(),
+          actions.loadRuntimeConfig({
+            protectUnsaved: false,
+            clearBeforeLoad: true,
+          }),
         ]);
         await actions.restoreLastSession();
       })();

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

@@ -0,0 +1,92 @@
+export type ComposerAttachment = Record<string, unknown> & {
+  id?: string;
+  kind?: string;
+  name?: string;
+  mimeType?: string;
+  sessionId?: string;
+  storageRef?: string;
+  environment?: string;
+};
+
+export type ComposerUploadFile = Blob & {
+  name?: string;
+};
+
+export interface ComposerAttachmentsState {
+  currentSessionId: string;
+  pendingAttachments: ComposerAttachment[];
+  pendingAttachmentUploadCounts: Map<number, number>;
+  composerAttachmentGeneration: number;
+}
+
+export interface ComposerAttachmentsDom {
+  attachmentButton: {
+    disabled: boolean;
+    title: string;
+  };
+  attachmentPreview: {
+    innerHTML: string;
+    appendChild(child: unknown): unknown;
+  };
+}
+
+export interface ComposerAttachmentsShell {
+  showToast(message: string): void;
+}
+
+export interface ComposerAttachmentLocation {
+  environmentId: string;
+  sessionId: string;
+  storageRef: string;
+  id: string;
+  mimeType: string;
+}
+
+export interface ComposerAttachmentsClient {
+  attachmentPreviewUrl(location: ComposerAttachmentLocation): string;
+  deleteAttachment(location: ComposerAttachmentLocation): Promise<void>;
+  uploadAttachment(options: {
+    environmentId: string;
+    sessionId: string;
+    name: string;
+    mimeType: string;
+    file: Blob;
+  }): Promise<ComposerAttachment>;
+}
+
+export interface ComposerAttachmentControlEvent {
+  type: "control";
+  name: string;
+  tone: "failed";
+  summary: string;
+}
+
+export interface ComposerAttachmentsControllerOptions {
+  state: ComposerAttachmentsState;
+  dom: ComposerAttachmentsDom;
+  shell: ComposerAttachmentsShell;
+  client: ComposerAttachmentsClient;
+  selectedEnvironmentId: () => string;
+  selectedModelSupportsImageInput: () => boolean;
+  ensureSession: () => void;
+  onSendStateChange: () => void;
+  onControlEvent: (event: ComposerAttachmentControlEvent) => void;
+  isComposerAvailable?: () => boolean;
+}
+
+export interface ComposerAttachmentsController {
+  activeUploadCount(): number;
+  clear(options?: { cleanup?: boolean }): void;
+  cleanup(attachments: readonly ComposerAttachment[]): void;
+  deletePending(attachment: ComposerAttachment): Promise<void>;
+  invalidateCompletions(): void;
+  previewUrl(attachment: ComposerAttachment): string;
+  removeUnsupportedImages(): void;
+  render(): void;
+  setUploadInProgress(uploading: boolean, generation?: number): void;
+  upload(file: ComposerUploadFile): Promise<void>;
+}
+
+export declare function createComposerAttachmentsController(
+  options: ComposerAttachmentsControllerOptions,
+): ComposerAttachmentsController;

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

@@ -0,0 +1,109 @@
+import type {
+  SessionComposerAttachmentRef,
+  SessionComposerModelPreference,
+  SessionComposerQueue,
+} from "../lib/session-composer-queue.js";
+
+export type ComposerScope = Readonly<{
+  environmentId: string;
+  sessionId: string;
+}>;
+
+export type ComposerQueueDrainScope = ComposerScope &
+  Readonly<{ terminalRequestId: string }>;
+
+export interface ComposerQueueRecovery {
+  scope: ComposerScope;
+  releaseToken: string;
+}
+
+export interface ComposerQueueMessage {
+  id?: string;
+  role?: string;
+  text?: string;
+  createdAt?: unknown;
+  requestId?: string;
+  streaming?: boolean;
+}
+
+export interface ComposerQueueState {
+  activeRequestId: string;
+  agentMode: string;
+  currentSessionId: string;
+  pendingAttachments: SessionComposerAttachmentRef[];
+  composerQueueDrainingScopes: Set<string>;
+  composerQueueRecoveredReleaseTokens: Set<string>;
+  activeComposerQueueRecovery: ComposerQueueRecovery | null;
+  messages: ComposerQueueMessage[];
+}
+
+export interface ComposerQueueDom {
+  composerInput: {
+    value: string;
+  };
+}
+
+export interface ComposerQueueAttachments {
+  clear(options?: { cleanup?: boolean }): void;
+  invalidateCompletions(): void;
+  render(): void;
+}
+
+export interface ComposerQueuePostChatRequest {
+  text: string;
+  attachments: SessionComposerAttachmentRef[];
+  environmentId: string;
+  sessionId: string;
+  agentMode: string;
+  toolPermissionMode: string;
+  modelPreference: SessionComposerModelPreference | null;
+}
+
+export interface ComposerQueueControlEvent {
+  type: "control";
+  name: string;
+  tone: "failed";
+  summary: string;
+}
+
+export interface ComposerQueueControllerOptions {
+  state: ComposerQueueState;
+  dom: ComposerQueueDom;
+  queue: SessionComposerQueue;
+  selectedEnvironmentId: () => string;
+  getToolPermissionMode: () => string;
+  getModelPreference: () => SessionComposerModelPreference | null;
+  rememberModelSelection: () => void;
+  attachments: ComposerQueueAttachments;
+  updateSendState: () => void;
+  postChatMessage: (request: ComposerQueuePostChatRequest) => Promise<string>;
+  appendLocalUserMessage: (message: {
+    text: string;
+    attachments: SessionComposerAttachmentRef[];
+    requestId: string;
+  }) => void;
+  activateRequestForScope: (scope: ComposerScope, requestId: string) => void;
+  renderMessages: () => void;
+  setMessageStatus: (message: string, busy?: boolean) => void;
+  recordControlEvent: (event: ComposerQueueControlEvent) => void;
+  resizeComposer: () => void;
+}
+
+export interface ComposerQueueController {
+  clearRecovery(scope: ComposerScope): void;
+  currentScope(): ComposerScope;
+  drain(scope: ComposerQueueDrainScope): Promise<void>;
+  enqueue(text: string): Promise<void>;
+  isCurrentDraining(): boolean;
+  isCurrentScope(scope: ComposerScope): boolean;
+  queuedCount(): number;
+  recoverForManualSend(scope: ComposerScope): boolean;
+  reportFailure(scope: ComposerScope, summary: string): void;
+  restoreText(text: string, scope: ComposerScope): void;
+  scopeKey(scope: ComposerScope): string;
+  suspendRecoveryForNavigation(): boolean;
+}
+
+export declare function createComposerQueueController(
+  options: ComposerQueueControllerOptions,
+): ComposerQueueController;