@abot-ai/runtime 1.5.0 → 1.7.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/agent-state.js

@@ -3,10 +3,6 @@ import { isObservationReviewActive, observationReviewSummary } from "./processin
 
 const failures = new Set(["failed", "unavailable", "disconnected", "permission_required"]);
 
-export function latestVisibleProposal(status) {
-  return [...(status?.proactive?.proposals ?? [])].reverse().find((item) => item.status === "delivered");
-}
-
 function isReviewing(status) {
   if (isObservationReviewActive(status)) return true;
   if (status.reassessment?.state === "reviewing") return true;
@@ -42,7 +38,6 @@ export function coWorkerAgentState(snapshot) {
   if (!status) return { mode: "quiet", label: "Connecting", title: "ABot Spark", description: "Checking the current activity…" };
   if (snapshot.statusError) return { mode: "attention", label: "Connection interrupted", title: "Waiting to reconnect.", description: "The last known activity is shown below. Refresh to check the connection." };
   if (isReviewing(status)) return { mode: "reviewing", label: "Working now", title: "Finding what matters.", description: status.proactive?.state === "reviewing" ? "Considering whether there’s something useful to offer you." : "Reviewing activity and refining what’s worth remembering." };
-  if (latestVisibleProposal(status)) return { mode: "suggestion", label: "Something to share", title: "A thought for your next step.", description: "A conversation is ready. Read it when it suits you." };
   if (hasActivityFailure(status)) return { mode: "attention", label: "Needs attention",
     title: (status.processingReason || status.reason) === "learning_model_request_failed" ? "Let’s check the learning model." : "One activity needs attention.",
     description: hasLearningProcessingFailure(status) ? "Learning could not finish its review. Check learning settings; saved knowledge is still here." : "Your saved knowledge is still here. Check the activity details below." };

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

@@ -1,7 +1,7 @@
 import { coWorkerActivityStates, coWorkerActivityTones, coWorkerAgentState } from "./agent-state.js";
 import { isObservationReviewActive } from "./processing-state.js";
 
-const glyph = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c0 6-3 9-9 9 6 0 9 3 9 9 0-6 3-9 9-9-6 0-9-3-9-9Z"/><path d="M18 3v4m-2-2h4"/></svg>`;
+const glyph = '<img src="/spark-mascot.svg" alt="" width="38" height="38" />';
 
 export function agentMarkup({ compact = false, actionMarkup = "" } = {}) {
   return `<section class="co-worker-agent${compact ? " co-worker-agent-compact" : ""}" data-coworker-agent data-agent-mode="quiet" data-motion="off" aria-label="ABot Spark activity">

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

@@ -1,10 +1,8 @@
 import { hostSetupIsReady } from "../system-host/rendering.js";
 import { agentMarkup, renderAgent } from "./agent-view.js";
 import { createAgentMotion } from "./agent-motion.js";
-import { renderLearningProposals, handleProposalClick } from "./proposal-view.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) {
@@ -34,7 +32,6 @@ export function createPassiveLearningHome({
   actions,
   openLearning,
   openSetup = openLearning,
-  openComputerAccess = openSetup,
 }) {
   let root = null;
   let renderedSnapshot = {};
@@ -46,12 +43,11 @@ 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>',
     })}</div>
-    <div class="co-worker-proposals" data-learning-proposals></div>
     <p class="home-learning-status" data-learning-status hidden></p>`;
     root.addEventListener("click", handleClick);
     motion = createAgentMotion(root);
@@ -59,12 +55,6 @@ 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;
-    }
-    if (handleProposalClick(root, event, actions)) return;
     const button = event.target.closest("[data-learning-open]");
     if (!button || !root.contains(button) || button.disabled) return;
     const snapshot = actions?.snapshot?.() ?? renderedSnapshot;
@@ -83,10 +73,8 @@ export function createPassiveLearningHome({
   function render(snapshot) {
     renderedSnapshot = snapshot;
     if (!root) return;
-    renderComputerUpdateNotice(root, snapshot);
     renderMacCollectionRestartNotice(root, snapshot);
     renderAgent(root, snapshot);
-    renderLearningProposals(root, snapshot, { limit: 1 });
     motion?.update(snapshot);
     root.hidden = false;
     const action = root.querySelector("[data-learning-open]");

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

@@ -10,7 +10,6 @@ import { handleActivityControlClick, renderActivityControls } from "./activity-c
 import { createLearningApplications } from "./applications-view.js";
 import { renderResourceUsage } from "./usage-view.js";
 import { renderLearningKnowledge, handleKnowledgeClick } from "./knowledge-view.js";
-import { renderLearningProposals, handleProposalClick } from "./proposal-view.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 import { learningBatchStatusLabel, renderLearningBatchDetail } from "./batch-detail.js";
 import { learningWorkspaceMarkup, navigateLearningTabs, selectLearningView } from "./workspace-view.js";
@@ -78,7 +77,6 @@ export function createPassiveLearningMemory({
     if (handleActivityControlClick(root, event, actions, () => selectLearningView(root, "settings"))) return;
     if (handleMacCollectionRestartClick(root, event, actions)) return;
     if (handleKnowledgeClick(root, event)) return;
-    if (handleProposalClick(root, event, actions)) return;
     if (event.target.closest("[data-learning-open-settings]")) {
       selectLearningView(root, "settings", true);
       return;
@@ -222,7 +220,6 @@ export function createPassiveLearningMemory({
     renderBatches(snapshot);
     renderBatchDetail(snapshot);
     renderLearningKnowledge(root, snapshot);
-    renderLearningProposals(root, snapshot);
     renderResourceUsage(root, snapshot);
   }
 

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

@@ -47,9 +47,9 @@ export function learningSettingsMarkup(timeZone = "UTC") {
         <p class="co-worker-setting-note">Runs only when there is eligible work. Pausing keeps pending observations within their retention limit.</p>
       </section>
       <section class="co-worker-settings-card" data-learning-settings-axis="proactive">
-        <h4>Proactive mode</h4><p>Start a conversation when there is something useful to offer.</p>
+        <h4>Proactive mode</h4><p>Send a message in SPARK chat when there is something useful to offer.</p>
         ${toggle("proactiveEnabled", "Allow proactive mode", "proactive-enabled")}
-        ${field("proactiveModelProfileId", "Proactive model", { type: "select", legacy: "proactive-model" })}
+        ${field("proactiveModelProfileId", "Chat and proactive model", { type: "select", legacy: "proactive-model" })}
         ${field("proactiveIntervalMinutes", "Check interval (minutes)", { value: 60, max: 1440, legacy: "proactive-interval" })}
         ${windowFields("proactive", timeZone)}
         <p class="co-worker-setting-note">Can use existing knowledge while collection is off. Messages only; actions need your approval.</p>

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

@@ -6,8 +6,8 @@ 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" };
+const sections = ["insights", "activity", "applications", "chat", "settings", "usage"];
+const labels = { insights: "Knowledge", activity: "Activity", applications: "Applications", chat: "Chat", 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("");
@@ -21,7 +21,6 @@ export function learningWorkspaceMarkup(timeZone) {
     </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>
@@ -34,6 +33,7 @@ export function learningWorkspaceMarkup(timeZone) {
       <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-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>

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) };
+}

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

@@ -0,0 +1,103 @@
+import {
+  renderPluginSettings,
+  bindPluginSettingFields,
+  readPluginSettingOverrides,
+} from "./configuration-settings.js";
+import {
+  renderRetainedPluginSecrets,
+  readRetainedPluginSecretClears,
+} from "./configuration-retained-secrets.js";
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function renderSecret(secret, index) {
+  return `<div class="plugin-secret-field">
+    <label><span>${escapeHtml(secret.name)}${secret.required ? " (required)" : ""}</span>
+      <small>${escapeHtml(secret.env)} · ${secret.configured ? "Configured" : "Not configured"}</small>
+      <select data-plugin-secret-action="${index}" aria-label="${escapeAttribute(`Action for ${secret.name}`)}"><option value="keep">Keep current value</option><option value="set">Replace value</option><option value="clear">Clear value</option></select>
+    </label>
+    <input type="password" data-plugin-secret-value="${index}" aria-label="${escapeAttribute(`New value for ${secret.name}`)}" autocomplete="new-password" disabled hidden>
+  </div>`;
+}
+
+export function renderPluginConfigurationFields(configuration, busy = false) {
+  if (!configuration) return "";
+  const entries = Object.entries(configuration.defaults || {});
+  const secrets = configuration.secrets || [];
+  const retained = configuration.retainedSecrets || [];
+  if (!entries.length && !secrets.length && !retained.length) return "";
+  return `<fieldset class="plugin-configuration-fields" data-plugin-configuration-fields ${busy ? "disabled" : ""}>
+    <legend>Configuration</legend>
+    <p>Shared across environments in this ABot installation. Saved values stay local and are retained when the plugin is removed.</p>
+    ${renderPluginSettings(configuration)}
+    ${secrets.map(renderSecret).join("")}
+    ${renderRetainedPluginSecrets(retained)}
+  </fieldset>`;
+}
+
+const boundFields = new WeakSet();
+
+export function bindPluginConfigurationFields(root, onChange = () => {}) {
+  if (!root || boundFields.has(root)) return;
+  boundFields.add(root);
+  bindPluginSettingFields(root, onChange);
+  root?.addEventListener("input", onChange);
+  for (const select of root?.querySelectorAll("[data-plugin-secret-action]") ||
+    []) {
+    select.addEventListener("change", () => {
+      const input = root.querySelector(
+        `[data-plugin-secret-value="${select.dataset.pluginSecretAction}"]`,
+      );
+      input.hidden = select.value !== "set";
+      input.disabled = select.value !== "set";
+      input.required = select.value === "set";
+      if (select.value !== "set") input.value = "";
+      onChange();
+    });
+  }
+}
+
+/** Secrets exist only in password controls and the one outbound save payload. */
+export function readPluginConfigurationFields(
+  root,
+  configuration,
+  requireSecrets = false,
+) {
+  const settings = readPluginSettingOverrides(root, configuration);
+  const secrets = Object.create(null);
+  for (const [index, secret] of (configuration.secrets || []).entries()) {
+    const action =
+      root?.querySelector(`[data-plugin-secret-action="${index}"]`)?.value ||
+      "keep";
+    if (action === "set") {
+      const value = root.querySelector(
+        `[data-plugin-secret-value="${index}"]`,
+      ).value;
+      if (!value.trim()) throw new Error(`Enter a value for ${secret.name}.`);
+      secrets[secret.name] = { action, value };
+      continue;
+    }
+    if (
+      requireSecrets &&
+      secret.required &&
+      (action === "clear" || !secret.configured)
+    )
+      throw new Error(`Configure ${secret.name} before installing.`);
+    if (action === "clear") secrets[secret.name] = { action };
+  }
+  const clearRetainedSecrets = readRetainedPluginSecretClears(
+    root,
+    configuration.retainedSecrets,
+  );
+  return {
+    revision: configuration.revision,
+    settings,
+    secrets,
+    ...(clearRetainedSecrets.length ? { clearRetainedSecrets } : {}),
+  };
+}
+
+export function clearPluginSecretInputs(root) {
+  for (const input of root?.querySelectorAll("[data-plugin-secret-value]") ||
+    [])
+    input.value = "";
+}

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

@@ -0,0 +1,20 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+export function renderRetainedPluginSecrets(secrets = []) {
+  if (!secrets.length) return "";
+  return `<section class="plugin-retained-secrets">
+    <h3>Keys no longer used by this plugin</h3>
+    <p>These saved keys stay on this device until you choose to delete them. Delete an old key before configuring a new key with the same name.</p>
+    ${secrets.map((secret, index) => `<label class="plugin-setting-checkbox"><input type="checkbox" data-plugin-retained-secret="${index}"><span>Delete saved key <strong>${escapeHtml(secret.name)}</strong> <small>${escapeHtml(secret.env)}</small></span></label>`).join("")}
+  </section>`;
+}
+
+export function readRetainedPluginSecretClears(root, secrets = []) {
+  return secrets.flatMap((secret, index) => {
+    const input = root?.querySelector(
+      `[data-plugin-retained-secret="${index}"]`,
+    );
+    if (!input?.checked) return [];
+    return [{ name: secret.name, env: secret.env }];
+  });
+}