@abot-ai/runtime 1.5.0 → 1.7.0

package/dist/src/web-ui/app/components/composer-context-window.js

@@ -28,7 +28,19 @@ export function buildComposerContextWindowModel({
 }
 
 function compactNumber(value) {
-  return new Intl.NumberFormat("en", { notation: "compact" }).format(value);
+  return new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value);
+}
+
+function providerUsageText(usage) {
+  if (!usage) return "";
+  const parts = ["input", "output", "total"].flatMap((kind) => {
+    const value = usage[`${kind}Tokens`];
+    return value === undefined ? [] : [`${compactNumber(value)} ${kind}`];
+  });
+  return parts.length ? `Provider reported ${parts.join(" · ")} tokens` : "";
 }
 
 function formatPercent(value) {
@@ -58,7 +70,7 @@ export function createComposerContextWindow({
   const header = documentRoot.createElement("div");
   header.className = "composer-context-window-header";
   const title = documentRoot.createElement("span");
-  title.textContent = "Context window";
+  title.textContent = "Latest measured model attempt";
   const percentage = documentRoot.createElement("span");
   percentage.className = "composer-context-window-percentage";
   header.append(title, percentage);
@@ -114,7 +126,9 @@ export function createComposerContextWindow({
     percentage.textContent = "";
     detail.textContent = "";
     compaction.textContent = "";
+    compaction.hidden = true;
     provider.textContent = "";
+    provider.hidden = true;
   }
 
   function render(model) {
@@ -129,25 +143,22 @@ export function createComposerContextWindow({
       model.admissionOutcome === "rejected",
     );
     const usedPercent = formatPercent(model.usedContextPercent);
-    button.setAttribute("aria-label", `Context window: ${usedPercent} used`);
+    button.setAttribute(
+      "aria-label",
+      `Latest measured model attempt: ${model.inputTokens.toLocaleString("en")} / ${model.contextWindowTokens.toLocaleString("en")} ${model.measurementKind} input tokens, ${usedPercent} used, ${formatPercent(model.remainingContextPercent)} left, ${model.modelStep}, ${model.profileId}`,
+    );
     ring.style.setProperty(
       "--context-used",
       `${Math.max(0, Math.min(100, model.usedContextPercent))}%`,
     );
     percentage.textContent = usedPercent;
-    detail.textContent = `${compactNumber(model.estimatedInputTokens)} / ${compactNumber(
-      model.contextWindowTokens,
-    )} estimated input tokens · ${formatPercent(model.remainingContextPercent)} left · ${
-      model.modelStep || model.profileId
-    }`;
+    detail.textContent = `${compactNumber(model.inputTokens)} / ${compactNumber(model.contextWindowTokens)} ${model.measurementKind} input tokens · ${formatPercent(model.remainingContextPercent)} left · ${model.modelStep} · ${model.profileId}`;
     compaction.hidden = !model.compaction;
     compaction.textContent = model.compaction
-      ? `Compaction ${formatPercent(model.compaction.beforePercent)} → ${formatPercent(model.compaction.afterPercent)}`
-      : "";
-    provider.hidden = !model.providerUsage;
-    provider.textContent = model.providerUsage
-      ? `Provider reported ${compactNumber(model.providerUsage.inputTokens)} input · ${compactNumber(model.providerUsage.outputTokens)} output tokens`
+      ? `Last compaction (${model.compaction.modelStep} · ${model.compaction.profileId}) ${formatPercent(model.compaction.beforePercent)} → ${formatPercent(model.compaction.afterPercent)}`
       : "";
+    provider.textContent = providerUsageText(model.providerUsage);
+    provider.hidden = !provider.textContent;
   }
 
   reset();

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

@@ -126,6 +126,8 @@ export function formattedConfig(config) {
 export function createConfigWorkspaceModel() {
   const state = {
     configDashboard: null,
+    configDashboardError: false,
+    modelPluginCatalog: null,
     baselinesByKey: new Map(),
     rawDraftsByKey: new Map(),
     appliedJsonRepairKeys: new Set(),

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

@@ -0,0 +1,130 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import {
+  modelPluginRulesNeedRepair,
+  projectModelPluginSelection,
+} from "./model-plugin-selection.js";
+
+export async function loadModelPluginCatalog(loadPlugins) {
+  if (!loadPlugins) return null;
+  try {
+    const snapshot = await loadPlugins();
+    return { plugins: snapshot.plugins || [], error: "" };
+  } catch (error) {
+    return {
+      plugins: [],
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+function modelLabel(file) {
+  return file.config.label || file.id;
+}
+
+function renderCapabilitySwitch(file, plugin, capability) {
+  const reason = capability.blockedReason;
+  const reasonId = `model-tool-policy-${encodeURIComponent(file.id)}-${encodeURIComponent(plugin.id)}-${encodeURIComponent(capability.id)}`;
+  return `<li class="plugin-capability-row">
+    <div class="plugin-capability-copy">
+      <code>${escapeHtml(capability.id)}</code>
+      ${capability.description ? `<p class="plugin-capability-description" title="${escapeAttribute(capability.description)}">${escapeHtml(capability.description)}</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-config-action="model-plugin-capability-enabled"
+        data-kind="model" data-id="${escapeAttribute(file.id)}"
+        data-plugin-id="${escapeAttribute(plugin.id)}" data-capability-id="${escapeAttribute(capability.id)}"
+        aria-label="${escapeAttribute(`Allow ${capability.id} in ${plugin.id} for ${modelLabel(file)}`)}"
+        ${reason ? `aria-describedby="${escapeAttribute(reasonId)}" disabled` : ""}
+        ${capability.enabled ? "checked" : ""} />
+      <span aria-hidden="true"></span>
+    </label>
+  </li>`;
+}
+
+function renderPluginRow(file, plugin, globalPlugin, viewState) {
+  const key = JSON.stringify([file.id, plugin.id]);
+  const open = viewState.expandedPlugins?.has(key);
+  const count = plugin.capabilities.length;
+  const reason = plugin.controlBlockedReason;
+  const pluginIdentity = `${encodeURIComponent(file.id)}-${encodeURIComponent(plugin.id)}`;
+  const summaryId = `model-plugin-summary-${pluginIdentity}`;
+  const reasonId = `model-plugin-policy-${pluginIdentity}`;
+  const globallyRestricted = ["partial", "disabled"].includes(
+    globalPlugin.state,
+  );
+  return `<article class="model-plugin-row">
+    <details data-model-plugin-details="${escapeAttribute(plugin.id)}" data-model-id="${escapeAttribute(file.id)}" ${open ? "open" : ""}>
+      <summary id="${escapeAttribute(summaryId)}">
+        <span class="model-plugin-name" title="${escapeAttribute(plugin.id)}">${escapeHtml(plugin.id)}</span>
+        <span class="model-plugin-row-status">
+          ${globallyRestricted ? '<span class="model-plugin-global-note">Global restrictions</span>' : ""}
+          <span class="plugin-selection-state" data-plugin-state="${escapeAttribute(plugin.state)}">${plugin.selectedCapabilityCount}/${count} tools</span>
+        </span>
+      </summary>
+      <div class="model-plugin-details-body">
+        ${plugin.description ? `<p class="model-plugin-description">${escapeHtml(plugin.description)}</p>` : ""}
+        ${reason ? `<p class="plugin-capability-policy model-plugin-policy" id="${escapeAttribute(reasonId)}">${escapeHtml(reason)}</p>` : ""}
+        <ul class="plugin-capability-list model-plugin-capability-list" aria-label="${escapeAttribute(`Tools in ${plugin.id} for ${modelLabel(file)}`)}">
+          ${count ? plugin.capabilities.map((capability) => renderCapabilitySwitch(file, plugin, capability)).join("") : '<li class="plugin-capability-empty">This plugin does not expose any tools.</li>'}
+        </ul>
+      </div>
+    </details>
+    <label class="plugin-capability-switch model-plugin-master-switch" title="${escapeAttribute(reason || `Allow ${plugin.id} for this model`)}">
+      <input type="checkbox" role="switch" data-config-action="model-plugin-enabled"
+        data-kind="model" data-id="${escapeAttribute(file.id)}" data-plugin-id="${escapeAttribute(plugin.id)}"
+        aria-label="${escapeAttribute(`Allow ${plugin.id} for ${modelLabel(file)}`)}"
+        ${reason ? `aria-describedby="${escapeAttribute(reasonId)}" disabled` : ""}
+        ${plugin.pluginEnabled ? "checked" : ""} />
+      <span aria-hidden="true"></span>
+    </label>
+  </article>`;
+}
+
+function renderSavedRules(file, viewState) {
+  const denied = file.config.plugins?.deny || [];
+  if (!denied.length) return "";
+  const open = viewState.expandedRetainedRules?.has(file.id);
+  return `<details class="model-plugin-saved-rules" data-model-plugin-retained="${escapeAttribute(file.id)}" ${open ? "open" : ""}>
+    <summary>Saved rules <span>${denied.length}</span></summary>
+    <p>Rules without an editable switch can be changed in the model configuration file shown above.</p>
+    <ul>${denied.map((selector) => `<li><code>${escapeHtml(selector)}</code></li>`).join("")}</ul>
+  </details>`;
+}
+
+export function renderModelPluginPermissions(file, catalog, viewState = {}) {
+  if (!catalog) return "";
+  const open = catalog.error || viewState.expandedSections?.has(file.id);
+  const summaryId = `model-plugin-access-${encodeURIComponent(file.id)}`;
+  if (modelPluginRulesNeedRepair(file.config)) {
+    return `<details class="model-plugin-permissions" data-model-plugin-section="${escapeAttribute(file.id)}" open>
+      <summary id="${escapeAttribute(summaryId)}">Plugin access</summary>
+      <p class="error-text">Repair plugins.deny in the model configuration file shown above before changing model plugin restrictions.</p>
+    </details>`;
+  }
+  const plugins = catalog.plugins.map((plugin) =>
+    projectModelPluginSelection(file.config, plugin, catalog.plugins),
+  );
+  const selectedCount = plugins.reduce(
+    (count, plugin) => count + plugin.selectedCapabilityCount,
+    0,
+  );
+  const capabilityCount = plugins.reduce(
+    (count, plugin) => count + plugin.capabilities.length,
+    0,
+  );
+  return `<details class="model-plugin-permissions" data-model-plugin-section="${escapeAttribute(file.id)}" aria-label="${escapeAttribute(`Plugin access for ${modelLabel(file)}`)}" ${open ? "open" : ""}>
+    <summary id="${escapeAttribute(summaryId)}">
+      <span>Plugin access</span>
+      <span class="model-plugin-summary-count">${plugins.length} plugins · ${selectedCount}/${capabilityCount} tools available</span>
+    </summary>
+    <div class="model-plugin-permissions-body">
+      <p class="model-plugin-help">Allow plugins and individual tools for <strong>${escapeHtml(modelLabel(file))}</strong>. Global restrictions still apply. Save this model, then apply changes.</p>
+      ${catalog.error ? `<p class="error-text">Plugin list unavailable: ${escapeHtml(catalog.error)}. Refresh configuration to retry; saved restrictions are retained.</p>` : ""}
+      <div class="model-plugin-list">
+        ${plugins.map((plugin, index) => renderPluginRow(file, plugin, catalog.plugins[index], viewState)).join("")}
+      </div>
+      ${renderSavedRules(file, viewState)}
+    </div>
+  </details>`;
+}

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

@@ -0,0 +1,180 @@
+import { isConfigObject } from "./config-model.js";
+
+export function modelPluginRulesNeedRepair(config) {
+  if (config.plugins === undefined) return false;
+  if (!isConfigObject(config.plugins)) return true;
+  if (config.plugins.deny === undefined) return false;
+  if (!Array.isArray(config.plugins.deny)) return true;
+  return config.plugins.deny.some((value) => typeof value !== "string");
+}
+
+function modelDeniedSelectors(config) {
+  if (modelPluginRulesNeedRepair(config)) return [];
+  return (config.plugins?.deny || []).map((entry) => entry.trim());
+}
+
+// Browser projection of the existing deny contract; Runtime remains its enforcer.
+function selectorMatchesCapability(selector, pluginId, capabilityId) {
+  return (
+    selector === "*" ||
+    selector === pluginId ||
+    selector === capabilityId ||
+    selector === `${pluginId}.${capabilityId}`
+  );
+}
+
+function selectorEscapesModelTarget(plugins, pluginId, capabilityId, selector) {
+  return plugins.some((plugin) =>
+    (plugin.capabilities || []).some((capability) => {
+      if (plugin.id === pluginId && capabilityId === undefined) return false;
+      if (plugin.id === pluginId && capability.id === capabilityId)
+        return false;
+      return selectorMatchesCapability(selector, plugin.id, capability.id);
+    }),
+  );
+}
+
+function modelPluginGlobalBlockReason(plugin) {
+  if (plugin.blockedByGlobalPolicy)
+    return "Blocked by the global plugin policy.";
+  if (plugin.pluginEnabled === false)
+    return "Enable this plugin in global plugin settings first.";
+  if (plugin.state === "disabled")
+    return "No tools are available in global plugin settings.";
+  return "";
+}
+
+function modelPluginControlBlockReason(config, plugin, plugins, denied) {
+  if (modelPluginRulesNeedRepair(config))
+    return "Repair this model's plugin restrictions before changing tools.";
+  if (denied.includes("*"))
+    return "The saved * rule blocks every plugin for this model.";
+  const globalReason = modelPluginGlobalBlockReason(plugin);
+  if (globalReason) return globalReason;
+  if (selectorEscapesModelTarget(plugins, plugin.id, undefined, plugin.id))
+    return "This plugin selector also affects tools in another plugin. Review the saved rules.";
+  return "";
+}
+
+function modelCapabilityControlBlockReason(
+  config,
+  plugin,
+  capability,
+  plugins,
+  denied,
+) {
+  if (modelPluginRulesNeedRepair(config))
+    return "Repair this model's plugin restrictions before changing tools.";
+  if (denied.includes("*"))
+    return "The saved * rule blocks every tool for this model.";
+  if (denied.includes(plugin.id))
+    return "Enable this plugin for the model before changing individual tools.";
+  if (denied.includes(capability.id))
+    return "A shared tool restriction blocks this tool. Review the saved rules.";
+  const globalReason = modelPluginGlobalBlockReason(plugin);
+  if (globalReason) return globalReason;
+  if (capability.enabled !== true)
+    return (
+      capability.blockedReason ||
+      "This tool is unavailable in global plugin settings."
+    );
+  const selector = `${plugin.id}.${capability.id}`;
+  if (selectorEscapesModelTarget(plugins, plugin.id, capability.id, selector))
+    return "This tool selector also affects another tool. Review the saved rules.";
+  return "";
+}
+
+function modelCapabilityIsEnabled(config, plugin, capability, denied) {
+  if (modelPluginRulesNeedRepair(config)) return false;
+  if (modelPluginGlobalBlockReason(plugin)) return false;
+  if (capability.enabled !== true) return false;
+  return !denied.some((selector) =>
+    selectorMatchesCapability(selector, plugin.id, capability.id),
+  );
+}
+
+function modelPluginSelectionState(selectedCount, capabilityCount) {
+  if (selectedCount === 0) return "disabled";
+  if (selectedCount < capabilityCount) return "partial";
+  return "enabled";
+}
+
+export function projectModelPluginSelection(config, plugin, plugins) {
+  const denied = modelDeniedSelectors(config);
+  const capabilities = (plugin.capabilities || []).map((capability) => ({
+    ...capability,
+    enabled: modelCapabilityIsEnabled(config, plugin, capability, denied),
+    blockedReason: modelCapabilityControlBlockReason(
+      config,
+      plugin,
+      capability,
+      plugins,
+      denied,
+    ),
+  }));
+  const selectedCapabilityCount = capabilities.filter(
+    (capability) => capability.enabled,
+  ).length;
+  return {
+    ...plugin,
+    // The parent is configured separately from individual tools and global policy.
+    pluginEnabled:
+      !modelPluginRulesNeedRepair(config) &&
+      !denied.includes("*") &&
+      !denied.includes(plugin.id),
+    capabilities,
+    capabilityCount: capabilities.length,
+    selectedCapabilityCount,
+    state: modelPluginSelectionState(
+      selectedCapabilityCount,
+      capabilities.length,
+    ),
+    controlBlockedReason: modelPluginControlBlockReason(
+      config,
+      plugin,
+      plugins,
+      denied,
+    ),
+  };
+}
+
+function updateExactModelSelector(config, selector, enabled) {
+  const denied = config.plugins?.deny || [];
+  const matches = (entry) => entry.trim() === selector;
+  if (enabled && !denied.some(matches)) return false;
+  if (!enabled && denied.some(matches)) return false;
+  const next = enabled
+    ? denied.filter((entry) => !matches(entry))
+    : [...denied, selector];
+  config.plugins = { ...config.plugins, deny: next };
+  return true;
+}
+
+export function setModelPluginEnabled(config, plugins, pluginId, enabled) {
+  const plugin = plugins.find((entry) => entry.id === pluginId);
+  if (!plugin) return false;
+  const selection = projectModelPluginSelection(config, plugin, plugins);
+  if (selection.controlBlockedReason) return false;
+  return updateExactModelSelector(config, pluginId, enabled);
+}
+
+export function setModelCapabilityEnabled(
+  config,
+  plugins,
+  pluginId,
+  capabilityId,
+  enabled,
+) {
+  const plugin = plugins.find((entry) => entry.id === pluginId);
+  if (!plugin) return false;
+  const selection = projectModelPluginSelection(config, plugin, plugins);
+  const capability = selection.capabilities.find(
+    (entry) => entry.id === capabilityId,
+  );
+  if (!capability || capability.blockedReason) return false;
+  return updateExactModelSelector(
+    config,
+    `${pluginId}.${capabilityId}`,
+    enabled,
+  );
+}

package/dist/src/web-ui/app/components/config-workspace/model-plugin-view-state.js

@@ -0,0 +1,114 @@
+/** Model-scoped disclosures and keyboard position survive draft redraws. */
+export function createModelPluginViewState(root) {
+  const expandedSections = new Set();
+  const expandedPlugins = new Set();
+  const expandedRetainedRules = new Set();
+  let pendingFocus = null;
+  const detailSelector =
+    "details[data-model-plugin-section], details[data-model-plugin-details], details[data-model-plugin-retained]";
+  const controlSelector =
+    '[data-config-action="model-plugin-enabled"], [data-config-action="model-plugin-capability-enabled"], [data-model-plugin-section] > summary, [data-model-plugin-details] > summary, [data-model-plugin-retained] > summary';
+
+  function disclosureTarget(details) {
+    const data = details?.dataset;
+    if (!data) return null;
+    if (data.modelPluginSection)
+      return {
+        kind: "section",
+        set: expandedSections,
+        key: data.modelPluginSection,
+      };
+    if (data.modelPluginDetails)
+      return {
+        kind: "plugin",
+        set: expandedPlugins,
+        key: JSON.stringify([data.modelId, data.modelPluginDetails]),
+      };
+    if (data.modelPluginRetained)
+      return {
+        kind: "rules",
+        set: expandedRetainedRules,
+        key: data.modelPluginRetained,
+      };
+    return null;
+  }
+
+  function remember(details) {
+    if (details?.isConnected === false) return;
+    const target = disclosureTarget(details);
+    if (!target) return;
+    if (details.open) {
+      target.set.add(target.key);
+      return;
+    }
+    target.set.delete(target.key);
+  }
+
+  function controlKey(element) {
+    const data = element?.dataset;
+    if (!data) return null;
+    if (data.configAction === "model-plugin-enabled")
+      return JSON.stringify(["plugin", data.id, data.pluginId]);
+    if (data.configAction === "model-plugin-capability-enabled")
+      return JSON.stringify([
+        "capability",
+        data.id,
+        data.pluginId,
+        data.capabilityId,
+      ]);
+    if (element.tagName !== "SUMMARY") return null;
+    const details = element.parentElement;
+    const target = disclosureTarget(details);
+    if (!target) return null;
+    return JSON.stringify(["disclosure", target.kind, target.key]);
+  }
+
+  function capture() {
+    for (const details of root.querySelectorAll(detailSelector))
+      remember(details);
+    const active = root.ownerDocument?.activeElement;
+    const key = root.contains?.(active) ? controlKey(active) : null;
+    const viewport = key ? root.closest?.(".config-workspace-body") : null;
+    pendingFocus = key
+      ? { key, viewport, scrollTop: viewport?.scrollTop || 0 }
+      : null;
+  }
+
+  function canRestoreControlFocus(target) {
+    if (!target || target.isConnected === false || target.disabled)
+      return false;
+    if (target.closest?.("[hidden], [inert]")) return false;
+    if (target.getClientRects?.().length === 0) return false;
+    return true;
+  }
+
+  function restore() {
+    const focus = pendingFocus;
+    pendingFocus = null;
+    if (!focus) return;
+    const target = [...root.querySelectorAll(controlSelector)].find(
+      (element) => controlKey(element) === focus.key,
+    );
+    if (!canRestoreControlFocus(target)) return;
+    target.focus?.({ preventScroll: true });
+    if (focus.viewport && focus.viewport.isConnected !== false)
+      focus.viewport.scrollTop = focus.scrollTop;
+  }
+
+  function reset() {
+    expandedSections.clear();
+    expandedPlugins.clear();
+    expandedRetainedRules.clear();
+    pendingFocus = null;
+  }
+
+  return {
+    expandedSections,
+    expandedPlugins,
+    expandedRetainedRules,
+    remember,
+    capture,
+    restore,
+    reset,
+  };
+}

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

@@ -1,6 +1,7 @@
 import { configRequiresRawRepair } from "./raw-config-repair.js";
 import { escapeAttribute, escapeHtml, textOf } from "../../lib/text-format.js";
 import { isConfigObject } from "./config-model.js";
+import { renderModelPluginPermissions } from "./model-plugin-permissions.js";
 
 function modelListStatus(model, hasImage) {
   if (model.registered === false) return "Not registered";
@@ -15,6 +16,7 @@ function renderModelRegistrationAction(model) {
 }
 
 export function createConfigModelRendering({
+  modelPluginViewState,
   state,
   calibrationProfileLabel,
   configFileKey,
@@ -209,10 +211,10 @@ export function createConfigModelRendering({
               <strong>Model defaults</strong>
               ${renderConfigInput(model, ["supportsThinking"], {
                 type: "boolean",
-                label: "Thinking",
+                label: "Supports reasoning controls",
               })}
             </div>
-            <span>Provider, generation, and base context limits.</span>
+            <span>Unchecked uses the provider’s default reasoning; it does not disable thinking. When supported, the request mode and reasoning settings choose the effort.</span>
           </div>
           <div class="config-field-grid model-basics">
             <label><span>Label</span>${renderConfigInput(model, ["label"])}</label>
@@ -240,6 +242,7 @@ export function createConfigModelRendering({
           </div>
           ${renderExecutionRoute(model)}
         </div>
+        ${renderModelPluginPermissions(model, state.modelPluginCatalog, modelPluginViewState)}
         <details
           class="config-calibration-section"
           data-calibration-section-key="${escapeAttribute(calibrationSectionKey)}"

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

@@ -0,0 +1,39 @@
+function modelSupportsImageInput(model) {
+  const modalities = model.config?.capabilities?.inputModalities;
+  return Array.isArray(modalities) && modalities.includes("image");
+}
+
+function modelSummaryUnavailableValue(state) {
+  if (state.loading) return "Loading…";
+  if (state.configDashboardError) return "Unavailable";
+  if (!state.configDashboard?.files) return "Not loaded";
+  return null;
+}
+
+function modelChangesLabel(count) {
+  if (count === 0) return "All saved";
+  return `${count} unsaved ${count === 1 ? "model" : "models"}`;
+}
+
+export function modelSummary(state, hasPendingFileChanges) {
+  const labels = ["Registered models", "Providers", "Image input", "Model changes"];
+  const unavailable = modelSummaryUnavailableValue(state);
+  if (unavailable) return {
+    label: "Models summary",
+    items: labels.map((label) => ({ label, value: unavailable })),
+  };
+  const models = Array.isArray(state.configDashboard.files.models)
+    ? state.configDashboard.files.models : [];
+  const registered = models.filter((model) => model.registered === true);
+  const providers = new Set(registered.map((model) => model.config?.provider).filter(Boolean));
+  const pending = models.filter(hasPendingFileChanges).length;
+  return {
+    label: "Models summary",
+    items: [
+      { label: labels[0], value: String(registered.length) },
+      { label: labels[1], value: String(providers.size) },
+      { label: labels[2], value: String(registered.filter(modelSupportsImageInput).length) },
+      { label: labels[3], value: modelChangesLabel(pending), status: true, dirty: pending > 0 },
+    ],
+  };
+}

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

@@ -0,0 +1,30 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+const renderedSummaries = new WeakMap();
+
+function renderSummaryItems(summary) {
+  return summary.items.map(({ label, value, status, dirty }) => `
+    <div class="config-summary-item">
+      <dt>${escapeHtml(label)}</dt>
+      <dd class="config-summary-value${dirty ? " dirty" : ""}"
+        title="${escapeAttribute(value)}"
+        ${status ? 'data-config-summary-status role="status" aria-live="polite"' : ""}
+      >${escapeHtml(value)}</dd>
+    </div>
+  `).join("");
+}
+
+export function renderConfigurationSummary(summary) {
+  return `<dl class="config-summary" data-config-summary aria-label="${escapeAttribute(summary.label)}">${renderSummaryItems(summary)}</dl>`;
+}
+
+export function syncConfigurationSummary(root, summary) {
+  const element = root.querySelector("[data-config-summary]");
+  if (!element) return;
+  const content = renderSummaryItems(summary);
+  const previous = renderedSummaries.get(element);
+  if (previous?.content === content && previous.label === summary.label) return;
+  element.setAttribute("aria-label", summary.label);
+  element.innerHTML = content;
+  renderedSummaries.set(element, { content, label: summary.label });
+}

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

@@ -1,8 +1,13 @@
 import { rememberCalibrationDisclosure } from "./calibration-disclosure.js";
 import { textOf } from "../../lib/text-format.js";
 import { resolveModelExecutionRoute } from "./config-model.js";
+import {
+  setModelPluginEnabled,
+  setModelCapabilityEnabled,
+} from "./model-plugin-selection.js";
 
 export function createConfigWorkspaceEvents({
+  modelPluginViewState,
   state,
   dom,
   eventTarget,
@@ -91,6 +96,37 @@ export function createConfigWorkspaceEvents({
     const actionElement = element?.closest?.("[data-config-action]");
     if (!actionElement) return;
     const action = actionElement.dataset.configAction;
+    if (action === "model-plugin-enabled") {
+      mutateConfigFile(
+        "model",
+        actionElement.dataset.id,
+        (config) =>
+          setModelPluginEnabled(
+            config,
+            state.modelPluginCatalog?.plugins || [],
+            actionElement.dataset.pluginId,
+            actionElement.checked,
+          ),
+        { rerender: true },
+      );
+      return;
+    }
+    if (action === "model-plugin-capability-enabled") {
+      mutateConfigFile(
+        "model",
+        actionElement.dataset.id,
+        (config) =>
+          setModelCapabilityEnabled(
+            config,
+            state.modelPluginCatalog?.plugins || [],
+            actionElement.dataset.pluginId,
+            actionElement.dataset.capabilityId,
+            actionElement.checked,
+          ),
+        { rerender: true },
+      );
+      return;
+    }
     if (action === "step-value") {
       handleFieldMutation(actionElement);
       return;
@@ -106,6 +142,7 @@ export function createConfigWorkspaceEvents({
       state.rawPanelOpen = details.open;
       return;
     }
+    modelPluginViewState?.remember(details);
     rememberCalibrationDisclosure(state, details);
   }