@abot-ai/runtime 1.6.0 → 1.8.0

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

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

@@ -0,0 +1,108 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function renderSetting(name, value, fallback, index, overridden) {
+  const attribute = `data-plugin-setting="${index}" data-plugin-setting-overridden="${overridden}"`;
+  if (typeof fallback === "boolean")
+    return `<label class="plugin-setting-checkbox"><input type="checkbox" ${attribute} ${value ? "checked" : ""}><span>${escapeHtml(name)}</span></label>`;
+  if (typeof fallback === "number")
+    return `<label><span>${escapeHtml(name)}</span><input type="number" step="any" ${attribute} value="${escapeAttribute(String(value))}" required></label>`;
+  if (typeof fallback === "string")
+    return `<label><span>${escapeHtml(name)}</span><input type="text" ${attribute} value="${escapeAttribute(String(value))}" autocomplete="off"></label>`;
+  return `<label><span>${escapeHtml(name)} <small>JSON</small></span><textarea ${attribute} rows="4" spellcheck="false">${escapeHtml(JSON.stringify(value, null, 2))}</textarea></label>`;
+}
+
+export function renderPluginSettings(configuration) {
+  return Object.entries(configuration.defaults || {})
+    .map(([name, fallback], index) => {
+      const overridden = (configuration.settingOverrides || []).includes(name);
+      return `<div class="plugin-setting-field">
+      ${renderSetting(name, configuration.settings[name], fallback, index, overridden)}
+      <div class="plugin-setting-source"><small data-plugin-setting-origin="${index}">${overridden ? "Local value" : "Plugin default"}</small><button type="button" data-plugin-setting-default="${index}" data-plugin-setting-default-value="${escapeAttribute(JSON.stringify(fallback))}" aria-label="${escapeAttribute(`Use plugin default for ${name}`)}">Use plugin default</button></div>
+    </div>`;
+    })
+    .join("");
+}
+
+function markPluginSettingSource(root, input, overridden) {
+  input.dataset.pluginSettingOverridden = String(overridden);
+  const status = root.querySelector(
+    `[data-plugin-setting-origin="${input.dataset.pluginSetting}"]`,
+  );
+  if (status)
+    status.textContent = overridden ? "Local value" : "Plugin default";
+}
+
+function restorePluginSettingDefault(input, fallback) {
+  if (typeof fallback === "boolean") {
+    input.checked = fallback;
+    return;
+  }
+  if (typeof fallback === "object") {
+    input.value = JSON.stringify(fallback, null, 2);
+    return;
+  }
+  input.value = String(fallback);
+}
+
+export function bindPluginSettingFields(root, onChange) {
+  for (const input of root.querySelectorAll("[data-plugin-setting]")) {
+    input.addEventListener("input", () =>
+      markPluginSettingSource(root, input, true),
+    );
+  }
+  for (const button of root.querySelectorAll("[data-plugin-setting-default]")) {
+    button.addEventListener("click", () => {
+      const input = root.querySelector(
+        `[data-plugin-setting="${button.dataset.pluginSettingDefault}"]`,
+      );
+      if (!input) return;
+      const usesPluginDefault =
+        input.dataset.pluginSettingOverridden === "false";
+      if (usesPluginDefault) return;
+      const fallback = JSON.parse(button.dataset.pluginSettingDefaultValue);
+      restorePluginSettingDefault(input, fallback);
+      markPluginSettingSource(root, input, false);
+      onChange();
+    });
+  }
+}
+
+function readSetting(input, fallback, name) {
+  if (typeof fallback === "boolean") return input.checked;
+  if (typeof fallback === "string") return input.value;
+  if (typeof fallback === "number") {
+    if (!input.value.trim() || !Number.isFinite(Number(input.value)))
+      throw new Error(`Enter a number for ${name}.`);
+    return Number(input.value);
+  }
+  try {
+    return JSON.parse(input.value);
+  } catch {
+    throw new Error(`Enter valid JSON for ${name}.`);
+  }
+}
+
+function hasPluginSettingOverride(input, configuration, name) {
+  const edited = input?.dataset?.pluginSettingOverridden;
+  if (edited !== undefined) return edited === "true";
+  return (configuration.settingOverrides || []).includes(name);
+}
+
+export function readPluginSettingOverrides(root, configuration) {
+  return Object.fromEntries(
+    Object.entries(configuration.defaults || {}).flatMap(
+      ([name, fallback], index) => {
+        const input = root?.querySelector(`[data-plugin-setting="${index}"]`);
+        if (!hasPluginSettingOverride(input, configuration, name)) return [];
+        return [
+          [
+            name,
+            input
+              ? readSetting(input, fallback, name)
+              : configuration.settings[name],
+          ],
+        ];
+      },
+    ),
+  );
+}

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

@@ -0,0 +1,45 @@
+import {
+  isPluginPlatformUnavailable,
+  renderPluginPlatformNotice,
+} from "./compatibility.js";
+import { renderPluginConfigurationFields } from "./configuration-fields.js";
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function renderPluginReview(review, busy) {
+  if (!review) return "";
+  const installLabel = isPluginPlatformUnavailable(review.compatibility)
+    ? "Install"
+    : "Install and enable";
+  const installButton = `<button type="button" class="primary-button" data-plugin-install-confirm ${busy ? "disabled" : ""}>${busy ? "Installing…" : installLabel}</button>`;
+  return `<section class="plugin-install-review" aria-label="Plugin installation review">
+    <header class="plugin-install-heading"><div><h3>${escapeHtml(review.id)} ${review.version ? `<small>v${escapeHtml(review.version)}</small>` : ""}</h3><p>Not installed yet.</p></div>${installButton}</header>
+    <p>${escapeHtml(review.description)}</p>
+    ${renderPluginPlatformNotice(review.compatibility)}
+    <dl><dt>Source</dt><dd>${escapeHtml(review.source.repository)}</dd><dt>Commit</dt><dd><code>${escapeHtml(review.source.ref)}</code></dd></dl>
+    <ul class="plugin-install-capabilities">${review.capabilities.map((capability) => `<li><strong>${escapeHtml(capability.id)}</strong><p>${escapeHtml(capability.description)}</p><span>${capability.operations.map((operation) => escapeHtml(`${operation.name} · ${operation.effect}`)).join(" / ")}</span></li>`).join("")}</ul>
+    ${renderPluginConfigurationFields(review.configuration, busy)}
+    <p class="plugin-install-trust">This plugin contains code that runs with the Runtime's access. Install it only if you trust its publisher. Installation does not run a build or setup script.</p>
+    ${installButton}
+    <button type="button" data-plugin-review-cancel ${busy ? "disabled" : ""}>Cancel review</button>
+  </section>`;
+}
+
+export function renderPluginDiscovery(state) {
+  return `<section class="plugin-discovery" aria-label="Discover plugins" aria-busy="${state.busy}">
+    <article class="plugin-marketplace-card"><h2>More tools. More possibilities.</h2>
+      <p>Discover plugins shared by the community and extend what your agent can do.</p>
+      <a href="https://abot-ai.com/marketplace/" target="_blank" rel="noopener noreferrer">Browse Marketplace ↗</a>
+    </article>
+    <section class="plugin-source-card"><h2>Install from GitHub</h2>
+      <p>Paste a public repository link. With Computer Access, an Install in ABot link opens this review directly.</p>
+      <form data-plugin-source-form>
+        <label><span>Repository URL</span><input name="repository" type="url" autocomplete="off" placeholder="https://github.com/owner/plugin" value="${escapeAttribute(state.source.repository)}" required ${state.busy ? "disabled" : ""}></label>
+        <div class="plugin-source-options"><label><span>Revision <small>(optional)</small></span><input name="ref" autocomplete="off" placeholder="Branch, tag or commit" value="${escapeAttribute(state.source.ref || "")}" ${state.busy ? "disabled" : ""}></label>
+        <label><span>Plugin folder <small>(optional)</small></span><input name="path" autocomplete="off" placeholder="Repository root" value="${escapeAttribute(state.source.path || "")}" ${state.busy ? "disabled" : ""}></label></div>
+        <button type="submit" ${state.busy ? "disabled" : ""}>${state.busy ? "Working…" : "Review plugin"}</button>
+      </form>
+      <p data-plugin-install-status class="${state.error ? "error-text" : ""}" role="${state.error ? "alert" : "status"}" aria-live="polite">${escapeHtml(state.error || state.message)}</p>
+      ${renderPluginReview(state.review, state.busy)}
+    </section>
+  </section>`;
+}

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

@@ -0,0 +1,7 @@
+import { isPluginPlatformUnavailable } from "./compatibility.js";
+
+export function pluginInstallationMessage(review) {
+  if (isPluginPlatformUnavailable(review.compatibility))
+    return `${review.id} installed. It will not load on this Runtime: ${review.compatibility.reason}`;
+  return `${review.id} installed. Apply changes to make it available.`;
+}

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

@@ -0,0 +1,213 @@
+import { pluginInstallationMessage } from "./installation-compatibility.js";
+import { createPluginConfigurationDraft } from "./configuration-draft.js";
+import {
+  bindPluginConfigurationFields,
+  clearPluginSecretInputs,
+  readPluginConfigurationFields,
+} from "./configuration-fields.js";
+/** The review is tied to exact bytes and the currently selected environment. */
+export function createPluginInstallation({
+  inspectPlugin,
+  installPlugin,
+  getEnvironmentId,
+  beginRuntimeMutation,
+  endRuntimeMutation,
+  refreshRuntimeConfig,
+  onConfigurationSaved,
+  onInstalled,
+  render,
+}) {
+  const state = {
+    source: { repository: "", ref: "", path: "" },
+    review: null,
+    installedPluginId: null,
+    dirty: false,
+    busy: false,
+    error: "",
+    message: "",
+  };
+  const draft = createPluginConfigurationDraft();
+  let generation = 0;
+  let mountedRoot = null;
+  let environment = getEnvironmentId();
+
+  function resetEnvironment() {
+    if (environment === getEnvironmentId()) return;
+    environment = getEnvironmentId();
+    generation += 1;
+    state.dirty = false;
+    state.review = null;
+    state.installedPluginId = null;
+    state.busy = false;
+    state.error = "";
+    state.message = "";
+  }
+
+  function isCurrentInstallationRequest(request, selected) {
+    return request === generation && selected === getEnvironmentId();
+  }
+
+  async function inspect(source = state.source) {
+    resetEnvironment();
+    if (state.busy || !inspectPlugin) return false;
+    state.source = { ...source };
+    state.dirty = false;
+    state.review = null;
+    state.installedPluginId = null;
+    state.error = "";
+    state.message = "";
+    state.busy = true;
+    const request = ++generation;
+    const selected = environment;
+    render();
+    try {
+      const result = await inspectPlugin(state.source, selected);
+      if (!isCurrentInstallationRequest(request, selected)) return false;
+      state.review = result.review;
+      return true;
+    } catch (error) {
+      if (isCurrentInstallationRequest(request, selected))
+        state.error = error.message || String(error);
+      return false;
+    } finally {
+      if (isCurrentInstallationRequest(request, selected)) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  async function install(fields) {
+    resetEnvironment();
+    if (state.busy || !state.review || !installPlugin) return false;
+    let configuration;
+    try {
+      if (state.review.configuration)
+        configuration = readPluginConfigurationFields(
+          fields,
+          state.review.configuration,
+          true,
+        );
+    } catch (error) {
+      state.error = error.message;
+      const status = mountedRoot?.querySelector("[data-plugin-install-status]");
+      if (status) status.textContent = state.error;
+      return false;
+    }
+    if (!beginRuntimeMutation("plugin installation")) return false;
+    if (configuration) {
+      state.review.configuration.settings = {
+        ...state.review.configuration.defaults,
+        ...configuration.settings,
+      };
+      state.review.configuration.settingOverrides = Object.keys(
+        configuration.settings,
+      );
+    }
+    clearPluginSecretInputs(fields);
+    const review = state.review;
+    const selected = environment;
+    const request = ++generation;
+    state.busy = true;
+    state.error = "";
+    let installed = false;
+    render();
+    try {
+      const result = await installPlugin(
+        {
+          source: review.source,
+          digest: review.digest,
+          ...(configuration ? { configuration } : {}),
+        },
+        selected,
+      );
+      installed = true;
+      if (!isCurrentInstallationRequest(request, selected)) return false;
+      state.dirty = false;
+      state.review = null;
+      state.installedPluginId = review.id;
+      state.message = pluginInstallationMessage(review);
+      onInstalled(result);
+      onConfigurationSaved();
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin installed; refresh required",
+      );
+      if (!isCurrentInstallationRequest(request, selected)) return false;
+      if (!refreshed)
+        state.message =
+          "Plugin installed. Refresh configuration before applying changes.";
+      return true;
+    } catch (error) {
+      if (isCurrentInstallationRequest(request, selected))
+        state.error =
+          (installed
+            ? "Plugin installed; configuration refresh failed: "
+            : "") + (error.message || String(error));
+      return false;
+    } finally {
+      configuration = undefined;
+      endRuntimeMutation();
+      if (isCurrentInstallationRequest(request, selected)) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  function bind(root) {
+    mountedRoot = root;
+    draft.restore(root, state.review, state.busy);
+    const form = root.querySelector("[data-plugin-source-form]");
+    form?.addEventListener("submit", (event) => {
+      event.preventDefault();
+      void inspect({
+        repository: form.elements.repository.value.trim(),
+        ref: form.elements.ref.value.trim(),
+        path: form.elements.path.value.trim(),
+      });
+    });
+    form?.addEventListener("input", () => {
+      state.source = {
+        repository: form.elements.repository.value,
+        ref: form.elements.ref.value,
+        path: form.elements.path.value,
+      };
+      if (!state.review) return;
+      draft.clear();
+      state.dirty = false;
+      state.review = null;
+      root.querySelector(".plugin-install-review")?.remove();
+    });
+    const fields = root.querySelector("[data-plugin-configuration-fields]");
+    bindPluginConfigurationFields(fields, () => {
+      state.dirty = true;
+    });
+    root
+      .querySelector("[data-plugin-review-cancel]")
+      ?.addEventListener("click", () => {
+        clearPluginSecretInputs(fields);
+        state.review = null;
+        state.dirty = false;
+        state.error = "";
+        render();
+      });
+    for (const button of root.querySelectorAll("[data-plugin-install-confirm]"))
+      button.addEventListener("click", () => void install(fields));
+  }
+
+  function markApplied() {
+    resetEnvironment();
+    if (state.message)
+      state.message = "Plugin installation applied to this environment.";
+  }
+
+  return {
+    state,
+    bind,
+    inspect,
+    install,
+    resetEnvironment,
+    markApplied,
+    captureFields: (root) => draft.capture(root, state.review, state.busy),
+  };
+}