@abot-ai/runtime 1.3.1 → 1.4.0

package/dist/src/web-ui/app/components/model-setup/wizard.js

@@ -0,0 +1,370 @@
+import { textOf } from "../../lib/text-format.js";
+import {
+  clearConnectionSecret,
+  readConnectionSecret,
+  showConnectionFieldError,
+} from "../runtime-setup/connection-form.js";
+import { renderWizardProgress } from "../runtime-setup/wizard-shell.js";
+import { DEFAULT_OLLAMA_BASE_URL } from "../runtime-setup/validation.js";
+import { createSetupViewState } from "../runtime-setup/view-state.js";
+import { createModelSaveFlow } from "./save-flow.js";
+import {
+  MODEL_SETUP_ID,
+  MODEL_SETUP_STEPS,
+  modelSetupFooter,
+  modelSetupMarkup,
+  modelSetupTitles,
+  renderModelFields,
+  renderModelProviderChoices,
+  renderModelReview,
+} from "./rendering.js";
+import {
+  modelSetupInput,
+  requiresModelSaveCredential,
+  selectedModelProvider,
+  suggestIdentifier,
+  validateModelDraft,
+} from "./validation.js";
+
+export function createModelSetupWizard({
+  root,
+  getEnvironmentId = () => "",
+  loadSetup,
+  saveModel,
+  applySetup,
+  beginRuntimeMutation = () => true,
+  endRuntimeMutation = () => {},
+  onSaved = () => {},
+  onComplete = async () => true,
+  onClosed = () => {},
+}) {
+  const dialog = root.ownerDocument.createElement("dialog");
+  dialog.className = "model-setup-dialog";
+  dialog.setAttribute("aria-labelledby", `${MODEL_SETUP_ID}Title`);
+  root.append(dialog);
+  const state = {};
+  const viewState = createSetupViewState(dialog);
+  let generation = 0;
+  let modelForm = null;
+  let formChoice = "";
+  let requestedProviderId = "";
+  const beginOperation = () => ({
+    generation: ++generation,
+    environment: getEnvironmentId(),
+  });
+  const isCurrent = (operation) =>
+    operation.generation === generation &&
+    operation.environment === getEnvironmentId() &&
+    dialog.open;
+  const clearSecret = () => {
+    if (modelForm) clearConnectionSecret(modelForm);
+  };
+
+  function reset() {
+    clearSecret();
+    viewState.reset();
+    Object.assign(state, {
+      providers: [],
+      profileIds: [],
+      choice: "",
+      model: "",
+      contextWindowTokens: "",
+      profileId: "",
+      profileEdited: false,
+      newProviderId: "",
+      baseUrl: DEFAULT_OLLAMA_BASE_URL,
+      step: 0,
+      loaded: false,
+      busy: "",
+      error: "",
+      saved: null,
+      applied: false,
+      credentialSavedFor: "",
+      saveOutcomeUncertain: false,
+    });
+    modelForm = null;
+    formChoice = "";
+  }
+
+  function close(completed = false) {
+    if (state.busy) return false;
+    const wasOpen = dialog.open;
+    generation += 1;
+    clearSecret();
+    state.saveOutcomeUncertain = false;
+    dialog.close();
+    dialog.replaceChildren();
+    modelForm = null;
+    if (wasOpen) onClosed({ completed });
+    return true;
+  }
+
+  function showFieldError(result) {
+    state.step = 1;
+    state.error = result.message;
+    render();
+    showConnectionFieldError(
+      modelForm,
+      result.field,
+      `${MODEL_SETUP_ID}Error`,
+      MODEL_SETUP_ID,
+    );
+  }
+
+  function readRequest() {
+    const result = validateModelDraft(state);
+    if (!result.valid) {
+      clearSecret();
+      showFieldError(result);
+      return null;
+    }
+    const apiKey = readConnectionSecret(modelForm);
+    if (requiresModelSaveCredential(state) && !apiKey) {
+      showFieldError({
+        field: "api-key",
+        message: "Enter an API key for this connection.",
+      });
+      return null;
+    }
+    return modelSetupInput(state, result, apiKey);
+  }
+
+  const settleStaleOperation = (operation) => {
+    if (
+      operation.generation === generation &&
+      operation.environment !== getEnvironmentId()
+    ) {
+      state.busy = "";
+      close();
+    }
+  };
+
+  const flow = createModelSaveFlow({
+    state,
+    beginOperation,
+    isCurrent,
+    settleStaleOperation,
+    readRequest,
+    clearSecret,
+    render,
+    closeCompleted: () => close(true),
+    saveModel,
+    applySetup,
+    beginRuntimeMutation,
+    endRuntimeMutation,
+    onSaved,
+    onComplete,
+  });
+
+  function render({ focus = false } = {}) {
+    if (!dialog.open) return;
+    viewState.capture();
+    const title = dialog.querySelector("[data-runtime-setup-title]");
+    title.textContent = modelSetupTitles(state)[state.step];
+    dialog.querySelector("[data-wizard-progress]").innerHTML =
+      renderWizardProgress(MODEL_SETUP_STEPS, state.step);
+    dialog.querySelector("[data-wizard-mobile-progress]").textContent =
+      `Step ${state.step + 1} of 3 · ${MODEL_SETUP_STEPS[state.step]}`;
+    const providers = dialog.querySelector("[data-model-providers]");
+    providers.hidden = state.step !== 0;
+    providers.inert = Boolean(state.busy);
+    if (state.step === 0)
+      providers.innerHTML = renderModelProviderChoices(state);
+    if (state.choice && formChoice !== state.choice) {
+      clearSecret();
+      modelForm.innerHTML = renderModelFields(state);
+      formChoice = state.choice;
+    }
+    modelForm.hidden = state.step !== 1;
+    modelForm.inert = state.step !== 1 || Boolean(state.busy);
+    const key = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
+    if (key) key.required = requiresModelSaveCredential(state);
+    const review = dialog.querySelector("[data-model-review]");
+    review.hidden = state.step !== 2;
+    if (state.step === 2) review.innerHTML = renderModelReview(state);
+    const feedback = dialog.querySelector("[data-model-feedback]");
+    feedback.textContent =
+      state.error ||
+      (state.busy
+        ? `${state.busy === "saving" ? "Saving model" : state.busy === "applying" ? "Applying model" : state.busy === "refreshing" ? "Refreshing model list" : "Loading providers"}…`
+        : "");
+    feedback.setAttribute("role", state.error ? "alert" : "status");
+    dialog.querySelector('[data-model-action="reload"]').hidden =
+      state.loaded || !state.error;
+    dialog.querySelector("[data-wizard-footer]").innerHTML =
+      modelSetupFooter(state);
+    dialog
+      .querySelector(".runtime-setup-panel")
+      .setAttribute("aria-busy", Boolean(state.busy).toString());
+    viewState.restore({ focus, busy: Boolean(state.busy) });
+  }
+
+  async function load() {
+    const operation = beginOperation();
+    state.busy = "loading";
+    state.error = "";
+    render();
+    try {
+      const payload = await loadSetup();
+      if (!isCurrent(operation)) return false;
+      state.providers = Array.isArray(payload.providers)
+        ? payload.providers
+        : [];
+      state.contextWindowTokens = textOf(payload.defaultContextWindowTokens);
+      state.profileIds = Array.isArray(payload.profileIds)
+        ? payload.profileIds
+        : [];
+      if (requestedProviderId) {
+        const provider = state.providers.find(
+          (entry) => entry.id === requestedProviderId,
+        );
+        if (provider) {
+          state.choice = `existing:${provider.id}`;
+          state.step = 1;
+        } else
+          state.error =
+            "That provider is unavailable. Choose another connection.";
+      }
+      state.loaded = true;
+      return true;
+    } catch {
+      if (isCurrent(operation))
+        state.error = "Could not load provider connections. Try again.";
+      return false;
+    } finally {
+      if (isCurrent(operation)) {
+        state.busy = "";
+        render({ focus: true });
+      } else settleStaleOperation(operation);
+    }
+  }
+
+  async function open({ providerId } = {}) {
+    if (dialog.open) return false;
+    reset();
+    requestedProviderId = providerId || "";
+    dialog.innerHTML = modelSetupMarkup(state);
+    modelForm = dialog.querySelector("[data-model-form]");
+    dialog.showModal();
+    return load();
+  }
+
+  function next() {
+    if (state.busy || !state.loaded) return;
+    if (state.step === 0 && state.choice) {
+      state.step = 1;
+      state.error = "";
+      render({ focus: true });
+      return;
+    }
+    if (state.step !== 1) return;
+    const result = validateModelDraft(state);
+    if (!result.valid) {
+      showFieldError(result);
+      return;
+    }
+    if (!modelForm.reportValidity()) return;
+    state.step = 2;
+    state.error = "";
+    render({ focus: true });
+  }
+
+  function input(event) {
+    if (state.busy || state.saved || state.step !== 1) return;
+    const field = event.target.dataset.runtimeSetupField;
+    if (field === "api-key") {
+      event.target.removeAttribute("aria-invalid");
+      return;
+    }
+    state.saveOutcomeUncertain = false;
+    const value = textOf(event.target.value);
+    if (field === "model-id") {
+      state.model = value;
+      if (!state.profileEdited) {
+        state.profileId = value
+          ? suggestIdentifier(value, state.profileIds)
+          : "";
+        modelForm.querySelector(
+          '[data-runtime-setup-field="profile-id"]',
+        ).value = state.profileId;
+      }
+    }
+    if (field === "context-window") state.contextWindowTokens = value;
+    if (field === "profile-id") {
+      state.profileId = value;
+      state.profileEdited = true;
+    }
+    if (field === "connection-id") state.newProviderId = value;
+    if (field === "ollama-base-url") state.baseUrl = value;
+    const key = modelForm.querySelector('[data-runtime-setup-field="api-key"]');
+    if (key) key.required = requiresModelSaveCredential(state);
+    event.target.removeAttribute("aria-invalid");
+  }
+
+  dialog.addEventListener("input", input);
+  dialog.addEventListener("change", (event) => {
+    if (
+      state.busy ||
+      state.saved ||
+      state.step !== 0 ||
+      event.target.dataset.runtimeSetupField !== "provider"
+    )
+      return;
+    clearSecret();
+    state.saveOutcomeUncertain = false;
+    const providerChanged = state.choice !== event.target.value;
+    if (providerChanged) state.model = "";
+    const resetSuggestedProfile = providerChanged && !state.profileEdited;
+    if (resetSuggestedProfile) state.profileId = "";
+    state.choice = event.target.value;
+    state.newProviderId = selectedModelProvider(state)
+      ? ""
+      : suggestIdentifier(
+          state.choice.replace("new:", ""),
+          state.providers.map((entry) => entry.id),
+          "provider",
+        );
+    state.error = "";
+    render();
+    Array.from(dialog.querySelectorAll('[data-runtime-setup-field="provider"]'))
+      .find((entry) => entry.value === state.choice)
+      ?.focus({ preventScroll: true });
+  });
+  dialog.addEventListener("submit", (event) => {
+    event.preventDefault();
+    next();
+  });
+  dialog.addEventListener("click", (event) => {
+    const action = event.target.closest?.("[data-model-action]")?.dataset
+      .modelAction;
+    if (!action || state.busy) return;
+    if (action === "cancel") close();
+    if (action === "reload") void load();
+    if (action === "next") next();
+    if (action === "finish" && state.step === 2) void flow.finish();
+    if (action === "back" && !state.saved) {
+      if (state.step === 1) clearSecret();
+      state.step = Math.max(0, state.step - 1);
+      state.error = "";
+      render({ focus: true });
+    }
+  });
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    if (!state.busy) close();
+  });
+
+  return {
+    open,
+    close: () => close(),
+    isOpen: () => dialog.open,
+    isBusy: () => Boolean(state.busy),
+    dispose: () => {
+      generation += 1;
+      clearSecret();
+      state.saveOutcomeUncertain = false;
+      dialog.close();
+      dialog.remove();
+    },
+  };
+}

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

@@ -0,0 +1,200 @@
+import { renderPluginManager } from "./rendering.js";
+import { createPluginViewState } from "./view-state.js";
+
+export function createPluginManager({
+  loadPlugins,
+  getEnvironmentId = () => "",
+  setPlugin,
+  beginRuntimeMutation = () => true,
+  refreshRuntimeConfig = async () => true,
+  endRuntimeMutation = () => {},
+  recordControlEvent = () => {},
+  onConfigurationSaved = () => {},
+}) {
+  const viewState = createPluginViewState();
+  const state = {
+    root: null,
+    snapshot: null,
+    busy: false,
+    message: "",
+    error: "",
+    loadGeneration: 0,
+    mutationGeneration: 0,
+    environmentId: getEnvironmentId(),
+  };
+
+  function render({ capture = true } = {}) {
+    if (!state.root) return;
+    if (capture) viewState.capture(state.root);
+    state.root.innerHTML = renderPluginManager({
+      ...state,
+      openPluginIds: viewState.openPluginIds,
+    });
+    viewState.bind(state.root, () => render({ capture: false }));
+    state.root
+      .querySelector("[data-plugin-refresh]")
+      ?.addEventListener("click", load);
+    for (const button of state.root.querySelectorAll("[data-plugin-toggle]")) {
+      button.addEventListener("click", () =>
+        toggle(
+          button.dataset.pluginToggle,
+          button.dataset.pluginEnabled === "true",
+        ),
+      );
+    }
+    for (const input of state.root.querySelectorAll(
+      "[data-plugin-capability-toggle]",
+    )) {
+      input.addEventListener("change", () =>
+        toggle(
+          input.dataset.pluginParent,
+          input.checked,
+          input.dataset.pluginCapabilityToggle,
+        ),
+      );
+    }
+    viewState.restore(state.root, state.busy);
+  }
+
+  function mount(root) {
+    viewState.capture(state.root);
+    state.root = root;
+    render();
+  }
+
+  function isLatestPluginLoad(generation) {
+    if (generation !== state.loadGeneration) return false;
+    return state.environmentId === getEnvironmentId();
+  }
+
+  async function load() {
+    const environmentId = getEnvironmentId();
+    if (state.environmentId !== environmentId) {
+      state.environmentId = environmentId;
+      viewState.reset();
+      state.mutationGeneration += 1;
+      state.snapshot = null;
+      state.message = "";
+    }
+    const generation = ++state.loadGeneration;
+    state.busy = true;
+    state.error = "";
+    render();
+    try {
+      const snapshot = await loadPlugins();
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = snapshot;
+      return true;
+    } catch (error) {
+      if (!isLatestPluginLoad(generation)) return false;
+      state.snapshot = null;
+      state.error = error instanceof Error ? error.message : String(error);
+      return false;
+    } finally {
+      if (isLatestPluginLoad(generation)) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  function isCurrentPluginMutation(generation, environmentId) {
+    if (generation !== state.mutationGeneration) return false;
+    return environmentId === getEnvironmentId();
+  }
+
+  function markApplied() {
+    state.message = "Plugin selection applied to this environment.";
+    state.error = "";
+    render();
+  }
+
+  function canChangePluginSelection(pluginId, capabilityId) {
+    const plugin = state.snapshot?.plugins?.find(
+      (entry) => entry.id === pluginId,
+    );
+    if (!plugin || plugin.blockedByGlobalPolicy) return false;
+    if (!capabilityId) return true;
+    if (plugin.pluginEnabled === false) return false;
+    const capability = plugin.capabilities?.find(
+      (entry) => entry.id === capabilityId,
+    );
+    if (!capability) return false;
+    return capability.blockedByPolicy !== true;
+  }
+
+  async function toggle(pluginId, enabled, capabilityId) {
+    if (state.busy) return false;
+    if (!canChangePluginSelection(pluginId, capabilityId)) return false;
+    if (!beginRuntimeMutation("plugin settings")) {
+      render();
+      return false;
+    }
+    ++state.loadGeneration;
+    const generation = ++state.mutationGeneration;
+    const environmentId = getEnvironmentId();
+    state.busy = true;
+    state.error = "";
+    state.message = "";
+    let saved = false;
+    render();
+    try {
+      const snapshot = await setPlugin({
+        pluginId,
+        enabled,
+        ...(capabilityId ? { capabilityId } : {}),
+      });
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      state.snapshot = snapshot;
+      saved = true;
+      onConfigurationSaved();
+      state.message =
+        "Plugin selection saved. Apply changes or restart Runtime to use it.";
+      recordControlEvent({
+        type: "control",
+        name: "Plugin selection saved",
+        tone: "done",
+        summary: `${capabilityId ? `${pluginId}:${capabilityId}` : pluginId}: saved; Runtime application required`,
+      });
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin selection saved; refresh required",
+      );
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      if (!refreshed) {
+        state.message =
+          "Plugin selection saved. Refresh configuration before making more changes. Runtime application is still required.";
+      }
+      return true;
+    } catch (error) {
+      if (!isCurrentPluginMutation(generation, environmentId)) return false;
+      const message = error instanceof Error ? error.message : String(error);
+      state.error = saved
+        ? `Plugin selection saved; configuration refresh failed: ${message}`
+        : message;
+      recordControlEvent({
+        type: "control",
+        name: saved
+          ? "Plugin selection refresh failed"
+          : "Plugin selection failed",
+        tone: "failed",
+        summary: state.error,
+      });
+      return false;
+    } finally {
+      endRuntimeMutation();
+      if (generation === state.mutationGeneration) {
+        state.busy = false;
+        render();
+      }
+    }
+  }
+
+  return {
+    load,
+    markApplied,
+    mount,
+    toggle,
+    toggleCapability: (pluginId, capabilityId, enabled) =>
+      toggle(pluginId, enabled, capabilityId),
+  };
+}

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

@@ -0,0 +1,124 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+function pluginMasterIsEnabled(plugin) {
+  if (typeof plugin.pluginEnabled === "boolean") return plugin.pluginEnabled;
+  return plugin.selectedCapabilityCount > 0;
+}
+
+function configuredPluginLabel(plugin) {
+  if (!pluginMasterIsEnabled(plugin)) return "Configured off";
+  if (plugin.selectedCapabilityCount === 0) return "No tools selected";
+  if (plugin.state === "partial") return "Partially selected";
+  return "Configured on";
+}
+
+function capabilityBlockReason(plugin, capability) {
+  if (capability.blockedReason) return capability.blockedReason;
+  if (plugin.blockedByGlobalPolicy)
+    return "Blocked by the global plugin policy.";
+  if (!pluginMasterIsEnabled(plugin))
+    return "Enable this plugin before changing individual tools.";
+  if (capability.blockedByPolicy)
+    return "Blocked by an existing plugin policy rule.";
+  return "";
+}
+
+function renderCapabilityRow(plugin, capability, busy) {
+  const reason = capabilityBlockReason(plugin, capability);
+  const blocked = Boolean(reason);
+  const reasonId = `plugin-tool-policy-${encodeURIComponent(plugin.id)}-${encodeURIComponent(capability.id)}`;
+  const enabled = capability.enabled === true && !blocked;
+  return `<li class="plugin-capability-row">
+    <div class="plugin-capability-copy"><code>${escapeHtml(capability.id)}</code>
+      <p class="plugin-capability-description" title="${escapeAttribute(capability.description || "No description provided.")}">${escapeHtml(capability.description || "No description provided.")}</p>
+      ${reason ? `<p class="plugin-capability-policy" id="${escapeAttribute(reasonId)}">${escapeHtml(reason)}</p>` : ""}
+    </div>
+    <label class="plugin-capability-switch">
+      <input type="checkbox" role="switch" data-plugin-capability-toggle="${escapeAttribute(capability.id)}" data-plugin-parent="${escapeAttribute(plugin.id)}"
+        aria-label="${escapeAttribute(`${capability.id} in ${plugin.id}`)}" ${reason ? `aria-describedby="${escapeAttribute(reasonId)}"` : ""}
+        ${enabled ? "checked" : ""} ${busy || blocked ? "disabled" : ""} />
+      <span aria-hidden="true"></span>
+    </label>
+  </li>`;
+}
+
+function renderCapabilities(plugin, busy, open) {
+  const capabilities = plugin.capabilities || [];
+  const panelId = `plugin-tools-${encodeURIComponent(plugin.id)}`;
+  return `<section class="plugin-tools-panel" id="${escapeAttribute(panelId)}" data-plugin-tools-panel="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Tools in ${plugin.id}`)}" ${open ? "" : "hidden"}>
+    <header class="plugin-tools-heading">
+      <button type="button" data-plugin-tools-back="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Back to ${plugin.id}`)}">Back</button>
+      <div><h4 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h4><span>Tools (${capabilities.length})</span></div>
+    </header>
+    <ul class="plugin-capability-list" data-plugin-tools-scroll="${escapeAttribute(plugin.id)}">
+      ${capabilities.length ? capabilities.map((capability) => renderCapabilityRow(plugin, capability, busy)).join("") : '<li class="plugin-capability-empty">This plugin does not expose any tools.</li>'}
+    </ul>
+  </section>`;
+}
+
+function renderPluginCard(plugin, busy, openPluginIds) {
+  const toolsOpen = openPluginIds.has(plugin.id);
+  const selected = pluginMasterIsEnabled(plugin);
+  const disabled = busy || plugin.blockedByGlobalPolicy;
+  const action = selected ? "Disable" : "Enable";
+  return `
+    <article class="plugin-card" data-plugin-id="${escapeAttribute(plugin.id)}">
+      <div class="plugin-card-front" data-plugin-card-front="${escapeAttribute(plugin.id)}" ${toolsOpen ? 'inert aria-hidden="true"' : ""}>
+      <div class="plugin-card-heading">
+        <div>
+          <h3 title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</h3>
+          ${plugin.version ? `<span class="plugin-version">v${escapeHtml(plugin.version)}</span>` : ""}
+        </div>
+        <span class="plugin-selection-state" data-plugin-state="${escapeAttribute(plugin.state)}">${configuredPluginLabel(plugin)}</span>
+      </div>
+      <p class="plugin-description" title="${escapeAttribute(plugin.description || "Installed Runtime plugin.")}">${escapeHtml(plugin.description || "Installed Runtime plugin.")}</p>
+      <div class="plugin-card-footer">
+        <span>${plugin.selectedCapabilityCount} of ${plugin.capabilityCount} capabilities selected</span>
+        <button type="button" data-plugin-toggle="${escapeAttribute(plugin.id)}" data-plugin-enabled="${selected ? "false" : "true"}"
+          aria-label="${escapeAttribute(`${action} ${plugin.id}`)}" ${disabled ? "disabled" : ""}>${action}</button>
+      </div>
+      <button type="button" class="plugin-tools-open" data-plugin-tools-open="${escapeAttribute(plugin.id)}" aria-controls="${escapeAttribute(`plugin-tools-${encodeURIComponent(plugin.id)}`)}" aria-expanded="${toolsOpen}" aria-label="${escapeAttribute(`Manage tools in ${plugin.id}`)}">
+        <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 7h9m4 0h3M4 17h3m4 0h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>
+        <span>Manage tools</span>
+        <span class="plugin-tools-count" aria-hidden="true">${plugin.capabilityCount}</span>
+      </button>
+      </div>
+      ${renderCapabilities(plugin, busy, toolsOpen)}
+    </article>`;
+}
+
+function globalPolicyMessage(selection) {
+  if (selection?.enabled === false) {
+    return "Plugins are disabled globally. Turn on plugins.enabled in Advanced settings before enabling individual plugins.";
+  }
+  if (selection?.deny?.includes("*")) {
+    return "The global deny rule blocks every plugin. Review plugins.deny in Advanced settings before enabling individual plugins.";
+  }
+  return "";
+}
+
+export function renderPluginManager({
+  snapshot,
+  busy,
+  message,
+  error,
+  openPluginIds = new Set(),
+}) {
+  const plugins = snapshot?.plugins || [];
+  const globalMessage = globalPolicyMessage(snapshot?.selection);
+  const status = error || message;
+  return `
+    <section class="plugin-manager" aria-label="Installed plugins" aria-busy="${busy ? "true" : "false"}">
+      <div class="plugin-manager-heading">
+        <div>
+          <h2>Installed plugins</h2>
+          <p>Choose the tools available to your agent. Open Tools to control individual tools within each plugin.</p>
+        </div>
+        <button type="button" data-plugin-refresh ${busy ? "disabled" : ""}>Refresh plugins</button>
+      </div>
+      <p class="plugin-application-note">This list shows saved configuration. Apply changes or restart Runtime to use a new selection.</p>
+      ${globalMessage ? `<p class="plugin-policy-note">${escapeHtml(globalMessage)}</p>` : ""}
+      <div class="plugin-manager-status ${error ? "error-text" : ""}" role="${error ? "alert" : "status"}" aria-live="polite">${escapeHtml(status)}</div>
+      ${plugins.length ? `<div class="plugin-grid">${plugins.map((plugin) => renderPluginCard(plugin, busy, openPluginIds)).join("")}</div>` : `<div class="empty-state compact">${busy ? "Loading installed plugins..." : "No installed plugins found."}</div>`}
+    </section>`;
+}