@abot-ai/runtime 1.6.0 → 1.7.0

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

@@ -1,3 +1,4 @@
+import { createModelPluginViewState } from "./config-workspace/model-plugin-view-state.js";
 import { createConfigCalibrationDisclosure } from "./config-workspace/calibration-disclosure.js";
 import { createConfigDashboardRendering } from "./config-workspace/dashboard-rendering.js";
 import { createConfigFieldRendering } from "./config-workspace/field-rendering.js";
@@ -22,10 +23,12 @@ export {
 export function createConfigWorkspace({
   dom,
   loadDashboard,
+  loadModelPlugins,
   saveFile,
   memorySetup,
   memoryManagement,
   pluginManagement,
+  getOperationsSummary,
   onAddModel,
   onRemoveModel,
   onNavigationChange = () => {},
@@ -35,6 +38,7 @@ export function createConfigWorkspace({
 }) {
   const workspaceModel = createConfigWorkspaceModel();
   const { state } = workspaceModel;
+  const modelPluginViewState = createModelPluginViewState(dom.configDashboard);
   const calibrationDisclosure = createConfigCalibrationDisclosure({
     state,
     root: dom.configDashboard,
@@ -61,6 +65,7 @@ export function createConfigWorkspace({
   });
 
   const modelRendering = createConfigModelRendering({
+    modelPluginViewState,
     state,
     calibrationProfileLabel: fieldRendering.calibrationProfileLabel,
     configFileKey: workspaceModel.configFileKey,
@@ -87,6 +92,7 @@ export function createConfigWorkspace({
   });
 
   const workspaceView = createConfigWorkspaceView({
+    modelPluginViewState,
     onNavigationChange: () => {
       navigationRevision += 1;
       onNavigationChange();
@@ -95,11 +101,10 @@ export function createConfigWorkspace({
     dom,
     eventTarget,
     pluginManagement,
+    getOperationsSummary,
     configFileEntries: workspaceModel.configFileEntries,
     configFileKey: workspaceModel.configFileKey,
-    countObjectKeys: fieldRendering.countObjectKeys,
     dashboardIsBusy: workspaceModel.dashboardIsBusy,
-    dirtyFiles: workspaceModel.dirtyFiles,
     ensureRawSelection: workspaceModel.ensureRawSelection,
     fileStatusText: fieldRendering.fileStatusText,
     hasPendingFileChanges: workspaceModel.hasPendingFileChanges,
@@ -115,6 +120,7 @@ export function createConfigWorkspace({
   });
 
   const workspaceMutations = createConfigWorkspaceMutations({
+    modelPluginViewState,
     state,
     dom,
     confirmDiscard,
@@ -137,6 +143,7 @@ export function createConfigWorkspace({
     state,
     dom,
     loadDashboard,
+    loadModelPlugins,
     saveFile,
     memorySetup,
     memoryManagement,
@@ -160,6 +167,7 @@ export function createConfigWorkspace({
   });
 
   const workspaceEvents = createConfigWorkspaceEvents({
+    modelPluginViewState,
     onAddModel,
     onRemoveModel,
     state,
@@ -190,6 +198,7 @@ export function createConfigWorkspace({
 
   return {
     activeCategory: () => state.activeCategory,
+    syncSummary: workspaceView.syncDashboardSummary,
     setActive: calibrationDisclosure.setActive,
     setWorkspace: (workspace) => {
       const category = configurationCategoryForWorkspace(workspace);

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

@@ -81,6 +81,8 @@ export function createConversationView({
       if (viewState.followMessages) scrollToEnd();
     },
   });
+  let historyPager;
+  let holdingPosition = false;
   const viewState = {
     followMessages: true,
     messageRenderTimer: 0,
@@ -92,7 +94,7 @@ export function createConversationView({
   function updateJumpToLatest() {
     const hasOverflow =
       dom.messagesList.scrollHeight > dom.messagesList.clientHeight + 24;
-    dom.jumpToLatestButton.hidden = viewState.followMessages || !hasOverflow;
+    dom.jumpToLatestButton.hidden = !historyPager?.hasNewer() && (viewState.followMessages || !hasOverflow);
   }
 
   function scrollToEnd() {
@@ -246,7 +248,7 @@ export function createConversationView({
     );
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
-      viewState.followMessages || isNearScrollEnd(dom.messagesList);
+      !holdingPosition && !historyPager?.hasNewer() && (viewState.followMessages || isNearScrollEnd(dom.messagesList));
     const messages = preserveMessageHistory ? getMessages() : projectApprovalContinuations(getMessages());
     conversationReasoning.beginRender(messages);
     messageLinkPreviews.reset();
@@ -265,7 +267,12 @@ export function createConversationView({
     for (const pendingApproval of getPendingApprovals()) {
       dom.messagesList.appendChild(createApprovalCard(pendingApproval));
     }
-    if (scrollBehavior) return scrollBehavior.afterRender();
+    historyPager?.renderControls(dom.messagesList);
+    if (scrollBehavior) {
+      scrollBehavior.afterRender();
+      if (historyPager?.hasNewer()) dom.jumpToLatestButton.hidden = false;
+      return;
+    }
     if (shouldFollow) {
       scrollToEnd();
     } else {
@@ -303,7 +310,23 @@ export function createConversationView({
     viewState.thinkingRenderTimer = 0;
   }
 
+  function preserveScroll(change) {
+    const root = dom.messagesList;
+    const bounds = root.getBoundingClientRect();
+    const anchor = [...root.querySelectorAll("[data-message-id]")].find((node) => node.getBoundingClientRect().bottom > bounds.top);
+    const id = anchor?.dataset.messageId;
+    const offset = anchor?.getBoundingClientRect().top ?? 0;
+    const previousTop = root.scrollTop;
+    holdingPosition = true; viewState.followMessages = false; viewState.scrollSettleVersion += 1;
+    change();
+    const restored = [...root.querySelectorAll("[data-message-id]")].find((node) => node.dataset.messageId === id);
+    root.scrollTop = restored ? root.scrollTop + restored.getBoundingClientRect().top - offset : previousTop;
+    scrollBehavior?.preservePosition?.();
+    updateJumpToLatest();
+  }
+
   function reset() {
+    holdingPosition = false;
     filePreview.reset();
     viewState.followMessages = true;
     viewState.scrollSettleVersion += 1;
@@ -318,19 +341,27 @@ export function createConversationView({
     messageLinkPreviews.reset();
   }
 
+  function jumpToLatest() {
+    if (!historyPager?.hasNewer()) { scrollToEnd(); return; }
+    void historyPager.latest().then(scrollToEnd).catch(() => notify("Could not load latest messages", "failed"));
+  }
+
   function bind() {
     if (viewState.bound) return;
     viewState.bound = true;
-    dom.jumpToLatestButton.addEventListener("click", scrollToEnd);
+    dom.jumpToLatestButton.addEventListener("click", jumpToLatest);
     dom.messagesList.addEventListener("scroll", () => {
+      holdingPosition = false;
       if (scrollBehavior) return;
-      viewState.followMessages = isNearScrollEnd(dom.messagesList);
+      viewState.followMessages = !historyPager?.hasNewer() && isNearScrollEnd(dom.messagesList);
       if (!viewState.followMessages) viewState.scrollSettleVersion += 1;
       updateJumpToLatest();
     });
   }
 
   return {
+    preserveScroll,
+    setHistoryPager: (pager) => { historyPager = pager; },
     setWorkspace: filePreview.setWorkspace,
     closeFilePreview: filePreview.reset,
     bind,

package/dist/src/web-ui/app/components/dashboard/recent-conversations.js

@@ -35,6 +35,7 @@ function unreadAvailabilityNotice({ conversations, hasUnavailableReadState }) {
 
 export function renderDashboardConversations({
   sessions = [],
+  overview,
   loading = false,
   error = "",
 }) {
@@ -43,7 +44,7 @@ export function renderDashboardConversations({
     recentConversations: conversations,
     unreadCount,
     hasUnavailableReadState,
-  } = projection;
+  } = { ...projection, ...(overview ? { unreadCount: overview.unreadCount, hasUnavailableReadState: overview.hasUnavailableReadState } : {}) };
   const badge =
     unreadCount > 0 && !hasUnavailableReadState
       ? `<span class="home-unread-count" aria-label="${unreadCount} unread messages">${unreadCount}</span>`

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

@@ -104,7 +104,8 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
     updateLiveRegion(
       conversations,
       renderDashboardConversations({
-        sessions: snapshot.sessions,
+        sessions: snapshot.sessionOverview?.sessions ?? snapshot.sessions,
+        overview: snapshot.sessionOverview,
         loading: snapshot.loadingSessions,
         error: snapshot.sessionsError,
       }),

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

@@ -3,7 +3,6 @@ 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) {
@@ -33,7 +32,6 @@ export function createPassiveLearningHome({
   actions,
   openLearning,
   openSetup = openLearning,
-  openComputerAccess = openSetup,
 }) {
   let root = null;
   let renderedSnapshot = {};
@@ -45,7 +43,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,11 +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;
-    }
     const button = event.target.closest("[data-learning-open]");
     if (!button || !root.contains(button) || button.disabled) return;
     const snapshot = actions?.snapshot?.() ?? renderedSnapshot;
@@ -80,7 +73,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/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 }];
+  });
+}