@abot-ai/runtime 1.6.0 → 1.7.0

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,37 @@
+import { renderPluginConfigurationFields } from "./configuration-fields.js";
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function renderPluginReview(review, busy) {
+  if (!review) return "";
+  const installButton = `<button type="button" class="primary-button" data-plugin-install-confirm ${busy ? "disabled" : ""}>${busy ? "Installing…" : "Install and enable"}</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>
+    <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.js

@@ -0,0 +1,212 @@
+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 = `${review.id} installed. Apply changes to make it available.`;
+      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),
+  };
+}

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

@@ -1,8 +1,22 @@
+import { createPluginConfigurationEditor } from "./configuration-editor.js";
+import { createPluginRemoval } from "./removal.js";
 import { renderPluginManager } from "./rendering.js";
 import { createPluginViewState } from "./view-state.js";
+import { createPluginInstallation } from "./installation.js";
+import { renderPluginTabs, bindPluginTabs } from "./tabs.js";
+import { projectPluginSummary } from "./summary.js";
 
 export function createPluginManager({
   loadPlugins,
+  loadConfiguration,
+  saveConfiguration,
+  inspectPlugin,
+  installPlugin,
+  removePlugin,
+  confirmRemoval,
+  onConfigurationApplied = async () => {},
+  onConfigurationSettled = () => true,
+  onNavigationChange = () => {},
   getEnvironmentId = () => "",
   setPlugin,
   beginRuntimeMutation = () => true,
@@ -10,10 +24,12 @@ export function createPluginManager({
   endRuntimeMutation = () => {},
   recordControlEvent = () => {},
   onConfigurationSaved = () => {},
+  onSummaryChange = () => {},
 }) {
   const viewState = createPluginViewState();
   const state = {
     root: null,
+    activeTab: "installed",
     snapshot: null,
     busy: false,
     message: "",
@@ -23,13 +39,116 @@ export function createPluginManager({
     environmentId: getEnvironmentId(),
   };
 
+  const configurationEditor = createPluginConfigurationEditor({
+    loadConfiguration,
+    saveConfiguration,
+    getEnvironmentId,
+    beginRuntimeMutation,
+    endRuntimeMutation,
+    onConfigurationSaved,
+    onClosed: onConfigurationSettled,
+  });
+
+  const installation = createPluginInstallation({
+    inspectPlugin,
+    installPlugin,
+    getEnvironmentId,
+    beginRuntimeMutation,
+    endRuntimeMutation,
+    refreshRuntimeConfig,
+    onConfigurationSaved,
+    onInstalled: (snapshot) => {
+      state.snapshot = snapshot;
+      state.error = "";
+      state.message = "";
+      removal.state.message = "";
+      removal.state.error = "";
+      activateTab("installed", true);
+    },
+    render,
+  });
+
+  const removal = createPluginRemoval({
+    removePlugin,
+    confirmRemoval,
+    getEnvironmentId,
+    beginRuntimeMutation,
+    endRuntimeMutation,
+    refreshRuntimeConfig,
+    onConfigurationSaved,
+    onConfigurationApplied,
+    onConfigurationSettled,
+    render,
+    onSnapshot: (snapshot) => {
+      state.snapshot = snapshot;
+    },
+  });
+
+  async function remove(pluginId) {
+    if (state.busy || installation.state.busy || removal.state.busy)
+      return false;
+    if (
+      !state.snapshot?.plugins?.some(
+        (plugin) => plugin.id === pluginId && plugin.removable,
+      )
+    )
+      return false;
+    installation.state.installedPluginId = null;
+    state.message = "";
+    state.error = "";
+    return removal.remove(pluginId);
+  }
+
+  function activateTab(name, focus = false) {
+    if (!["installed", "discover"].includes(name)) return;
+    if (installation.state.dirty && name !== state.activeTab) return;
+    state.activeTab = name;
+    render();
+    if (focus)
+      state.root?.querySelector(`[data-plugin-tab="${name}"]`)?.focus();
+    onNavigationChange();
+  }
+
   function render({ capture = true } = {}) {
+    installation.resetEnvironment();
+    removal.resetEnvironment();
+    onSummaryChange();
     if (!state.root) return;
     if (capture) viewState.capture(state.root);
-    state.root.innerHTML = renderPluginManager({
-      ...state,
-      openPluginIds: viewState.openPluginIds,
-    });
+    installation.captureFields(state.root);
+    state.root.innerHTML = renderPluginTabs(
+      renderPluginManager({
+        ...state,
+        busy: state.busy || installation.state.busy || removal.state.busy,
+        canRemove: typeof removePlugin === "function",
+        canConfigure: typeof loadConfiguration === "function",
+        message:
+          removal.state.message ||
+          (installation.state.installedPluginId
+            ? installation.state.message
+            : state.message),
+        error:
+          state.error ||
+          removal.state.error ||
+          (installation.state.installedPluginId
+            ? installation.state.error
+            : ""),
+        openPluginIds: viewState.openPluginIds,
+      }),
+      installation.state,
+      state.activeTab,
+    );
+    for (const button of state.root.querySelectorAll("[data-plugin-configure]"))
+      button.addEventListener(
+        "click",
+        () =>
+          void configurationEditor.open(
+            button.dataset.pluginConfigure,
+            state.root,
+          ),
+      );
+    bindPluginTabs(state.root, activateTab);
+    installation.bind(state.root);
     viewState.bind(state.root, () => render({ capture: false }));
     state.root
       .querySelector("[data-plugin-refresh]")
@@ -53,7 +172,15 @@ export function createPluginManager({
         ),
       );
     }
-    viewState.restore(state.root, state.busy);
+    for (const button of state.root.querySelectorAll("[data-plugin-remove]"))
+      button.addEventListener(
+        "click",
+        () => void remove(button.dataset.pluginRemove),
+      );
+    viewState.restore(
+      state.root,
+      state.busy || installation.state.busy || removal.state.busy,
+    );
   }
 
   function mount(root) {
@@ -104,6 +231,7 @@ export function createPluginManager({
   }
 
   function markApplied() {
+    installation.markApplied();
     state.message = "Plugin selection applied to this environment.";
     state.error = "";
     render();
@@ -124,7 +252,8 @@ export function createPluginManager({
   }
 
   async function toggle(pluginId, enabled, capabilityId) {
-    if (state.busy) return false;
+    if (state.busy || installation.state.busy || removal.state.busy)
+      return false;
     if (!canChangePluginSelection(pluginId, capabilityId)) return false;
     if (!beginRuntimeMutation("plugin settings")) {
       render();
@@ -136,6 +265,9 @@ export function createPluginManager({
     state.busy = true;
     state.error = "";
     state.message = "";
+    installation.state.installedPluginId = null;
+    removal.state.message = "";
+    removal.state.error = "";
     let saved = false;
     render();
     try {
@@ -190,10 +322,32 @@ export function createPluginManager({
   }
 
   return {
+    summary: () =>
+      projectPluginSummary(
+        {
+          ...state,
+          busy: state.busy || installation.state.busy || removal.state.busy,
+        },
+        getEnvironmentId(),
+      ),
+    hasConfigurationDraft: () =>
+      configurationEditor.isOpen() || installation.state.dirty,
+    activeTab: () => state.activeTab,
+    openRoute: (route) => {
+      activateTab(route.pluginSource ? "discover" : route.tab || "installed");
+      if (!route.pluginSource) return true;
+      void installation.inspect({
+        repository: route.pluginSource,
+        ref: route.pluginRef || "",
+        path: route.pluginPath || "",
+      });
+      return true;
+    },
     load,
     markApplied,
     mount,
     toggle,
+    remove,
     toggleCapability: (pluginId, capabilityId, enabled) =>
       toggle(pluginId, enabled, capabilityId),
   };