@abot-ai/runtime 1.3.1 → 1.5.0

package/dist/src/web-ui/app/components/system-host/visibility.js

@@ -0,0 +1,35 @@
+/** Observe panel ancestors as well as browser visibility. */
+export function createSystemHostVisibility({
+  documentRoot,
+  getRoot,
+  isActive,
+  onChange,
+}) {
+  const Observer = documentRoot?.defaultView?.MutationObserver;
+  const observer = Observer ? new Observer(onChange) : null;
+  function isVisible() {
+    if (!isActive()) return false;
+    if (documentRoot?.hidden) return false;
+    return !getRoot()?.closest?.("[hidden]");
+  }
+  function watch() {
+    observer?.disconnect();
+    let element = getRoot();
+    while (element) {
+      observer?.observe(element, {
+        attributes: true,
+        attributeFilter: ["hidden"],
+      });
+      element = element.parentElement;
+    }
+  }
+  documentRoot?.addEventListener("visibilitychange", onChange);
+  return {
+    isVisible,
+    watch,
+    dispose() {
+      observer?.disconnect();
+      documentRoot?.removeEventListener("visibilitychange", onChange);
+    },
+  };
+}

package/dist/src/web-ui/app/components/tool-approval-card.d.ts

@@ -1,9 +1,13 @@
+import type { ToolActivityEvent } from "../lib/tool-activity-event.js";
+
 export type ToolApprovalEvent = Record<string, unknown> & {
   approvalId?: string;
   eventName?: string;
   name?: string;
   tool?: string;
   summary?: string;
+  toolActivity?: ToolActivityEvent;
+  recommendedToolPermissionMode?: string;
 };
 
 export interface ToolApprovalCardOptions {

package/dist/src/web-ui/app/components/tool-approval-card.js

@@ -1,5 +1,6 @@
 import { formatToolName } from "../lib/event-presentation.js";
 import { textOf } from "../lib/text-format.js";
+import { createConversationToolEvidence } from "./conversation-tool-evidence.js";
 
 export function createToolApprovalCard({
   event,
@@ -20,20 +21,36 @@ export function createToolApprovalCard({
 
   const header = documentRoot.createElement("div");
   header.className = "approval-message-header";
-  const label = documentRoot.createElement("span");
-  label.className = "approval-message-label";
-  label.textContent = "Approval required";
   const title = documentRoot.createElement("strong");
   title.className = "approval-message-title";
-  title.textContent = `Allow ${toolLabel} to run?`;
-  header.append(label, title);
+  title.textContent = toolLabel;
+  header.appendChild(title);
 
   const detail = documentRoot.createElement("p");
   detail.className = "approval-message-detail";
   detail.dir = "auto";
   detail.textContent =
     textOf(event?.summary) || "The runtime is waiting for your decision.";
-  bubble.append(header, detail);
+  const explanation = documentRoot.createElement("details");
+  explanation.className = "approval-message-explanation";
+  const explanationLabel = documentRoot.createElement("summary");
+  explanationLabel.textContent = "Action details";
+  explanation.append(explanationLabel, detail);
+  bubble.append(header, explanation);
+
+  const evidence = createConversationToolEvidence(
+    { ...event?.toolActivity, executed: false },
+    { documentRoot },
+  );
+  if (evidence) bubble.appendChild(evidence);
+
+  if (event?.recommendedToolPermissionMode === "full_plus") {
+    const recommendation = documentRoot.createElement("p");
+    recommendation.className = "approval-message-detail";
+    recommendation.textContent =
+      "For future actions without these approval requests, select FULL+. Approving this action keeps your current mode.";
+    bubble.appendChild(recommendation);
+  }
 
   const actions = documentRoot.createElement("div");
   actions.className = "tool-approval-actions";

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-environment-refresh.js

@@ -0,0 +1,118 @@
+import { createConfigurationFeature as createWorkspaceFeature } from "./configuration-feature.js";
+import { textOf } from "./lib/text-format.js";
+
+export function createAppliedEnvironmentProjection({
+  state,
+  dom,
+  selection,
+  loadWebConfig,
+}) {
+  let generation = 0;
+  let pending = null;
+
+  async function prepare() {
+    const revision = ++generation;
+    pending = null;
+    const config = await loadWebConfig();
+    if (revision !== generation) return null;
+    pending = config;
+    const selected = selection.selectedEnvironmentId();
+    return (
+      Array.isArray(config.environments) &&
+      config.environments.some(({ id }) => textOf(id).trim() === selected)
+    );
+  }
+
+  function restoreProjection(config, selected) {
+    state.config = config;
+    selection.renderEnvironmentOptions();
+    dom.environmentSelect.value = selected;
+    selection.renderAgentPicker();
+  }
+
+  function preferredEnvironmentId(options, selected, defaultId) {
+    if (options.some(({ value }) => value === selected)) return selected;
+    if (options.some(({ value }) => value === defaultId)) return defaultId;
+    return options[0]?.value || "";
+  }
+
+  function changeProjectedEnvironment(
+    next,
+    previousConfig,
+    previousEnvironment,
+  ) {
+    const ChangeEvent = dom.environmentSelect.ownerDocument.defaultView.Event;
+    dom.environmentSelect.dispatchEvent(new ChangeEvent("change"));
+    if (dom.environmentSelect.value === next) return true;
+    restoreProjection(previousConfig, previousEnvironment);
+    // Existing listeners also own composer/environment presentation after a refusal.
+    dom.environmentSelect.dispatchEvent(new ChangeEvent("change"));
+    return false;
+  }
+
+  function flush() {
+    if (!pending) return "unchanged";
+    const previousConfig = state.config;
+    const previousEnvironment = selection.selectedEnvironmentId();
+    state.config = pending;
+    selection.renderEnvironmentOptions();
+    const next = preferredEnvironmentId(
+      selection.environmentOptions(),
+      previousEnvironment,
+      textOf(pending.defaultEnvironmentId).trim(),
+    );
+    if (!next) {
+      restoreProjection(previousConfig, previousEnvironment);
+      return "blocked";
+    }
+    dom.environmentSelect.value = next;
+    const unchanged = next === previousEnvironment;
+    if (unchanged) {
+      pending = null;
+      selection.renderAgentPicker();
+      return "unchanged";
+    }
+    if (!changeProjectedEnvironment(next, previousConfig, previousEnvironment))
+      return "blocked";
+    pending = null;
+    selection.renderAgentPicker();
+    return "changed";
+  }
+
+  return { prepare, flush };
+}
+
+/** Stage applied metadata under the mutation lock, then use normal navigation after release. */
+export function createConfigurationFeature({
+  state,
+  selection,
+  onConfigurationApplied,
+  ...options
+}) {
+  const projection = createAppliedEnvironmentProjection({
+    state,
+    dom: options.dom,
+    selection,
+    loadWebConfig: () => options.runtimeClient.loadWebConfig(),
+  });
+  const workspace = createWorkspaceFeature({
+    ...options,
+    onConfigurationApplied: async () => {
+      const currentStillConfigured = await projection.prepare();
+      if (currentStillConfigured) await onConfigurationApplied();
+    },
+    onConfigurationSettled: () => projection.flush() !== "blocked",
+  });
+  return {
+    ...workspace,
+    async reloadAppliedEnvironmentModels() {
+      await projection.prepare();
+      const result = projection.flush();
+      if (result === "blocked") return false;
+      if (result === "changed") return true;
+      const refreshed = await workspace.load();
+      const modelsLoaded = await onConfigurationApplied();
+      return refreshed !== false && modelsLoaded !== false;
+    },
+  };
+}