@abot-ai/runtime 1.6.0 → 1.8.0

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

@@ -0,0 +1,105 @@
+import { formatTime, textOf } from "../lib/text-format.js";
+import { getNumber } from "../lib/event-presentation.js";
+
+export function formatDurationMs(value) {
+  const ms = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(ms) || ms < 0) return "-";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 90) return `${minutes}m`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return `${hours}h`;
+  return `${Math.round(hours / 24)}d`;
+}
+
+export function latestHealthEvent(details) {
+  return [...details].sort(
+    (left, right) => getNumber(right.lastEventAt, 0) - getNumber(left.lastEventAt, 0),
+  )[0];
+}
+
+function unavailableReadValue(read, environmentId, environmentScoped) {
+  if (environmentScoped && read.environmentId !== environmentId) return "Not loaded";
+  if (read.phase === "loading") return "Loading…";
+  if (read.phase === "error") return "Unavailable";
+  if (read.phase !== "ready") return "Not loaded";
+  return null;
+}
+
+function environmentValue(environmentId, source) {
+  const environment = textOf(environmentId) || "Current environment";
+  if (typeof source !== "string" || !source) return environment;
+  return `${environment} · ${source}`;
+}
+
+function runtimeSummary(read, environmentId) {
+  const unavailable = unavailableReadValue(read, environmentId, true);
+  const payload = unavailable ? {} : read.payload;
+  const status = payload.status || {};
+  const uptime = typeof status.uptimeMs === "number" ? formatDurationMs(status.uptimeMs) : "-";
+  return {
+    label: "Runtime · selected environment",
+    items: [
+      { label: "Environment", value: environmentValue(environmentId, payload.source) },
+      { label: "Uptime", value: unavailable || uptime, status: Boolean(unavailable) },
+      { label: "PID", value: unavailable || textOf(status.pid, "-") || "-" },
+      { label: "Node", value: unavailable || textOf(status.node?.version, "-") || "-" },
+    ],
+  };
+}
+
+function logFileAvailability(exists) {
+  if (exists === true) return "Available";
+  if (exists === false) return "Missing";
+  return "-";
+}
+
+function logsSummary(read, environmentId) {
+  const unavailable = unavailableReadValue(read, environmentId, true);
+  const log = unavailable ? {} : read.payload.log || {};
+  return {
+    label: "Logs · selected environment",
+    items: [
+      { label: "Environment", value: environmentValue(environmentId) },
+      { label: "Lines shown", value: unavailable || (Array.isArray(log.lines) ? String(log.lines.length) : "-"), status: Boolean(unavailable) },
+      { label: "Last refreshed", value: unavailable || formatTime(read.refreshedAt) || "-" },
+      { label: "Log file", value: unavailable || logFileAvailability(log.exists) },
+    ],
+  };
+}
+
+function healthValue(ok) {
+  if (ok === true) return "Healthy";
+  if (ok === false) return "Unhealthy";
+  return "-";
+}
+
+function activeStreamCount(payload) {
+  const count = payload.activeStreamingRequests;
+  if (typeof count === "number" && Number.isFinite(count) && count >= 0) return String(count);
+  if (Array.isArray(payload.activeStreamingRequestDetails)) return String(payload.activeStreamingRequestDetails.length);
+  return "-";
+}
+
+function healthSummary(read) {
+  const unavailable = unavailableReadValue(read, undefined, false);
+  const payload = unavailable ? {} : read.payload;
+  const details = Array.isArray(payload.activeStreamingRequestDetails) ? payload.activeStreamingRequestDetails : [];
+  const latest = latestHealthEvent(details);
+  return {
+    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: "Active streams", value: unavailable || activeStreamCount(payload) },
+      { label: "Latest event", value: unavailable || textOf(latest?.lastEventName || latest?.lastEventType, "-") || "-" },
+    ],
+  };
+}
+
+export function projectOperationsSummary(tab, reads, environmentId) {
+  if (tab === "health") return healthSummary(reads.health);
+  if (tab === "logs") return logsSummary(reads.logs, environmentId);
+  return runtimeSummary(reads.runtime, environmentId);
+}

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.js

@@ -1,9 +1,8 @@
-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";
 import { homeActivityStartPatch, readActivityPermissions } from "./activity-controls.js";
-import { computerUpdateNoticeMarkup, renderComputerUpdateNotice } from "./computer-update-notice.js";
 import { macCollectionRestartNoticeMarkup, renderMacCollectionRestartNotice, handleMacCollectionRestartClick } from "./macos-collection-restart-notice.js";
 
 function canStartHomeLearning(snapshot) {
@@ -11,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"
@@ -33,7 +33,6 @@ export function createPassiveLearningHome({
   actions,
   openLearning,
   openSetup = openLearning,
-  openComputerAccess = openSetup,
 }) {
   let root = null;
   let renderedSnapshot = {};
@@ -45,7 +44,7 @@ export function createPassiveLearningHome({
     root?.removeEventListener("click", handleClick);
     root = nextRoot;
     if (!root) return;
-    root.innerHTML = `${computerUpdateNoticeMarkup()}${macCollectionRestartNoticeMarkup()}
+    root.innerHTML = `${macCollectionRestartNoticeMarkup()}
     <div class="home-learning-agent">${agentMarkup({
       compact: true,
       actionMarkup: '<button type="button" class="home-text-button" data-learning-open>Open ABot Spark</button>',
@@ -57,15 +56,14 @@ export function createPassiveLearningHome({
 
   function handleClick(event) {
     if (handleMacCollectionRestartClick(root, event, actions)) return;
-    const update = event.target.closest("[data-learning-open-update]");
-    if (update && root.contains(update)) {
-      openComputerAccess();
-      return;
-    }
     const button = event.target.closest("[data-learning-open]");
     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;
@@ -80,7 +78,6 @@ export function createPassiveLearningHome({
   function render(snapshot) {
     renderedSnapshot = snapshot;
     if (!root) return;
-    renderComputerUpdateNotice(root, snapshot);
     renderMacCollectionRestartNotice(root, snapshot);
     renderAgent(root, snapshot);
     motion?.update(snapshot);

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/configuration-draft.js

@@ -0,0 +1,34 @@
+import { clearPluginSecretInputs } from "./configuration-fields.js";
+
+/** Keep the actual controls mounted; never copy entered passwords into state. */
+export function createPluginConfigurationDraft() {
+  let fields = null;
+  let owner = null;
+  function clear() {
+    clearPluginSecretInputs(fields);
+    fields = null;
+    owner = null;
+  }
+  function capture(root, review, busy) {
+    if (busy || !review || owner !== review) {
+      clear();
+      return;
+    }
+    fields =
+      root?.querySelector("[data-plugin-configuration-fields]") || fields;
+  }
+  function restore(root, review, busy) {
+    if (busy || !review) {
+      clear();
+      return;
+    }
+    const replacement = root.querySelector(
+      "[data-plugin-configuration-fields]",
+    );
+    if (owner === review && fields && replacement)
+      replacement.replaceWith(fields);
+    fields = root.querySelector("[data-plugin-configuration-fields]");
+    owner = review;
+  }
+  return { capture, restore, clear };
+}

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

@@ -0,0 +1,147 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import {
+  bindPluginConfigurationFields,
+  clearPluginSecretInputs,
+  readPluginConfigurationFields,
+  renderPluginConfigurationFields,
+} from "./configuration-fields.js";
+
+/** A mounted dialog preserves password controls across dashboard rerenders. */
+export function createPluginConfigurationEditor({
+  loadConfiguration,
+  saveConfiguration,
+  getEnvironmentId,
+  beginRuntimeMutation,
+  endRuntimeMutation,
+  onConfigurationSaved,
+  onClosed = () => {},
+}) {
+  let dialog = null;
+  let busy = false;
+  let configuration = null;
+  let environment = "";
+  let generation = 0;
+
+  function close() {
+    if (busy || !dialog) return false;
+    generation += 1;
+    clearPluginSecretInputs(dialog);
+    dialog.close?.();
+    dialog.remove();
+    dialog = null;
+    configuration = null;
+    endRuntimeMutation();
+    onClosed();
+    return true;
+  }
+
+  function message(text, failed = false) {
+    const status = dialog?.querySelector("[data-plugin-configuration-status]");
+    if (!status) return;
+    status.textContent = text;
+    status.className = failed ? "error-text" : "";
+  }
+
+  function setBusy(value) {
+    busy = value;
+    const fields = dialog?.querySelector("fieldset");
+    if (fields) fields.disabled = value;
+    for (const button of dialog?.querySelectorAll("button") || [])
+      button.disabled = value;
+  }
+
+  async function save() {
+    if (busy || !configuration) return false;
+    if (environment !== getEnvironmentId()) return false;
+    let input;
+    try {
+      input = readPluginConfigurationFields(dialog, configuration);
+    } catch (error) {
+      message(error.message, true);
+      return false;
+    }
+    setBusy(true);
+    message("Saving…");
+    try {
+      const result = await saveConfiguration(
+        configuration.pluginId,
+        input,
+        environment,
+      );
+      configuration = result.configuration;
+      onConfigurationSaved();
+      message(
+        "Saved. Close this form, then Apply changes to use these values.",
+      );
+      clearPluginSecretInputs(dialog);
+      const fields = dialog.querySelector("[data-plugin-configuration-body]");
+      fields.innerHTML = renderPluginConfigurationFields(configuration);
+      bindPluginConfigurationFields(fields.querySelector("fieldset"), () =>
+        message("Unsaved changes. Save to keep them."),
+      );
+      return true;
+    } catch (error) {
+      // Do not project transport payloads or an entered password into HTML or logs.
+      clearPluginSecretInputs(dialog);
+      message(
+        error.message || "Plugin configuration could not be saved.",
+        true,
+      );
+      return false;
+    } finally {
+      input = undefined;
+      setBusy(false);
+    }
+  }
+
+  async function open(pluginId, root) {
+    if (dialog || !root?.ownerDocument || !loadConfiguration) return false;
+    if (!beginRuntimeMutation("plugin configuration")) return false;
+    environment = getEnvironmentId();
+    const request = ++generation;
+    dialog = root.ownerDocument.createElement("dialog");
+    dialog.className = "plugin-configuration-dialog";
+    dialog.setAttribute("aria-label", `Configure ${pluginId}`);
+    dialog.innerHTML = `<form><h2 tabindex="-1" autofocus>Configure ${escapeHtml(pluginId)}</h2><div data-plugin-configuration-body></div><p data-plugin-configuration-status role="status" aria-live="polite">Loading…</p><div class="plugin-configuration-actions"><button type="button" data-plugin-configuration-close>Close</button><button type="submit" class="primary-button">Save changes</button></div></form>`;
+    root.ownerDocument.body.append(dialog);
+    dialog.querySelector("form").addEventListener("submit", (event) => {
+      event.preventDefault();
+      void save();
+    });
+    dialog
+      .querySelector("[data-plugin-configuration-close]")
+      .addEventListener("click", close);
+    dialog.addEventListener("cancel", (event) => {
+      event.preventDefault();
+      close();
+    });
+    dialog.showModal();
+    setBusy(true);
+    try {
+      const result = await loadConfiguration(pluginId, environment);
+      if (request !== generation || environment !== getEnvironmentId())
+        return false;
+      configuration = result.configuration;
+      const fields = dialog.querySelector("[data-plugin-configuration-body]");
+      fields.innerHTML = renderPluginConfigurationFields(configuration);
+      bindPluginConfigurationFields(fields.querySelector("fieldset"), () =>
+        message("Unsaved changes. Save to keep them."),
+      );
+      message(
+        "Changes take effect after Apply. Clearing a required key prevents the plugin from loading until it is configured again.",
+      );
+      return true;
+    } catch (error) {
+      message(
+        error.message || "Plugin configuration could not be loaded.",
+        true,
+      );
+      return false;
+    } finally {
+      setBusy(false);
+      if (environment !== getEnvironmentId()) close();
+    }
+  }
+
+  return { open, close, save, isOpen: () => Boolean(dialog) };
+}