@abot-ai/runtime 1.7.0 → 1.8.1

package/dist/src/web-ui/app/components/model-setup/context-window-feedback.js

@@ -0,0 +1,53 @@
+import { readSetupContextWindowFeedback } from "../runtime-setup/context-window-feedback.js";
+import { MODEL_SETUP_ID } from "./rendering.js";
+
+const CONTEXT_FIELD = '[data-runtime-setup-field="context-window"]';
+const CONTEXT_ERROR_ID = `${MODEL_SETUP_ID}Error-context-window`;
+const CONTEXT_HELP_ID = `${MODEL_SETUP_ID}Help-context-window`;
+
+export function receiveModelContextWindowFeedback(state, error) {
+  if (state.busy !== "saving" || state.saved) return false;
+  if (error?.payload?.contextWindow?.profileId !== state.profileId)
+    return false;
+  const feedback = readSetupContextWindowFeedback(error);
+  if (!feedback) return false;
+  state.contextWindowFeedback = feedback;
+  state.step = 1;
+  state.error = "";
+  return true;
+}
+
+/** Remove only this feedback; preserve the draft and its secret input element. */
+export function clearModelContextWindowFeedback(state, form) {
+  if (!state.contextWindowFeedback) return;
+  state.contextWindowFeedback = null;
+  const field = form.querySelector(CONTEXT_FIELD);
+  field?.removeAttribute("aria-invalid");
+  field?.setAttribute("aria-describedby", CONTEXT_HELP_ID);
+  field?.setAttribute("min", "1");
+  form.querySelector(`[id="${CONTEXT_ERROR_ID}"]`)?.remove();
+}
+
+export function renderModelContextWindowFeedback(state, form, restoreFocus) {
+  const feedback = state.contextWindowFeedback;
+  if (!feedback) return;
+  const field = form.querySelector(CONTEXT_FIELD);
+  if (!field) return;
+  field.setAttribute("aria-invalid", "true");
+  field.setAttribute(
+    "aria-describedby",
+    `${CONTEXT_HELP_ID} ${CONTEXT_ERROR_ID}`,
+  );
+  field.setAttribute("min", String(feedback.minimumTokens));
+  let message = form.querySelector(`[id="${CONTEXT_ERROR_ID}"]`);
+  if (!message) {
+    message = form.ownerDocument.createElement("small");
+    message.setAttribute("id", CONTEXT_ERROR_ID);
+    message.setAttribute("class", "runtime-setup-feedback error");
+    message.setAttribute("role", "alert");
+    field.parentElement.append(message);
+  }
+  message.textContent = feedback.message;
+  if (state.busy || state.step !== 1 || !restoreFocus) return;
+  field.focus();
+}

package/dist/src/web-ui/app/components/model-setup/save-flow.js

@@ -1,3 +1,4 @@
+import { receiveModelContextWindowFeedback } from "./context-window-feedback.js";
 import { selectedModelProvider } from "./validation.js";
 import {
   isDefinitiveModelSaveRejection,
@@ -97,7 +98,8 @@ export function createModelSaveFlow({
       if (credentialSaved)
         state.credentialSavedFor =
           selectedModelProvider(state)?.id || state.newProviderId;
-      state.error = modelSaveErrorMessage(state, error);
+      if (!receiveModelContextWindowFeedback(state, error))
+        state.error = modelSaveErrorMessage(state, error);
       if (credentialSaved)
         state.error +=
           " Your API key was saved privately and will be reused on retry.";

package/dist/src/web-ui/app/components/model-setup/save-outcome.js

@@ -19,6 +19,7 @@ export function modelSaveFailureMessage(state) {
 
 export function modelSaveErrorMessage(state, error) {
   const fallback = modelSaveFailureMessage(state);
+  if (error?.payload?.error === "context_window_too_small") return fallback;
   const detail = error?.payload?.message;
   if (!detail) return fallback;
   if (state.saved) return `${fallback} ${detail}`;

package/dist/src/web-ui/app/components/model-setup/wizard.js

@@ -7,6 +7,10 @@ import {
 import { renderWizardProgress } from "../runtime-setup/wizard-shell.js";
 import { DEFAULT_OLLAMA_BASE_URL } from "../runtime-setup/validation.js";
 import { createSetupViewState } from "../runtime-setup/view-state.js";
+import {
+  clearModelContextWindowFeedback,
+  renderModelContextWindowFeedback,
+} from "./context-window-feedback.js";
 import { createModelSaveFlow } from "./save-flow.js";
 import {
   MODEL_SETUP_ID,
@@ -70,6 +74,7 @@ export function createModelSetupWizard({
       choice: "",
       model: "",
       contextWindowTokens: "",
+      contextWindowFeedback: null,
       profileId: "",
       profileEdited: false,
       newProviderId: "",
@@ -201,6 +206,11 @@ export function createModelSetupWizard({
       .querySelector(".runtime-setup-panel")
       .setAttribute("aria-busy", Boolean(state.busy).toString());
     viewState.restore({ focus, busy: Boolean(state.busy) });
+    renderModelContextWindowFeedback(
+      state,
+      modelForm,
+      viewState.canRestoreFocus(),
+    );
   }
 
   async function load() {
@@ -280,6 +290,7 @@ export function createModelSetupWizard({
       event.target.removeAttribute("aria-invalid");
       return;
     }
+    clearModelContextWindowFeedback(state, modelForm);
     state.saveOutcomeUncertain = false;
     const value = textOf(event.target.value);
     if (field === "model-id") {
@@ -315,6 +326,7 @@ export function createModelSetupWizard({
     )
       return;
     clearSecret();
+    clearModelContextWindowFeedback(state, modelForm);
     state.saveOutcomeUncertain = false;
     const providerChanged = state.choice !== event.target.value;
     if (providerChanged) state.model = "";

package/dist/src/web-ui/app/components/operations-summary.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../lib/reasoning-controls.js";
 import { formatTime, textOf } from "../lib/text-format.js";
 import { getNumber } from "../lib/event-presentation.js";
 
@@ -91,7 +92,7 @@ function healthSummary(read) {
     label: "System health · all environments",
     items: [
       { label: "Health · all environments", value: unavailable || healthValue(payload.ok), status: true },
-      { label: "Runtime mode", value: unavailable || textOf(payload.agentMode, "-") || "-" },
+      { label: "Runtime mode", value: unavailable || textOf(displayReasoningMode(payload.agentMode), "-") || "-" },
       { label: "Active streams", value: unavailable || activeStreamCount(payload) },
       { label: "Latest event", value: unavailable || textOf(latest?.lastEventName || latest?.lastEventType, "-") || "-" },
     ],

package/dist/src/web-ui/app/components/passive-learning/activity-controls.js

@@ -1,3 +1,5 @@
+import { needsCollectionConsentReview } from "./collection-access.js";
+
 const activities = Object.freeze({
   collection: { label: "collection", permissionField: "collectionEnabled", selector: "[data-learning-toggle]" },
   learning: { label: "learning", permissionField: "processingEnabled", selector: "[data-learning-processing-toggle]" },
@@ -42,6 +44,8 @@ export function activityStatePatch(activity, preferences, running) {
 export function activityControl(activity, snapshot) {
   const definition = activities[activity];
   const preferences = snapshot.status?.preferences || {};
+  if (activity === "collection" && needsCollectionConsentReview(snapshot.status))
+    return { action: "start", label: "Review collection access", tone: "setup" };
   if (isActivityRunning(activity, preferences))
     return { action: "stop", label: `Stop ${definition.label}`, tone: "danger" };
   if (!hasActivityModel(activity, preferences, snapshot.models))

package/dist/src/web-ui/app/components/passive-learning/collection-access.js

@@ -0,0 +1,35 @@
+import { hostSetupIsReady } from "../system-host/rendering.js";
+import { isNativeWindowsLocalAccess } from "../system-host/native-windows-access.js";
+
+export function hasCollectionAccess(hostConnection) {
+  if (isNativeWindowsLocalAccess(hostConnection)) return true;
+  return hostSetupIsReady(hostConnection);
+}
+
+export function needsCollectionConsentReview(status) {
+  if (status?.preferences?.enabled !== true) return false;
+  const reason = status.collectionReason || status.reason;
+  return reason === "collection_consent_required";
+}
+
+function collectionCompanionVersion(host) {
+  if (isNativeWindowsLocalAccess(host)) return "";
+  const companion = host?.companion;
+  if (!companion) return "Connect your computer to check its companion version.";
+  return `Installed version: ${companion.installedVersion ?? "unversioned"} · Available: ${companion.availableVersion}`;
+}
+
+/** Display the actual collection source without treating Companion identity as Runtime identity. */
+export function renderCollectionAccess(root, snapshot) {
+  const native = isNativeWindowsLocalAccess(snapshot.hostConnection);
+  const version = root.querySelector("[data-learning-companion-version]");
+  version.hidden = native;
+  version.textContent = collectionCompanionVersion(snapshot.hostConnection);
+  root.querySelector("[data-learning-computer-access]").hidden = native;
+  root.querySelector("[data-learning-connection-title]").textContent = native ? "Local collection" : "Computer connection";
+  root.querySelector("[data-learning-connection-description]").textContent = native
+    ? "Spark collects activity directly on this Windows computer after your consent. Collection and learning have separate permission and Start controls."
+    : "Collection uses the shared Computer access connection. Computer tools have their own controls.";
+  root.querySelector("[data-learning-device]").textContent = native
+    ? "This Windows computer" : snapshot.status?.deviceId || "Not connected now";
+}

package/dist/src/web-ui/app/components/passive-learning/collection-consent-dialog.js

@@ -0,0 +1,59 @@
+/** One explicit, initially unchecked acknowledgment before saving installation consent. */
+export function createCollectionConsentDialog({ container }) {
+  const documentRoot = container.ownerDocument;
+  const dialog = documentRoot.createElement("dialog");
+  dialog.className = "mac-permission-dialog collection-consent-dialog";
+  dialog.setAttribute("aria-labelledby", "collectionConsentTitle");
+  dialog.setAttribute("aria-describedby", "collectionConsentDescription");
+  dialog.innerHTML = `<div class="mac-permission-content">
+    <div class="mac-permission-top"><span class="mac-permission-eyebrow">ABot Spark · Activity collection</span>
+      <button type="button" class="mac-permission-close" data-collection-consent-cancel aria-label="Cancel and close">×</button></div>
+    <h2 id="collectionConsentTitle" tabindex="-1">Before allowing activity collection</h2>
+    <p id="collectionConsentDescription" class="mac-permission-description">Spark can read accessible text and activity from your applications, including window titles and URLs. This may include personal or sensitive information.</p>
+    <p class="mac-permission-usage">When learning is enabled, collected content is sent to your selected learning model. A remote model provider receives that content outside this computer.</p>
+    <p class="mac-permission-usage">Collection and learning have separate controls. You can stop collection, exclude applications, or delete pending activity in Spark. Stopping collection does not recall content already sent to model providers. Saving this acknowledgment alone does not start collection.</p>
+    <p class="mac-permission-path-note">This acknowledgment is saved for this ABot installation and kept across updates.</p>
+    <label class="collection-consent-acknowledgment"><input type="checkbox" data-collection-consent-acknowledged />
+      <span>I understand and agree to the <a href="https://abot-ai.com/terms/#software" target="_blank" rel="noopener noreferrer">Software Terms</a> and <a href="https://abot-ai.com/privacy/#software" target="_blank" rel="noopener noreferrer">Software Privacy Policy</a>.</span></label>
+  </div><div class="mac-permission-footer"><span>Collection starts only through Spark controls.</span>
+    <div><button type="button" data-collection-consent-cancel>Cancel</button>
+      <button type="button" class="mac-permission-continue" data-collection-consent-continue disabled>Continue</button></div>
+  </div>`;
+  (documentRoot.body ?? container).append(dialog);
+  const checkbox = dialog.querySelector("[data-collection-consent-acknowledged]");
+  const proceed = dialog.querySelector("[data-collection-consent-continue]");
+  let pending;
+  let returnFocus;
+
+  function finish(approved) {
+    if (!pending) return;
+    const resolve = pending;
+    pending = undefined;
+    dialog.close();
+    if (returnFocus?.isConnected && !returnFocus.closest("[hidden]")) returnFocus.focus();
+    resolve(approved);
+  }
+  checkbox.addEventListener("change", () => { proceed.disabled = !checkbox.checked; });
+  proceed.addEventListener("click", () => {
+    if (!checkbox.checked || proceed.disabled) return;
+    finish(true);
+  });
+  for (const button of dialog.querySelectorAll("[data-collection-consent-cancel]"))
+    button.addEventListener("click", () => finish(false));
+  dialog.addEventListener("cancel", (event) => { event.preventDefault(); finish(false); });
+  dialog.addEventListener("close", () => finish(false));
+  return {
+    confirm() {
+      if (pending) return Promise.resolve(false);
+      checkbox.checked = false;
+      proceed.disabled = true;
+      returnFocus = documentRoot.activeElement;
+      return new Promise((resolve) => {
+        pending = resolve;
+        dialog.showModal();
+        dialog.querySelector("h2").focus();
+      });
+    },
+    cancel() { finish(false); },
+  };
+}

package/dist/src/web-ui/app/components/passive-learning/collection-consent-gate.js

@@ -0,0 +1,94 @@
+import { createCollectionConsentDialog } from "./collection-consent-dialog.js";
+import { hasCollectionAccess, needsCollectionConsentReview } from "./collection-access.js";
+import { readActivityPermissions } from "./activity-controls.js";
+
+function requestsCollectionAccess(preferences, snapshot) {
+  if (preferences.enabled === false || preferences.activityPermissions?.collection === false) return false;
+  if (preferences.enabled === true) return true;
+  if (preferences.activityPermissions?.collection !== true) return false;
+  return !readActivityPermissions(snapshot.status?.preferences).collection;
+}
+
+function collectionRequestContext(snapshot) {
+  const host = snapshot.hostConnection;
+  return JSON.stringify([
+    snapshot.environmentId, host?.collectionSource, host?.hostId,
+    host?.connected, host?.connectionId, snapshot.status?.preferences?.modelProfileId,
+    snapshot.status?.preferences?.enabled,
+  ]);
+}
+
+/** Installation consent precedes platform permission preparation and explicit activation. */
+export function createCollectionConsentGate({
+  actions, container, openComputerAccess = () => {}, createDialog = createCollectionConsentDialog,
+}) {
+  let dialog;
+  let pending;
+  let revision = 0;
+  function cancel() {
+    revision += 1;
+    pending = undefined;
+    dialog?.cancel();
+  }
+  function requestIsCurrent(request) {
+    if (pending !== request) return false;
+    return collectionRequestContext(actions.snapshot()) === request.context;
+  }
+  async function continueRequest(preferences, request) {
+    try {
+      if (actions.snapshot().hostConnection?.collectionConsent?.accepted !== true) {
+        const freshHost = await actions.refreshCollectionAccess();
+        if (!freshHost || !requestIsCurrent(request)) return;
+      }
+      if (actions.snapshot().hostConnection?.collectionConsent?.accepted !== true) {
+        dialog ??= createDialog({ container });
+        const approved = await dialog.confirm();
+        if (!approved || !requestIsCurrent(request)) return;
+        request.acknowledging = true;
+        const host = await actions.acceptCollectionConsent();
+        request.acknowledging = false;
+        if (!requestIsCurrent(request)) return;
+        if (host?.collectionConsent?.accepted !== true) return;
+      }
+      if (!requestIsCurrent(request)) return;
+      const snapshot = actions.snapshot();
+      if (preferences.enabled === true && !hasCollectionAccess(snapshot.hostConnection)) {
+        pending = undefined;
+        openComputerAccess();
+        return;
+      }
+      pending = undefined;
+      if (request.restart) return actions.restartCollection();
+      const restartAfterConsent = preferences.enabled === true && needsCollectionConsentReview(snapshot.status);
+      const status = await actions.configure(preferences);
+      if (!restartAfterConsent || !status?.preferences?.enabled) return status;
+      if (request.revision !== revision) return status;
+      if (collectionRequestContext(actions.snapshot()) !== request.context) return status;
+      return actions.restartCollection();
+    } finally {
+      if (pending === request) pending = undefined;
+    }
+  }
+  function configure(preferences, restart = false) {
+    const snapshot = actions.snapshot();
+    if (!requestsCollectionAccess(preferences, snapshot)) {
+      cancel();
+      return actions.configure(preferences);
+    }
+    if (pending) return;
+    if (snapshot.saving || snapshot.loadingStatus || !snapshot.status) return;
+    const request = { context: collectionRequestContext(snapshot), acknowledging: false, restart, revision };
+    pending = request;
+    return continueRequest(preferences, request);
+  }
+  return {
+    configure,
+    restartCollection: () => configure({ enabled: true }, true),
+    update(snapshot) {
+      if (!pending) return;
+      if (collectionRequestContext(snapshot) !== pending.context) return cancel();
+      if (snapshot.saving && !pending.acknowledging) cancel();
+    },
+    cancel,
+  };
+}

package/dist/src/web-ui/app/components/passive-learning/computer-update-notice.js

@@ -1,3 +1,5 @@
+import { isNativeWindowsLocalAccess } from "../system-host/native-windows-access.js";
+
 export function computerUpdateNoticeMarkup() {
   return `<div class="co-worker-computer-update" data-learning-update hidden role="status">
     <span class="co-worker-computer-update-icon" aria-hidden="true">↑</span>
@@ -8,6 +10,10 @@ export function computerUpdateNoticeMarkup() {
 }
 
 export function renderComputerUpdateNotice(root, snapshot) {
+  if (isNativeWindowsLocalAccess(snapshot.hostConnection)) {
+    root.querySelector("[data-learning-update]").hidden = true;
+    return;
+  }
   root.querySelector("[data-learning-update]").hidden =
     !snapshot.hostConnection?.companion?.updateAvailable;
 }

package/dist/src/web-ui/app/components/passive-learning/failure-copy.js

@@ -2,6 +2,7 @@ const genericMessage = "ABot Spark could not complete this review. No specific c
 
 // Exact content-free codes only. Never turn an arbitrary provider error into UI copy.
 const groups = [
+  ["Review and acknowledge Spark activity collection before starting it. No activity is collected until you continue.", ["collection_consent_required"]],
   ["macOS Accessibility permission is required. Open Computer access for the exact companion executable to approve. Spark waits up to two minutes for your consent.", ["macos_accessibility_permission_required"]],
   ["macOS Accessibility permission was removed. Re-enable access for the companion in Computer access, then stop and start collection.", ["macos_accessibility_permission_revoked"]],
   ["macOS Accessibility permission was not granted within two minutes. Complete permission setup in Computer access, then stop and start collection to check again.", ["macos_accessibility_permission_timeout"]],

package/dist/src/web-ui/app/components/passive-learning/home-widget-preview.js

@@ -0,0 +1,32 @@
+import { coWorkerActivityStates, coWorkerActivityTones } from "./agent-state.js";
+
+const indicators = {
+  off: { icon: "paused", tone: "neutral" },
+  waiting: { icon: "active", tone: "neutral" },
+  ready: { icon: "success", tone: "success" },
+  active: { icon: "active", tone: "active" },
+  attention: { icon: "failed", tone: "attention" },
+};
+
+/** Read-only projection of the same activity states used by the expanded owner. */
+export function learningWidgetPreview(status) {
+  if (!status?.preferences) return null;
+  const states = coWorkerActivityStates(status);
+  const tones = coWorkerActivityTones(status);
+  return {
+    kind: "metrics",
+    items: [
+      ["collection", "Collection"],
+      ["processing", "Learning"],
+      ["proactive", "Proactive"],
+    ].map(([key, label]) => {
+      const indicator = { ...(indicators[tones[key]] || indicators.off) };
+      indicator.label = [label, ...states[key]].filter(Boolean).join(": ");
+      if (key === "collection" && tones[key] === "active") indicator.icon = "collecting";
+      if (key === "processing" && ["ready", "waiting"].includes(tones[key])
+        && Number.isFinite(status.pendingObservations) && status.pendingObservations > 0)
+        indicator.value = status.pendingObservations;
+      return { label, indicator };
+    }),
+  };
+}

package/dist/src/web-ui/app/components/passive-learning/home.js

@@ -1,4 +1,4 @@
-import { hostSetupIsReady } from "../system-host/rendering.js";
+import { hasCollectionAccess, needsCollectionConsentReview } from "./collection-access.js";
 import { agentMarkup, renderAgent } from "./agent-view.js";
 import { createAgentMotion } from "./agent-motion.js";
 import { learningFailurePresentation } from "./presentation.js";
@@ -10,11 +10,12 @@ function canStartHomeLearning(snapshot) {
   if (snapshot.statusError || learningFailurePresentation(snapshot.status))
     return false;
   if (readActivityPermissions(snapshot.status.preferences).collection)
-    return hostSetupIsReady(snapshot.hostConnection);
+    return hasCollectionAccess(snapshot.hostConnection);
   return true;
 }
 
 function homeLearningActionLabel(snapshot) {
+  if (needsCollectionConsentReview(snapshot.status)) return "Review collection access";
   if (hasIndependentHomeActivity(snapshot.status)) return "Open ABot Spark";
   return canStartHomeLearning(snapshot)
     ? "Start ABot Spark"
@@ -36,8 +37,10 @@ export function createPassiveLearningHome({
   let root = null;
   let renderedSnapshot = {};
   let motion;
+  let onRendered = () => {};
 
-  function mount(nextRoot) {
+  function mount(nextRoot, notify = () => {}) {
+    onRendered = notify;
     if (root === nextRoot) return;
     motion?.dispose();
     root?.removeEventListener("click", handleClick);
@@ -59,6 +62,10 @@ export function createPassiveLearningHome({
     if (!button || !root.contains(button) || button.disabled) return;
     const snapshot = actions?.snapshot?.() ?? renderedSnapshot;
     if (snapshot.saving || snapshot.loadingStatus) return;
+    if (needsCollectionConsentReview(snapshot.status)) {
+      void actions.configure({ enabled: true });
+      return;
+    }
     if (hasIndependentHomeActivity(snapshot.status)) {
       openLearning();
       return;
@@ -83,6 +90,7 @@ export function createPassiveLearningHome({
     const error = root.querySelector("[data-learning-status]");
     error.textContent = snapshot.statusError || "";
     error.hidden = !snapshot.statusError;
+    onRendered();
   }
 
   return Object.freeze({ mount, render });

package/dist/src/web-ui/app/components/passive-learning/macos-collection-restart-notice.js

@@ -5,6 +5,7 @@ const permissionReasons = new Set([
 ]);
 
 function hasEnabledMacCollection(snapshot) {
+  if (snapshot.hostConnection?.collectionSource?.mode === "native") return false;
   if (snapshot.hostConnection?.identity?.os !== "macos") return false;
   return snapshot.status?.preferences?.enabled === true;
 }

package/dist/src/web-ui/app/components/passive-learning/memory.js

@@ -1,3 +1,4 @@
+import { renderCollectionAccess } from "./collection-access.js";
 import { renderAgent } from "./agent-view.js";
 import { renderComputerUpdateNotice } from "./computer-update-notice.js";
 import { renderMacCollectionRestartNotice, handleMacCollectionRestartClick } from "./macos-collection-restart-notice.js";
@@ -133,11 +134,9 @@ export function createPassiveLearningMemory({
 
   function renderStatus(snapshot) {
     const status = snapshot.status;
-    const companion = snapshot.hostConnection?.companion;
+    renderCollectionAccess(root, snapshot);
     renderComputerUpdateNotice(root, snapshot);
     renderMacCollectionRestartNotice(root, snapshot);
-    root.querySelector("[data-learning-companion-version]").textContent = companion
-      ? `Installed version: ${companion.installedVersion ?? "unversioned"} · Available: ${companion.availableVersion}` : "Connect your computer to check its companion version.";
     const attention = learningFailurePresentation(status);
     const coverage = learningCoveragePresentation(status);
     root.querySelector("[data-learning-attention]").hidden = !attention;
@@ -150,7 +149,6 @@ export function createPassiveLearningMemory({
     root.querySelector("[data-learning-schedule-summary]").textContent = modelId
       ? `${model?.label || modelId} · ${learningCadenceLabel(status.preferences)}`
       : "Choose a model in Settings to get started.";
-    root.querySelector("[data-learning-device]").textContent = status?.deviceId || "Not connected now";
     root.querySelector("[data-learning-coverage]").textContent = coverage.label;
     root.querySelector("[data-learning-coverage-detail]").textContent = coverage.detail;
     const reasons = [status?.collectionReason, status?.processingReason, status?.reason, status?.proactive?.reason, status?.reassessment?.reason, status?.maintenanceReason].filter(Boolean);

package/dist/src/web-ui/app/components/passive-learning/workspace-view.js

@@ -36,9 +36,9 @@ export function learningWorkspaceMarkup(timeZone) {
     <section class="passive-learning-panel" id="learning-chat-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-chat-tab" data-learning-panel="chat" hidden></section>
     <section class="passive-learning-panel" id="learning-settings-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-settings-tab" data-learning-panel="settings" hidden>
       ${learningSettingsMarkup(timeZone)}
-      <details class="passive-learning-setup" data-learning-setup><summary>Computer connection</summary>
+      <details class="passive-learning-setup" data-learning-setup><summary data-learning-connection-title>Computer connection</summary>
         <dl class="passive-learning-facts co-worker-connection-facts"><div><dt>Computer</dt><dd data-learning-device>—</dd></div><div><dt>Collection access</dt><dd><span data-learning-coverage>—</span><small data-learning-coverage-detail></small></dd></div></dl>
-        <p data-learning-companion-version></p><p>Collection uses the shared Computer access connection. Computer tools have their own controls.</p><button type="button" data-learning-computer-access>Manage Computer access</button></details>
+        <p data-learning-companion-version></p><p data-learning-connection-description></p><button type="button" data-learning-computer-access>Manage Computer access</button></details>
     </section>
     <section class="passive-learning-panel" id="learning-usage-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-usage-tab" data-learning-panel="usage" hidden>${learningUsageMarkup()}</section>
   </section>`;

package/dist/src/web-ui/app/components/plugins/compatibility.js

@@ -0,0 +1,13 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+export function isPluginPlatformUnavailable(compatibility) {
+  return compatibility?.supported === false;
+}
+
+export function renderPluginPlatformNotice(compatibility) {
+  if (!isPluginPlatformUnavailable(compatibility)) return "";
+  const platform = compatibility.runtimePlatform || "this host";
+  const reason =
+    compatibility.reason || "This plugin cannot load on this host.";
+  return `<p class="plugin-capability-policy plugin-platform-notice" data-plugin-platform="${escapeAttribute(platform)}"><strong>Unavailable on this host.</strong> ${escapeHtml(reason)}</p>`;
+}

package/dist/src/web-ui/app/components/plugins/discovery-rendering.js

@@ -1,12 +1,20 @@
+import {
+  isPluginPlatformUnavailable,
+  renderPluginPlatformNotice,
+} from "./compatibility.js";
 import { renderPluginConfigurationFields } from "./configuration-fields.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 
 function renderPluginReview(review, busy) {
   if (!review) return "";
-  const installButton = `<button type="button" class="primary-button" data-plugin-install-confirm ${busy ? "disabled" : ""}>${busy ? "Installing…" : "Install and enable"}</button>`;
+  const installLabel = isPluginPlatformUnavailable(review.compatibility)
+    ? "Install"
+    : "Install and enable";
+  const installButton = `<button type="button" class="primary-button" data-plugin-install-confirm ${busy ? "disabled" : ""}>${busy ? "Installing…" : installLabel}</button>`;
   return `<section class="plugin-install-review" aria-label="Plugin installation review">
     <header class="plugin-install-heading"><div><h3>${escapeHtml(review.id)} ${review.version ? `<small>v${escapeHtml(review.version)}</small>` : ""}</h3><p>Not installed yet.</p></div>${installButton}</header>
     <p>${escapeHtml(review.description)}</p>
+    ${renderPluginPlatformNotice(review.compatibility)}
     <dl><dt>Source</dt><dd>${escapeHtml(review.source.repository)}</dd><dt>Commit</dt><dd><code>${escapeHtml(review.source.ref)}</code></dd></dl>
     <ul class="plugin-install-capabilities">${review.capabilities.map((capability) => `<li><strong>${escapeHtml(capability.id)}</strong><p>${escapeHtml(capability.description)}</p><span>${capability.operations.map((operation) => escapeHtml(`${operation.name} · ${operation.effect}`)).join(" / ")}</span></li>`).join("")}</ul>
     ${renderPluginConfigurationFields(review.configuration, busy)}

package/dist/src/web-ui/app/components/plugins/installation-compatibility.js

@@ -0,0 +1,7 @@
+import { isPluginPlatformUnavailable } from "./compatibility.js";
+
+export function pluginInstallationMessage(review) {
+  if (isPluginPlatformUnavailable(review.compatibility))
+    return `${review.id} installed. It will not load on this Runtime: ${review.compatibility.reason}`;
+  return `${review.id} installed. Apply changes to make it available.`;
+}

package/dist/src/web-ui/app/components/plugins/installation.js

@@ -1,3 +1,4 @@
+import { pluginInstallationMessage } from "./installation-compatibility.js";
 import { createPluginConfigurationDraft } from "./configuration-draft.js";
 import {
   bindPluginConfigurationFields,
@@ -125,7 +126,7 @@ export function createPluginInstallation({
       state.dirty = false;
       state.review = null;
       state.installedPluginId = review.id;
-      state.message = `${review.id} installed. Apply changes to make it available.`;
+      state.message = pluginInstallationMessage(review);
       onInstalled(result);
       onConfigurationSaved();
       const refreshed = await refreshRuntimeConfig(

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

@@ -1,3 +1,4 @@
+import { renderPluginPlatformNotice } from "./compatibility.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 
 function pluginMasterIsEnabled(plugin) {
@@ -50,6 +51,7 @@ function renderCapabilities(plugin, busy, open) {
       <button type="button" data-plugin-tools-back="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Back to ${plugin.id}`)}">Back</button>
       <div><h4 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h4><span>Tools (${capabilities.length})</span></div>
     </header>
+    ${renderPluginPlatformNotice(plugin.compatibility)}
     <ul class="plugin-capability-list" data-plugin-tools-scroll="${escapeAttribute(plugin.id)}">
       ${capabilities.length ? capabilities.map((capability) => renderCapabilityRow(plugin, capability, busy)).join("") : '<li class="plugin-capability-empty">This plugin does not expose any tools.</li>'}
     </ul>
@@ -78,6 +80,7 @@ function renderPluginCard(
         <span class="plugin-selection-state" data-plugin-state="${escapeAttribute(plugin.state)}">${configuredPluginLabel(plugin)}</span>
       </div>
       <p class="plugin-description" title="${escapeAttribute(plugin.description || "Installed Runtime plugin.")}">${escapeHtml(plugin.description || "Installed Runtime plugin.")}</p>
+      ${renderPluginPlatformNotice(plugin.compatibility)}
       <div class="plugin-card-footer">
         <span>${plugin.selectedCapabilityCount} of ${plugin.capabilityCount} capabilities selected</span>
         <div class="plugin-card-actions">