@abot-ai/runtime 1.3.1 → 1.5.0

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

@@ -0,0 +1,36 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+function hasManagedMacPermissionRuntime(version) {
+  if (!Number.isInteger(version)) return false;
+  return version >= 6;
+}
+
+export function macCompanionPermissionPath(snapshot) {
+  if (!snapshot?.paired) return "";
+  if (snapshot.identity?.os !== "macos") return "";
+  if (!hasManagedMacPermissionRuntime(snapshot.companion?.installedVersion))
+    return "";
+  const home = snapshot.identity.homeDir;
+  const prefix =
+    typeof home === "string" && home.startsWith("/")
+      ? home.replace(/\/+$/u, "")
+      : "~";
+  return prefix + "/.abot/host-companion/runtime/node";
+}
+
+/** The managed companion keeps its macOS permission subject at one private path. */
+export function renderMacPermissionGuide(snapshot) {
+  if (!snapshot?.paired) return "";
+  if (snapshot.identity?.os !== "macos") return "";
+  const version = snapshot.companion?.installedVersion;
+  if (!hasManagedMacPermissionRuntime(version))
+    return '<p class="system-host-note">Update the Mac connection to set up Spark permissions for its dedicated companion runtime.</p>';
+  return `<details class="system-host-manual" data-system-host-mac-permissions>
+    <summary>macOS permissions for Spark</summary>
+    <p>The connection is ready independently of macOS permission to read activity. Start collection in Spark to request Accessibility access.</p>
+    <p>On the connected Mac, open System Settings → Privacy &amp; Security → Accessibility (Device Control &amp; Data Access on some macOS versions). Use the add button, press Command–Shift–G and select this companion executable:</p>
+    <pre><code>${escapeHtml(macCompanionPermissionPath(snapshot))}</code></pre>
+    <p>macOS may display it as node. Check its path before enabling access. This private runtime belongs to the ABot companion and is reused at sign-in.</p>
+    <p>Spark checks for approval for up to two minutes without collecting content. After that, stop and start collection to check again. A runtime replacement can require consent again.</p>
+  </details>`;
+}

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

@@ -0,0 +1,91 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function hasMacSetup(snapshot) {
+  if (snapshot?.readiness?.ready === true) return false;
+  return snapshot?.readiness?.platforms?.includes("macos") === true;
+}
+
+export function hasLocalMacSetup(snapshot) {
+  if (!hasMacSetup(snapshot)) return false;
+  return snapshot.readiness.localSetupAvailable === true;
+}
+
+function hasLoopbackRuntimeOrigin(url) {
+  if (!["http:", "https:"].includes(url.protocol)) return false;
+  if (url.hostname === "localhost") return true;
+  if (url.hostname.endsWith(".localhost")) return true;
+  if (url.hostname === "[::1]") return true;
+  return /^127(?:\.\d{1,3}){3}$/u.test(url.hostname);
+}
+
+export function macConnectionCommand(origin) {
+  try {
+    const url = new URL(origin);
+    if (hasLoopbackRuntimeOrigin(url))
+      return {
+        command: `abot host connect --url '${url.origin.replaceAll("'", "'\\''")}'`,
+        needsForwarding: false,
+      };
+  } catch {
+    // A remote or unavailable browser origin cannot identify a local forwarded port.
+  }
+  return {
+    command: "abot host connect --url http://localhost:<forwarded-port>",
+    needsForwarding: true,
+  };
+}
+
+export function macRepairConnectionCommand() {
+  return {
+    command: "abot host status\nabot host connect --url '<saved-runtime-url>'",
+    needsForwarding: false,
+  };
+}
+
+export function readMacPairingReceipt(receipt) {
+  if (!/^[A-Za-z0-9_-]{43}$/u.test(receipt?.code ?? ""))
+    throw new Error("The pairing response was invalid. Try again.");
+  if (!Number.isFinite(Date.parse(receipt.expiresAt)))
+    throw new Error("The pairing response was invalid. Try again.");
+  return { code: receipt.code, expiresAt: receipt.expiresAt };
+}
+
+export function renderMacSetupAction(snapshot, disabled) {
+  if (!hasMacSetup(snapshot)) return "";
+  const local = hasLocalMacSetup(snapshot);
+  const localLabel = snapshot.paired
+    ? "Repair Mac connection"
+    : "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>`;
+}
+
+export function renderMacSetupNotice(snapshot) {
+  if (!hasMacSetup(snapshot)) return "";
+  if (!hasLocalMacSetup(snapshot))
+    return "<p>On the Mac you want to connect, use an installed ABot CLI in Terminal. The connection starts now and at future sign-ins for that Mac user.</p>";
+  const name = snapshot.readiness.localComputerName;
+  const computer = name ? ` <strong>${escapeHtml(name)}</strong>` : " this Mac";
+  return `<p>Connect${computer} using its installed ABot. This enables the companion now and at future sign-ins for the user running ABot. Allow the macOS permissions requested for desktop access.</p>`;
+}
+
+export function renderMacConnectionInstructions(manual) {
+  if (!manual) return "";
+  const expired =
+    manual.expiresAt && Date.parse(manual.expiresAt) <= Date.now();
+  const forwarding = manual.needsForwarding
+    ? "<p>Use an existing local port forward on the Mac to this Runtime. Replace &lt;forwarded-port&gt; with its localhost port. A remote Runtime address cannot be used directly.</p>"
+    : "";
+  const pairing =
+    manual.code && !expired
+      ? `<p>When Terminal asks, paste this one-time code:</p><pre><code>${escapeHtml(manual.code)}</code></pre><p>Code expires at ${escapeHtml(new Date(manual.expiresAt).toLocaleTimeString())}.</p>`
+      : "";
+  const repair = manual.repair
+    ? "<p>On the Mac already paired with ABot, run <code>abot host status</code> first. Replace &lt;saved-runtime-url&gt; in the connect command with the exact saved <code>url</code> shown by status, keeping the quotes. This resumes the saved connection. If this is a different Mac, return to the paired Mac or explicitly unpair before creating a new connection.</p>"
+    : "";
+  const expiration = expired
+    ? "<p>This pairing code expired. Choose Connect a Mac again for a fresh code.</p>"
+    : "";
+  return `<div class="system-host-manual"><p>Open Terminal on the Mac with ABot installed and run:</p><pre><code>${escapeHtml(manual.command)}</code></pre>${forwarding}${repair}${pairing}${expiration}<p>Return here and wait for Ready after connecting.</p></div>`;
+}

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

@@ -0,0 +1,296 @@
+import { downloadHostSetup } from "./download.js";
+import { hostSetupIsReady, renderSystemHostConnection } from "./rendering.js";
+import { createSystemHostVisibility } from "./visibility.js";
+import { createMacConnectionActions } from "./macos-connection-actions.js";
+
+export function createSystemHostConnectionManager({
+  loadConnection,
+  downloadSetup,
+  connectLocal,
+  createPairing,
+  getRuntimeOrigin = () => globalThis.location?.origin,
+  revokeConnection,
+  supportsConnection = () => true,
+  saveDownload = downloadHostSetup,
+  documentRoot = globalThis.document,
+  compact = false,
+  onChange = () => {},
+  schedulePoll = (callback, delay) => setTimeout(callback, delay),
+  cancelPoll = (timer) => clearTimeout(timer),
+}) {
+  const state = {
+    root: null,
+    snapshot: null,
+    active: false,
+    busy: false,
+    error: "",
+    actionError: "",
+    message: "",
+    statusUnavailable: false,
+    downloaded: null,
+    manualMac: null,
+    managementOpen: false,
+  };
+  let revision = 0;
+  let pollTimer;
+  let wasVisible = false;
+  let surfaceRevision = 0;
+  let backgroundPending = false;
+  let lastNotification = "";
+  const visibility = createSystemHostVisibility({
+    documentRoot,
+    getRoot: () => state.root,
+    isActive: () => state.active,
+    onChange: visibilityChanged,
+  });
+  const mac = createMacConnectionActions({
+    state,
+    connectLocal,
+    createPairing,
+    getRuntimeOrigin,
+    canInstallOnPlatform,
+    beginRequest,
+    finishRequest,
+    isCurrentResponse,
+    load,
+    getSurfaceRevision: () => surfaceRevision,
+    isVisible: () => visibility.isVisible(),
+  });
+  function markup() {
+    return renderSystemHostConnection({
+      ...state,
+      error: state.error || state.actionError,
+      supported: supportsConnection(),
+      compact,
+    });
+  }
+  function afterPaint(root = state.root) {
+    const management = root?.querySelector("[data-system-host-management]");
+    management?.addEventListener("toggle", () => {
+      if (management !== state.root?.querySelector("[data-system-host-management]")) return;
+      state.managementOpen = management.open;
+      lastNotification = markup();
+    });
+    root
+      ?.querySelector('[data-system-host-mac="local"]')
+      ?.addEventListener("click", () => void mac.connectMac());
+    root
+      ?.querySelector('[data-system-host-mac="manual"]')
+      ?.addEventListener("click", () => void mac.pairMac());
+    root
+      ?.querySelector("[data-system-host-refresh]")
+      ?.addEventListener("click", () => void load());
+    root
+      ?.querySelector("[data-system-host-revoke]")
+      ?.addEventListener("click", () => void revoke());
+    for (const button of root?.querySelectorAll?.(
+      "[data-system-host-install]",
+    ) || []) {
+      button.addEventListener(
+        "click",
+        () => void install(button.dataset.systemHostInstall),
+      );
+    }
+  }
+  function render() {
+    if (!state.root) return;
+    state.root.innerHTML = markup();
+    afterPaint();
+  }
+  function notify() {
+    const content = markup();
+    if (content === lastNotification) return;
+    lastNotification = content;
+    render();
+    onChange();
+  }
+  function stopPolling() {
+    if (pollTimer !== undefined) cancelPoll(pollTimer);
+    pollTimer = undefined;
+  }
+  function scheduleNextPoll() {
+    stopPolling();
+    if (!visibility.isVisible()) return;
+    if (!supportsConnection()) return;
+    pollTimer = schedulePoll(() => {
+      pollTimer = undefined;
+      void load(true);
+    }, 3000);
+  }
+  function visibilityChanged() {
+    const visible = visibility.isVisible();
+    const becameVisible = visible && !wasVisible;
+    if (!visible && wasVisible) surfaceRevision += 1;
+    wasVisible = visible;
+    if (!visible) {
+      state.manualMac = null;
+      notify();
+      stopPolling();
+      return;
+    }
+    if (becameVisible) void load();
+  }
+  function isCurrentResponse(operation) {
+    return operation === revision;
+  }
+  function beginRequest(background = false) {
+    stopPolling();
+    state.busy = !background;
+    backgroundPending = background;
+    if (!background) state.error = "";
+    if (!background) state.actionError = "";
+    notify();
+    return ++revision;
+  }
+  function finishRequest(operation) {
+    if (!isCurrentResponse(operation)) return;
+    state.busy = false;
+    backgroundPending = false;
+    notify();
+    scheduleNextPoll();
+  }
+  async function load(background = false) {
+    if (state.busy) return false;
+    const backgroundAlreadyLoading = background && backgroundPending;
+    if (backgroundAlreadyLoading) return false;
+    if (!supportsConnection()) {
+      state.snapshot = null;
+      notify();
+      return false;
+    }
+    const operation = beginRequest(background);
+    try {
+      const snapshot = await loadConnection();
+      if (!isCurrentResponse(operation)) return false;
+      state.snapshot = snapshot;
+      state.statusUnavailable = false;
+      state.error = "";
+      if (hostSetupIsReady(snapshot)) {
+        state.manualMac = null;
+        state.downloaded = null;
+        state.message = "";
+        state.actionError = "";
+      }
+      return true;
+    } catch {
+      if (!isCurrentResponse(operation)) return false;
+      state.statusUnavailable = true;
+      state.error = state.downloaded?.restartRequired
+        ? "Waiting for WSL and ABot to return after setup."
+        : "Could not check this computer. Refresh to try again.";
+      return false;
+    } finally {
+      finishRequest(operation);
+    }
+  }
+  function canInstallOnPlatform(platform) {
+    if (state.busy) return false;
+    if (!visibility.isVisible()) return false;
+    if (!supportsConnection()) return false;
+    if (hostSetupIsReady(state.snapshot)) return false;
+    return state.snapshot?.readiness?.platforms?.includes(platform) === true;
+  }
+  function setupDownloadErrorMessage(error) {
+    if (typeof error?.message !== "string")
+      return "Setup could not be downloaded. Try again.";
+    const message = error.message.trim().slice(0, 500);
+    return message || "Setup could not be downloaded. Try again.";
+  }
+  async function install(platform) {
+    if (platform === "macos") return false;
+    if (!canInstallOnPlatform(platform)) return false;
+    state.manualMac = null;
+    const operation = beginRequest();
+    const surface = surfaceRevision;
+    try {
+      const receipt = await downloadSetup(platform);
+      if (!isCurrentResponse(operation)) return false;
+      if (surface !== surfaceRevision) return false;
+      if (!visibility.isVisible()) return false;
+      await saveDownload(receipt);
+      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…";
+      return true;
+    } catch (error) {
+      if (isCurrentResponse(operation))
+        state.actionError = setupDownloadErrorMessage(error);
+      return false;
+    } finally {
+      finishRequest(operation);
+    }
+  }
+  async function revoke() {
+    if (state.busy) return false;
+    if (!supportsConnection()) return false;
+    const operation = beginRequest();
+    try {
+      const snapshot = await revokeConnection();
+      if (!isCurrentResponse(operation)) return false;
+      state.snapshot = snapshot;
+      state.downloaded = null;
+      state.manualMac = null;
+      state.statusUnavailable = false;
+      state.message = "Computer unpaired.";
+      return true;
+    } catch {
+      if (isCurrentResponse(operation))
+        state.error = "Computer access could not be revoked. Try again.";
+      return false;
+    } finally {
+      finishRequest(operation);
+    }
+  }
+  function setActive(active) {
+    state.active = active;
+    visibilityChanged();
+  }
+  function reset() {
+    revision += 1;
+    state.busy = false;
+    backgroundPending = false;
+    lastNotification = "";
+    state.active = false;
+    state.snapshot = null;
+    state.statusUnavailable = false;
+    state.downloaded = null;
+    state.manualMac = null;
+    state.error = "";
+    state.actionError = "";
+    state.message = "";
+    state.managementOpen = false;
+    stopPolling();
+    wasVisible = false;
+    render();
+  }
+  return {
+    state,
+    load,
+    install,
+    ...mac,
+    revoke,
+    markup,
+    afterPaint,
+    setActive,
+    openManagement() {
+      state.managementOpen = true;
+      notify();
+    },
+    reset,
+    mount(root) {
+      state.root = root;
+      visibility.watch();
+      render();
+      visibilityChanged();
+    },
+    dispose() {
+      reset();
+      visibility.dispose();
+      state.root = null;
+    },
+  };
+}

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

@@ -0,0 +1,144 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { renderMacPermissionGuide } from "./macos-permissions.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 (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 (["native", "wsl_interop"].includes(snapshot?.readiness?.route))
+    return "Direct commands are available. No extra installation is needed for direct commands.";
+  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>`;
+}
+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) {
+  if (hostSetupIsReady(snapshot)) return false;
+  return (
+    snapshot?.readiness?.platforms?.some((platform) =>
+      ["windows", "linux"].includes(platform),
+    ) === 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 } = input;
+  const available = hostAccessIsAvailable(snapshot, supported, statusUnavailable, busy);
+  const status = supported ? connectionStatus(snapshot, statusUnavailable, busy) : "Unavailable";
+  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>
+      <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,
+  error,
+  message,
+  statusUnavailable,
+  downloaded,
+  manualMac,
+}) {
+  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 ? renderMacPermissionGuide(snapshot) : ""}
+    ${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>`;
+}

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

@@ -0,0 +1,87 @@
+import { createSystemHostVisibility } from "./visibility.js";
+
+export function needsComputerSetup(state) {
+  if (!state || state.busy || state.statusUnavailable) return false;
+  const snapshot = state.snapshot;
+  const readiness = snapshot?.readiness;
+  if (snapshot?.paired || readiness?.ready !== false) return false;
+  if (readiness.route !== "setup_required") return false;
+  if (!["container", "wsl"].includes(readiness.environment)) return false;
+  if (!Array.isArray(readiness.platforms)) return false;
+  return readiness.platforms.some((platform) =>
+    ["windows", "macos", "linux"].includes(platform),
+  );
+}
+
+export function createSystemHostSetupNotice({
+  container,
+  conversationRegion,
+  getConnectionState,
+  supportsConnection = () => true,
+  refreshConnection = () => {},
+  onOpen = () => {},
+}) {
+  const root = container?.ownerDocument?.createElement("aside");
+  if (!root) return { render() {}, dispose() {} };
+  let dismissed = false;
+  let disposed = false;
+  const visibility = createSystemHostVisibility({
+    documentRoot: container.ownerDocument,
+    getRoot: () => conversationRegion,
+    isActive: () => Boolean(conversationRegion),
+    onChange: visibilityChanged,
+  });
+  let wasVisible = visibility.isVisible();
+  visibility.watch();
+
+  function visibilityChanged() {
+    if (disposed) return;
+    const visible = visibility.isVisible();
+    const becameVisible = visible && !wasVisible;
+    wasVisible = visible;
+    if (becameVisible && supportsConnection()) void refreshConnection();
+  }
+  root.className = "system-host-setup-notice";
+  root.setAttribute("aria-label", "Computer setup");
+  root.hidden = true;
+  root.innerHTML = `
+    <span data-host-setup-description></span>
+    <button type="button" class="system-host-setup-link" data-host-setup-open>Set up computer</button>
+    <button type="button" class="system-host-setup-dismiss" data-host-setup-dismiss aria-label="Dismiss computer setup suggestion">×</button>`;
+  const description = root.querySelector("[data-host-setup-description]");
+  root.querySelector("[data-host-setup-open]").addEventListener("click", () => {
+    if (!root.hidden) onOpen();
+  });
+  root
+    .querySelector("[data-host-setup-dismiss]")
+    .addEventListener("click", () => {
+      dismissed = true;
+      root.hidden = true;
+    });
+  container.prepend(root);
+
+  function render() {
+    if (disposed) return;
+    const state = getConnectionState();
+    const visible =
+      !dismissed && supportsConnection() && needsComputerSetup(state);
+    const hidden = !visible;
+    if (root.hidden !== hidden) root.hidden = hidden;
+    if (!visible) return;
+    const text =
+      state.snapshot.readiness.environment === "wsl"
+        ? "Set up Windows access to use its apps and system tools."
+        : "Connect your computer to use its apps and system tools.";
+    if (description.textContent !== text) description.textContent = text;
+  }
+
+  render();
+  return {
+    render,
+    dispose() {
+      disposed = true;
+      visibility.dispose();
+      root.remove();
+    },
+  };
+}