@abot-ai/runtime 1.6.0 → 1.8.0

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

@@ -58,7 +58,7 @@ export function renderMacSetupAction(snapshot, disabled) {
     : "Connect this Mac";
   const label = local ? localLabel : "Connect a Mac";
   const action = local ? "local" : "manual";
-  return `<button type="button" data-system-host-mac="${action}" ${disabled ? "disabled" : ""}>${label}</button>`;
+  return `<button type="button" class="system-host-card-primary" data-system-host-mac="${action}" ${disabled ? "disabled" : ""}>${label}</button>`;
 }
 
 export function renderMacSetupNotice(snapshot) {

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

@@ -3,10 +3,12 @@ import { hostSetupIsReady, renderSystemHostConnection } from "./rendering.js";
 import { createSystemHostVisibility } from "./visibility.js";
 import { createMacConnectionActions } from "./macos-connection-actions.js";
 import { createMacPermissionPreparation } from "./macos-permission-preparation.js";
+import { createWindowsStoreConnectionActions, windowsStoreSetupIsAvailable } from "./windows-store-setup.js";
 
 export function createSystemHostConnectionManager({
   loadConnection,
   downloadSetup,
+  requestStoreConnection,
   connectLocal,
   createPairing,
   requestPermissions,
@@ -32,6 +34,8 @@ export function createSystemHostConnectionManager({
     statusUnavailable: false,
     downloaded: null,
     manualMac: null,
+    windowsStoreInvitation: null,
+    windowsStoreAttempt: null,
     managementOpen: false,
     macPermissions: null,
     macPermissionError: "",
@@ -68,6 +72,12 @@ export function createSystemHostConnectionManager({
     getSurfaceRevision: () => surfaceRevision,
     isVisible: () => visibility.isVisible(),
   });
+  const windowsStore = createWindowsStoreConnectionActions({
+    state, requestStoreConnection, canInstallOnPlatform, beginRequest, finishRequest,
+    revokeConnection, receiveUnpairedConnection, getEnvironmentId,
+    isCurrentResponse, getSurfaceRevision: () => surfaceRevision,
+    isVisible: () => visibility.isVisible(), notify,
+  });
   function markup() {
     return renderSystemHostConnection({
       ...state,
@@ -78,6 +88,16 @@ export function createSystemHostConnectionManager({
   }
   function afterPaint(root = state.root) {
     permissions.afterPaint(root);
+    root?.querySelector("[data-system-host-store-connect]")
+      ?.addEventListener("click", () => void windowsStore.connectWindowsStore());
+    root?.querySelector("[data-system-host-store-launch]")
+      ?.addEventListener("click", windowsStore.markLaunchRequested);
+    root?.querySelector("[data-system-host-store-repair]")
+      ?.addEventListener("click", windowsStore.beginWindowsStoreRepair);
+    root?.querySelector("[data-system-host-store-repair-confirm]")
+      ?.addEventListener("click", () => void windowsStore.confirmWindowsStoreRepair());
+    root?.querySelector("[data-system-host-store-repair-cancel]")
+      ?.addEventListener("click", windowsStore.cancelWindowsStoreRepair);
     const management = root?.querySelector("[data-system-host-management]");
     management?.addEventListener("toggle", () => {
       if (management !== state.root?.querySelector("[data-system-host-management]")) return;
@@ -137,6 +157,7 @@ export function createSystemHostConnectionManager({
     wasVisible = visible;
     if (!visible) {
       state.manualMac = null;
+      windowsStore.clear({ preserveWaiting: true });
       permissions.clear();
       notify();
       stopPolling();
@@ -147,8 +168,9 @@ export function createSystemHostConnectionManager({
   function isCurrentResponse(operation) {
     return operation === revision;
   }
-  function beginRequest(background = false) {
+  function beginRequest(background = false, preserveStoreWaiting = false) {
     stopPolling();
+    if (!background) windowsStore.clear({ preserveWaiting: preserveStoreWaiting });
     state.busy = !background;
     backgroundPending = background;
     if (!background) state.error = "";
@@ -172,17 +194,19 @@ export function createSystemHostConnectionManager({
       notify();
       return false;
     }
-    const operation = beginRequest(background);
+    const operation = beginRequest(background, true);
     const environment = getEnvironmentId();
     try {
       const snapshot = await loadConnection();
       if (!isCurrentResponse(operation)) return false;
       if (environment !== getEnvironmentId()) return false;
       state.snapshot = snapshot;
+      if (!windowsStoreSetupIsAvailable(snapshot)) windowsStore.clear();
       permissions.reconcile();
       state.statusUnavailable = false;
       state.error = "";
       if (hostSetupIsReady(snapshot)) {
+        windowsStore.clear();
         state.manualMac = null;
         state.downloaded = null;
         state.message = "";
@@ -191,11 +215,10 @@ export function createSystemHostConnectionManager({
       return true;
     } catch {
       if (!isCurrentResponse(operation)) return false;
+      windowsStore.clear();
       state.statusUnavailable = true;
       permissions.clear();
-      state.error = state.downloaded?.restartRequired
-        ? "Waiting for WSL and ABot to return after setup."
-        : "Could not check this computer. Refresh to try again.";
+      state.error = "Could not check this computer. Refresh to try again.";
       return false;
     } finally {
       finishRequest(operation);
@@ -216,6 +239,7 @@ export function createSystemHostConnectionManager({
   }
   async function install(platform) {
     if (platform === "macos") return false;
+    if (platform === "windows") return windowsStore.connectWindowsStore();
     if (!canInstallOnPlatform(platform)) return false;
     state.manualMac = null;
     const operation = beginRequest();
@@ -229,7 +253,6 @@ export function createSystemHostConnectionManager({
       state.downloaded = {
         filename: receipt.filename,
         expiresAt: receipt.expiresAt,
-        restartRequired: receipt.restartRequired === true,
       };
       state.message =
         "Setup downloaded. Open the downloaded file and follow its instructions. Waiting for verification…";
@@ -242,19 +265,23 @@ export function createSystemHostConnectionManager({
       finishRequest(operation);
     }
   }
+  function receiveUnpairedConnection(snapshot) {
+    state.snapshot = snapshot;
+    permissions.clear();
+    state.downloaded = null;
+    state.manualMac = null;
+    state.statusUnavailable = false;
+    state.message = "Computer unpaired.";
+  }
   async function revoke() {
     if (state.busy) return false;
     if (!supportsConnection()) return false;
+    windowsStore.clear();
     const operation = beginRequest();
     try {
       const snapshot = await revokeConnection();
       if (!isCurrentResponse(operation)) return false;
-      state.snapshot = snapshot;
-      permissions.clear();
-      state.downloaded = null;
-      state.manualMac = null;
-      state.statusUnavailable = false;
-      state.message = "Computer unpaired.";
+      receiveUnpairedConnection(snapshot);
       return true;
     } catch {
       if (isCurrentResponse(operation))
@@ -278,6 +305,7 @@ export function createSystemHostConnectionManager({
     state.statusUnavailable = false;
     state.downloaded = null;
     state.manualMac = null;
+    windowsStore.clear();
     state.error = "";
     state.actionError = "";
     state.message = "";
@@ -291,6 +319,10 @@ export function createSystemHostConnectionManager({
     state,
     load,
     install,
+    connectWindowsStore: windowsStore.connectWindowsStore,
+    beginWindowsStoreRepair: windowsStore.beginWindowsStoreRepair,
+    cancelWindowsStoreRepair: windowsStore.cancelWindowsStoreRepair,
+    confirmWindowsStoreRepair: windowsStore.confirmWindowsStoreRepair,
     ...mac,
     checkPermissions: permissions.checkPermissions,
     requestPermission: permissions.requestPermission,
@@ -302,6 +334,7 @@ export function createSystemHostConnectionManager({
       state.busy = false;
       backgroundPending = false;
       state.snapshot = null;
+      windowsStore.clear();
       permissions.clear();
       notify();
       if (visibility.isVisible()) void load();

package/dist/src/web-ui/app/components/system-host/native-windows-access.js

@@ -0,0 +1,50 @@
+import { renderConnectionCard } from "./connection-card.js";
+
+/** The server's native Windows facts identify local access, independently of tool readiness. */
+export function isNativeWindowsLocalAccess(snapshot) {
+  if (snapshot?.collectionSource?.mode !== "native") return false;
+  return snapshot.collectionSource.platform === "windows";
+}
+
+export function shouldRenderNativeWindowsAccess(input) {
+  if (!input.supported) return false;
+  return isNativeWindowsLocalAccess(input.snapshot);
+}
+
+function nativeWindowsAccessPresentation(input) {
+  if (input.statusUnavailable) return {
+    title: "Check Windows access", status: "Status unavailable",
+    description: "The current local access status could not be checked. Refresh to try again.",
+  };
+  if (input.busy) return {
+    title: "Checking Windows access…", status: "Checking",
+    description: "Waiting for the current local access status…",
+  };
+  if (input.snapshot?.readiness?.directAccessReady === false) return {
+    title: "Check local Windows access", status: "Check needed",
+    description: "ABot runs directly on Windows, but direct commands could not be verified. Refresh to check again. Companion pairing is not required for local tools.",
+  };
+  return {
+    title: "Windows access is local", status: "Local",
+    description: "ABot runs directly on this Windows computer. Local tools do not need Companion pairing. Compatible plugins and your permission settings determine which actions are available.",
+  };
+}
+
+function canCompactNativeWindowsAccess(input) {
+  if (!input.compact) return false;
+  if (input.statusUnavailable || input.busy) return false;
+  if (input.error || input.message) return false;
+  return input.snapshot?.readiness?.directAccessReady !== false;
+}
+
+export function renderNativeWindowsAccess(input) {
+  const presentation = nativeWindowsAccessPresentation(input);
+  const compact = canCompactNativeWindowsAccess(input);
+  return renderConnectionCard({
+    ...presentation, ready: false, compact, disabled: input.busy,
+    actions: '<button type="button" class="system-host-card-secondary" data-system-host-refresh' +
+      (input.busy ? " disabled" : "") + '>Refresh status</button>',
+    error: input.error, message: input.message,
+    attributes: "data-system-host-native-windows",
+  });
+}

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

@@ -1,4 +1,7 @@
 import { escapeHtml } from "../../lib/text-format.js";
+import { renderWindowsStoreSetup, windowsStorePanelIsAvailable } from "./windows-store-setup.js";
+import { renderConnectionCard, renderComputerMetadata } from "./connection-card.js";
+import { shouldRenderNativeWindowsAccess, renderNativeWindowsAccess } from "./native-windows-access.js";
 import { macPermissionSummary, renderMacPermissionPreparation } from "./macos-permission-rendering.js";
 import {
   renderMacSetupAction,
@@ -17,136 +20,141 @@ function pairedCompanionIsOffline(snapshot) {
   if (!snapshot?.paired) return false;
   return snapshot.connected === false;
 }
+function hasDirectAccess(snapshot) {
+  return ["native", "wsl_interop"].includes(snapshot?.readiness?.route);
+}
 function connectionStatus(snapshot, statusUnavailable, busy) {
   if (statusUnavailable) return "Status unavailable";
-  if (busy || !snapshot) return "Checking this computer…";
+  if (busy || !snapshot) return "Checking";
   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";
+  return "Not connected";
 }
 function hostAccessIsAvailable(snapshot, supported, statusUnavailable, busy) {
   if (!supported || statusUnavailable || busy) return false;
   return hostSetupIsReady(snapshot);
 }
 function readyDescription(snapshot) {
-  if (["native", "wsl_interop"].includes(snapshot?.readiness?.route))
+  if (hasDirectAccess(snapshot))
     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 || {};
-  const fields = [
-    ["Computer", identity.name],
-    ["Operating system", identity.os],
-    ["User", identity.user],
-    ["Computer ID", snapshot?.hostId],
-  ];
-  return `<dl class="system-host-identity">${fields
-    .filter(([, value]) => typeof value === "string" && value.length > 0)
-    .map(
-      ([label, value]) =>
-        `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`,
-    )
-    .join("")}</dl>`;
+  return "You can use computer tools from your ABot chat. Permissions and Spark collection are managed separately.";
+}
+function connectionTitle({ snapshot, supported, statusUnavailable, busy }) {
+  if (!supported) return "Computer connection unavailable";
+  if (statusUnavailable) return "Check your computer connection";
+  if (busy || !snapshot) return "Checking this computer…";
+  if (hostSetupIsReady(snapshot)) return hasDirectAccess(snapshot) ? "Direct computer access is ready" : "Your computer is ready";
+  if (pairedCompanionIsOffline(snapshot)) return "Your computer is offline";
+  if (hostCompanionUpdateRequired(snapshot)) return "Update your computer connection";
+  if (snapshot.connected) return "Check your computer connection";
+  const platforms = snapshot.readiness?.platforms || [];
+  if (platforms.length === 1 && platforms[0] === "macos") return "Connect your Mac";
+  if (platforms.length === 1 && platforms[0] === "linux") return "Connect your Linux computer";
+  return "Connect your computer";
+}
+function connectionDescription({ snapshot, supported, statusUnavailable, busy }) {
+  if (!supported) return "Computer access setup requires the local Runtime backend.";
+  if (statusUnavailable) return "The current connection status could not be checked. Refresh to try again.";
+  if (busy || !snapshot) return "Waiting for the current connection status…";
+  if (hostSetupIsReady(snapshot)) return readyDescription(snapshot);
+  if (pairedCompanionIsOffline(snapshot)) return "Reconnect Companion on this computer. Your saved connection is still available.";
+  if (hostCompanionUpdateRequired(snapshot)) return "Update Companion, then return here to check the connection.";
+  return "Connect this computer to use its apps and desktop tools from ABot.";
 }
 function renderSetupActions(snapshot, disabled) {
   if (hostSetupIsReady(snapshot)) return "";
   const platforms = snapshot?.readiness?.platforms || [];
-  const setupLabels = {
-    windows: "Set up Windows access",
-    linux: "Set up Linux access",
-  };
-  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) {
+  const setupLabels = { linux: "Set up Linux access" };
+  const updateLabels = { 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" class="system-host-card-primary" data-system-host-install="${platform}" ${disabled ? "disabled" : ""}>${labels[platform]}</button>`).join("");
+}
+function hasDownloadablePlatform(snapshot) {
   if (hostSetupIsReady(snapshot)) return false;
-  return (
-    snapshot?.readiness?.platforms?.some((platform) =>
-      ["windows", "linux"].includes(platform),
-    ) === true
-  );
+  return snapshot?.readiness?.platforms?.includes("linux") === true;
 }
 function setupDownloadHasExpired(downloaded) {
   if (!downloaded?.expiresAt) return false;
   return Date.parse(downloaded.expiresAt) <= Date.now();
 }
-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>
+function shouldShowSetupReadinessNote(snapshot) {
+  if (hostSetupIsReady(snapshot)) return false;
+  const platforms = snapshot?.readiness?.platforms || [];
+  if (platforms.length === 1 && platforms[0] === "windows") return false;
+  return Boolean(snapshot?.readiness?.message);
+}
+function renderSetupDownload(downloaded) {
+  if (!downloaded) return "";
+  const expired = setupDownloadHasExpired(downloaded);
+  return `<div class="system-host-download"><p><strong>Downloaded:</strong> ${escapeHtml(downloaded.filename)}</p><p>${expired ? "Setup download expired. Download setup again." : "Open this file to continue. A download alone does not mean access is ready."}</p>${downloaded.expiresAt && !expired ? `<p class="system-host-note">Open before ${escapeHtml(new Date(downloaded.expiresAt).toLocaleTimeString())}.</p>` : ""}</div>`;
+}
+function renderOtherPlatformSetup({ snapshot, busy, manualMac, downloaded }) {
+  const actions = renderSetupActions(snapshot, busy);
+  const download = renderSetupDownload(downloaded);
+  const instructions = renderMacConnectionInstructions(manualMac);
+  if (!actions && !download && !instructions) return "";
+  return `<div class="system-host-card-other">${renderMacSetupNotice(snapshot)}${instructions}${download}${hasDownloadablePlatform(snapshot) ? "<p>Download setup for the computer hosting ABot, then open the downloaded file. Follow any permission prompts shown by your operating system.</p>" : ""}${actions ? `<div class="system-host-actions">${actions}</div>` : ""}</div>`;
+}
+function connectedCardHidesPermissions(input) {
+  if (!input.snapshot?.connected || !canRenderCompactConnection(input)) return false;
+  if (input.managementOpen || input.macPermissionError || input.nativeMacPermissionError) return false;
+  return true;
+}
+function renderPermissionDetails(input) {
+  if (!input.supported || connectedCardHidesPermissions(input)) return "";
+  const content = renderMacPermissionPreparation(input);
+  if (!content || !input.compact) return content;
+  const summary = macPermissionSummary(input.snapshot, input.macPermissions, input.nativeMacPermissions);
+  const open = input.managementOpen || input.macPermissionError || input.nativeMacPermissionError;
+  return `<details class="system-host-permission-details" data-system-host-management ${open ? "open" : ""}>
+    <summary>Mac permissions<span class="system-host-summary-permissions">${escapeHtml(summary)}</span></summary>
+    ${content}
   </details>`;
 }
-
-function renderConnectionDetails({
-  snapshot,
-  supported,
-  busy,
-  error,
-  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>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 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>
-    ${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>`;
+function canRenderCompactConnection(input) {
+  if (!input.compact) return false;
+  if (!hostAccessIsAvailable(input.snapshot, input.supported, input.statusUnavailable, input.busy)) return false;
+  if (input.error || input.message) return false;
+  if (input.downloaded || input.manualMac) return false;
+  return true;
+}
+export function renderSystemHostConnection(input) {
+  if (shouldRenderNativeWindowsAccess(input))
+    return renderNativeWindowsAccess(input);
+  if (input.supported && windowsStorePanelIsAvailable(input.snapshot)) {
+    return renderWindowsStoreSetup({
+      snapshot: input.snapshot, invitation: input.windowsStoreInvitation,
+      attempt: input.windowsStoreAttempt, disabled: input.busy,
+      statusUnavailable: input.statusUnavailable, error: input.error, message: input.message,
+      compact: input.compact,
+      otherSetup: renderOtherPlatformSetup(input),
+    });
+  }
+  const ready = hostAccessIsAvailable(input.snapshot, input.supported, input.statusUnavailable, input.busy);
+  const compact = canRenderCompactConnection(input);
+  const permissions = renderPermissionDetails(input);
+  const metadata = renderComputerMetadata(input.snapshot, input.busy || !input.supported);
+  const snapshot = input.snapshot;
+  const setup = input.supported ? renderSetupActions(snapshot, input.busy) : "";
+  const refresh = '<button type="button" class="system-host-card-secondary" data-system-host-refresh' +
+    (input.busy || !input.supported ? " disabled" : "") + '>Refresh status</button>';
+  return renderConnectionCard({
+    title: connectionTitle(input), status: input.supported ? connectionStatus(snapshot, input.statusUnavailable, input.busy) : "Unavailable",
+    ready, compact, disabled: input.busy, metadata,
+    description: connectionDescription(input),
+    actions: setup + refresh,
+    error: input.error, message: input.message,
+    details: compact ? permissions : `
+      ${input.supported ? renderMacSetupNotice(snapshot) + renderMacConnectionInstructions(input.manualMac) : ""}
+      ${shouldShowSetupReadinessNote(snapshot) ? `<p class="system-host-note">${escapeHtml(snapshot.readiness.message)}</p>` : ""}
+      ${hasDownloadablePlatform(snapshot) && input.supported ? "<p class=\"system-host-note\">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>" : ""}
+      ${renderSetupDownload(input.downloaded)}
+      ${permissions}
+    `,
+  });
 }