@abot-ai/runtime 1.6.0 → 1.8.0

package/dist/src/web-ui/app/app.js

@@ -1,10 +1,8 @@
+import { createComposerFeature } from "./controllers/composer-feature.js";
 import { isWorkspaceChange } from "./lib/workspace-change.js";
+import { prepareEnvironmentWorkspaceChanges } from "./controllers/environment-workspace-preparation.js";
 import { createAppState } from "./app-state.js";
 import { createProjectsFeature } from "./projects-feature.js";
-import {
-  captureComposerSubmissionScope,
-  isCurrentComposerSubmissionScope,
-} from "./lib/composer-submission-scope.js";
 import { createComposerSurfaceController } from "./controllers/composer-surface-controller.js";
 import { startWebApp } from "./app-bootstrap.js";
 import { createNotificationsFeature } from "./notifications-feature.js";
@@ -26,34 +24,35 @@ import { createSessionActionsMenu } from "./components/session-actions-menu.js";
 import { createToolApprovalCard } from "./components/tool-approval-card.js";
 import { textOf } from "./lib/text-format.js";
 import { createConversationViewFeature as createConversationView } from "./controllers/conversation-view-feature.js";
-import { createSessionComposerQueue } from "./lib/session-composer-queue.js";
+import { initializeWorkspaceState, workspaceQueue, observeWorkspaceStateChange } from "./services/workspace-state.js";
 import { createRuntimeWebClient } from "./services/runtime-web-client.js";
+import { createHomeGuidancePreferences } from "./services/home-guidance-preferences.js";
 import { createClientPreferences } from "./services/client-preferences.js";
+import { createConversationWorkspaceActivation } from "./controllers/conversation-workspace-activation.js";
 import { createOperationsController } from "./controllers/operations-controller.js";
 import { createAppRealtimeTransport } from "./app-realtime-transport.js";
 import { createSteerController } from "./controllers/steer-controller.js";
 import { createSessionController } from "./controllers/session-controller.js";
-import { createComposerAttachmentsController } from "./controllers/composer-attachments-controller.js";
-import { createComposerQueueController } from "./controllers/composer-queue-controller.js";
 import { createRealtimeEventController } from "./controllers/realtime-event-controller.js";
 import { createRuntimeSelectionController } from "./controllers/runtime-selection-controller.js";
 import { createAppEventBindings } from "./controllers/app-event-bindings.js";
 import { createConversationSessionController } from "./controllers/conversation-session-controller.js";
-import { createChatRequestController } from "./controllers/chat-request-controller.js";
 import { createToolApprovalController } from "./controllers/tool-approval-controller.js";
-import { createComposerSubmitController } from "./controllers/composer-submit-controller.js";
 
 const state = createAppState();
 
 const dom = findAppDom();
 
-const preferences = createClientPreferences(localStorage);
+const storage = await initializeWorkspaceState();
+const preferences = createClientPreferences(storage);
 const runtimeClient = createRuntimeWebClient({
   getConfig: () => state.config,
   getEnvironmentId: selectedEnvironmentId,
+  onMemoryDeleted: (environment, id) => createHomeGuidancePreferences(storage).forgetReviewed(environment, id),
 });
 let conversationSession;
-let chatRequests;
+let composerFeature;
+let composerAttachments;
 let composerQueueController;
 let composerSubmitController;
 let realtimeEvents;
@@ -68,6 +67,7 @@ let projectsFeature;
 let workspaceRoutes;
 let notifications;
 const operationsController = createOperationsController({
+  onSummaryChange: () => configWorkspace?.syncSummary(),
   dom,
   client: runtimeClient,
   getEnvironmentId: selectedEnvironmentId,
@@ -100,7 +100,7 @@ const steerController = createSteerController({
 
 const shell = createWorkspaceShell({
   dom,
-  onNavigationChange: () => workspaceRoutes?.sync(),
+  onNavigationChange: () => { configWorkspace?.syncSummary(); workspaceRoutes?.sync(); },
   isWorkspaceAvailable: (destination) => {
     if (!notifications?.isWorkspaceAvailable(destination)) return false;
     return schedulesFeature?.isWorkspaceAvailable(destination) ?? false;
@@ -158,7 +158,7 @@ const composerActions = createComposerActions({
   onSendNext: () => dispatchComposerMessage("send_next"),
 });
 schedulesFeature = createSchedulesFeature({
-  dom,
+  dom, state,
   onNavigationChange: () => workspaceRoutes?.sync(),
   client: runtimeClient,
   shell,
@@ -166,7 +166,7 @@ schedulesFeature = createSchedulesFeature({
   getCurrentSessionId: () => state.currentSessionId,
   getAgentModes: () => state.supportedAgentModes,
   isRuntimeReady: runtimeOnboarding.isReady,
-  openSession: (sessionId) => conversationSession.openSession(sessionId),
+  openSession: (sessionId, options) => conversationSession.openSession(sessionId, options),
 });
 passiveLearning = createPassiveLearningFeature({
   isRuntimeReady: runtimeOnboarding.isReady,
@@ -190,7 +190,7 @@ dashboardFeature = createDashboardFeature({
   schedules: schedulesFeature,
   selectedEnvironmentId,
   loadSessions,
-  openSession: (sessionId) => conversationSession.openSession(sessionId),
+  openSession: (sessionId, options) => conversationSession.openSession(sessionId, options),
   isComposerAvailable: runtimeOnboarding.isReady,
   passiveLearning,
 });
@@ -207,6 +207,7 @@ const {
   renderAttachmentComposer,
   removeUnsupportedPendingImages,
   updateComposerSendState,
+  refreshComposerSubmissionState,
   uploadComposerAttachment,
   resizeComposerInput,
   dispatchComposerMessage,
@@ -215,12 +216,11 @@ const {
   getHomeComposer: () => homeComposer,
   getChatAttachments: () => composerAttachments,
   getChatSubmit: () => composerSubmitController,
+  refreshComposerSurfaces: () => composerFeature?.changed(),
   rememberModelSelection: rememberCurrentModelSelection,
   showToast: shell.showToast,
 });
-const sessionComposerQueue = createSessionComposerQueue({
-  storage: localStorage,
-});
+const sessionComposerQueue = workspaceQueue();
 const sessionActionsMenu = createSessionActionsMenu({
   container: dom.sessionsList,
 });
@@ -242,30 +242,12 @@ const sessionController = createSessionController({
     }
     conversationSession.clearSessionMessagesView();
   },
+  onSessionAttachmentsCleared: (scope) => composerWorkspace.drafts.clearAttachments(scope),
   onClearSessionMode: clearSessionMode,
   onSaveModelPreferences: saveModelPreferences,
   onReload: () => conversationSession.loadSessions(),
   onControlEvent: recordControlEvent,
 });
-const composerAttachments = createComposerAttachmentsController({
-  state,
-  dom,
-  shell,
-  client: runtimeClient,
-  selectedEnvironmentId,
-  selectedModelSupportsImageInput: () =>
-    runtimeSelection.selectedModelSupportsImageInput(
-      composerWorkspace.isChatVisible()
-        ? dom.modelSelect.value
-        : state.sessionModels[state.currentSessionId] ||
-            state.defaultModelProfileId,
-    ),
-  ensureSession: () => conversationSession.ensureSession(),
-  onSendStateChange: updateComposerSendState,
-  onControlEvent: recordControlEvent,
-  isComposerAvailable: runtimeOnboarding.isReady,
-  isComposerVisible: composerWorkspace.isChatVisible,
-});
 const toolApprovalController = createToolApprovalController({
   state,
   selectedEnvironmentId,
@@ -314,7 +296,6 @@ conversationSession = createConversationSessionController({
     !dom.chatPanel.inert &&
     document.visibilityState === "visible",
   onSessionListState: dashboardFeature.sessionsChanged,
-  clearPendingAttachments,
   applyConversationChrome: applyConversationModeChrome,
   applyModelSelection: applyModelSelectionForCurrentSession,
   renderSessions,
@@ -328,13 +309,36 @@ conversationSession = createConversationSessionController({
   reportQueueFailure: (scope, summary) =>
     composerQueueController.reportFailure(scope, summary),
   drainQueuedMessage: (input) => composerQueueController.drain(input),
-  suspendQueueRecovery: () =>
-    composerQueueController.suspendRecoveryForNavigation(),
+  suspendQueueRecovery: (canNavigate) =>
+    composerQueueController.suspendRecoveryForNavigation(canNavigate),
   recoverBlockedQueue: (scope) =>
     composerQueueController.recoverForManualSend(scope),
   isCurrentComposerScope: (scope) =>
     composerQueueController.isCurrentScope(scope),
 });
+composerFeature = createComposerFeature({
+  state, dom: composerWorkspace.chatDom, shell, client: runtimeClient,
+  sessionQueue: sessionComposerQueue, conversationSession, conversationView,
+  drafts: composerWorkspace.drafts, getDraft: composerWorkspace.chatView.current,
+  getEnvironmentId: selectedEnvironmentId,
+  ensureSession: () => conversationSession.ensureSession(),
+  getSettings: () => {
+    rememberCurrentModelSelection();
+    return { agentMode: state.agentMode, toolPermissionMode: currentToolPermissionMode(), modelPreference: selectedModelPreference() };
+  },
+  steer: steerController.steer, composerActions,
+  selectedModelSupportsImageInput: () => runtimeSelection.selectedModelSupportsImageInput(
+    composerWorkspace.isChatVisible() ? dom.modelSelect.value : state.sessionModels[state.currentSessionId] || state.defaultModelProfileId),
+  isComposerAvailable: runtimeOnboarding.isReady,
+  getSubmissionBlock: runtimeOnboarding.submissionBlock,
+  onSubmissionBlocked: runtimeOnboarding.presentSubmissionBlock,
+  isVisible: composerWorkspace.isChatVisible, renderSessions, renderMessages,
+  applyConversationChrome: applyConversationModeChrome,
+  setMessageStatus: setMessageActivityStatus, recordControlEvent,
+});
+composerAttachments = composerFeature.attachments;
+composerQueueController = composerFeature.queue;
+composerSubmitController = composerFeature.submit;
 projectsFeature = createProjectsFeature({
   isRuntimeReady: runtimeOnboarding.isReady,
   onSessionCreated: (sessionId) =>
@@ -347,65 +351,7 @@ projectsFeature = createProjectsFeature({
   conversationSession,
   renderSessions,
   closeFilePreview: conversationView.closeFilePreview,
-  prepareConversation: () => {
-    const activate = shell.prepareWorkspaceActivation("chat", { focus: false });
-    if (!activate) return false;
-    if (!composerQueueController.suspendRecoveryForNavigation()) return false;
-    return activate() !== false;
-  },
-});
-chatRequests = createChatRequestController({
-  state,
-  client: runtimeClient,
-  sessionQueue: sessionComposerQueue,
-  conversationView,
-  conversationSession,
-  attachments: composerAttachments,
-  currentComposerScope: () => composerQueueController.currentScope(),
-  isCurrentComposerScope: (scope) =>
-    composerQueueController.isCurrentScope(scope),
-  rememberModelSelection: rememberCurrentModelSelection,
-  applyConversationChrome: applyConversationModeChrome,
-  renderSessions,
-  renderAttachments: renderAttachmentComposer,
-  getToolPermissionMode: currentToolPermissionMode,
-  getModelPreference: selectedModelPreference,
-  clearQueueRecovery: (scope) => composerQueueController.clearRecovery(scope),
-  reportQueueFailure: (scope, summary) =>
-    composerQueueController.reportFailure(scope, summary),
-});
-composerQueueController = createComposerQueueController({
-  state,
-  dom: composerWorkspace.chatDom,
-  queue: sessionComposerQueue,
-  selectedEnvironmentId,
-  getToolPermissionMode: currentToolPermissionMode,
-  getModelPreference: selectedModelPreference,
-  rememberModelSelection: rememberCurrentModelSelection,
-  attachments: composerAttachments,
-  updateSendState: updateComposerSendState,
-  postChatMessage: chatRequests.postChatMessage,
-  appendLocalUserMessage: conversationSession.appendLocalUserMessage,
-  activateRequestForScope: conversationSession.activateRequestForScope,
-  renderMessages,
-  setMessageStatus: setMessageActivityStatus,
-  recordControlEvent,
-  resizeComposer: resizeComposerInput,
-});
-composerSubmitController = createComposerSubmitController({
-  state,
-  dom: composerWorkspace.chatDom,
-  composerActions,
-  attachments: composerAttachments,
-  queue: composerQueueController,
-  steer: (text) => steerController.steer(text),
-  chatRequests,
-  conversationSession,
-  selectedEnvironmentId,
-  setMessageStatus: setMessageActivityStatus,
-  getSubmissionBlock: runtimeOnboarding.submissionBlock,
-  onSubmissionBlocked: runtimeOnboarding.presentSubmissionBlock,
-  isComposerVisible: composerWorkspace.isChatVisible,
+  prepareConversation: createConversationWorkspaceActivation({ state, shell, composerQueue: composerQueueController, selectedEnvironmentId }),
 });
 realtimeEvents = createRealtimeEventController({
   state,
@@ -452,6 +398,7 @@ runtimeSelection = createRuntimeSelectionController({
   client: runtimeClient,
   recordControlEvent,
   onAttachmentPolicyChange: renderAttachmentComposer,
+  onReasoningConfigurationApplied: () => configWorkspace.reloadAppliedEnvironmentModels(),
   onModelCatalogLoading: runtimeOnboarding.beginCatalogLoad,
   onModelCatalogLoaded: runtimeOnboarding.applyCatalog,
   onModelCatalogUnavailable: runtimeOnboarding.catalogUnavailable,
@@ -459,59 +406,15 @@ runtimeSelection = createRuntimeSelectionController({
 });
 homeComposer = createHomeComposerFeature({
   workspace: composerWorkspace,
-  shell,
-  client: runtimeClient,
-  composerActions,
-  selectedEnvironmentId,
-  selectedModelSupportsImageInput: () =>
-    runtimeSelection.selectedModelSupportsImageInput(
-      composerWorkspace.isHome()
-        ? dom.modelSelect.value
-        : state.sessionModels[composerWorkspace.homeState.currentSessionId] ||
-            state.defaultModelProfileId,
-    ),
-  isComposerAvailable: runtimeOnboarding.isReady,
-  getSubmissionBlock: runtimeOnboarding.submissionBlock,
-  onSubmissionBlocked: runtimeOnboarding.presentSubmissionBlock,
-  onControlEvent: recordControlEvent,
-  onStateChange: updateComposerSendState,
+  composer: composerFeature,
+  selectedModelSupportsImageInput: () => runtimeSelection.selectedModelSupportsImageInput(
+    composerWorkspace.isHome() ? dom.modelSelect.value : state.sessionModels[composerWorkspace.ensureHomeSession()] || state.defaultModelProfileId),
   activateHomeSession: createHomeConversationActivation({
-    state,
-    shell,
-    conversationSession,
-    composerQueue: composerQueueController,
-    preferences,
-    selectedEnvironmentId,
-    renderSessions,
-    renderMessages,
+    state, shell, conversationSession, composerQueue: composerQueueController,
+    preferences, selectedEnvironmentId, renderSessions, renderMessages,
     applyModelSelection: applyModelSelectionForCurrentSession,
-    setCurrentTitle: setCurrentSessionTitle,
-    updateComposerSendState,
+    setCurrentTitle: setCurrentSessionTitle, updateComposerSendState,
   }),
-  sendMessage: async (text) => {
-    const scope = captureComposerSubmissionScope(
-      state,
-      selectedEnvironmentId(),
-    );
-    state.composerSending = true;
-    updateComposerSendState();
-    try {
-      await chatRequests.sendMessage(text);
-    } catch (error) {
-      if (
-        !isCurrentComposerSubmissionScope(scope, state, selectedEnvironmentId())
-      )
-        return;
-      conversationSession.appendRequestError(error);
-    } finally {
-      if (
-        isCurrentComposerSubmissionScope(scope, state, selectedEnvironmentId())
-      ) {
-        state.composerSending = false;
-        updateComposerSendState();
-      }
-    }
-  },
 });
 const appEventBindings = createAppEventBindings({
   onNavigationChange: () => workspaceRoutes?.sync(),
@@ -537,11 +440,7 @@ const appEventBindings = createAppEventBindings({
     subscribeSession,
     renderMessages,
     renderAgentPicker,
-    savedEnvironmentId,
-    beforeEnvironmentChange: () => {
-      if (!schedulesFeature.prepareLeave()) return false;
-      return configWorkspace.prepareDiscardChanges("change environment");
-    },
+    beforeEnvironmentChange: () => prepareEnvironmentWorkspaceChanges(schedulesFeature, configWorkspace),
     saveEnvironmentId,
     loadModels,
     loadAgentMode,
@@ -556,6 +455,7 @@ const appEventBindings = createAppEventBindings({
     dispatchComposerMessage,
     resizeComposer: resizeComposerInput,
     updateComposerSendState,
+    refreshComposerSubmissionState,
     loadRuntimeStatus,
     loadRuntimeLogs,
     loadSystemHealth,
@@ -563,11 +463,14 @@ const appEventBindings = createAppEventBindings({
 });
 
 configWorkspace = createConfigurationFeature({
+  getOperationsSummary: () => operationsController.summary(shell.activeOperationsTab()),
   getLearningSnapshot: () => passiveLearning?.snapshot(),
   isRuntimeReady: runtimeOnboarding.isReady,
+  isComputerAccessAvailable: () => shell.isWorkspaceAvailable("config"),
   onNavigationChange: () => workspaceRoutes?.sync(),
   state,
   selection: runtimeSelection,
+  changeEnvironment: (...args) => appEventBindings.changeEnvironment(...args),
   onConfigurationApplied: loadModels,
   dom,
   runtimeClient,
@@ -637,12 +540,8 @@ function renderPermissionModeControl() {
   runtimeSelection.renderPermissionMode();
 }
 
-function savedEnvironmentId() {
-  return preferences.environmentId();
-}
-
 function saveEnvironmentId(environmentId) {
-  preferences.saveEnvironmentId(environmentId);
+  return preferences.saveEnvironmentId(environmentId);
 }
 
 function saveSessionIdForEnvironment(environmentId, sessionId) {
@@ -713,6 +612,7 @@ function rejectPendingSteers(reason) {
 }
 
 function handleRealtimeMessage(message) {
+  observeWorkspaceStateChange(message);
   dashboardFeature?.handleRealtime(message);
   schedulesFeature?.handleRealtime(message);
   passiveLearning?.handleRealtime(message);

package/dist/src/web-ui/app/components/automations/node-inspector.js

@@ -1,3 +1,4 @@
+import { renderReasoningModeField, retainedReasoningMode } from "../../lib/reasoning-controls.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { readBindingFields, renderBindingFields } from "./binding-fields.js";
 import { hasConnectedAutomationResultInput } from "../../lib/automation-binding-producers.js";
@@ -134,7 +135,7 @@ function renderAgentEditor(node, catalog, producers) {
   return `${producers.length ? `<p class="automation-input-notice" data-input-connection="${connected ? "connected" : "none"}"${connected ? " hidden" : ""}>No earlier step output is connected. Connect an output below if this agent should use it.</p>` : ""}
     ${renderBindingFields(node.inputs, null, { name: "inputs", allowAdd: true, producers })}
     ${renderModelChoice(node, catalog)}
-    <label>Mode<select name="agentMode"><option value="fast"${node.agentMode === "fast" ? " selected" : ""}>Fast</option><option value="reasoning"${node.agentMode === "reasoning" ? " selected" : ""}>Reasoning</option><option value="deep"${node.agentMode === "deep" ? " selected" : ""}>Deep</option></select></label>
+    ${renderReasoningModeField(node.agentMode || "fast", catalog?.models?.find((model) => model.id === node.modelProfileId))}
     <label>Role instructions<textarea name="roleInstructions" dir="auto">${escapeHtml(node.roleInstructions || "")}</textarea></label>
     <label>Prompt<textarea name="prompt" dir="auto" required>${escapeHtml(node.prompt || "")}</textarea></label>
     <details class="automation-node-contract"><summary>Result contract · ${node.result?.kind === "json" ? "Structured JSON" : "Text"}</summary>
@@ -217,7 +218,7 @@ export function readAutomationNodePatch(form, node, catalog) {
   };
   if (node.kind === "agent") {
     patch.modelProfileId = String(fields.get("modelProfileId") || "");
-    patch.agentMode = String(fields.get("agentMode") || "fast");
+    patch.agentMode = retainedReasoningMode(form, node.agentMode || "fast");
     patch.roleInstructions = String(fields.get("roleInstructions") || "");
     patch.prompt = String(fields.get("prompt") || "");
     patch.inputs = readBindingFields(form, "inputs");

package/dist/src/web-ui/app/components/automations/step-editor-dialog.js

@@ -1,3 +1,4 @@
+import { syncReasoningModeField } from "../../lib/reasoning-controls.js";
 import { escapeHtml } from "../../lib/text-format.js";
 import { listAvailableAutomationProducers } from "../../lib/automation-binding-producers.js";
 import { findAutomationNode } from "./timeline.js";
@@ -164,6 +165,8 @@ export function createAutomationStepEditorDialog({ root, actions, documentRoot,
     if (target.matches("[data-agent-tool-search]")) { updateAgentToolPicker(form); return; }
     if (!form.contains(target) || entry.saving) return;
     entry.dirty = true;
+    if (event.type === "change" && target.matches('[name="modelProfileId"]'))
+      syncReasoningModeField(form, entry.catalog?.models);
     if (target.matches("[data-agent-tool]")) updateAgentToolPicker(form);
     if (event.type === "change" && target.matches('[name="toolOperation"]')) {
       const operations = entry.catalog?.grantableOperations || entry.catalog?.operations || [];

package/dist/src/web-ui/app/components/composer-submission-notice.js

@@ -0,0 +1,50 @@
+/** Manual review is explicit; displaying an uncertain outcome never retries it. */
+export function createComposerSubmissionNotice({ form, review, recover }) {
+  const root = form.ownerDocument.createElement("div");
+  root.className = "composer-submission-notice";
+  root.setAttribute("role", "status");
+  root.hidden = true;
+  form.appendChild(root);
+  return {
+    render(attempts, recovery) {
+      root.replaceChildren();
+      root.hidden = attempts.length === 0 && !recovery;
+      for (const attempt of attempts) {
+        const row = form.ownerDocument.createElement("div");
+        const label = form.ownerDocument.createElement("span");
+        label.textContent = attempt.action === "send_next"
+          ? "Queue save could not be confirmed. Reload and check Send next before repeating this message."
+          : "A message could not be confirmed. Check the conversation before sending it again.";
+        row.appendChild(label);
+        if (attempt.action !== "send_next") {
+          const button = form.ownerDocument.createElement("button");
+          button.type = "button";
+          button.textContent = "Review message";
+          button.addEventListener("click", async () => {
+            button.disabled = true;
+            try { await review(attempt); }
+            finally { button.disabled = false; }
+          });
+          row.appendChild(button);
+        }
+        root.appendChild(row);
+      }
+      if (!recovery) return;
+      const row = form.ownerDocument.createElement("div");
+      const label = form.ownerDocument.createElement("span");
+      label.textContent = recovery.draftEmpty
+        ? "A queued message is paused and ready for manual review."
+        : "Finish or clear your current draft to review the paused queued message.";
+      const button = form.ownerDocument.createElement("button");
+      button.type = "button";
+      button.textContent = "Review queued message";
+      button.disabled = !recovery.draftEmpty;
+      button.addEventListener("click", async () => {
+        button.disabled = true;
+        try { await recover(recovery.scope); }
+        finally { button.disabled = !recovery.draftEmpty; }
+      });
+      row.appendChild(label); row.appendChild(button); root.appendChild(row);
+    },
+  };
+}

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,136 @@
+import {
+  isPluginPlatformUnavailable,
+  renderPluginPlatformNotice,
+} from "../plugins/compatibility.js";
+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">
+          ${isPluginPlatformUnavailable(plugin.compatibility) ? '<span class="model-plugin-platform-note">Unavailable on this host</span>' : ""}
+          ${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>
+      ${renderPluginPlatformNotice(plugin.compatibility)}
+      <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 selected</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>`;
+}