@abot-ai/runtime 1.4.0 → 1.6.0

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

@@ -1,22 +1,42 @@
 import { escapeHtml } from "../../lib/text-format.js";
+import { macPermissionSummary, renderMacPermissionPreparation } from "./macos-permission-rendering.js";
+import {
+  renderMacSetupAction,
+  renderMacSetupNotice,
+  renderMacConnectionInstructions,
+} from "./macos-setup.js";
 
 export function hostSetupIsReady(snapshot) {
   if (snapshot?.readiness) return snapshot.readiness.ready === true;
   return snapshot?.connected === true;
 }
+function hostCompanionUpdateRequired(snapshot) {
+  return snapshot?.readiness?.companionUpdateRequired === true;
+}
+function pairedCompanionIsOffline(snapshot) {
+  if (!snapshot?.paired) return false;
+  return snapshot.connected === false;
+}
 function connectionStatus(snapshot, statusUnavailable, busy) {
   if (statusUnavailable) return "Status unavailable";
   if (busy || !snapshot) return "Checking this computer…";
-  if (hostSetupIsReady(snapshot)) return "Ready";
-  if (snapshot.paired) return "Paired · offline";
+  if (hostSetupIsReady(snapshot)) return snapshot.identity?.os === "macos" ? "Connected" : "Ready";
+  if (pairedCompanionIsOffline(snapshot)) return "Paired · offline";
+  if (hostCompanionUpdateRequired(snapshot)) return "Update needed";
+  if (snapshot.connected) return "Computer access unavailable";
+  if (snapshot?.readiness?.directAccessReady) return "Direct access available";
   return "Setup needed";
 }
+function hostAccessIsAvailable(snapshot, supported, statusUnavailable, busy) {
+  if (!supported || statusUnavailable || busy) return false;
+  return hostSetupIsReady(snapshot);
+}
 function readyDescription(snapshot) {
-  if (snapshot?.readiness?.route === "native")
-    return "ABot can already use this computer. No extra installation is needed.";
-  if (snapshot?.readiness?.route === "wsl_interop")
-    return "Windows access through WSL is ready. No extra installation is needed.";
-  return "Your computer is connected and ready.";
+  if (["native", "wsl_interop"].includes(snapshot?.readiness?.route))
+    return "Direct commands are available. No extra installation is needed for direct commands.";
+  if (snapshot?.identity?.os === "macos")
+    return "Your Mac is connected. macOS permissions and tool approvals are checked separately. Background collection starts only when you enable it.";
+  return "Your computer is connected for system tools and ABot Spark. Background collection starts only when you enable it.";
 }
 function renderIdentity(snapshot) {
   const identity = snapshot?.identity || {};
@@ -37,23 +57,33 @@ function renderIdentity(snapshot) {
 function renderSetupActions(snapshot, disabled) {
   if (hostSetupIsReady(snapshot)) return "";
   const platforms = snapshot?.readiness?.platforms || [];
-  const labels = {
+  const setupLabels = {
     windows: "Set up Windows access",
-    macos: "Set up Mac access",
+    linux: "Set up Linux access",
   };
-  return platforms
-    .filter((platform) => Object.hasOwn(labels, platform))
-    .map(
-      (platform) =>
-        `<button type="button" data-system-host-install="${platform}" ${disabled ? "disabled" : ""}>${labels[platform]}</button>`,
-    )
-    .join("");
+  const updateLabels = {
+    windows: "Update Windows connection",
+    linux: "Update Linux connection",
+  };
+  const labels = hostCompanionUpdateRequired(snapshot)
+    ? updateLabels
+    : setupLabels;
+  return (
+    renderMacSetupAction(snapshot, disabled) +
+    platforms
+      .filter((platform) => Object.hasOwn(labels, platform))
+      .map(
+        (platform) =>
+          `<button type="button" data-system-host-install="${platform}" ${disabled ? "disabled" : ""}>${labels[platform]}</button>`,
+      )
+      .join("")
+  );
 }
 function hasInstallablePlatform(snapshot) {
   if (hostSetupIsReady(snapshot)) return false;
   return (
     snapshot?.readiness?.platforms?.some((platform) =>
-      ["windows", "macos"].includes(platform),
+      ["windows", "linux"].includes(platform),
     ) === true
   );
 }
@@ -61,7 +91,26 @@ function setupDownloadHasExpired(downloaded) {
   if (!downloaded?.expiresAt) return false;
   return Date.parse(downloaded.expiresAt) <= Date.now();
 }
-export function renderSystemHostConnection({
+export function renderSystemHostConnection(input) {
+  const content = renderConnectionDetails(input);
+  if (!input.compact) return content;
+  const { snapshot, supported, statusUnavailable, busy, managementOpen, macPermissions, nativeMacPermissions } = input;
+  const available = hostAccessIsAvailable(snapshot, supported, statusUnavailable, busy);
+  const status = supported ? connectionStatus(snapshot, statusUnavailable, busy) : "Unavailable";
+  const permissionSummary = macPermissionSummary(snapshot, macPermissions, nativeMacPermissions);
+  return `<details class="system-host-compact" data-system-host-management ${managementOpen ? "open" : ""}>
+    <summary class="system-host-summary">
+      <span class="system-host-summary-title">Computer access</span>
+      <span class="system-host-status" role="status" data-tone="${available ? "ready" : "unavailable"}"><span class="system-host-status-dot" aria-hidden="true"></span>${escapeHtml(status)}</span>
+      <span class="system-host-summary-name">${escapeHtml(snapshot?.identity?.name || "")}</span>
+      ${permissionSummary ? `<span class="system-host-summary-permissions">${escapeHtml(permissionSummary)}</span>` : ""}
+      <span class="system-host-summary-action" aria-hidden="true"><span>⌄</span></span>
+    </summary>
+    <div class="system-host-management-body">${content}</div>
+  </details>`;
+}
+
+function renderConnectionDetails({
   snapshot,
   supported,
   busy,
@@ -69,20 +118,35 @@ export function renderSystemHostConnection({
   message,
   statusUnavailable,
   downloaded,
+  manualMac,
+  macPermissions,
+  macPermissionError,
+  nativeMacPermissions,
+  nativeMacPermissionError,
 }) {
   const ready = hostSetupIsReady(snapshot);
+  const available = hostAccessIsAvailable(
+    snapshot,
+    supported,
+    statusUnavailable,
+    busy,
+  );
   const restart = snapshot?.readiness?.restartRequired === true;
   return `<section class="system-host-panel" aria-label="Connected computer" aria-busy="${busy ? "true" : "false"}">
-    <div class="system-host-heading"><div><h2>Computer access</h2><p>Use applications and system commands on your computer.</p></div><button type="button" data-system-host-refresh ${busy || !supported ? "disabled" : ""}>Refresh status</button></div>
-    <p class="system-host-note">Shared by all environments in this ABot installation. Your selected tools and ASK, Full or Full+ mode still apply.</p>
-    <p class="system-host-status" role="status">${supported ? connectionStatus(snapshot, statusUnavailable, busy) : "Computer access setup requires the local Runtime backend."}</p>
+    <div class="system-host-heading"><div><h2>Computer access</h2><p>One connection for computer tools and ABot Spark.</p></div><button type="button" data-system-host-refresh ${busy || !supported ? "disabled" : ""}>Refresh status</button></div>
+    <p class="system-host-note">Shared by all environments and compatible plugins in this ABot installation. Tool approvals and ABot Spark collection are controlled separately.</p>
+    <p class="system-host-status" role="status" data-tone="${available ? "ready" : "unavailable"}"><span class="system-host-status-dot" aria-hidden="true"></span><span>${supported ? connectionStatus(snapshot, statusUnavailable, busy) : "Computer access setup requires the local Runtime backend."}</span></p>
     ${ready && !statusUnavailable && !busy ? `<p>${readyDescription(snapshot)}</p>` : ""}
     ${renderIdentity(snapshot)}
+    ${supported ? renderMacPermissionPreparation({ snapshot, macPermissions, macPermissionError, nativeMacPermissions, nativeMacPermissionError, busy, statusUnavailable }) : ""}
+    ${supported ? renderMacSetupNotice(snapshot) : ""}
+    ${supported ? renderMacConnectionInstructions(manualMac) : ""}
     ${!ready && snapshot?.readiness?.message ? `<p class="system-host-note">${escapeHtml(snapshot.readiness.message)}</p>` : ""}
-    ${hasInstallablePlatform(snapshot) && supported ? "<p>Download setup for the computer hosting ABot, then open the downloaded file. It installs what is needed and connects automatically. Follow any permission prompts shown by your operating system.</p>" : ""}
+    ${hasInstallablePlatform(snapshot) && supported ? "<p>Download setup for the computer hosting ABot, then open the downloaded file. It checks prerequisites and connects automatically. Follow any permission prompts shown by your operating system.</p>" : ""}
     ${restart ? '<p class="system-host-restart" role="note">Opening the setup file enables Windows access and automatically restarts the selected WSL distribution. This interrupts its services and conversations. Finish active work before opening the setup file.</p>' : ""}
     ${downloaded ? `<div class="system-host-download"><p><strong>Downloaded:</strong> ${escapeHtml(downloaded.filename)}</p><p>${setupDownloadHasExpired(downloaded) ? "Setup download expired. Download setup again." : "Open this file to continue. A download alone does not mean access is ready."}</p>${downloaded.expiresAt && !setupDownloadHasExpired(downloaded) ? `<p class="system-host-note">Open before ${escapeHtml(new Date(downloaded.expiresAt).toLocaleTimeString())}.</p>` : ""}</div>` : ""}
     <div class="${error ? "error-text" : "system-host-note"}" role="${error ? "alert" : "status"}" aria-live="polite">${escapeHtml(error || message || "")}</div>
-    <div class="system-host-actions">${supported ? renderSetupActions(snapshot, busy) : ""}${snapshot?.paired ? `<button type="button" data-system-host-revoke ${busy ? "disabled" : ""}>Disconnect computer</button>` : ""}</div>
+    ${snapshot?.paired ? '<p class="system-host-note">Unpairing disconnects this companion. To reconnect, run Computer access setup again. Saved insights are kept.</p>' : ""}
+    <div class="system-host-actions">${supported ? renderSetupActions(snapshot, busy) : ""}${snapshot?.paired ? `<button type="button" data-system-host-revoke ${busy ? "disabled" : ""}>Unpair computer</button>` : ""}</div>
   </section>`;
 }

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

@@ -1,6 +1,6 @@
 import { createSystemHostVisibility } from "./visibility.js";
 
-function needsComputerSetup(state) {
+export function needsComputerSetup(state) {
   if (!state || state.busy || state.statusUnavailable) return false;
   const snapshot = state.snapshot;
   const readiness = snapshot?.readiness;
@@ -9,7 +9,7 @@ function needsComputerSetup(state) {
   if (!["container", "wsl"].includes(readiness.environment)) return false;
   if (!Array.isArray(readiness.platforms)) return false;
   return readiness.platforms.some((platform) =>
-    ["windows", "macos"].includes(platform),
+    ["windows", "macos", "linux"].includes(platform),
   );
 }
 

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

@@ -21,20 +21,22 @@ 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 },

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,32 @@ 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;
+  const workspaceListeners = new Set();
+  const workspaceGuards = new Set();
+  function notifyWorkspaceListeners(workspace) {
+    onWorkspaceChange(workspace);
+    for (const listener of workspaceListeners) listener(workspace);
+  }
+  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 +65,15 @@ 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 automationsWorkspace = shellState.workspace === "automations";
+    const learningWorkspace = shellState.workspace === "learning";
+    const memoryWorkspace = shellState.workspace === "memory";
+    const notificationsWorkspace = shellState.workspace === "notifications";
     const sessions = sidebarLayout();
     const showSessionsToggle = chatWorkspace && !sessions.docked;
 
@@ -61,9 +82,13 @@ 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("automations-workspace", automationsWorkspace);
     dom.app.classList.toggle("sessions-open", sessions.drawerOpen);
     dom.app.classList.toggle("sessions-docked", sessions.docked);
 
@@ -75,6 +100,7 @@ export function createWorkspaceShell({
       "aria-hidden",
       configWorkspace ? "false" : "true",
     );
+    renderConfigurationPageHeading(dom.configWorkspacePanel, shellState.workspace);
 
     if (dom.schedulesWorkspacePanel) {
       dom.schedulesWorkspacePanel.hidden = !schedulesWorkspace;
@@ -84,6 +110,29 @@ export function createWorkspaceShell({
         String(!schedulesWorkspace),
       );
     }
+    if (dom.automationsWorkspacePanel) {
+      dom.automationsWorkspacePanel.hidden = !automationsWorkspace;
+      dom.automationsWorkspacePanel.inert = !automationsWorkspace;
+      dom.automationsWorkspacePanel.setAttribute("aria-hidden", String(!automationsWorkspace));
+    }
+    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 +152,13 @@ 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.automationsWorkspaceButton, automationsWorkspace);
+    setCurrentPage(dom.learningWorkspaceButton, learningWorkspace);
+    setCurrentPage(dom.memoryWorkspaceButton, memoryWorkspace);
 
     dom.panelBackdrop.classList.toggle("visible", sessions.drawerOpen);
     dom.panelBackdrop.tabIndex = sessions.drawerOpen ? 0 : -1;
@@ -143,7 +197,7 @@ export function createWorkspaceShell({
     const wasSessionsDrawerOpen = shellState.activeSheet === "sessions";
     shellState.activeSheet = "";
     syncShell();
-    if (wasSessionsDrawerOpen) onWorkspaceChange(shellState.workspace);
+    if (wasSessionsDrawerOpen) notifyWorkspaceListeners(shellState.workspace);
     const sessions = sidebarLayout();
     if (!sidebarFocusNeedsRestoration(activeElement, sessions)) return;
     if (sessions.docked) {
@@ -158,7 +212,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: () => {} };
     }
@@ -167,15 +221,23 @@ export function createWorkspaceShell({
       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:
-        typeof preparedChange === "function" ? preparedChange : () => {},
+      commitBeforeChange() {
+        if (typeof preparedChange === "function") preparedChange();
+        for (const change of additionalChanges) change();
+      },
     };
   }
 
   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;
@@ -183,7 +245,8 @@ export function createWorkspaceShell({
     shellState.workspace = nextWorkspace;
     shellState.activeSheet = "";
     syncShell();
-    onWorkspaceChange(nextWorkspace);
+    notifyWorkspaceListeners(nextWorkspace);
+    noteShellNavigation();
 
     if (options.focus === false) return true;
     if (nextWorkspace === "home") {
@@ -193,11 +256,17 @@ 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,
+          automations: dom.closeAutomationsWorkspaceButton,
+          learning: dom.closeLearningWorkspaceButton,
+          memory: dom.closeMemoryWorkspaceButton,
+          config: dom.closeConfigWorkspaceButton,
+          models: dom.closeConfigWorkspaceButton,
+          plugins: dom.closeConfigWorkspaceButton,
+        };
+        closeButtons[nextWorkspace]?.focus();
       });
       return true;
     }
@@ -233,7 +302,8 @@ export function createWorkspaceShell({
     const useDrawer = open && sidebarViewport?.matches !== true;
     shellState.activeSheet = useDrawer ? "sessions" : "";
     syncShell();
-    onWorkspaceChange("chat");
+    notifyWorkspaceListeners("chat");
+    noteShellNavigation();
 
     if (options.focus === false) return true;
     if (open) {
@@ -271,7 +341,7 @@ export function createWorkspaceShell({
       setSessionsDrawerOpen(false, { restoreFocus: true });
       return true;
     }
-    if (["config", "schedules"].includes(shellState.workspace)) {
+    if (["config", "models", "plugins", "schedules", "automations", "learning", "memory", "notifications"].includes(shellState.workspace)) {
       return activateWorkspace("chat");
     }
     return false;
@@ -280,6 +350,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 +361,28 @@ 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.automationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("automations"));
+    dom.closeAutomationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
+    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 +402,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 +416,20 @@ export function createWorkspaceShell({
 
   return {
     activeWorkspace: () => shellState.workspace,
+    isWorkspaceSupportedByBackend: isWorkspaceAvailable,
+    isWorkspaceAvailable: workspaceAccess.isAvailable,
+    runtimeAvailabilityChanged,
+    workspaceUnavailableMessage: workspaceAccess.unavailableMessage,
+    navigationRevision: () => navigationRevision,
+    subscribeWorkspaceChange(listener) {
+      workspaceListeners.add(listener);
+      return () => workspaceListeners.delete(listener);
+    },
+    addWorkspaceGuard(guard) {
+      workspaceGuards.add(guard);
+      return () => workspaceGuards.delete(guard);
+    },
+    activeOperationsTab: operationsSection.activeTab,
     activateOperationsTab: operationsSection.activateTab,
     activateWorkspace,
     bind,

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

@@ -0,0 +1,72 @@
+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,
+  getEnvironmentId = () => "",
+  onChange = () => {},
+}) {
+  const documentRoot = dom.homeDashboardRoot?.ownerDocument;
+  const root = documentRoot?.createElement("section");
+  let notice;
+  const connection = createSystemHostConnectionManager({
+    documentRoot,
+    compact: true,
+    getEnvironmentId,
+    loadConnection: () => runtimeClient.getSystemHostConnection(),
+    connectLocal: () => runtimeClient.connectLocalSystemHost(),
+    createPairing: () => runtimeClient.createSystemHostPairing(),
+    requestPermissions: (input) => runtimeClient.requestSystemHostPermissions(input),
+    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);
+  }
+  dom.environmentSelect?.addEventListener("change", connection.environmentChanged);
+  return {
+    state: connection.state,
+    load: connection.load,
+    open,
+    dispose() {
+      dom.environmentSelect?.removeEventListener("change", connection.environmentChanged);
+      notice.dispose();
+      connection.dispose();
+      root?.remove();
+    },
+  };
+}