@abot-ai/runtime 1.6.0 → 1.7.0

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

@@ -0,0 +1,130 @@
+function isDefinitiveRemovalRejection(error) {
+  if (!(error.status >= 400 && error.status < 500)) return false;
+  return [
+    "plugin_not_removable",
+    "plugin_not_found",
+    "invalid_plugin_configuration",
+    "plugin_selection_conflict",
+    "plugin_mutation_unavailable",
+    "invalid_plugin_removal",
+    "runtime_setup_required",
+    "plugin_removal_unavailable",
+    "request_origin_required",
+    "method_not_allowed",
+    "configuration_request_rejected",
+    "plugin_runtime_busy",
+    "plugin_owner_unavailable",
+  ].includes(error.code);
+}
+
+/** Removal is an explicit local action; busy owners keep their files until a retry. */
+export function createPluginRemoval({
+  removePlugin,
+  getEnvironmentId,
+  beginRuntimeMutation,
+  endRuntimeMutation,
+  refreshRuntimeConfig,
+  onConfigurationSaved,
+  onConfigurationApplied,
+  onConfigurationSettled = () => true,
+  onSnapshot,
+  render,
+  confirmRemoval = (message) => window.confirm(message),
+}) {
+  const state = { busy: false, message: "", error: "" };
+  let environment = getEnvironmentId();
+  let generation = 0;
+  function resetEnvironment() {
+    if (environment === getEnvironmentId()) return;
+    environment = getEnvironmentId();
+    generation += 1;
+    Object.assign(state, { busy: false, message: "", error: "" });
+  }
+  async function remove(pluginId) {
+    resetEnvironment();
+    if (state.busy || !removePlugin) return false;
+    if (
+      !confirmRemoval(
+        `Remove ${pluginId}? This disables the plugin, applies the change when Runtime is idle, and deletes its installed folder. If Runtime is busy, try Remove again after it finishes.`,
+      )
+    )
+      return false;
+    if (!beginRuntimeMutation("plugin removal")) return false;
+    const request = ++generation;
+    const selected = environment;
+    const current = () =>
+      request === generation && selected === getEnvironmentId();
+    Object.assign(state, { busy: true, message: "", error: "" });
+    render();
+    let removed = false;
+    let activated = false;
+    try {
+      const result = await removePlugin({ pluginId }, selected);
+      if (!current()) return false;
+      removed = result.removed === true;
+      onSnapshot(result);
+      state.message = result.message;
+      activated = result.activation?.status === "ready";
+      if (activated) await onConfigurationApplied();
+      else onConfigurationSaved();
+      if (!current()) return false;
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin removal; refresh required",
+      );
+      if (!current()) return false;
+      if (!refreshed)
+        state.error = "Refresh configuration before making more changes.";
+      return removed;
+    } catch (error) {
+      if (!current()) return false;
+      state.error =
+        (removed ? "Plugin removed; refresh failed: " : "") +
+        (error.message || String(error));
+      if (removed || activated) return false;
+      activated = error.payload?.activation?.status === "ready";
+      if (!activated && isDefinitiveRemovalRejection(error)) return false;
+      let projectionRefreshed = true;
+      if (activated) {
+        projectionRefreshed = await Promise.resolve()
+          .then(onConfigurationApplied)
+          .then(
+            () => true,
+            () => false,
+          );
+        if (!current()) return false;
+      }
+      // Apply may have succeeded for an older revision while a newer save is pending.
+      if (!activated || error.code === "config_changed") onConfigurationSaved();
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin removal incomplete; refresh required",
+      ).catch(() => false);
+      if (current() && (!projectionRefreshed || !refreshed))
+        state.error += " Refresh configuration before making more changes.";
+      return false;
+    } finally {
+      endRuntimeMutation();
+      if (current()) state.busy = false;
+      if (activated && current()) {
+        try {
+          if (onConfigurationSettled() === false)
+            state.error = [
+              state.error,
+              "Finish your current edits, then refresh configuration to update environments.",
+            ]
+              .filter(Boolean)
+              .join(" ");
+        } catch {
+          state.error = [
+            state.error,
+            "Refresh configuration to update environments.",
+          ]
+            .filter(Boolean)
+            .join(" ");
+        }
+      }
+      if (current()) render();
+    }
+  }
+
+  return { state, remove, resetEnvironment };
+}

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

@@ -56,7 +56,13 @@ function renderCapabilities(plugin, busy, open) {
   </section>`;
 }
 
-function renderPluginCard(plugin, busy, openPluginIds) {
+function renderPluginCard(
+  plugin,
+  busy,
+  openPluginIds,
+  canRemove,
+  canConfigure,
+) {
   const toolsOpen = openPluginIds.has(plugin.id);
   const selected = pluginMasterIsEnabled(plugin);
   const disabled = busy || plugin.blockedByGlobalPolicy;
@@ -74,8 +80,12 @@ function renderPluginCard(plugin, busy, openPluginIds) {
       <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>
+        <div class="plugin-card-actions">
+        ${canConfigure && plugin.configurable ? `<button type="button" data-plugin-configure="${escapeAttribute(plugin.id)}" ${busy ? "disabled" : ""}>Configure</button>` : ""}
+        ${canRemove && plugin.removable ? `<button type="button" data-plugin-remove="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Remove ${plugin.id}`)}" ${busy ? "disabled" : ""}>Remove</button>` : ""}
         <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>
       </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>
@@ -103,6 +113,8 @@ export function renderPluginManager({
   message,
   error,
   openPluginIds = new Set(),
+  canRemove = false,
+  canConfigure = false,
 }) {
   const plugins = snapshot?.plugins || [];
   const globalMessage = globalPolicyMessage(snapshot?.selection);
@@ -119,6 +131,6 @@ export function renderPluginManager({
       <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>`}
+      ${plugins.length ? `<div class="plugin-grid">${plugins.map((plugin) => renderPluginCard(plugin, busy, openPluginIds, canRemove, canConfigure)).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/summary.js

@@ -0,0 +1,54 @@
+const SUMMARY_LABELS = [
+  "Installed plugins",
+  "Enabled in saved config",
+  "Selected tools (saved)",
+  "Excluded tools (saved)",
+];
+
+function unavailablePluginSummaryValue(state, environmentId) {
+  if (state.environmentId !== environmentId) return "Not loaded";
+  if (state.busy) return "Loading…";
+  if (state.snapshot) return null;
+  if (state.error) return "Unavailable";
+  return "Not loaded";
+}
+
+/** Counts describe the saved catalog selection, never the running Runtime. */
+export function projectPluginSummary(state, environmentId) {
+  const unavailable = unavailablePluginSummaryValue(state, environmentId);
+  if (unavailable) {
+    return {
+      label: "Plugins · saved configuration",
+      items: SUMMARY_LABELS.map((label) => ({
+        label,
+        value: unavailable,
+        status: true,
+      })),
+    };
+  }
+  const plugins = state.snapshot.plugins;
+  const enabled = plugins.filter(
+    (plugin) => plugin.pluginEnabled === true,
+  ).length;
+  const selected = plugins.reduce(
+    (sum, plugin) => sum + plugin.selectedCapabilityCount,
+    0,
+  );
+  const total = plugins.reduce(
+    (sum, plugin) => sum + plugin.capabilityCount,
+    0,
+  );
+  const values = [
+    String(plugins.length),
+    String(enabled),
+    `${selected} / ${total}`,
+    String(total - selected),
+  ];
+  return {
+    label: "Plugins · saved configuration",
+    items: SUMMARY_LABELS.map((label, index) => ({
+      label,
+      value: values[index],
+    })),
+  };
+}

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

@@ -0,0 +1,31 @@
+import { renderPluginDiscovery } from "./discovery-rendering.js";
+const names = ["installed", "discover"];
+
+export function renderPluginTabs(installed, discovery, active = "installed") {
+  const button = (name, label) =>
+    `<button type="button" id="plugin-${name}-tab" class="config-category-tab${active === name ? " active" : ""}" role="tab" data-plugin-tab="${name}" aria-controls="plugin-${name}-panel" aria-selected="${active === name}" tabindex="${active === name ? 0 : -1}">${label}</button>`;
+  return `<div class="plugin-workspace"><nav class="config-category-nav" role="tablist" aria-label="Plugin views">${button("installed", "Installed")}${button("discover", "Discover")}</nav>
+    <div id="plugin-installed-panel" class="config-category-panel" role="tabpanel" aria-labelledby="plugin-installed-tab" tabindex="0"${active === "installed" ? "" : " hidden"}>${installed}</div>
+    <div id="plugin-discover-panel" class="config-category-panel" role="tabpanel" aria-labelledby="plugin-discover-tab" tabindex="0"${active === "discover" ? "" : " hidden"}>${renderPluginDiscovery(discovery)}</div></div>`;
+}
+
+export function bindPluginTabs(root, activate) {
+  for (const button of root.querySelectorAll("[data-plugin-tab]")) {
+    button.addEventListener("click", () =>
+      activate(button.dataset.pluginTab, true),
+    );
+    button.addEventListener("keydown", (event) => {
+      const index = names.indexOf(button.dataset.pluginTab);
+      let target;
+      if (event.key === "ArrowRight")
+        target = names[(index + 1) % names.length];
+      if (event.key === "ArrowLeft")
+        target = names[(index + names.length - 1) % names.length];
+      if (event.key === "Home") target = names[0];
+      if (event.key === "End") target = names.at(-1);
+      if (!target) return;
+      event.preventDefault();
+      activate(target, true);
+    });
+  }
+}

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

@@ -10,6 +10,8 @@ export function createPluginViewState() {
     if (element.dataset.pluginCapabilityToggle) {
       return { kind: "capability", pluginId: element.dataset.pluginParent, capabilityId: element.dataset.pluginCapabilityToggle };
     }
+    if (element.dataset.pluginTab) return { kind: "tab", pluginId: element.dataset.pluginTab };
+    if (element.dataset.pluginRemove) return { kind: "remove", pluginId: element.dataset.pluginRemove };
     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 };
@@ -72,7 +74,7 @@ export function createPluginViewState() {
     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]");
+    const controls = root.querySelectorAll("[data-plugin-tab], [data-plugin-remove], [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);

package/dist/src/web-ui/app/components/runtime-setup/connection-form.js

@@ -25,6 +25,7 @@ export function renderConnectionField({
   value = "",
   placeholder = "",
   help = "",
+  error = "",
   required = true,
   readonly = false,
   min = "",
@@ -32,8 +33,9 @@ export function renderConnectionField({
   idPrefix = "runtimeSetup",
 }) {
   return `<label class="runtime-setup-field"><span>${label}</span>
-    <input type="${type}" data-runtime-setup-field="${field}" value="${escapeAttribute(value)}" placeholder="${escapeAttribute(placeholder)}" autocomplete="${type === "password" ? "new-password" : "off"}" spellcheck="false" ${min ? `min="${escapeAttribute(min)}"` : ""} ${step ? `step="${escapeAttribute(step)}"` : ""} ${required ? "required" : ""} ${readonly ? "readonly" : ""} aria-describedby="${idPrefix}Help-${field}" />
+    <input type="${type}" data-runtime-setup-field="${field}" value="${escapeAttribute(value)}" placeholder="${escapeAttribute(placeholder)}" autocomplete="${type === "password" ? "new-password" : "off"}" spellcheck="false" ${min ? `min="${escapeAttribute(min)}"` : ""} ${step ? `step="${escapeAttribute(step)}"` : ""} ${required ? "required" : ""} ${readonly ? "readonly" : ""} ${error ? 'aria-invalid="true"' : ""} aria-describedby="${idPrefix}Help-${field}${error ? ` ${idPrefix}Error-${field}` : ""}" />
     <small id="${idPrefix}Help-${field}">${help}</small>
+    ${error ? `<small id="${idPrefix}Error-${field}" class="runtime-setup-feedback error" role="alert">${escapeHtml(error)}</small>` : ""}
   </label>`;
 }
 
@@ -60,7 +62,8 @@ export function renderConnectionFields(state) {
       label: "Context window (tokens)",
       type: "number",
       value: state.contextWindowTokens,
-      min: "1",
+      min: state.contextWindowFeedback?.minimumTokens || "1",
+      error: state.contextWindowFeedback?.message,
       step: "1",
       readonly: !canEditSetupConnection(state),
       help: "Use a value supported by your model. Larger windows need more memory with Ollama. You can change this later in Models.",

package/dist/src/web-ui/app/components/runtime-setup/connection-state.js

@@ -1,5 +1,6 @@
 import { textOf } from "../../lib/text-format.js";
 import { normalizeProvider } from "./validation.js";
+import { readSetupContextWindowFeedback } from "./context-window-feedback.js";
 
 export function selectSetupProvider(state, value) {
   const provider = normalizeProvider(value);
@@ -36,7 +37,14 @@ export function setupConnectionSubmitLabel(state, apiKey = "") {
     : "Save connection";
 }
 
-export function setupConnectionSaveError(error) {
+export function receiveSetupConnectionSaveError(state, error) {
+  state.contextWindowFeedback = readSetupContextWindowFeedback(error);
+  state.error = "";
+  if (state.contextWindowFeedback) return;
+  state.error = setupConnectionSaveError(error);
+}
+
+function setupConnectionSaveError(error) {
   if (error?.payload?.error === "setup_configuration_changed")
     return "Your connection changed in another window. Refresh this page before editing it again.";
   return "Could not save your connection. Check the model and connection details, then try again.";

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

@@ -0,0 +1,71 @@
+function hasPositiveContextTokenCount(value) {
+  if (!Number.isSafeInteger(value)) return false;
+  return value > 0;
+}
+
+function hasSupportedContextConstraint(details) {
+  if (details?.field !== "contextWindowTokens") return false;
+  for (const field of ["declaredTokens", "effectiveTokens", "minimumTokens"]) {
+    if (!hasPositiveContextTokenCount(details[field])) return false;
+  }
+  if (!Number.isSafeInteger(details.reservedTokens)) return false;
+  if (details.reservedTokens < 0) return false;
+  if (details.effectiveTokens > details.reservedTokens) return false;
+  if (details.effectiveTokens > details.declaredTokens) return false;
+  if (details.minimumTokens <= details.reservedTokens) return false;
+  if (details.allocationTokens === undefined) return true;
+  if (!hasPositiveContextTokenCount(details.allocationTokens)) return false;
+  return details.effectiveTokens <= details.allocationTokens;
+}
+
+function hasInsufficientContextAllocation(details) {
+  if (details.allocationTokens === undefined) return false;
+  return details.allocationTokens < details.minimumTokens;
+}
+
+function formatContextConstraintMessage(details) {
+  const tokens = (value) => value.toLocaleString("en-US");
+  const capacity = `The effective context window is ${tokens(details.effectiveTokens)} tokens, but the current configuration reserves ${tokens(details.reservedTokens)} tokens.`;
+  const minimum = `Use a context window of at least ${tokens(details.minimumTokens)} tokens supported by your model, or adjust the configured reserves.`;
+  if (!hasInsufficientContextAllocation(details))
+    return `${capacity} ${minimum}`;
+  return `${capacity} ${minimum} The configured Ollama allocation (num_ctx) is ${tokens(details.allocationTokens)} tokens. It must also reach that minimum; increasing this field alone is insufficient.`;
+}
+
+/** Only numeric details from this known contract become user-visible feedback. */
+export function readSetupContextWindowFeedback(error) {
+  if (error?.status !== 400) return null;
+  const payload = error.payload;
+  if (payload?.ok !== false) return null;
+  if (payload.error !== "context_window_too_small") return null;
+  if (!hasSupportedContextConstraint(payload.contextWindow)) return null;
+  return {
+    minimumTokens: payload.contextWindow.minimumTokens,
+    message: formatContextConstraintMessage(payload.contextWindow),
+  };
+}
+
+/** A server constraint belongs to the rejected candidate, never later edits. */
+export function clearSetupContextWindowFeedback(state, container) {
+  if (!state.contextWindowFeedback) return;
+  state.contextWindowFeedback = null;
+  const field = container.querySelector(
+    '[data-runtime-setup-field="context-window"]',
+  );
+  field?.removeAttribute?.("aria-invalid");
+  field?.setAttribute?.("aria-describedby", "runtimeSetupHelp-context-window");
+  field?.setAttribute?.("min", "1");
+  container.querySelector("#runtimeSetupError-context-window")?.remove?.();
+}
+
+export function focusSetupContextWindowFeedback(
+  container,
+  feedback,
+  restoreFocus,
+) {
+  if (!feedback) return;
+  if (!restoreFocus) return;
+  container
+    .querySelector('[data-runtime-setup-field="context-window"]')
+    ?.focus?.();
+}

package/dist/src/web-ui/app/components/runtime-setup/optional-steps.js

@@ -16,6 +16,7 @@ export function createSetupOptionalSteps({
   loadHostConnection,
   connectLocalHost,
   createHostPairing,
+  requestHostStoreConnection,
   requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
@@ -48,6 +49,7 @@ export function createSetupOptionalSteps({
         loadConnection: loadHostConnection,
         connectLocal: connectLocalHost,
         createPairing: createHostPairing,
+        requestStoreConnection: requestHostStoreConnection,
         requestPermissions: requestHostPermissions,
         downloadSetup: downloadHostSetup,
         revokeConnection: revokeHostConnection,

package/dist/src/web-ui/app/components/runtime-setup-guide.js

@@ -13,7 +13,7 @@ import {
   hasSetupConnectionChanges,
   receiveSetupConnection,
   selectSetupProvider,
-  setupConnectionSaveError,
+  receiveSetupConnectionSaveError,
   setupConnectionSubmitLabel,
   updateSetupConnectionField,
 } from "./runtime-setup/connection-state.js";
@@ -23,6 +23,10 @@ import {
   validateConnectionFields,
   showConnectionFieldError,
 } from "./runtime-setup/connection-form.js";
+import {
+  clearSetupContextWindowFeedback,
+  focusSetupContextWindowFeedback,
+} from "./runtime-setup/context-window-feedback.js";
 import {
   DEFAULT_OLLAMA_BASE_URL,
   normalizeProvider,
@@ -48,6 +52,7 @@ export function createRuntimeSetupGuide({
   loadHostConnection,
   connectLocalHost,
   createHostPairing,
+  requestHostStoreConnection,
   requestHostPermissions,
   downloadHostSetup,
   revokeHostConnection,
@@ -82,12 +87,13 @@ export function createRuntimeSetupGuide({
   const optionalSteps = createSetupOptionalSteps({
     container, getEnvironmentId, getPreferredProvider: () => state.provider,
     loadEmbeddingStatus, discoverEmbeddingModels, saveEmbedding, loadPlugins,
-    setPlugin, loadHostConnection, connectLocalHost, createHostPairing, requestHostPermissions, downloadHostSetup, revokeHostConnection,
+    setPlugin, loadHostConnection, connectLocalHost, createHostPairing, requestHostStoreConnection, requestHostPermissions, downloadHostSetup, revokeHostConnection,
     onChange: paint, goToStep,
   });
   const { embedding, plugins, readyStep } = optionalSteps;
 
   function goToStep(step) {
+    clearSetupContextWindowFeedback(state, container);
     state.step = step;
     state.error = "";
     paint({ focus: true });
@@ -100,6 +106,7 @@ export function createRuntimeSetupGuide({
   }
 
   function reset() {
+    clearSetupContextWindowFeedback(state, container);
     revision += 1;
     optionalSteps.reset();
     viewState.reset();
@@ -153,6 +160,7 @@ export function createRuntimeSetupGuide({
 
   async function loadOptions() {
     if (state.loading) return;
+    clearSetupContextWindowFeedback(state, container);
     const operationRevision = ++revision;
     const operationEnvironment = getEnvironmentId();
     state.loading = true;
@@ -217,6 +225,7 @@ export function createRuntimeSetupGuide({
   async function submitConnection() {
     const input = connectionInput();
     if (!input) return;
+    clearSetupContextWindowFeedback(state, container);
     const connectionChanged = hasSetupConnectionChanges(state);
     const operationRevision = ++revision;
     const operationEnvironment = getEnvironmentId();
@@ -247,12 +256,13 @@ export function createRuntimeSetupGuide({
       state.step = 2;
     } catch (error) {
       if (!operationIsCurrent(operationRevision, operationEnvironment)) return;
-      state.error = setupConnectionSaveError(error);
+      receiveSetupConnectionSaveError(state, error);
     } finally {
       delete input.apiKey;
       if (operationIsCurrent(operationRevision, operationEnvironment)) {
         state.saving = false;
         paint({ focus: true });
+        focusSetupContextWindowFeedback(container, state.contextWindowFeedback, viewState.canRestoreFocus());
         if (state.step === 2) void embedding.load();
       }
     }
@@ -392,6 +402,7 @@ export function createRuntimeSetupGuide({
       embedding.input(field.dataset.runtimeSetupField, textOf(field.value));
       return;
     }
+    clearSetupContextWindowFeedback(state, container);
     field.removeAttribute?.("aria-invalid");
     updateSetupConnectionField(
       state,
@@ -420,6 +431,7 @@ export function createRuntimeSetupGuide({
       field?.dataset.runtimeSetupField !== "provider"
     )
       return;
+    clearSetupContextWindowFeedback(state, container);
     selectSetupProvider(state, field.value);
     state.error = "";
     paint();

package/dist/src/web-ui/app/components/spark-chat/empty-state.js

@@ -35,6 +35,7 @@ export function createSparkChatEmptyState({ getConfiguration, onOpenModelSetting
       if (model.needsModel) {
         const action = documentRoot.createElement("button");
         action.setAttribute("type", "button");
+        action.className = "spark-setup-button";
         action.textContent = "Choose model";
         action.addEventListener("click", onOpenModelSettings);
         empty.append(action);

package/dist/src/web-ui/app/components/spark-chat/panel.js

@@ -48,6 +48,7 @@ export function createSparkChatPanel({ documentRoot = document, launcherAnchor }
   dom.launcherButton.insertAdjacentHTML("beforeend", '<span class="spark-launcher-label">SPARK</span>');
   const panel = root.querySelector(".spark-chat-panel");
   const notice = root.querySelector(".spark-message-notice");
+  dom.launcherButton.hidden = true;
   const placement = createSparkChatPlacement({ root, launcher: dom.launcherButton, panel, notice, dockAnchor: launcherSlot });
   dom.launcherButton.title = "Open SPARK · Drag to move · Alt + arrows to move · Alt + Home to return to sidebar";
   let timer;

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

@@ -0,0 +1,35 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function renderComputerMetadata(snapshot, disabled = false) {
+  const identity = snapshot?.identity || {};
+  const os = { windows: "Windows", macos: "macOS", linux: "Linux" }[identity.os] || identity.os;
+  const summary = [identity.name, os, identity.user]
+    .filter((value) => typeof value === "string" && value.length > 0).join(" · ");
+  if (!summary && !snapshot?.paired) return "";
+  return `<div class="system-host-card-computer"><span>${escapeHtml(summary)}</span>${snapshot?.paired ? `<button type="button" data-system-host-revoke title="Disconnect this computer. Saved insights are kept." ${disabled ? "disabled" : ""}>Remove this computer</button>` : ""}</div>`;
+}
+
+function renderConnectionStatus(status, ready, compact = false) {
+  return `<span class="system-host-card-status" role="status" ${compact ? `aria-label="${escapeHtml(status)}"` : ""} data-tone="${ready ? "ready" : "unavailable"}"><i aria-hidden="true"></i>${compact ? "" : escapeHtml(status)}</span>`;
+}
+
+/** Platform actions are supplied by their existing owners; this module renders the shared layout. */
+export function renderConnectionCard({
+  title, status, ready, disabled = false, compact = false, description = "",
+  actions = "", help = "", metadata = "", error = "", message = "", details = "", attributes = "",
+}) {
+  if (compact) return `<section class="system-host-panel system-host-card system-host-card-ready" aria-label="Computer access" ${attributes}>
+    <h2 class="system-host-card-ready-title">${renderConnectionStatus(status, ready, true)}${escapeHtml(title)}</h2>
+    ${metadata}
+    ${details}
+  </section>`;
+  return `<section class="system-host-panel system-host-card" aria-label="Computer access" aria-busy="${disabled ? "true" : "false"}" ${attributes}>
+    <div class="system-host-card-heading"><h2>${escapeHtml(title)}</h2>${renderConnectionStatus(status, ready)}</div>
+    ${description ? `<p class="system-host-card-description">${escapeHtml(description)}</p>` : ""}
+    ${actions ? `<div class="system-host-card-action">${actions}</div>` : ""}
+    ${help ? `<p class="system-host-card-hint">${escapeHtml(help)}</p>` : ""}
+    ${error || message ? `<p class="${error ? "error-text" : "system-host-card-message"}" role="${error ? "alert" : "status"}" aria-live="polite">${escapeHtml(error || message)}</p>` : ""}
+    ${metadata}
+    ${details}
+  </section>`;
+}

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

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