@abot-ai/runtime 1.6.0 → 1.8.0

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

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

@@ -0,0 +1,130 @@
+function isDefinitiveRemovalRejection(error) {
+  if (!(error.status >= 400 && error.status < 500)) return false;
+  return [
+    "plugin_not_removable",
+    "plugin_not_found",
+    "invalid_plugin_configuration",
+    "plugin_selection_conflict",
+    "plugin_mutation_unavailable",
+    "invalid_plugin_removal",
+    "runtime_setup_required",
+    "plugin_removal_unavailable",
+    "request_origin_required",
+    "method_not_allowed",
+    "configuration_request_rejected",
+    "plugin_runtime_busy",
+    "plugin_owner_unavailable",
+  ].includes(error.code);
+}
+
+/** Removal is an explicit local action; busy owners keep their files until a retry. */
+export function createPluginRemoval({
+  removePlugin,
+  getEnvironmentId,
+  beginRuntimeMutation,
+  endRuntimeMutation,
+  refreshRuntimeConfig,
+  onConfigurationSaved,
+  onConfigurationApplied,
+  onConfigurationSettled = () => true,
+  onSnapshot,
+  render,
+  confirmRemoval = (message) => window.confirm(message),
+}) {
+  const state = { busy: false, message: "", error: "" };
+  let environment = getEnvironmentId();
+  let generation = 0;
+  function resetEnvironment() {
+    if (environment === getEnvironmentId()) return;
+    environment = getEnvironmentId();
+    generation += 1;
+    Object.assign(state, { busy: false, message: "", error: "" });
+  }
+  async function remove(pluginId) {
+    resetEnvironment();
+    if (state.busy || !removePlugin) return false;
+    if (
+      !confirmRemoval(
+        `Remove ${pluginId}? This disables the plugin, applies the change when Runtime is idle, and deletes its installed folder. If Runtime is busy, try Remove again after it finishes.`,
+      )
+    )
+      return false;
+    if (!beginRuntimeMutation("plugin removal")) return false;
+    const request = ++generation;
+    const selected = environment;
+    const current = () =>
+      request === generation && selected === getEnvironmentId();
+    Object.assign(state, { busy: true, message: "", error: "" });
+    render();
+    let removed = false;
+    let activated = false;
+    try {
+      const result = await removePlugin({ pluginId }, selected);
+      if (!current()) return false;
+      removed = result.removed === true;
+      onSnapshot(result);
+      state.message = result.message;
+      activated = result.activation?.status === "ready";
+      if (activated) await onConfigurationApplied();
+      else onConfigurationSaved();
+      if (!current()) return false;
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin removal; refresh required",
+      );
+      if (!current()) return false;
+      if (!refreshed)
+        state.error = "Refresh configuration before making more changes.";
+      return removed;
+    } catch (error) {
+      if (!current()) return false;
+      state.error =
+        (removed ? "Plugin removed; refresh failed: " : "") +
+        (error.message || String(error));
+      if (removed || activated) return false;
+      activated = error.payload?.activation?.status === "ready";
+      if (!activated && isDefinitiveRemovalRejection(error)) return false;
+      let projectionRefreshed = true;
+      if (activated) {
+        projectionRefreshed = await Promise.resolve()
+          .then(onConfigurationApplied)
+          .then(
+            () => true,
+            () => false,
+          );
+        if (!current()) return false;
+      }
+      // Apply may have succeeded for an older revision while a newer save is pending.
+      if (!activated || error.code === "config_changed") onConfigurationSaved();
+      const refreshed = await refreshRuntimeConfig(
+        "Plugin removal incomplete; refresh required",
+      ).catch(() => false);
+      if (current() && (!projectionRefreshed || !refreshed))
+        state.error += " Refresh configuration before making more changes.";
+      return false;
+    } finally {
+      endRuntimeMutation();
+      if (current()) state.busy = false;
+      if (activated && current()) {
+        try {
+          if (onConfigurationSettled() === false)
+            state.error = [
+              state.error,
+              "Finish your current edits, then refresh configuration to update environments.",
+            ]
+              .filter(Boolean)
+              .join(" ");
+        } catch {
+          state.error = [
+            state.error,
+            "Refresh configuration to update environments.",
+          ]
+            .filter(Boolean)
+            .join(" ");
+        }
+      }
+      if (current()) render();
+    }
+  }
+
+  return { state, remove, resetEnvironment };
+}

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

@@ -1,3 +1,4 @@
+import { renderPluginPlatformNotice } from "./compatibility.js";
 import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
 
 function pluginMasterIsEnabled(plugin) {
@@ -50,13 +51,20 @@ function renderCapabilities(plugin, busy, open) {
       <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>
+    ${renderPluginPlatformNotice(plugin.compatibility)}
     <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) {
+function renderPluginCard(
+  plugin,
+  busy,
+  openPluginIds,
+  canRemove,
+  canConfigure,
+) {
   const toolsOpen = openPluginIds.has(plugin.id);
   const selected = pluginMasterIsEnabled(plugin);
   const disabled = busy || plugin.blockedByGlobalPolicy;
@@ -72,10 +80,15 @@ function renderPluginCard(plugin, busy, openPluginIds) {
         <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>
+      ${renderPluginPlatformNotice(plugin.compatibility)}
       <div class="plugin-card-footer">
         <span>${plugin.selectedCapabilityCount} of ${plugin.capabilityCount} capabilities selected</span>
+        <div class="plugin-card-actions">
+        ${canConfigure && plugin.configurable ? `<button type="button" data-plugin-configure="${escapeAttribute(plugin.id)}" ${busy ? "disabled" : ""}>Configure</button>` : ""}
+        ${canRemove && plugin.removable ? `<button type="button" data-plugin-remove="${escapeAttribute(plugin.id)}" aria-label="${escapeAttribute(`Remove ${plugin.id}`)}" ${busy ? "disabled" : ""}>Remove</button>` : ""}
         <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>
       </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>
@@ -103,6 +116,8 @@ export function renderPluginManager({
   message,
   error,
   openPluginIds = new Set(),
+  canRemove = false,
+  canConfigure = false,
 }) {
   const plugins = snapshot?.plugins || [];
   const globalMessage = globalPolicyMessage(snapshot?.selection);
@@ -119,6 +134,6 @@ export function renderPluginManager({
       <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>`}
+      ${plugins.length ? `<div class="plugin-grid">${plugins.map((plugin) => renderPluginCard(plugin, busy, openPluginIds, canRemove, canConfigure)).join("")}</div>` : `<div class="empty-state compact">${busy ? "Loading installed plugins..." : "No installed plugins found."}</div>`}
     </section>`;
 }

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

@@ -0,0 +1,54 @@
+const SUMMARY_LABELS = [
+  "Installed plugins",
+  "Enabled in saved config",
+  "Selected tools (saved)",
+  "Excluded tools (saved)",
+];
+
+function unavailablePluginSummaryValue(state, environmentId) {
+  if (state.environmentId !== environmentId) return "Not loaded";
+  if (state.busy) return "Loading…";
+  if (state.snapshot) return null;
+  if (state.error) return "Unavailable";
+  return "Not loaded";
+}
+
+/** Counts describe the saved catalog selection, never the running Runtime. */
+export function projectPluginSummary(state, environmentId) {
+  const unavailable = unavailablePluginSummaryValue(state, environmentId);
+  if (unavailable) {
+    return {
+      label: "Plugins · saved configuration",
+      items: SUMMARY_LABELS.map((label) => ({
+        label,
+        value: unavailable,
+        status: true,
+      })),
+    };
+  }
+  const plugins = state.snapshot.plugins;
+  const enabled = plugins.filter(
+    (plugin) => plugin.pluginEnabled === true,
+  ).length;
+  const selected = plugins.reduce(
+    (sum, plugin) => sum + plugin.selectedCapabilityCount,
+    0,
+  );
+  const total = plugins.reduce(
+    (sum, plugin) => sum + plugin.capabilityCount,
+    0,
+  );
+  const values = [
+    String(plugins.length),
+    String(enabled),
+    `${selected} / ${total}`,
+    String(total - selected),
+  ];
+  return {
+    label: "Plugins · saved configuration",
+    items: SUMMARY_LABELS.map((label, index) => ({
+      label,
+      value: values[index],
+    })),
+  };
+}

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

@@ -0,0 +1,31 @@
+import { renderPluginDiscovery } from "./discovery-rendering.js";
+const names = ["installed", "discover"];
+
+export function renderPluginTabs(installed, discovery, active = "installed") {
+  const button = (name, label) =>
+    `<button type="button" id="plugin-${name}-tab" class="config-category-tab${active === name ? " active" : ""}" role="tab" data-plugin-tab="${name}" aria-controls="plugin-${name}-panel" aria-selected="${active === name}" tabindex="${active === name ? 0 : -1}">${label}</button>`;
+  return `<div class="plugin-workspace"><nav class="config-category-nav" role="tablist" aria-label="Plugin views">${button("installed", "Installed")}${button("discover", "Discover")}</nav>
+    <div id="plugin-installed-panel" class="config-category-panel" role="tabpanel" aria-labelledby="plugin-installed-tab" tabindex="0"${active === "installed" ? "" : " hidden"}>${installed}</div>
+    <div id="plugin-discover-panel" class="config-category-panel" role="tabpanel" aria-labelledby="plugin-discover-tab" tabindex="0"${active === "discover" ? "" : " hidden"}>${renderPluginDiscovery(discovery)}</div></div>`;
+}
+
+export function bindPluginTabs(root, activate) {
+  for (const button of root.querySelectorAll("[data-plugin-tab]")) {
+    button.addEventListener("click", () =>
+      activate(button.dataset.pluginTab, true),
+    );
+    button.addEventListener("keydown", (event) => {
+      const index = names.indexOf(button.dataset.pluginTab);
+      let target;
+      if (event.key === "ArrowRight")
+        target = names[(index + 1) % names.length];
+      if (event.key === "ArrowLeft")
+        target = names[(index + names.length - 1) % names.length];
+      if (event.key === "Home") target = names[0];
+      if (event.key === "End") target = names.at(-1);
+      if (!target) return;
+      event.preventDefault();
+      activate(target, true);
+    });
+  }
+}

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

@@ -10,6 +10,8 @@ export function createPluginViewState() {
     if (element.dataset.pluginCapabilityToggle) {
       return { kind: "capability", pluginId: element.dataset.pluginParent, capabilityId: element.dataset.pluginCapabilityToggle };
     }
+    if (element.dataset.pluginTab) return { kind: "tab", pluginId: element.dataset.pluginTab };
+    if (element.dataset.pluginRemove) return { kind: "remove", pluginId: element.dataset.pluginRemove };
     if (element.dataset.pluginToggle) return { kind: "plugin", pluginId: element.dataset.pluginToggle };
     if (element.dataset.pluginToolsOpen) return { kind: "open", pluginId: element.dataset.pluginToolsOpen };
     if (element.dataset.pluginToolsBack) return { kind: "back", pluginId: element.dataset.pluginToolsBack };
@@ -72,7 +74,7 @@ export function createPluginViewState() {
     restoreToolScroll(root);
     if (!focusedControl) return;
     if (busy && !isCardNavigationFocus()) return;
-    const controls = root.querySelectorAll("[data-plugin-toggle], [data-plugin-capability-toggle], [data-plugin-tools-open], [data-plugin-tools-back], [data-plugin-refresh]");
+    const controls = root.querySelectorAll("[data-plugin-tab], [data-plugin-remove], [data-plugin-toggle], [data-plugin-capability-toggle], [data-plugin-tools-open], [data-plugin-tools-back], [data-plugin-refresh]");
     let target = [...controls].find((element) => matchesIdentity(element, focusedControl));
     if (target?.disabled) {
       target = [...controls].find((element) => element.dataset.pluginToolsBack === focusedControl.pluginId);

package/dist/src/web-ui/app/components/reasoning-override-prompt.js

@@ -0,0 +1,82 @@
+import { escapeHtml } from "../lib/text-format.js";
+import { enableModelReasoning } from "../services/reasoning-override.js";
+
+/** A non-modal prompt anchored in the existing composer mode menu. */
+export function createReasoningOverridePrompt({ root, client, getEnvironmentId, getProfile, refreshModels, render }) {
+  let context = "";
+  let revision = 0;
+  let busy = false;
+  let saved = false;
+  let message = "";
+  let failed = false;
+  let wasOpen = false;
+  const currentContext = () => JSON.stringify([getEnvironmentId(), getProfile()?.id]);
+  const ownsReasoningPrompt = (captured) => revision === captured.revision && context === captured.key && currentContext() === captured.key;
+
+  function reset() {
+    revision += 1;
+    context = ""; busy = false; saved = false; message = ""; failed = false; wasOpen = false;
+  }
+
+  async function enable(applyNow) {
+    if (busy || !getProfile()) return;
+    const captured = { key: currentContext(), revision };
+    const environmentId = getEnvironmentId();
+    const profileId = getProfile().id;
+    busy = true; failed = false; message = "Saving…"; render();
+    try {
+      await enableModelReasoning(client, profileId, environmentId);
+      if (!ownsReasoningPrompt(captured)) return;
+      saved = true;
+      message = "Saved. Reasoning controls will be available after Runtime restarts.";
+      if (!applyNow) return;
+      message = "Applying saved configuration…"; render();
+      const result = await client.applyRuntimeConfiguration(environmentId);
+      if (!ownsReasoningPrompt(captured)) return;
+      if (result?.activation?.status !== "ready") {
+        message = result?.activation?.message || "Saved. Apply again when Runtime is idle, or restart it later.";
+        return;
+      }
+      const refreshed = await refreshModels();
+      if (!ownsReasoningPrompt(captured)) return;
+      if (!refreshed) throw new Error("Configuration applied. Reload to refresh the model's reasoning controls.");
+      message = "Configuration applied. Reload if this model still uses provider defaults.";
+    } catch (error) {
+      if (!ownsReasoningPrompt(captured)) return;
+      failed = true;
+      message = `${saved ? "Saved; not confirmed active. " : ""}${error.message || String(error)}`;
+    } finally {
+      if (ownsReasoningPrompt(captured)) { busy = false; render(); }
+    }
+  }
+
+  function renderPrompt(open) {
+    const next = currentContext();
+    if (context !== next) { reset(); context = next; }
+    const restoreFocus = Boolean(root.contains?.(root.ownerDocument?.activeElement));
+    const focusOnOpen = open && !wasOpen;
+    wasOpen = open;
+    if (!open) { root.innerHTML = ""; return; }
+    const profile = getProfile();
+    const canSave = Boolean(profile) && typeof client.loadConfigDashboard === "function" && typeof client.saveConfigFile === "function";
+    root.innerHTML = `<section class="reasoning-override-prompt">
+      <strong>Enable reasoning controls?</strong>
+      <p><span>${escapeHtml(profile?.label || profile?.id || "This model")}</span> currently uses the provider’s default. Enable this only if the model supports reasoning controls.</p>
+      <div class="reasoning-override-actions">
+        <button type="button" data-reasoning-enable="now"${busy || !canSave || typeof client.applyRuntimeConfiguration !== "function" ? " disabled" : ""}>${saved ? "Apply now" : "Enable and apply now"}</button>
+        <button type="button" data-reasoning-enable="later"${busy || saved || !canSave ? " disabled" : ""}>Enable on next start</button>
+      </div>
+      <small>Apply now restarts idle Runtime environments with all saved settings. Active work will not be interrupted.</small>
+      <p class="reasoning-override-status${failed ? " error-text" : ""}" role="status" aria-live="polite"${message ? "" : " hidden"}>${escapeHtml(message)}</p>
+    </section>`;
+    for (const button of root.querySelectorAll("[data-reasoning-enable]")) {
+      button.addEventListener("click", () => void enable(button.dataset.reasoningEnable === "now"));
+    }
+    if (focusOnOpen || restoreFocus) {
+      const target = root.querySelector?.("button:not(:disabled)");
+      root.tabIndex = -1;
+      (target || root).focus();
+    }
+  }
+  return { render: renderPrompt, reset };
+}

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

@@ -33,10 +33,30 @@ export function createRuntimeConfigActivation({
     const workspace = getWorkspace();
     if (!workspace?.beginExternalRuntimeMutation("saved configuration")) return;
     const environment = getEnvironmentId();
-    let activated = false;
     busy = true;
     button.disabled = true;
     status.textContent = "Restarting with saved settings…";
+    try {
+      const activated = await restartSavedConfiguration(workspace, environment);
+      if (!activated) return;
+      if (environment !== getEnvironmentId()) return;
+      const settled = await onAppliedSettled();
+      if (settled !== false) return;
+      if (environment !== getEnvironmentId()) return;
+      status.textContent =
+        "Runtime restarted. Finish your current edits, then refresh configuration to update environments.";
+    } catch {
+      if (environment !== getEnvironmentId()) return;
+      status.textContent =
+        "Runtime restarted. Refresh configuration to update this view.";
+    } finally {
+      busy = false;
+      button.disabled = false;
+    }
+  }
+
+  async function restartSavedConfiguration(workspace, environment) {
+    let activated = false;
     try {
       const result = await apply();
       if (environment !== getEnvironmentId()) return;
@@ -65,8 +85,6 @@ export function createRuntimeConfigActivation({
             : "The runtime could not restart. Try again.";
       }
     } finally {
-      busy = false;
-      button.disabled = false;
       if (activated) button.textContent = "Restart runtime";
       workspace.endExternalRuntimeMutation();
       if (environment !== getEnvironmentId()) {
@@ -75,11 +93,7 @@ export function createRuntimeConfigActivation({
         button.textContent = "Restart runtime";
       }
     }
-    if (!activated) return;
-    if (environment !== getEnvironmentId()) return;
-    if (onAppliedSettled() === false)
-      status.textContent =
-        "Runtime restarted. Finish your current edits, then refresh configuration to update environments.";
+    return activated;
   }
 
   button.addEventListener("click", applySavedConfiguration);