@abot-ai/runtime 1.4.0 → 1.5.0

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

@@ -30,6 +30,7 @@ export interface ModelSetupWizardDependencies {
   beginRuntimeMutation?: (subject?: string) => boolean;
   endRuntimeMutation?: () => void;
   onSaved?: (model: AddedModelIdentity) => void;
+  onDeferred?: (model: AddedModelIdentity) => Promise<boolean>;
   onComplete?: (model: AddedModelIdentity) => Promise<boolean>;
   onClosed?: (result: { completed: boolean }) => void;
 }

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

@@ -35,6 +35,7 @@ export function createModelSetupWizard({
   beginRuntimeMutation = () => true,
   endRuntimeMutation = () => {},
   onSaved = () => {},
+  onDeferred = async () => true,
   onComplete = async () => true,
   onClosed = () => {},
 }) {
@@ -77,6 +78,7 @@ export function createModelSetupWizard({
       loaded: false,
       busy: "",
       error: "",
+      notice: "",
       saved: null,
       applied: false,
       credentialSavedFor: "",
@@ -153,6 +155,7 @@ export function createModelSetupWizard({
     beginRuntimeMutation,
     endRuntimeMutation,
     onSaved,
+    onDeferred,
     onComplete,
   });
 
@@ -185,6 +188,7 @@ export function createModelSetupWizard({
     const feedback = dialog.querySelector("[data-model-feedback]");
     feedback.textContent =
       state.error ||
+      state.notice ||
       (state.busy
         ? `${state.busy === "saving" ? "Saving model" : state.busy === "applying" ? "Applying model" : state.busy === "refreshing" ? "Refreshing model list" : "Loading providers"}…`
         : "");

package/dist/src/web-ui/app/components/notifications/dom.js

@@ -0,0 +1,33 @@
+export function mountNotificationsDom(dom, documentRoot = document) {
+  const button = documentRoot.createElement("button");
+  button.id = "notificationsWorkspaceButton";
+  button.className = "rail-button";
+  button.type = "button";
+  button.setAttribute("aria-label", "Open notifications");
+  button.setAttribute("aria-controls", "notificationsWorkspacePanel");
+  button.title = "Notifications";
+  button.innerHTML = `<span class="rail-icon" aria-hidden="true"><svg viewBox="0 0 24 24">
+    <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" />
+    </svg><span class="notification-rail-count" hidden></span></span>
+    <span class="rail-button-label">Notifications</span>`;
+  dom.configWorkspaceButton.before(button);
+  const panel = documentRoot.createElement("section");
+  panel.id = "notificationsWorkspacePanel";
+  panel.className = "workspace-page-panel notifications-workspace-panel";
+  panel.hidden = true;
+  panel.inert = true;
+  panel.setAttribute("aria-labelledby", "notificationsWorkspaceTitle");
+  panel.setAttribute("aria-hidden", "true");
+  panel.innerHTML = `<header class="workspace-page-header">
+    <div class="workspace-page-heading"><h2 id="notificationsWorkspaceTitle">Notifications</h2><p>Updates from your assistant, in one place.</p></div>
+    <button type="button" class="workspace-page-back notification-close">Back to chat</button>
+    </header><div class="workspace-page-body" data-notifications-root></div>`;
+  dom.app.append(panel);
+  Object.assign(dom, {
+    notificationsWorkspaceButton: button,
+    notificationsWorkspacePanel: panel,
+    closeNotificationsWorkspaceButton: panel.querySelector(".notification-close"),
+    notificationsRoot: panel.querySelector("[data-notifications-root]"),
+    notificationsBadge: button.querySelector(".notification-rail-count"),
+  });
+}

package/dist/src/web-ui/app/components/notifications/focus.js

@@ -0,0 +1,56 @@
+export function createNotificationFocus(root) {
+  let pending;
+  function notificationControlIdentity(element) {
+    if (!element || !root.contains(element)) return null;
+    const data = element.dataset;
+    if (!data) return null;
+    if (data.notificationAction)
+      return { action: data.notificationAction, id: data.notificationId };
+    if (data.notificationDetail)
+      return { detail: data.notificationDetail };
+    if (data.notificationPreference)
+      return { preference: data.notificationPreference };
+    if (data.notificationKind)
+      return { kind: data.notificationKind };
+    return null;
+  }
+  function matchesNotificationControl(element, target) {
+    const data = element.dataset;
+    if (target.action)
+      return data.notificationAction === target.action && data.notificationId === target.id;
+    if (target.detail) return data.notificationDetail === target.detail;
+    if (target.preference) return data.notificationPreference === target.preference;
+    return data.notificationKind === target.kind;
+  }
+  return {
+    remember() {
+      const active = root.ownerDocument.activeElement;
+      const current = notificationControlIdentity(active);
+      if (current) {
+        pending = current;
+        return;
+      }
+      if (active !== root.ownerDocument.body) pending = null;
+    },
+    restore(busy) {
+      if (!canRestoreNotificationFocus(pending, busy)) return;
+      const target = pending;
+      pending = null;
+      if (root.closest("[inert]")) return;
+      const active = root.ownerDocument.activeElement;
+      if (active !== root.ownerDocument.body && !root.contains(active)) return;
+      const controls = [...root.querySelectorAll("button, a, input, summary")];
+      const next = controls.find((control) => !control.disabled && matchesNotificationControl(control, target));
+      if (next) {
+        next.focus({ preventScroll: true });
+        return;
+      }
+      root.querySelector('[data-notification-action="refresh"]')?.focus({ preventScroll: true });
+    },
+  };
+}
+
+function canRestoreNotificationFocus(pending, busy) {
+  if (busy) return false;
+  return Boolean(pending);
+}

package/dist/src/web-ui/app/components/notifications/home-entry.js

@@ -0,0 +1,35 @@
+function hasHomeUnreadNotifications(snapshot) {
+  if (!snapshot.supported) return false;
+  if (!Number.isSafeInteger(snapshot.unreadCount)) return false;
+  return snapshot.unreadCount > 0;
+}
+
+/** Shares the inbox count without fetching or marking any notification read. */
+export function createHomeNotificationsEntry({ homePanel, onOpen }) {
+  const header = homePanel?.querySelector(".home-workspace-header");
+  if (!header) return { render() {} };
+  const button = homePanel.ownerDocument.createElement("button");
+  button.setAttribute("type", "button");
+  button.className = "home-notifications-entry";
+  button.hidden = true;
+  button.setAttribute("aria-controls", "notificationsWorkspacePanel");
+  button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" />
+    </svg><span></span><span aria-hidden="true">→</span>`;
+  const label = button.querySelector("span");
+  button.addEventListener("click", () => {
+    if (button.hidden) return;
+    onOpen();
+  });
+  header.append(button);
+  return {
+    render(snapshot) {
+      button.hidden = !hasHomeUnreadNotifications(snapshot);
+      if (button.hidden) return;
+      const count = snapshot.unreadCount;
+      const description = `${count} unread ${count === 1 ? "notification" : "notifications"}`;
+      label.textContent = description;
+      button.setAttribute("aria-label", `View ${description}`);
+    },
+  };
+}

package/dist/src/web-ui/app/components/notifications/presentation.js

@@ -0,0 +1,123 @@
+import { escapeHtml, escapeAttribute, formatTime } from "../../lib/text-format.js";
+
+export const NOTIFICATION_KIND_LABELS = Object.freeze({
+  reply: "Assistant replies",
+  failure: "Failures",
+  approval: "Approval requests",
+  proposal: "Co-worker suggestions",
+});
+
+const DELIVERY_LABELS = Object.freeze({
+  pending: "Waiting to send",
+  submitted: "Sent to computer",
+  disabled: "Desktop alerts off",
+  unavailable: "Computer unavailable",
+  failed: "Desktop alert failed",
+  unknown: "Delivery not confirmed",
+});
+
+const NOTIFICATION_KIND_ICONS = Object.freeze({
+  reply: '<path d="M5 4h14v11H9l-4 4V4Z" /><path d="M9 8h6M9 11h4" />',
+  failure: '<path d="m12 3 10 18H2L12 3Z" /><path d="M12 9v5M12 17h.01" />',
+  approval: '<path d="M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6l-8-3Z" /><path d="m8 12 3 3 5-6" />',
+  proposal: '<path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z" />',
+});
+
+function renderNotificationTimestamp(createdAt) {
+  const date = new Date(createdAt);
+  const full = escapeAttribute(formatTime(createdAt));
+  const short = date.toLocaleString(undefined, {
+    month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
+  });
+  return `<time datetime="${escapeAttribute(date.toISOString())}" title="${full}" aria-label="${full}">${escapeHtml(short)}</time>`;
+}
+
+function notificationBodyRepeatsTitle(item) {
+  return item.body.trim() === item.title.trim();
+}
+
+export function notificationSourceUrl(item) {
+  if (typeof item?.sourceUrl !== "string") return "";
+  if (!item.sourceUrl.startsWith("/")) return "";
+  let url;
+  try {
+    url = new URL(item.sourceUrl, "https://abot.invalid");
+  } catch {
+    return "";
+  }
+  if (url.origin !== "https://abot.invalid") return "";
+  if (!["/chat", "/learning", "/home", "/notifications"].includes(url.pathname)) return "";
+  if (url.searchParams.get("environment") !== item.environmentId) return "";
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+function renderNotificationDeliveryError(delivery) {
+  if (!["failed", "unknown", "unavailable"].includes(delivery?.status)) return "";
+  if (typeof delivery.error !== "string") return "";
+  const error = delivery.error.trim();
+  if (!error) return "";
+  const message = error.includes("#< CLIXML")
+    ? "The computer returned an unreadable error."
+    : error;
+  return `<p class="notification-delivery-error" dir="auto">${escapeHtml(message)}</p>`;
+}
+
+export function renderNotificationItem(item, busy) {
+  const read = item.readAt != null;
+  const source = notificationSourceUrl(item);
+  const label = NOTIFICATION_KIND_LABELS[item.kind] || "Notification";
+  const delivery = DELIVERY_LABELS[item.delivery?.status] || "Delivery not confirmed";
+  const attributes = `data-notification-id="${escapeAttribute(item.id)}"`;
+  const readAction = read ? "Mark unread" : "Mark read";
+  const icon = NOTIFICATION_KIND_ICONS[item.kind] || NOTIFICATION_KIND_ICONS.reply;
+  const preview = notificationBodyRepeatsTitle(item) ? ""
+    : `<span class="notification-item-preview" dir="auto">${escapeHtml(item.body)}</span>`;
+  return `<li class="notification-item ${read ? "" : "is-unread"}" ${attributes}>
+    <span class="notification-kind-icon" role="img" aria-label="${escapeAttribute(label)}" title="${escapeAttribute(label)}"><svg viewBox="0 0 24 24" aria-hidden="true">${icon}</svg></span>
+    <details class="notification-item-details" ${attributes}>
+      <summary data-notification-detail="${escapeAttribute(item.id)}">
+        <span class="notification-item-heading">
+          <span class="notification-item-title" role="heading" aria-level="3" dir="auto">${escapeHtml(item.title)}</span>
+          ${read ? "" : '<span class="notification-read-state" aria-label="Unread">Unread</span>'}
+          <svg class="notification-expand-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="m5 3 5 5-5 5" /></svg>
+        </span>
+        ${preview}
+      </summary>
+      <div class="notification-item-expanded">
+        <p dir="auto">${escapeHtml(item.body)}</p>
+        <div class="notification-item-meta"><span>${escapeHtml(label)}</span><span>${escapeHtml(delivery)}</span></div>
+        ${renderNotificationDeliveryError(item.delivery)}
+      </div>
+    </details>
+    <div class="notification-item-footer">
+      ${renderNotificationTimestamp(item.createdAt)}
+      <div class="notification-item-actions">
+        <button type="button" data-notification-action="read" ${attributes} aria-label="${readAction}" ${busy ? "disabled" : ""}>${readAction}</button>
+        ${source ? `<a href="${escapeAttribute(source)}" data-notification-action="open" ${attributes}>Open <span aria-hidden="true">↗</span></a>` : ""}
+      </div>
+    </div>
+  </li>`;
+}
+
+export function renderNotificationSettings(snapshot) {
+  const preferences = snapshot.preferences;
+  if (!preferences) return "";
+  const disabled = snapshot.busy ? "disabled" : "";
+  const desktop = snapshot.desktop || {};
+  const status = desktop.message || (desktop.available
+    ? "Computer access is connected. Alerts can arrive while your browser is closed."
+    : "Connect Computer access to receive desktop alerts.");
+  return `<details class="notification-settings"><summary>Notification settings</summary>
+    <div class="notification-settings-body">
+      <label class="notification-setting"><span><strong>Desktop notifications</strong>
+        <small>Show ABot alerts on this computer.</small></span>
+        <input type="checkbox" data-notification-preference="desktopEnabled" ${preferences.desktopEnabled ? "checked" : ""} ${disabled}></label>
+      <p class="notification-computer-status" role="status">${escapeHtml(status)}</p>
+      <div class="notification-kind-settings"><p>Notify me about</p><div class="notification-kind-options">
+        ${Object.entries(NOTIFICATION_KIND_LABELS).map(([kind, label]) =>
+          `<label class="notification-setting"><span>${label}</span><input type="checkbox" data-notification-kind="${kind}" ${preferences.kinds?.[kind] ? "checked" : ""} ${disabled}></label>`
+        ).join("")}
+      </div></div>
+      <p class="notification-settings-note">History is always saved. Replies in the active conversation stay silent. System notification settings apply.</p>
+    </div></details>`;
+}

package/dist/src/web-ui/app/components/notifications/workspace.js

@@ -0,0 +1,115 @@
+import { createNotificationFocus } from "./focus.js";
+import {
+  renderNotificationItem,
+  renderNotificationSettings,
+} from "./presentation.js";
+
+export function createNotificationsWorkspace({ root, button, badge, actions }) {
+  let snapshot;
+  const focus = createNotificationFocus(root);
+  root.innerHTML = `<div class="notifications-content">
+    <div class="notifications-toolbar">
+      <div class="notification-filters" role="group" aria-label="Filter notifications">
+        <button type="button" data-notification-filter="all" aria-pressed="true">All</button>
+        <button type="button" data-notification-filter="unread" aria-pressed="false">Unread</button>
+      </div>
+      <div class="notification-toolbar-actions">
+        <button type="button" data-notification-action="refresh">Refresh</button>
+        <button type="button" data-notification-action="read-all">Mark all read</button>
+      </div>
+    </div>
+    <p class="notification-feedback" role="status" aria-live="polite"></p>
+    <ul class="notification-list" aria-label="Notification history"></ul>
+    <button type="button" class="notification-load-more" data-notification-action="more" hidden>Load older notifications</button>
+    <div class="notification-settings-root"></div>
+  </div>`;
+  const list = root.querySelector(".notification-list");
+  const feedback = root.querySelector(".notification-feedback");
+  const settings = root.querySelector(".notification-settings-root");
+  const more = root.querySelector(".notification-load-more");
+
+  async function handleAction(event) {
+    const target = event.target.closest("[data-notification-action], [data-notification-filter]");
+    if (!target || !root.contains(target) || target.disabled) return;
+    const filter = target.dataset.notificationFilter;
+    if (filter) {
+      actions.setFilter(filter);
+      return;
+    }
+    const action = target.dataset.notificationAction;
+    if (action === "refresh") return actions.refresh();
+    if (action === "read-all") return actions.markAllRead();
+    if (action === "more") return actions.loadMore();
+    const item = snapshot?.items.find((candidate) => candidate.id === target.dataset.notificationId);
+    if (!item) return;
+    if (action === "read") return actions.markRead(item.id, item.readAt != null ? false : true);
+    if (action !== "open") return;
+    event.preventDefault();
+    return actions.openSource(item);
+  }
+
+  root.addEventListener("click", (event) => { void handleAction(event); });
+  root.addEventListener("change", (event) => {
+    const input = event.target;
+    if (!input.matches("input[type=checkbox]")) return;
+    if (!snapshot?.preferences || snapshot.busy) return;
+    const preferences = {
+      ...snapshot.preferences,
+      kinds: { ...snapshot.preferences.kinds },
+    };
+    if (input.dataset.notificationPreference === "desktopEnabled")
+      preferences.desktopEnabled = input.checked;
+    const kind = input.dataset.notificationKind;
+    if (kind) preferences.kinds[kind] = input.checked;
+    void actions.savePreferences(preferences);
+  });
+
+  function render(next) {
+    focus.remember();
+    const expandedItems = new Set([...list.querySelectorAll("details[open]")]
+      .map((item) => item.dataset.notificationId));
+    snapshot = next;
+    const count = next.unreadCount;
+    badge.hidden = count === 0;
+    badge.textContent = count > 99 ? "99+" : String(count);
+    button.setAttribute("aria-label", count ? `Open notifications, ${count} unread` : "Open notifications");
+    for (const filter of root.querySelectorAll("[data-notification-filter]"))
+      filter.setAttribute("aria-pressed", String(filter.dataset.notificationFilter === next.filter));
+    for (const control of root.querySelectorAll("button[data-notification-action]"))
+      control.disabled = next.busy || next.loading || !next.supported;
+    root.querySelector('[data-notification-action="read-all"]').disabled = next.busy || count === 0;
+    const items = next.filter === "unread"
+      ? next.items.filter((item) => item.readAt == null)
+      : next.items;
+    list.innerHTML = items.map((item) => renderNotificationItem(item, next.busy)).join("");
+    for (const details of list.querySelectorAll("details"))
+      details.open = expandedItems.has(details.dataset.notificationId);
+    list.setAttribute("aria-busy", String(next.loading));
+    feedback.textContent = notificationFeedback(next, items);
+    feedback.classList.toggle("is-error", Boolean(next.error));
+    more.hidden = !next.nextCursor;
+    const expanded = settings.querySelector("details")?.open;
+    settings.innerHTML = renderNotificationSettings(next);
+    const disclosure = settings.querySelector("details");
+    if (disclosure) disclosure.open = Boolean(expanded);
+    focus.restore(next.busy || next.loading);
+  }
+  return { render };
+}
+
+export function notificationFeedback(snapshot, items) {
+  if (snapshot.error) return snapshot.error;
+  if (!snapshot.supported) return "Notifications are unavailable with this backend.";
+  if (items.length) return "";
+  if (snapshot.loading) return "Loading notifications…";
+  if (hasOlderUnreadNotifications(snapshot))
+    return "Unread notifications are in older history. Load older notifications to view them.";
+  if (snapshot.filter === "unread") return "You're all caught up.";
+  return "No notifications yet.";
+}
+
+function hasOlderUnreadNotifications(snapshot) {
+  if (snapshot.filter !== "unread") return false;
+  if (snapshot.unreadCount <= 0) return false;
+  return Boolean(snapshot.nextCursor);
+}

package/dist/src/web-ui/app/components/onboarding-workspace-access.js

@@ -0,0 +1,53 @@
+const navigation = Object.freeze({
+  home: "homeWorkspaceButton", chat: "chatWorkspaceButton", learning: "learningWorkspaceButton",
+  memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", models: "modelsWorkspaceButton",
+  plugins: "pluginsWorkspaceButton", notifications: "notificationsWorkspaceButton", config: "configWorkspaceButton",
+});
+
+function requiresInitialSetup(availability, previous, observed) {
+  if (!availability) return false;
+  if (availability.recovery === "configuration") return false;
+  if (availability.status === "ready") return false;
+  if (["loading", "setup_required"].includes(availability.status)) return true;
+  // A refresh or network failure does not turn an already configured app into onboarding.
+  return observed ? previous : true;
+}
+
+/** Project onboarding readiness onto navigation without changing feature/backend support. */
+export function createOnboardingWorkspaceAccess({ dom, backendAllows }) {
+  let initialSetup = false;
+  let observed = false;
+
+  function isAvailable(workspace) {
+    if (workspace === "home") return true;
+    if (initialSetup) return false;
+    return backendAllows(workspace);
+  }
+
+  function render() {
+    for (const [workspace, key] of Object.entries(navigation)) {
+      const button = dom[key];
+      if (!button) continue;
+      const blocked = initialSetup && workspace !== "home";
+      button.disabled = !isAvailable(workspace);
+      button.setAttribute("aria-disabled", String(button.disabled));
+      button.dataset.onboardingBlocked = String(blocked);
+      if (blocked) button.setAttribute("aria-description", "Complete initial setup on Home to open this page.");
+      else button.removeAttribute("aria-description");
+    }
+    if (dom.learningWorkspaceButton) dom.learningWorkspaceButton.hidden = initialSetup;
+  }
+
+  function update(availability) {
+    initialSetup = requiresInitialSetup(availability, initialSetup, observed);
+    observed = true;
+    render();
+  }
+
+  function unavailableMessage() {
+    if (initialSetup) return "Complete initial setup on Home to open this page.";
+    return "This workspace is unavailable with the current backend.";
+  }
+
+  return { isAvailable, render, update, unavailableMessage };
+}

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

@@ -1,7 +1,12 @@
 import { wrappedIndex } from "../ui-behavior.js";
 import { textOf } from "../lib/text-format.js";
 
-export function createOperationsSection({ buttons, pages }) {
+export function createOperationsSection({
+  buttons,
+  pages,
+  onNavigationChange = () => {},
+}) {
+  let currentTab = "runtime";
   const availableTabs = new Set(
     buttons.map((button) => textOf(button.dataset.tab)),
   );
@@ -9,6 +14,7 @@ export function createOperationsSection({ buttons, pages }) {
   function activateTab(tabName) {
     const normalized = textOf(tabName, "runtime") || "runtime";
     const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
+    currentTab = nextTab;
     for (const button of buttons) {
       const active = button.dataset.tab === nextTab;
       button.classList.toggle("active", active);
@@ -21,6 +27,7 @@ export function createOperationsSection({ buttons, pages }) {
       page.hidden = !active;
       page.inert = !active;
     }
+    onNavigationChange();
   }
 
   function navigateTab(event, button) {
@@ -42,5 +49,5 @@ export function createOperationsSection({ buttons, pages }) {
     }
   }
 
-  return { activateTab, bind };
+  return { activateTab, activeTab: () => currentTab, bind };
 }

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

@@ -0,0 +1,91 @@
+const activities = Object.freeze({
+  collection: { label: "collection", permissionField: "collectionEnabled", selector: "[data-learning-toggle]" },
+  learning: { label: "learning", permissionField: "processingEnabled", selector: "[data-learning-processing-toggle]" },
+  proactive: { label: "proactive mode", permissionField: "proactiveEnabled", selector: "[data-learning-proactive-toggle]" },
+});
+
+export function readActivityPermissions(preferences = {}) {
+  if (preferences.activityPermissions) return {
+    collection: preferences.activityPermissions.collection === true,
+    learning: preferences.activityPermissions.learning === true,
+    proactive: preferences.activityPermissions.proactive === true,
+  };
+  return {
+    collection: preferences.enabled === true,
+    learning: Boolean(preferences.modelProfileId) && !preferences.processingPaused,
+    proactive: preferences.proactiveEnabled === true,
+  };
+}
+
+export function hasActivityModel(activity, preferences, models) {
+  const profile = activity === "proactive"
+    ? preferences.proactiveModelProfileId || preferences.modelProfileId
+    : preferences.modelProfileId;
+  if (!profile) return false;
+  if (!models) return true;
+  return models.some((model) => model.id === profile);
+}
+
+function isActivityRunning(activity, preferences) {
+  if (activity === "collection") return preferences.enabled === true;
+  if (activity === "proactive") return preferences.proactiveEnabled === true;
+  return Boolean(preferences.modelProfileId) && !preferences.processingPaused;
+}
+
+export function activityStatePatch(activity, preferences, running) {
+  const keys = { collection: "enabled", learning: "processingPaused", proactive: "proactiveEnabled" };
+  const patch = { [keys[activity]]: activity === "learning" ? !running : running };
+  if (!preferences.activityPermissions) patch.activityPermissions = readActivityPermissions(preferences);
+  return patch;
+}
+
+export function activityControl(activity, snapshot) {
+  const definition = activities[activity];
+  const preferences = snapshot.status?.preferences || {};
+  if (isActivityRunning(activity, preferences))
+    return { action: "stop", label: `Stop ${definition.label}`, tone: "danger" };
+  if (!hasActivityModel(activity, preferences, snapshot.models))
+    return { action: "setup", label: `Set up ${definition.label}`, tone: "setup",
+      field: activity === "proactive" ? "proactiveModelProfileId" : "modelProfileId" };
+  if (!readActivityPermissions(preferences)[activity])
+    return { action: "setup", label: `Set up ${definition.label}`, tone: "setup", field: definition.permissionField };
+  return { action: "start", label: `Start ${definition.label}`, tone: "default" };
+}
+
+export function homeActivityStartPatch(snapshot) {
+  const preferences = snapshot.status?.preferences || {};
+  const permissions = readActivityPermissions(preferences);
+  const approved = Object.keys(activities).filter((activity) => permissions[activity]);
+  if (!approved.length) return null;
+  // Home does not load model choices; saved profiles are validated by configure.
+  if (approved.some((activity) => !hasActivityModel(activity, preferences))) return null;
+  return Object.assign({}, ...approved.map((activity) => activityStatePatch(activity, preferences, true)));
+}
+
+export function handleActivityControlClick(root, event, actions, openSettings) {
+  for (const [activity, definition] of Object.entries(activities)) {
+    const button = event.target.closest(definition.selector);
+    if (!button || !root.contains(button)) continue;
+    const snapshot = actions.snapshot();
+    if (button.disabled || snapshot.saving || snapshot.loadingStatus || !snapshot.status) return true;
+    const control = activityControl(activity, snapshot);
+    if (control.action === "setup") {
+      openSettings();
+      root.querySelector(`[data-learning-setting="${control.field}"]`)?.focus();
+      return true;
+    }
+    void actions.configure(activityStatePatch(activity, snapshot.status.preferences, control.action === "start"));
+    return true;
+  }
+  return false;
+}
+
+export function renderActivityControls(root, snapshot) {
+  for (const [activity, definition] of Object.entries(activities)) {
+    const button = root.querySelector(definition.selector);
+    const control = activityControl(activity, snapshot);
+    button.disabled = Boolean(snapshot.saving || snapshot.loadingStatus || !snapshot.status);
+    button.textContent = control.label;
+    button.dataset.actionTone = control.tone;
+  }
+}

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

@@ -0,0 +1,37 @@
+/** Event-driven motion gate. No frame loop, model request or refresh timer. */
+export function createAgentMotion(root) {
+  const doc = root.ownerDocument;
+  const agent = root.querySelector("[data-coworker-agent]");
+  const Observer = doc.defaultView?.IntersectionObserver;
+  let inViewport = true;
+  let workspaceVisible = true;
+  let previousObservation;
+  let pulse = false;
+  function sync() {
+    const visible = doc.visibilityState !== "hidden" && workspaceVisible && inViewport;
+    agent?.setAttribute("data-motion", visible ? "on" : "off");
+  }
+  const observer = Observer && agent ? new Observer((entries) => {
+    inViewport = entries.some((entry) => entry.isIntersecting);
+    sync();
+  }) : null;
+  if (agent) observer?.observe(agent);
+  doc.addEventListener?.("visibilitychange", sync);
+  return {
+    update(snapshot) {
+      workspaceVisible = snapshot.learningActive !== false || snapshot.homeActive === true;
+      const observation = snapshot.status?.lastObservationAt;
+      if (previousObservation && observation && previousObservation !== observation) {
+        pulse = !pulse;
+        agent?.setAttribute("data-observation-pulse", pulse ? "a" : "b");
+      }
+      previousObservation = observation;
+      sync();
+    },
+    dispose() {
+      observer?.disconnect();
+      doc.removeEventListener?.("visibilitychange", sync);
+      agent?.setAttribute("data-motion", "off");
+    },
+  };
+}