@abot-ai/runtime 1.3.1 → 1.5.0

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

@@ -0,0 +1,60 @@
+function quota(key, title, note) {
+  return `<div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>${title}</span><small>${note}</small></div><span class="co-worker-usage-value" data-learning-usage-value="${key}">—</span></div>
+    <div class="co-worker-usage-meter" data-learning-usage-meter="${key}" role="progressbar" aria-label="${title}" aria-valuemin="0" hidden><span></span></div></div>`;
+}
+
+export function learningUsageMarkup() {
+  return `<section class="co-worker-usage" data-learning-usage aria-label="ABot Spark resource use">
+    <div class="co-worker-usage-header"><div><h4>Today's resource use</h4><p data-learning-usage-reset>Waiting for usage…</p></div><button type="button" data-learning-open-settings>Edit limits</button></div>
+    ${quota("model", "Model calls", "Learning and proactive reviews. Failed attempts count too.")}
+    ${quota("messages", "Proactive messages", "New conversations started by ABot Spark.")}
+    ${quota("active", "Concurrent model calls", "Local models run one call at a time.")}
+    ${quota("embedding", "Embedding calls", "Separate from the model-call budget.")}
+    ${quota("characters", "Embedding input characters", "The shared daily input allowance.")}
+    ${quota("candidates", "Candidates", "Provisional knowledge, before it becomes memory.")}
+    <div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>Candidate storage limit</span><small>Maximum space available for candidates.</small></div><span class="co-worker-usage-value" data-learning-usage-storage>—</span></div></div>
+    <div class="co-worker-usage-row"><div class="co-worker-usage-heading"><div><span>Pending observations</span><small data-learning-usage-retention>Kept within their retention limit.</small></div><span class="co-worker-usage-value" data-learning-usage-pending>—</span></div></div>
+    <p class="co-worker-setting-note">Usage is reported by the runtime. No model calls are made to display these counters.</p>
+  </section>`;
+}
+
+const count = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+const format = (value) => new Intl.NumberFormat().format(value);
+function bytes(value) {
+  return value >= 1048576 ? `${format(value / 1048576)} MiB` : `${format(value / 1024)} KiB`;
+}
+
+export function renderResourceUsage(root, snapshot) {
+  const container = root.matches?.("[data-learning-usage]") ? root : root.querySelector("[data-learning-usage]");
+  if (!container) return;
+  const status = snapshot.status, preferences = status?.preferences || {};
+  const usage = status?.resourceUsage, limits = preferences.resourceLimits || {}, maturation = preferences.maturation || {};
+  const text = (selector, value) => { const element = container.querySelector(selector); if (element.textContent !== value) element.textContent = value; };
+  function showQuota(key, used, maximum) {
+    const current = count(used), cap = count(maximum);
+    text(`[data-learning-usage-value="${key}"]`, current === null ? `Count unavailable · limit ${format(cap ?? 0)}` : `${format(current)} / ${format(cap ?? 0)}`);
+    const meter = container.querySelector(`[data-learning-usage-meter="${key}"]`);
+    meter.hidden = current === null || !cap;
+    if (meter.hidden) { meter.removeAttribute("aria-valuenow"); return; }
+    meter.setAttribute("aria-valuemax", String(cap)); meter.setAttribute("aria-valuenow", String(Math.min(current, cap)));
+    meter.setAttribute("aria-valuetext", `${format(current)} of ${format(cap)}`);
+    meter.setAttribute("style", `--co-worker-usage: ${Math.min(1, current / cap)}`);
+  }
+  showQuota("model", usage?.modelCalls, limits.modelCallsPerDay ?? 24);
+  showQuota("messages", status?.proactive?.deliveredToday, preferences.proactiveMessagesPerDay ?? 2);
+  showQuota("active", usage?.activeCalls, preferences.maxConcurrentBatches ?? limits.maxConcurrentCalls ?? 1);
+  showQuota("embedding", usage?.embeddingCalls, limits.embeddingCallsPerDay ?? 96);
+  showQuota("characters", usage?.embeddingCharacters, limits.embeddingCharactersPerDay ?? 1048576);
+  const candidates = snapshot.loadingCandidates || snapshot.candidateError || !Array.isArray(snapshot.candidates) ? undefined : snapshot.candidates.length;
+  showQuota("candidates", candidates, maturation.maxCandidates ?? 500);
+  text("[data-learning-usage-storage]", `Up to ${bytes(maturation.maxBytes ?? 2097152)}`);
+  text("[data-learning-usage-pending]", count(status?.pendingObservations) === null ? "—" : format(status.pendingObservations));
+  text("[data-learning-usage-retention]", `Kept for up to ${format(status?.retentionHours ?? 24)} hours from collection.`);
+  let reset = "Current usage is unavailable.";
+  if (usage && Number.isFinite(usage.resetsAt)) {
+    const zone = usage.timeZone || limits.timeZone || "UTC";
+    try { reset = `Next reset ${new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", timeZone: zone }).format(usage.resetsAt)} · ${zone}`; }
+    catch { reset = `Next reset ${new Date(usage.resetsAt).toISOString()}`; }
+  }
+  text("[data-learning-usage-reset]", reset);
+}

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

@@ -0,0 +1,67 @@
+import { agentMarkup } from "./agent-view.js";
+import { learningSettingsMarkup } from "./settings-view.js";
+import { learningKnowledgeMarkup } from "./knowledge-view.js";
+import { learningUsageMarkup } from "./usage-view.js";
+import { learningApplicationsMarkup } from "./applications-view.js";
+import { computerUpdateNoticeMarkup } from "./computer-update-notice.js";
+import { macCollectionRestartNoticeMarkup } from "./macos-collection-restart-notice.js";
+
+const sections = ["insights", "activity", "applications", "settings", "usage"];
+const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", settings: "Settings", usage: "Resources" };
+
+export function learningWorkspaceMarkup(timeZone) {
+  const tabs = sections.map((key, index) => `<button type="button" role="tab" id="learning-${key}-tab" data-learning-tab="${key}" aria-controls="learning-${key}-panel" aria-selected="${index === 0}" tabindex="${index === 0 ? "0" : "-1"}">${labels[key]}</button>`).join("");
+  return `<section class="passive-learning-card co-worker-workspace" aria-label="ABot Spark">
+    ${computerUpdateNoticeMarkup()}
+    ${macCollectionRestartNoticeMarkup()}
+    ${agentMarkup()}
+    <div class="co-worker-quick-controls">
+      <p class="passive-learning-schedule-summary" data-learning-schedule-summary></p>
+      <div class="passive-learning-control-actions"><button type="button" data-learning-toggle disabled>Start collection</button><button type="button" data-learning-processing-toggle disabled>Pause processing</button><button type="button" data-learning-proactive-toggle disabled>Enable proactive mode</button></div>
+    </div>
+    <div class="passive-learning-attention" data-learning-attention role="status" hidden><p data-learning-attention-text></p><button type="button" data-learning-open-setup hidden>Connect computer</button></div>
+    <p class="passive-learning-feedback" data-learning-feedback role="status" aria-live="polite"></p>
+    <div class="co-worker-proposals" data-learning-proposals></div>
+    <div class="passive-learning-tabs" role="tablist" aria-label="ABot Spark views">${tabs}</div>
+    <section class="passive-learning-panel" id="learning-insights-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-insights-tab" data-learning-panel="insights">${learningKnowledgeMarkup()}</section>
+    <section class="passive-learning-panel" id="learning-activity-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-activity-tab" data-learning-panel="activity" hidden>
+      <div class="passive-learning-section-heading"><div><h4>Activity</h4><p>What was collected and how each review turned out.</p></div><button type="button" data-learning-refresh>Refresh</button></div>
+      <div class="co-worker-activity-overview"><p data-learning-processing-status></p>
+        <dl class="passive-learning-facts"><div><dt>Last collected</dt><dd data-learning-observation>—</dd></div><div data-learning-pending-fact><dt>Pending observations</dt><dd><span data-learning-pending>—</span><span class="co-worker-processing-badge" data-learning-processing-badge role="status" hidden>Processing now</span></dd></div><div><dt>Analysis</dt><dd data-learning-analysis>—</dd></div></dl>
+        <div class="passive-learning-pending-controls"><p class="passive-learning-hint" data-learning-retention></p><button type="button" data-learning-clear-pending disabled>Delete pending…</button></div>
+        <details class="passive-learning-diagnostics" data-learning-diagnostics hidden><summary>Technical details</summary><dl class="passive-learning-diagnostic-list" data-learning-reason></dl></details>
+      </div>
+      <div class="passive-learning-review-layout"><div class="passive-learning-detail" data-learning-detail hidden></div><section class="passive-learning-review-list" aria-label="Recent reviews"><h5>Recent reviews</h5><div class="passive-learning-batches" data-learning-batches></div></section></div>
+    </section>
+    <section class="passive-learning-panel" id="learning-applications-panel" role="tabpanel" tabindex="0" aria-labelledby="learning-applications-tab" data-learning-panel="applications" hidden>${learningApplicationsMarkup()}</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>
+        <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>
+    </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>`;
+}
+
+export function selectLearningView(root, view, focus = false) {
+  if (!sections.includes(view)) return;
+  for (const section of sections) {
+    const selected = section === view;
+    const tab = root.querySelector(`[data-learning-tab="${section}"]`);
+    tab.setAttribute("aria-selected", String(selected));
+    tab.setAttribute("tabindex", selected ? "0" : "-1");
+    root.querySelector(`[data-learning-panel="${section}"]`).hidden = !selected;
+    if (selected && focus) tab.focus();
+  }
+}
+
+export function navigateLearningTabs(root, event) {
+  const tab = event.target.closest("[data-learning-tab]");
+  if (!tab) return;
+  const index = sections.indexOf(tab.dataset.learningTab);
+  const destinations = { ArrowRight: (index + 1) % sections.length, ArrowLeft: (index + sections.length - 1) % sections.length, Home: 0, End: sections.length - 1 };
+  if (!(event.key in destinations)) return;
+  event.preventDefault();
+  selectLearningView(root, sections[destinations[event.key]], true);
+}

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

@@ -0,0 +1,200 @@
+import { renderPluginManager } from "./rendering.js";
+import { createPluginViewState } from "./view-state.js";
+
+export function createPluginManager({
+  loadPlugins,
+  getEnvironmentId = () => "",
+  setPlugin,
+  beginRuntimeMutation = () => true,
+  refreshRuntimeConfig = async () => true,
+  endRuntimeMutation = () => {},
+  recordControlEvent = () => {},
+  onConfigurationSaved = () => {},
+}) {
+  const viewState = createPluginViewState();
+  const state = {
+    root: null,
+    snapshot: null,
+    busy: false,
+    message: "",
+    error: "",
+    loadGeneration: 0,
+    mutationGeneration: 0,
+    environmentId: getEnvironmentId(),
+  };
+
+  function render({ capture = true } = {}) {
+    if (!state.root) return;
+    if (capture) viewState.capture(state.root);
+    state.root.innerHTML = renderPluginManager({
+      ...state,
+      openPluginIds: viewState.openPluginIds,
+    });
+    viewState.bind(state.root, () => render({ capture: false }));
+    state.root
+      .querySelector("[data-plugin-refresh]")
+      ?.addEventListener("click", load);
+    for (const button of state.root.querySelectorAll("[data-plugin-toggle]")) {
+      button.addEventListener("click", () =>
+        toggle(
+          button.dataset.pluginToggle,
+          button.dataset.pluginEnabled === "true",
+        ),
+      );
+    }
+    for (const input of state.root.querySelectorAll(
+      "[data-plugin-capability-toggle]",
+    )) {
+      input.addEventListener("change", () =>
+        toggle(
+          input.dataset.pluginParent,
+          input.checked,
+          input.dataset.pluginCapabilityToggle,
+        ),
+      );
+    }
+    viewState.restore(state.root, state.busy);
+  }
+
+  function mount(root) {
+    viewState.capture(state.root);
+    state.root = root;
+    render();
+  }
+
+  function isLatestPluginLoad(generation) {
+    if (generation !== state.loadGeneration) return false;
+    return state.environmentId === getEnvironmentId();
+  }
+
+  async function load() {
+    const environmentId = getEnvironmentId();
+    if (state.environmentId !== environmentId) {
+      state.environmentId = environmentId;
+      viewState.reset();
+      state.mutationGeneration += 1;
+      state.snapshot = null;
+      state.message = "";
+    }
+    const generation = ++state.loadGeneration;
+    state.busy = true;
+    state.error = "";
+    render();
+    try {
+      const snapshot = await loadPlugins();
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = snapshot;
+      return true;
+    } catch (error) {
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = null;
+      state.error = error instanceof Error ? error.message : String(error);
+      return false;
+    } finally {
+      if (isLatestPluginLoad(generation)) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  function isCurrentPluginMutation(generation, environmentId) {
+    if (generation !== state.mutationGeneration) return false;
+    return environmentId === getEnvironmentId();
+  }
+
+  function markApplied() {
+    state.message = "Plugin selection applied to this environment.";
+    state.error = "";
+    render();
+  }
+
+  function canChangePluginSelection(pluginId, capabilityId) {
+    const plugin = state.snapshot?.plugins?.find(
+      (entry) => entry.id === pluginId,
+    );
+    if (!plugin || plugin.blockedByGlobalPolicy) return false;
+    if (!capabilityId) return true;
+    if (plugin.pluginEnabled === false) return false;
+    const capability = plugin.capabilities?.find(
+      (entry) => entry.id === capabilityId,
+    );
+    if (!capability) return false;
+    return capability.blockedByPolicy !== true;
+  }
+
+  async function toggle(pluginId, enabled, capabilityId) {
+    if (state.busy) return false;
+    if (!canChangePluginSelection(pluginId, capabilityId)) return false;
+    if (!beginRuntimeMutation("plugin settings")) {
+      render();
+      return false;
+    }
+    ++state.loadGeneration;
+    const generation = ++state.mutationGeneration;
+    const environmentId = getEnvironmentId();
+    state.busy = true;
+    state.error = "";
+    state.message = "";
+    let saved = false;
+    render();
+    try {
+      const snapshot = await setPlugin({
+        pluginId,
+        enabled,
+        ...(capabilityId ? { capabilityId } : {}),
+      });
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      state.snapshot = snapshot;
+      saved = true;
+      onConfigurationSaved();
+      state.message =
+        "Plugin selection saved. Apply changes or restart Runtime to use it.";
+      recordControlEvent({
+        type: "control",
+        name: "Plugin selection saved",
+        tone: "done",
+        summary: `${capabilityId ? `${pluginId}:${capabilityId}` : pluginId}: saved; Runtime application required`,
+      });
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin selection saved; refresh required",
+      );
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      if (!refreshed) {
+        state.message =
+          "Plugin selection saved. Refresh configuration before making more changes. Runtime application is still required.";
+      }
+      return true;
+    } catch (error) {
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      const message = error instanceof Error ? error.message : String(error);
+      state.error = saved
+        ? `Plugin selection saved; configuration refresh failed: ${message}`
+        : message;
+      recordControlEvent({
+        type: "control",
+        name: saved
+          ? "Plugin selection refresh failed"
+          : "Plugin selection failed",
+        tone: "failed",
+        summary: state.error,
+      });
+      return false;
+    } finally {
+      endRuntimeMutation();
+      if (generation === state.mutationGeneration) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  return {
+    load,
+    markApplied,
+    mount,
+    toggle,
+    toggleCapability: (pluginId, capabilityId, enabled) =>
+      toggle(pluginId, enabled, capabilityId),
+  };
+}

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

@@ -0,0 +1,124 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function pluginMasterIsEnabled(plugin) {
+  if (typeof plugin.pluginEnabled === "boolean") return plugin.pluginEnabled;
+  return plugin.selectedCapabilityCount > 0;
+}
+
+function configuredPluginLabel(plugin) {
+  if (!pluginMasterIsEnabled(plugin)) return "Configured off";
+  if (plugin.selectedCapabilityCount === 0) return "No tools selected";
+  if (plugin.state === "partial") return "Partially selected";
+  return "Configured on";
+}
+
+function capabilityBlockReason(plugin, capability) {
+  if (capability.blockedReason) return capability.blockedReason;
+  if (plugin.blockedByGlobalPolicy)
+    return "Blocked by the global plugin policy.";
+  if (!pluginMasterIsEnabled(plugin))
+    return "Enable this plugin before changing individual tools.";
+  if (capability.blockedByPolicy)
+    return "Blocked by an existing plugin policy rule.";
+  return "";
+}
+
+function renderCapabilityRow(plugin, capability, busy) {
+  const reason = capabilityBlockReason(plugin, capability);
+  const blocked = Boolean(reason);
+  const reasonId = `plugin-tool-policy-${encodeURIComponent(plugin.id)}-${encodeURIComponent(capability.id)}`;
+  const enabled = capability.enabled === true && !blocked;
+  return `<li class="plugin-capability-row">
+    <div class="plugin-capability-copy"><code>${escapeHtml(capability.id)}</code>
+      <p class="plugin-capability-description" title="${escapeAttribute(capability.description || "No description provided.")}">${escapeHtml(capability.description || "No description provided.")}</p>
+      ${reason ? `<p class="plugin-capability-policy" id="${escapeAttribute(reasonId)}">${escapeHtml(reason)}</p>` : ""}
+    </div>
+    <label class="plugin-capability-switch">
+      <input type="checkbox" role="switch" data-plugin-capability-toggle="${escapeAttribute(capability.id)}" data-plugin-parent="${escapeAttribute(plugin.id)}"
+        aria-label="${escapeAttribute(`${capability.id} in ${plugin.id}`)}" ${reason ? `aria-describedby="${escapeAttribute(reasonId)}"` : ""}
+        ${enabled ? "checked" : ""} ${busy || blocked ? "disabled" : ""} />
+      <span aria-hidden="true"></span>
+    </label>
+  </li>`;
+}
+
+function renderCapabilities(plugin, busy, open) {
+  const capabilities = plugin.capabilities || [];
+  const panelId = `plugin-tools-${encodeURIComponent(plugin.id)}`;
+  return `<section class="plugin-tools-panel" id="${escapeAttribute(panelId)}" data-plugin-tools-panel="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Tools in ${plugin.id}`)}" ${open ? "" : "hidden"}>
+    <header class="plugin-tools-heading">
+      <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>
+    <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>
+  </section>`;
+}
+
+function renderPluginCard(plugin, busy, openPluginIds) {
+  const toolsOpen = openPluginIds.has(plugin.id);
+  const selected = pluginMasterIsEnabled(plugin);
+  const disabled = busy || plugin.blockedByGlobalPolicy;
+  const action = selected ? "Disable" : "Enable";
+  return `
+    <article class="plugin-card" data-plugin-id="${escapeAttribute(plugin.id)}">
+      <div class="plugin-card-front" data-plugin-card-front="${escapeAttribute(plugin.id)}" ${toolsOpen ? 'inert aria-hidden="true"' : ""}>
+      <div class="plugin-card-heading">
+        <div>
+          <h3 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h3>
+          ${plugin.version ? `<span class="plugin-version">v${escapeHtml(plugin.version)}</span>` : ""}
+        </div>
+        <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>
+      <div class="plugin-card-footer">
+        <span>${plugin.selectedCapabilityCount} of ${plugin.capabilityCount} capabilities selected</span>
+        <button type="button" data-plugin-toggle="${escapeAttribute(plugin.id)}" data-plugin-enabled="${selected ? "false" : "true"}"
+          aria-label="${escapeAttribute(`${action} ${plugin.id}`)}" ${disabled ? "disabled" : ""}>${action}</button>
+      </div>
+      <button type="button" class="plugin-tools-open" data-plugin-tools-open="${escapeAttribute(plugin.id)}" aria-controls="${escapeAttribute(`plugin-tools-${encodeURIComponent(plugin.id)}`)}" aria-expanded="${toolsOpen}" aria-label="${escapeAttribute(`Manage tools in ${plugin.id}`)}">
+        <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 7h9m4 0h3M4 17h3m4 0h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>
+        <span>Manage tools</span>
+        <span class="plugin-tools-count" aria-hidden="true">${plugin.capabilityCount}</span>
+      </button>
+      </div>
+      ${renderCapabilities(plugin, busy, toolsOpen)}
+    </article>`;
+}
+
+function globalPolicyMessage(selection) {
+  if (selection?.enabled === false) {
+    return "Plugins are disabled globally. Turn on plugins.enabled in the runtime configuration file before enabling individual plugins.";
+  }
+  if (selection?.deny?.includes("*")) {
+    return "The global deny rule blocks every plugin. Review plugins.deny in the runtime configuration file before enabling individual plugins.";
+  }
+  return "";
+}
+
+export function renderPluginManager({
+  snapshot,
+  busy,
+  message,
+  error,
+  openPluginIds = new Set(),
+}) {
+  const plugins = snapshot?.plugins || [];
+  const globalMessage = globalPolicyMessage(snapshot?.selection);
+  const status = error || message;
+  return `
+    <section class="plugin-manager" aria-label="Installed plugins" aria-busy="${busy ? "true" : "false"}">
+      <div class="plugin-manager-heading">
+        <div>
+          <h2>Installed plugins</h2>
+          <p>Choose the tools available to your agent. Open Tools to control individual tools within each plugin.</p>
+        </div>
+        <button type="button" data-plugin-refresh ${busy ? "disabled" : ""}>Refresh plugins</button>
+      </div>
+      <p class="plugin-application-note">This list shows saved configuration. Apply changes or restart Runtime to use a new selection.</p>
+      ${globalMessage ? `<p class="plugin-policy-note">${escapeHtml(globalMessage)}</p>` : ""}
+      <div class="plugin-manager-status ${error ? "error-text" : ""}" role="${error ? "alert" : "status"}" aria-live="polite">${escapeHtml(status)}</div>
+      ${plugins.length ? `<div class="plugin-grid">${plugins.map((plugin) => renderPluginCard(plugin, busy, openPluginIds)).join("")}</div>` : `<div class="empty-state compact">${busy ? "Loading installed plugins..." : "No installed plugins found."}</div>`}
+    </section>`;
+}

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

@@ -0,0 +1,123 @@
+/** Card view, keyboard position and list scroll survive configuration refreshes. */
+export function createPluginViewState() {
+  const openPluginIds = new Set();
+  const toolScrollPositions = new Map();
+  let focusedControl = null;
+  let scrollPosition = null;
+
+  function controlIdentity(element) {
+    if (!element?.dataset) return null;
+    if (element.dataset.pluginCapabilityToggle) {
+      return { kind: "capability", pluginId: element.dataset.pluginParent, capabilityId: element.dataset.pluginCapabilityToggle };
+    }
+    if (element.dataset.pluginToggle) return { kind: "plugin", pluginId: element.dataset.pluginToggle };
+    if (element.dataset.pluginToolsOpen) return { kind: "open", pluginId: element.dataset.pluginToolsOpen };
+    if (element.dataset.pluginToolsBack) return { kind: "back", pluginId: element.dataset.pluginToolsBack };
+    if (Object.hasOwn(element.dataset, "pluginRefresh")) return { kind: "refresh" };
+    return null;
+  }
+
+  function rememberScroll(root) {
+    if (scrollPosition) return;
+    const viewport = root.closest?.(".config-workspace-body");
+    if (viewport) scrollPosition = { viewport, top: viewport.scrollTop };
+  }
+
+  function captureToolScroll(root) {
+    for (const list of root.querySelectorAll("[data-plugin-tools-scroll]")) {
+      const pluginId = list.dataset.pluginToolsScroll;
+      if (!openPluginIds.has(pluginId)) continue;
+      toolScrollPositions.set(pluginId, list.scrollTop);
+    }
+  }
+
+  function capture(root) {
+    if (!root || root.isConnected === false) return;
+    captureToolScroll(root);
+    const active = root.ownerDocument?.activeElement;
+    if (root.contains?.(active)) {
+      focusedControl = controlIdentity(active);
+      if (focusedControl) rememberScroll(root);
+      return;
+    }
+    if (!active || active === root.ownerDocument?.body) return;
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  function matchesIdentity(element, identity) {
+    const candidate = controlIdentity(element);
+    if (candidate?.kind !== identity.kind) return false;
+    if (candidate.pluginId !== identity.pluginId) return false;
+    return candidate.capabilityId === identity.capabilityId;
+  }
+
+  function restoreScrollPosition() {
+    if (!scrollPosition) return;
+    if (scrollPosition.viewport.isConnected === false) return;
+    scrollPosition.viewport.scrollTop = scrollPosition.top;
+  }
+
+  function restoreToolScroll(root) {
+    for (const list of root.querySelectorAll("[data-plugin-tools-scroll]")) {
+      list.scrollTop = toolScrollPositions.get(list.dataset.pluginToolsScroll) || 0;
+    }
+  }
+
+  function isCardNavigationFocus() {
+    return ["open", "back"].includes(focusedControl?.kind);
+  }
+
+  function restore(root, busy) {
+    restoreToolScroll(root);
+    if (!focusedControl) return;
+    if (busy && !isCardNavigationFocus()) return;
+    const controls = root.querySelectorAll("[data-plugin-toggle], [data-plugin-capability-toggle], [data-plugin-tools-open], [data-plugin-tools-back], [data-plugin-refresh]");
+    let target = [...controls].find((element) => matchesIdentity(element, focusedControl));
+    if (target?.disabled) {
+      target = [...controls].find((element) => element.dataset.pluginToolsBack === focusedControl.pluginId);
+    }
+    if (!target || target.closest?.("[inert]")) return;
+    if (target.closest?.("[hidden]")) return;
+    target.focus?.({ preventScroll: true });
+    restoreScrollPosition();
+    if (root.ownerDocument?.activeElement !== target) return;
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  function changeCardView(root, pluginId, open, onViewChange) {
+    capture(root);
+    rememberScroll(root);
+    if (open) openPluginIds.add(pluginId);
+    else openPluginIds.delete(pluginId);
+    focusedControl = { kind: open ? "back" : "open", pluginId };
+    onViewChange();
+  }
+
+  function bind(root, onViewChange) {
+    for (const button of root.querySelectorAll("[data-plugin-tools-open]")) {
+      button.addEventListener("click", () => changeCardView(root, button.dataset.pluginToolsOpen, true, onViewChange));
+    }
+    for (const button of root.querySelectorAll("[data-plugin-tools-back]")) {
+      button.addEventListener("click", () => changeCardView(root, button.dataset.pluginToolsBack, false, onViewChange));
+    }
+    for (const panel of root.querySelectorAll("[data-plugin-tools-panel]")) {
+      panel.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        changeCardView(root, panel.dataset.pluginToolsPanel, false, onViewChange);
+      });
+    }
+  }
+
+  function reset() {
+    openPluginIds.clear();
+    toolScrollPositions.clear();
+    focusedControl = null;
+    scrollPosition = null;
+  }
+
+  return { bind, capture, openPluginIds, reset, restore };
+}