@abot-ai/runtime 1.6.0 → 1.8.0

package/dist/src/web-ui/app/services/workspace-state-storage.js

@@ -0,0 +1,116 @@
+/** The in-memory view is a projection; only the server acknowledges persistence. */
+export function createWorkspaceStateStorage({ fetchImpl = fetch, onError = () => {} } = {}) {
+  let snapshot = null;
+  const lanes = new Map();
+  const failures = new Map();
+  const pending = [];
+  const listeners = new Set();
+
+  async function request(input) {
+    let response;
+    let result;
+    try {
+      response = await fetchImpl("/web-ui-state", input ? {
+        method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(input),
+      } : { cache: "no-store" });
+      result = await response.json();
+    } catch (error) { throw uncertainMutationError(error, input); }
+    if (!response.ok) throw workspaceResponseFailure(response, result, input);
+    if (result.state?.version !== 1 || !Number.isSafeInteger(result.state.revision) ||
+        !result.state.preferences || typeof result.state.queue !== "string")
+      throw uncertainMutationError(new Error("The server returned invalid workspace state."), input);
+    if (!snapshot || result.state.revision >= snapshot.revision) snapshot = result.state;
+    return result.result;
+  }
+  function laneFor(input) {
+    if (input.kind === "preference") return `preference:${input.key}`;
+    if (input.kind === "queue") return `queue:${JSON.stringify([input.scope.environmentId, input.scope.sessionId])}`;
+    return input.kind;
+  }
+  function report(error, lane) {
+    failures.set(lane, error);
+    onError(error);
+  }
+  function execute(input, completed = () => {}) {
+    const lane = laneFor(input);
+    const result = (lanes.get(lane) || Promise.resolve()).then(async () => {
+      if (failures.has(lane)) throw failures.get(lane);
+      const previousPreferences = JSON.stringify(snapshot?.preferences);
+      const value = await request(input);
+      try {
+        completed();
+        if (JSON.stringify(snapshot.preferences) !== previousPreferences)
+          for (const listener of listeners) listener();
+      } catch (error) { throw uncertainMutationError(error, input); }
+      return value;
+    });
+    // Ordering/failure belongs to this preference or queue scope. The acknowledged
+    // server snapshot remains shared; an unrelated failure is never permission to retry.
+    lanes.set(lane, result.then(() => undefined, (error) => report(error, lane)));
+    return result;
+  }
+  function getItem(key) {
+    const queued = pending.findLast((entry) => entry.key === key);
+    if (queued) return queued.value;
+    return snapshot?.preferences[key] ?? null;
+  }
+  function write(key, value) {
+    if (!snapshot) throw new Error("Workspace settings have not loaded.");
+    if (failures.has(`preference:${key}`)) {
+      const rejected = Promise.reject(failures.get(`preference:${key}`));
+      void rejected.catch(() => {});
+      return rejected;
+    }
+    const before = getItem(key);
+    if (before === value) return Promise.resolve();
+    const entry = { key, before, value };
+    pending.push(entry);
+    const discardPending = () => {
+      const index = pending.indexOf(entry);
+      if (index >= 0) pending.splice(index, 1);
+    };
+    const result = execute({ kind: "preference", ...entry }, discardPending);
+    void result.catch(() => {
+      discardPending();
+      for (const listener of listeners) listener();
+    });
+    return result;
+  }
+  return {
+    getItem,
+    setItem: (key, value) => write(key, String(value)),
+    removeItem: (key) => write(key, null),
+    execute,
+    async flush() {
+      await Promise.all(lanes.values());
+      if (failures.size) throw failures.values().next().value;
+    },
+    async refresh() {
+      try {
+        const previous = snapshot?.revision;
+        await request();
+        if (snapshot.revision !== previous) for (const listener of listeners) listener();
+      } catch (error) { report(error, "refresh"); throw error; }
+    },
+    subscribe(listener) { listeners.add(listener); return () => listeners.delete(listener); },
+    snapshot: () => snapshot,
+    error: () => failures.values().next().value ?? null,
+  };
+}
+
+function uncertainMutationError(error, input) {
+  if (!input) return error;
+  const failure = error instanceof Error ? error : new Error(String(error));
+  // An absent acknowledgement cannot prove a POST had no durable effect.
+  failure.workspaceMutationMayHaveCommitted = true;
+  return failure;
+}
+
+function workspaceResponseFailure(response, result, input) {
+  const error = new Error(result.message || "Workspace state is unavailable.");
+  error.status = response.status;
+  error.code = result.error;
+  if (response.status < 500) return error;
+  // A server failure may follow durable publication, such as lock cleanup failure.
+  return uncertainMutationError(error, input);
+}

package/dist/src/web-ui/app/services/workspace-state.js

@@ -0,0 +1,27 @@
+import { createWorkspaceStateStorage } from "./workspace-state-storage.js";
+import { createServerComposerQueue } from "./server-composer-queue.js";
+import { acknowledgeWorkspaceStorage, showWorkspaceStorageFailure } from "../components/workspace-storage-notice.js";
+import { createStartupScreen } from "../components/startup-screen.js";
+
+let storage;
+let queue;
+export const workspaceStorage = () => storage;
+export const workspaceQueue = () => queue;
+export function observeWorkspaceStateChange(message) {
+  if (message.type !== "workspace_changed" || !message.resources?.includes("client-state")) return;
+  void storage?.refresh().catch(showWorkspaceStorageFailure);
+}
+
+export async function initializeWorkspaceState() {
+  storage = createWorkspaceStateStorage({ onError: showWorkspaceStorageFailure });
+  try {
+    await storage.refresh();
+    await acknowledgeWorkspaceStorage(storage);
+    queue = createServerComposerQueue(storage);
+    window.addEventListener("focus", () => void storage.refresh().catch(showWorkspaceStorageFailure));
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") void storage.refresh().catch(showWorkspaceStorageFailure);
+    });
+    return storage;
+  } catch (error) { createStartupScreen().fail(error); throw error; }
+}

package/dist/src/web-ui/app/spark-chat-conversation.js

@@ -1,16 +1,16 @@
+import { canChooseReasoning } from "./lib/reasoning-controls.js";
+import { createComposerFeature } from "./controllers/composer-feature.js";
+import { createComposerDrafts } from "./controllers/composer-drafts.js";
+import { createComposerDraftView } from "./controllers/composer-draft-view.js";
+import { workspaceQueue } from "./services/workspace-state.js";
 import { createAppState } from "./app-state.js";
 import { createConversationViewFeature } from "./controllers/conversation-view-feature.js";
 import { createConversationSessionController } from "./controllers/conversation-session-controller.js";
-import { createChatRequestController } from "./controllers/chat-request-controller.js";
-import { createComposerQueueController } from "./controllers/composer-queue-controller.js";
-import { createComposerSubmitController } from "./controllers/composer-submit-controller.js";
-import { createComposerAttachmentsController } from "./controllers/composer-attachments-controller.js";
 import { createRealtimeEventController } from "./controllers/realtime-event-controller.js";
 import { createSteerController } from "./controllers/steer-controller.js";
 import { createToolApprovalController } from "./controllers/tool-approval-controller.js";
 import { createToolApprovalCard } from "./components/tool-approval-card.js";
 import { createComposerActions } from "./components/composer-actions.js";
-import { createSessionComposerQueue } from "./lib/session-composer-queue.js";
 import { normalizeRealtimeMessage } from "./lib/realtime-message.js";
 import { createSparkChatResults } from "./components/spark-chat/results.js";
 import { sparkMessageStatus, sparkWorkingStatus } from "./lib/spark-chat-presentation.js";
@@ -23,24 +23,29 @@ export function createSparkChatConversation({
   dom, client, shell, getEnvironmentId, getConfiguration, isOpen, isConnected,
   getSubmissionBlock, scrollBehavior, refresh, onReadState, onRender,
   onOpenSchedule = () => {}, onOpenModelSettings = () => {},
-  sendRealtime, onComposerStateChange = () => {}, storage = localStorage,
+  sendRealtime, onComposerStateChange = () => {}, sessionQueue = workspaceQueue(),
   captureHandoffNavigation, onHandoffOpened,
 }) {
   const state = createAppState();
-  const sessionQueue = createSessionComposerQueue({ storage });
+  const drafts = createComposerDrafts();
+  const draftView = createComposerDraftView({ input: dom.composerInput,
+    getDraft: () => drafts.open({ environmentId: getEnvironmentId(), sessionId: state.currentSessionId }), isVisible: isOpen });
+  drafts.subscribe(draftView.refresh);
+  draftView.display();
   const mascotActivity = createSparkMascotActivity({ state, dom, isConnected });
   let session;
   let view;
   let realtime;
   let queue;
   let submit;
+  let attachments;
   const status = (text, busy = false) => {
     dom.messagesList.setAttribute("aria-busy", String(busy));
     dom.messageStatusRegion.textContent = sparkMessageStatus(text);
   };
   const render = () => { view?.render(); mascotActivity.render(); onRender?.(); };
   const renderActivityStatus = () => { view?.renderActivityStatus(); mascotActivity.render(); };
-  const updateSendState = () => { submit?.updateSendState(); mascotActivity.render(); onComposerStateChange(state.composerSending); };
+  const updateSendState = () => { draftView.display(); submit?.updateSendState(); mascotActivity.render(); onComposerStateChange(state.composerSending); };
   const recordControlEvent = (event) => realtime?.recordControlEvent(event);
   const getToolPermissionMode = () => getConfiguration()?.toolPermissionMode || "ask";
   const getModelPreference = () => {
@@ -56,13 +61,6 @@ export function createSparkChatConversation({
     onAccepted: (message) => session.insertSteerMessage(message),
   });
   const actions = createComposerActions({ dom, onSendNext: () => submit.dispatch("send_next") });
-  const attachments = createComposerAttachmentsController({
-    state, dom, shell, client, selectedEnvironmentId: getEnvironmentId,
-    selectedModelSupportsImageInput: () => getConfiguration()?.supportsImageInput === true,
-    ensureSession: () => session.ensureSession(), onSendStateChange: updateSendState,
-    onControlEvent: recordControlEvent,
-    isComposerAvailable: () => !getSubmissionBlock(), isComposerVisible: isOpen,
-  });
   const approvals = createToolApprovalController({
     state, selectedEnvironmentId: getEnvironmentId, sendRealtime,
     renderMessages: render, recordControlEvent, createCard: createToolApprovalCard,
@@ -88,7 +86,7 @@ export function createSparkChatConversation({
     getPendingApproval: approvals.pendingEvent, getPendingApprovals: approvals.pendingEvents,
     createApprovalCard: approvals.createCard,
     copyText: (text) => navigator.clipboard.writeText(text),
-    notify: shell.showToast, resolveAttachmentUrl: attachments.previewUrl,
+    notify: shell.showToast, resolveAttachmentUrl: (file) => attachments.previewUrl(file),
     onOpenSchedule, canOpenSchedule: () => client.supportsSchedules?.() === true,
     scrollBehavior,
     sparkActions: createSparkHandoffActions({
@@ -113,41 +111,32 @@ export function createSparkChatConversation({
     sessionQueue, conversationView: view, selectedEnvironmentId: getEnvironmentId,
     // Reading belongs to actual visible rows in the popup, never to session activation.
     isConversationVisible: () => false,
-    clearPendingAttachments() {}, applyConversationChrome() {}, applyModelSelection() {}, renderSessions() {},
+    applyConversationChrome() {}, applyModelSelection() {}, renderSessions() {},
     renderMessages: render, updateComposerSendState: updateSendState, setMessageStatus: status,
     sendRealtime, handleRealtimeMessage: (message) => realtime.handle(message),
     recordEvent: (message) => realtime.recordEvent(message), recordControlEvent,
     reportQueueFailure: (...args) => queue.reportFailure(...args),
     drainQueuedMessage: (...args) => queue.drain(...args),
-    suspendQueueRecovery: () => queue.suspendRecoveryForNavigation(),
+    suspendQueueRecovery: (canNavigate) => queue.suspendRecoveryForNavigation(canNavigate),
     recoverBlockedQueue: (...args) => queue.recoverForManualSend(...args),
     isCurrentComposerScope: isScopeCurrent,
     createSessionId() { throw new Error("SPARK conversation is not ready yet."); },
   });
-  const requests = createChatRequestController({
-    state, client, sessionQueue, conversationView: view, conversationSession: session,
-    attachments, currentComposerScope: scope, isCurrentComposerScope: isScopeCurrent,
-    rememberModelSelection() {}, applyConversationChrome() {}, renderSessions() {},
-    renderAttachments: attachments.render, getToolPermissionMode, getModelPreference,
-    clearQueueRecovery: (...args) => queue.clearRecovery(...args),
-    reportQueueFailure: (...args) => queue.reportFailure(...args),
-  });
-  queue = createComposerQueueController({
-    state, dom, queue: sessionQueue, selectedEnvironmentId: getEnvironmentId,
-    getToolPermissionMode, getModelPreference, rememberModelSelection() {}, attachments,
-    updateSendState, postChatMessage: requests.postChatMessage,
-    appendLocalUserMessage: session.appendLocalUserMessage,
-    activateRequestForScope: session.activateRequestForScope,
-    renderMessages: render, setMessageStatus: status, recordControlEvent,
-    resizeComposer: () => submit.resize(),
-  });
-  submit = createComposerSubmitController({
-    state, dom, composerActions: actions, attachments, queue, steer: steer.steer,
-    chatRequests: requests, conversationSession: session,
-    selectedEnvironmentId: getEnvironmentId, setMessageStatus: status,
-    getSubmissionBlock, onSubmissionBlocked: (block) => shell.showToast(block.message || "SPARK is not ready.", "failed"),
-    isComposerVisible: isOpen,
+  const composer = createComposerFeature({
+    state, dom: { ...dom, composerInput: draftView.surface }, shell, client, sessionQueue,
+    drafts, getDraft: draftView.current, conversationSession: session, conversationView: view,
+    getEnvironmentId, ensureSession: () => session.ensureSession(),
+    getSettings: () => ({ agentMode: state.agentMode, toolPermissionMode: getToolPermissionMode(), modelPreference: getModelPreference() }),
+    steer: steer.steer, composerActions: actions,
+    selectedModelSupportsImageInput: () => getConfiguration()?.supportsImageInput === true,
+    isComposerAvailable: () => !getSubmissionBlock(), getSubmissionBlock,
+    onSubmissionBlocked: (block) => shell.showToast(block.message || "SPARK is not ready.", "failed"),
+    isVisible: isOpen, renderSessions() {}, renderMessages: render, applyConversationChrome() {},
+    setMessageStatus: status, recordControlEvent, onChange: () => onComposerStateChange(state.composerSending),
   });
+  attachments = composer.attachments;
+  queue = composer.queue;
+  submit = composer.submit;
   realtime = createRealtimeEventController({
     state, shell, selectedEnvironmentId: getEnvironmentId,
     handleSteerAcknowledgement: steer.handleAcknowledgement,
@@ -201,16 +190,16 @@ export function createSparkChatConversation({
   return {
     state, session, view, attachments, render, handleRealtime, bind, queue,
     prepareEnvironmentChange: () => queue.prepareRecoveryForNavigation(),
-    setAgentMode(mode) { state.agentMode = mode; },
+    setAgentMode(mode) { if (canChooseReasoning(getConfiguration())) state.agentMode = mode; },
     update() {
       state.connected = isConnected();
-      attachments.render(); updateSendState(); renderActivityStatus();
+      draftView.display(); composer.changed(); updateSendState(); renderActivityStatus();
       if (!state.messages.length) render();
     },
     reset() {
       steer.rejectAll("SPARK environment changed.");
-      attachments.clear(); session.invalidateEnvironmentLoads(); session.clearCurrentSessionView();
-      dom.composerInput.value = "";
+      draftView.saveDisplayed(); session.invalidateEnvironmentLoads(); session.clearCurrentSessionView();
+      draftView.display();
     },
     status,
   };

package/dist/src/web-ui/app/spark-chat-feature.js

@@ -15,11 +15,26 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
   let configuration;
   let readState;
   let environmentId = "";
+  let available = false;
+  let accessRevision = 0;
   let sync;
   let settings;
   let conversation;
   let awaitingOpening = false;
-  const isAvailable = () => client.supportsSparkChat?.() === true;
+  let restoringOpen = false;
+  function isSparkAvailable() {
+    if (client.supportsSparkChat?.() !== true) return false;
+    return shell.isWorkspaceAvailable("learning");
+  }
+  function canCompleteSparkOpening(scope, revision) {
+    if (!isSparkAvailable()) return false;
+    if (scope !== getEnvironmentId()) return false;
+    return revision === accessRevision;
+  }
+  function hasSparkAccessChanged(nextEnvironment, nextAvailable) {
+    if (environmentId !== nextEnvironment) return true;
+    return available !== nextAvailable;
+  }
   const getSubmissionBlock = () => {
     if (!configuration?.sessionId) return { message: "SPARK conversation is loading." };
     if (isSparkModelUnavailable(configuration)) return { message: "Choose a model under Proactive mode in SPARK settings." };
@@ -68,7 +83,7 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
     onComposerStateChange: (sending) => sync?.composerChanged(sending),
   });
   sync = createSparkChatSync({
-    client, getEnvironmentId, conversation, isAvailable,
+    client, getEnvironmentId, conversation, isAvailable: isSparkAvailable,
     onConfiguration: (next) => {
       const changedModel = configuration?.modelProfileId !== next.modelProfileId;
       configuration = next; settings?.render(next, getEnvironmentId());
@@ -107,38 +122,80 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
   });
   panel.dom.settingsButton.addEventListener("click", openSettings);
   panel.onToggle((opened) => {
-    if (!opened) { conversation.view.closeFilePreview(); return; }
-    if (!configuration) { awaitingOpening = true; void sync.refresh(); return; }
-    reading.open(); conversation.render(); conversation.update();
-    void sync.refresh();
+    if (!opened) {
+      accessRevision += 1;
+      conversation.view.closeFilePreview();
+      return;
+    }
+    if (!isSparkAvailable()) { panel.setOpen(false, { focus: false }); return; }
+    if (!restoringOpen) void open();
   });
 
   async function open(messageId, reference) {
-    if (!isAvailable()) return false;
+    if (!isSparkAvailable()) return false;
     const scope = getEnvironmentId();
-    try { if (!configuration || reference !== undefined) await sync.refresh({ wait: true }); }
-    catch (error) { shell.showToast(`SPARK could not be opened: ${error.message}`, "failed"); return false; }
-    if (scope !== getEnvironmentId()) return false;
+    const revision = accessRevision;
+    try { await sync.refresh({ wait: true, consolidated: true }); }
+    catch (error) {
+      if (!canCompleteSparkOpening(scope, revision)) return false;
+      shell.showToast(`SPARK could not be opened: ${error.message}`, "failed");
+      return false;
+    }
+    if (!canCompleteSparkOpening(scope, revision)) return false;
     if (!configuration) return false;
-    panel.setOpen(true);
-    const target = resolveSparkMessageTarget(configuration.snapshot?.messages, messageId, reference);
-    reading.open(target); conversation.render(); conversation.update();
+    const requestedTarget = messageId ?? readState?.unreadMessageIds?.[0];
+    if (!await ensureSparkTargetHistory(requestedTarget, reference, scope, revision)) return false;
+    if (!canCompleteSparkOpening(scope, revision)) return false;
+    const target = resolveSparkMessageTarget(conversation.state.messages, requestedTarget, reference);
+    reading.open(target); restoringOpen = true; panel.setOpen(true); restoringOpen = false;
+    conversation.render(); conversation.update();
     return true;
   }
+  async function ensureSparkTargetHistory(target, reference, scope, revision) {
+    if (target == null) return true;
+    if (reference === null) return true;
+    if (resolveSparkMessageTarget(conversation.state.messages, target, reference)) return true;
+    try {
+      await conversation.session.openSession(configuration.sessionId, { preserveCurrentWindow: true, page: {
+        targetMessageId: String(target), targetCreatedAt: reference?.createdAt,
+        targetRequestId: reference?.requestId ?? undefined,
+      } });
+    } catch (error) {
+      if (!canCompleteSparkOpening(scope, revision)) return false;
+      shell.showToast(`SPARK history unavailable: ${error.message}`, "failed");
+      return false;
+    }
+    return canCompleteSparkOpening(scope, revision);
+  }
+  function shouldRestoreUnavailableSparkFocus(nextAvailable) {
+    if (nextAvailable) return false;
+    const home = dom.homeWorkspaceButton;
+    if (!home) return false;
+    if (home.disabled) return false;
+    if (home.hidden) return false;
+    if (home.inert) return false;
+    if (home.closest?.("[hidden], [inert]")) return false;
+    const focused = document.activeElement;
+    if (!focused) return false;
+    if (panel.root?.contains(focused)) return true;
+    return panel.dom.launcherButton?.contains(focused) === true;
+  }
   function environmentChanged() {
     const next = getEnvironmentId();
-    panel.setAvailable(isAvailable());
-    if (environmentId === next) return;
-    environmentId = next;
+    const nextAvailable = isSparkAvailable();
+    if (shouldRestoreUnavailableSparkFocus(nextAvailable)) dom.homeWorkspaceButton.focus({ preventScroll: true });
+    panel.setAvailable(nextAvailable);
+    if (!hasSparkAccessChanged(next, nextAvailable)) return;
+    environmentId = next; available = nextAvailable; accessRevision += 1;
     configuration = undefined; readState = undefined;
     awaitingOpening = panel.isOpen();
     sync.reset(); reading.reset(); notices.reset(); conversation.reset(); panel.hideNotice();
     settings.render(undefined, next);
-    if (isAvailable()) void sync.refresh({ consolidated: true });
+    if (isSparkAvailable()) void sync.refresh({ consolidated: true });
   }
   function handleRealtime(message) {
     environmentChanged();
-    if (!isAvailable()) return;
+    if (!isSparkAvailable()) return;
     const environment = message.environmentId || message.environment;
     if (environment && environment !== getEnvironmentId()) return;
     if (message.type === "learning.changed") { sync.modelChanged(); return; }
@@ -160,16 +217,21 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
     open, environmentChanged,
     prepareEnvironmentChange: conversation.prepareEnvironmentChange,
     async openSession(sessionId, messageId, reference) {
-      if (!isAvailable() || !sessionId) return false;
+      if (!isSparkAvailable()) return false;
+      if (!sessionId) return false;
       const scope = getEnvironmentId();
+      const revision = accessRevision;
       try { if (!configuration) await sync.refresh({ wait: true }); }
       catch (error) {
+        if (!canCompleteSparkOpening(scope, revision)) return true;
         shell.showToast(`SPARK could not be opened: ${error.message}`, "failed");
         return true;
       }
-      if (scope !== getEnvironmentId()) return true;
+      if (!canCompleteSparkOpening(scope, revision)) return true;
       if (sessionId !== configuration?.sessionId) return false;
-      return open(messageId, reference);
+      const opened = await open(messageId, reference);
+      if (!canCompleteSparkOpening(scope, revision)) return true;
+      return opened;
     },
     bind() {
       conversation.bind();
@@ -177,6 +239,7 @@ export function createSparkChatFeature({ dom, state: appState, client, shell, re
       realtime.subscribeConnectionChanged?.(() => conversation.update());
       realtime.subscribeConnected(() => { environmentChanged(); void sync.refresh({ consolidated: true, rehydrate: true }); });
       dom.environmentSelect.addEventListener("change", () => queueMicrotask(environmentChanged));
+      shell.subscribeRuntimeAvailabilityChange(environmentChanged);
       shell.subscribeWorkspaceChange(() => { environmentChanged(); if (panel.isOpen()) reading.scheduleRead(); });
       document.addEventListener("visibilitychange", () => {
         if (document.visibilityState === "visible") void sync.refresh({ consolidated: true });

package/dist/src/web-ui/app/styles/11-product-links.css

@@ -0,0 +1,30 @@
+/* Official website links in the brand and configuration header. */
+.product-site-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--muted);
+  font-size: var(--font-size-xs);
+  line-height: 18px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.product-site-link:hover {
+  color: var(--text-strong);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.product-site-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+@media (min-width: 761px) {
+  .workspace-brand {
+    flex-direction: column;
+    gap: 1px;
+  }
+}

package/dist/src/web-ui/app/styles/21-composer-controls.css

@@ -366,3 +366,19 @@
     display: none;
   }
 }
+
+/* The reasoning permission prompt shares the composer's anchored menu surface. */
+.agent-mode-menu.reasoning-override-menu {
+  width: min(340px, calc(100vw - 32px));
+  padding: 16px;
+}
+.reasoning-override-prompt { display: grid; gap: 12px; }
+.reasoning-override-prompt p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
+.reasoning-override-prompt strong { font-size: 13px; }
+.reasoning-override-prompt small { color: var(--muted); font-size: 11px; line-height: 1.5; }
+.reasoning-override-actions { display: grid; gap: 8px; }
+.reasoning-override-actions button { padding: 8px 12px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.reasoning-override-actions button:first-child { color: var(--accent); }
+.reasoning-override-actions button:hover:not(:disabled) { background: var(--panel); }
+.reasoning-override-actions button:disabled { opacity: .5; cursor: default; }
+.reasoning-override-prompt .error-text { color: var(--danger); }

package/dist/src/web-ui/app/styles/41-plugin-configuration.css

@@ -0,0 +1,79 @@
+.plugin-configuration-fields {
+  border: 0;
+  padding: 0;
+  margin: 1.5rem 0;
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+.plugin-configuration-fields legend {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.plugin-configuration-fields > p,
+.plugin-configuration-fields small {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+.plugin-configuration-fields label {
+  display: grid;
+  gap: 0.4rem;
+}
+.plugin-configuration-fields input:not([type="checkbox"]),
+.plugin-configuration-fields textarea,
+.plugin-configuration-fields select {
+  width: 100%;
+  box-sizing: border-box;
+}
+.plugin-configuration-fields textarea {
+  resize: vertical;
+  font-family: monospace;
+}
+.plugin-configuration-fields .plugin-setting-checkbox {
+  display: flex;
+  align-items: center;
+}
+.plugin-secret-field {
+  display: grid;
+  gap: 0.5rem;
+}
+.plugin-secret-field input[hidden] {
+  display: none;
+}
+.plugin-configuration-dialog {
+  color: var(--text);
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  width: min(38rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 3rem);
+  padding: 1.5rem;
+}
+.plugin-configuration-dialog::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+.plugin-configuration-dialog h2 {
+  margin: 0 0 1rem;
+}
+.plugin-configuration-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.plugin-setting-source {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 0.3rem;
+}
+.plugin-setting-source button {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.8rem;
+  text-decoration: underline;
+}