@abot-ai/runtime 1.9.0 → 2.0.0

package/dist/src/web-ui/app/controllers/conversation-workspace-activation.js

@@ -11,16 +11,22 @@ export function createConversationWorkspaceActivation({ state, shell, composerQu
     const session = state.currentSessionId;
     const version = state.sessionViewVersion;
     const navigationRevision = shell.navigationRevision?.();
+    const navigationRequest = shell.navigationRequestRevision?.();
     const recovery = await composerQueue.prepareRecoveryForNavigation();
     if (!recovery || recovery.canCommit?.() === false) return false;
     if (!canNavigateConversation(state)) return false;
     const hasCurrentWorkspaceNavigation = navigationRevision === shell.navigationRevision?.();
     if (!hasCurrentWorkspaceNavigation) return false;
+    if (navigationRequest !== shell.navigationRequestRevision?.()) return false;
     if (environment !== selectedEnvironmentId()) return false;
     if (session !== state.currentSessionId) return false;
     if (version !== state.sessionViewVersion) return false;
-    const activate = shell.prepareWorkspaceActivation("chat", { focus: false });
-    if (!activate) return false;
+    const activate = await shell.prepareWorkspaceActivation("chat", { focus: false });
+    if (!activate || activate.canCommit?.() === false) return false;
+    if (environment !== selectedEnvironmentId()) return false;
+    if (session !== state.currentSessionId) return false;
+    if (version !== state.sessionViewVersion) return false;
+    if (recovery.canCommit?.() === false) return false;
     recovery();
     return activate() !== false;
   };

package/dist/src/web-ui/app/controllers/dashboard-approvals-controller.js

@@ -1,11 +1,7 @@
-function approvalIdentity(approval) {
-  return JSON.stringify([
-    approval.environmentId,
-    approval.sessionId,
-    approval.requestId,
-    approval.approvalId,
-  ]);
-}
+import {
+  approvalRejectionIdentity as approvalIdentity,
+  createApprovalRejectionDrafts,
+} from "../lib/tool-approval-rejection-drafts.js";
 
 export function createDashboardApprovalsController({
   client,
@@ -21,6 +17,7 @@ export function createDashboardApprovalsController({
   let scopeRevision = 0;
   let readRevision = 0;
   const submitting = new Set();
+  const rejectionDrafts = createApprovalRejectionDrafts();
 
   function snapshot() {
     return {
@@ -29,6 +26,7 @@ export function createDashboardApprovalsController({
           ? approvals.map((approval) => ({
               ...approval,
               submitted: submitting.has(approvalIdentity(approval)),
+              rejectionDraft: rejectionDrafts.get(approval),
             }))
           : [],
       supportsToolApprovals: client.supportsToolApprovals(),
@@ -58,6 +56,7 @@ export function createDashboardApprovalsController({
     error = "";
     decisionError = "";
     submitting.clear();
+    rejectionDrafts.clear();
   }
 
   async function refresh() {
@@ -79,6 +78,7 @@ export function createDashboardApprovalsController({
       const result = await client.listToolApprovals(scope);
       if (!hasCurrentRead(scope, revision)) return;
       approvals = result.approvals;
+      rejectionDrafts.retain(approvals);
       error = "";
     } catch (failure) {
       if (!hasCurrentRead(scope, revision)) return;
@@ -99,7 +99,7 @@ export function createDashboardApprovalsController({
     return approvals.some((pending) => approvalIdentity(pending) === identity);
   }
 
-  async function submit(approval, approved) {
+  async function submit(approval, approved, reason) {
     const identity = approvalIdentity(approval);
     if (!canSubmitApproval(approval, identity)) return false;
     const scope = approval.environmentId;
@@ -114,6 +114,7 @@ export function createDashboardApprovalsController({
         requestId: approval.requestId,
         approvalId: approval.approvalId,
         approved,
+        ...(reason !== undefined ? { reason } : {}),
         ...approvalDecisionCommand(approval, approved),
       });
       if (!hasCurrentScope(scope, revision)) return true;

package/dist/src/web-ui/app/controllers/environment-transition.js

@@ -53,9 +53,9 @@ export function createEnvironmentTransition({ state, dom, actions, prepareQueueR
       if (environmentChangeWasDeclined(preparedQueue)) { restoreSelection(); return false; }
       if (!canCommitEnvironmentPreparations([preparedAdditional, preparedQueue, commitEnvironmentOptions])) { restoreSelection(); return false; }
       const preparedConfig = actions.beforeEnvironmentChange
-        ? actions.beforeEnvironmentChange({ from: previous, to: target }) : true;
-      if (environmentChangeWasDeclined(preparedConfig)) { restoreSelection(); return false; }
+        ? await actions.beforeEnvironmentChange({ from: previous, to: target }) : true;
       if (!hasCurrentEnvironmentSelection(operation, previous)) return false;
+      if (environmentChangeWasDeclined(preparedConfig)) { restoreSelection(); return false; }
       if (!canCommitEnvironmentPreparations([preparedAdditional, preparedQueue, preparedConfig, commitEnvironmentOptions])) { restoreSelection(); return false; }
       if (typeof preparedAdditional === "function") preparedAdditional();
       if (typeof preparedQueue === "function") preparedQueue();

package/dist/src/web-ui/app/controllers/environment-workspace-preparation.js

@@ -1,17 +1,19 @@
 import { environmentChangeWasDeclined } from "./environment-transition.js";
 
 /** Discard workspace drafts only after every preparation remains current. */
-export function prepareEnvironmentWorkspaceChanges(schedules, configuration, skills) {
-  const schedule = schedules.prepareEnvironmentChange();
+export async function prepareEnvironmentWorkspaceChanges(schedules, configuration, skills) {
+  const schedule = await schedules.prepareEnvironmentChange();
   if (environmentChangeWasDeclined(schedule)) return null;
-  const config = configuration.prepareDiscardChanges("change environment");
+  const config = await configuration.prepareDiscardChanges("change environment");
   if (environmentChangeWasDeclined(config)) return null;
-  const skill = skills ? skills.prepareEnvironmentChange() : true;
+  const skill = skills ? await skills.prepareEnvironmentChange() : true;
   if (environmentChangeWasDeclined(skill)) return null;
   const commit = () => {
-    if (typeof skill === "function") skill();
-    if (typeof schedule === "function") schedule();
-    if (typeof config === "function") config();
+    if (!commit.canCommit()) return false;
+    for (const prepared of [skill, schedule, config]) {
+      if (typeof prepared === "function" && prepared() === false) return false;
+    }
+    return true;
   };
   commit.canCommit = () => {
     if (skill?.canCommit?.() === false) return false;

package/dist/src/web-ui/app/controllers/preference-view-sync.js

@@ -0,0 +1,35 @@
+function sidebarPreferenceScope(preferences, environmentId) {
+  return JSON.stringify({
+    environmentId,
+    pinnedSessionIds: preferences.loadPinnedSessions(),
+    sidebar: preferences.loadSessionSidebar(environmentId),
+  });
+}
+
+/** Selection acknowledgements update controls, not the sidebar's loaded pages. */
+export function createPreferenceViewSync({
+  preferences, selection, dashboard, getEnvironmentId, loadSessions,
+}) {
+  let ready = false;
+  let sidebarScope;
+
+  function synchronize() {
+    selection.loadPreferences();
+    if (!ready) return;
+    selection.applyModelSelection();
+    selection.renderPermissionMode();
+    void dashboard.refresh();
+    const nextScope = sidebarPreferenceScope(preferences, getEnvironmentId());
+    if (nextScope === sidebarScope) return;
+    sidebarScope = nextScope;
+    void loadSessions();
+  }
+
+  return {
+    synchronize,
+    setReady() {
+      ready = true;
+      synchronize();
+    },
+  };
+}

package/dist/src/web-ui/app/controllers/projects-controller.d.ts

@@ -13,6 +13,7 @@ export type ProjectCreationDraft = {
 
 export type ProjectsControllerState = {
   projects: readonly RuntimeProject[];
+  deletedProjectIds: readonly string[];
   loading: boolean;
   error: string;
   draft: ProjectCreationDraft | null;
@@ -30,6 +31,7 @@ export declare function createProjectsController(options: {
   onChange: (state: ProjectsControllerState) => void;
   notify: (message: string, tone: "failed") => void;
   onSessionCreated?: (sessionId: string) => void;
+  confirmAction?: (message: string) => boolean | Promise<boolean>;
 }): {
   snapshot(): ProjectsControllerState;
   load(): Promise<void>;
@@ -44,4 +46,6 @@ export declare function createProjectsController(options: {
   browse(directory?: string, cursor?: string): Promise<void>;
   create(): Promise<void>;
   newConversation(projectId: string): Promise<void>;
+  deleteProject(projectId: string, projectName?: string): Promise<boolean>;
+  getDeletedProjectIds(): readonly string[];
 };

package/dist/src/web-ui/app/controllers/projects-controller.js

@@ -1,3 +1,4 @@
+import { confirmDialog } from "../components/confirmation-dialog.js";
 function errorMessage(error) {
   return error instanceof Error ? error.message : String(error);
 }
@@ -13,6 +14,7 @@ export function createProjectsController({
   onChange,
   notify,
   onSessionCreated = () => {},
+  confirmAction = (message) => confirmDialog(message, { title: "Delete project", confirmLabel: "Delete project", tone: "danger" }),
 }) {
   let revision = 0;
   let currentEnvironment = getEnvironmentId();
@@ -22,6 +24,7 @@ export function createProjectsController({
   let activationRevision = 0;
   let state = {
     projects: [],
+    deletedProjectIds: [],
     loading: false,
     error: "",
     draft: null,
@@ -90,7 +93,7 @@ export function createProjectsController({
     const token = revision;
     const listToken = ++listRevision;
     if (!canUseProjects()) {
-      state = { ...state, projects: [], loading: false, error: "" };
+      state = { ...state, projects: [], deletedProjectIds: [], loading: false, error: "" };
       publish();
       return;
     }
@@ -99,7 +102,8 @@ export function createProjectsController({
     try {
       const result = await client.listProjects(environmentId);
       if (!canApplyProjectList(environmentId, token, listToken)) return;
-      state = { ...state, projects: result.projects ?? [], loading: false };
+      state = { ...state, projects: result.projects ?? [],
+        deletedProjectIds: result.deletedProjectIds ?? [], loading: false };
     } catch (error) {
       if (!canApplyProjectList(environmentId, token, listToken)) return;
       state = { ...state, loading: false, error: errorMessage(error) };
@@ -265,6 +269,61 @@ export function createProjectsController({
     }
   }
 
+  function getDeletedProjectIds() {
+    if (currentEnvironment !== getEnvironmentId()) return [];
+    if (!canUseProjects()) return [];
+    return state.deletedProjectIds;
+  }
+
+  function canDeleteProject(projectId) {
+    if (!projectId) return false;
+    if (!canUseProjects()) return false;
+    if (state.busyProjectId) return false;
+    return !state.deletedProjectIds.includes(projectId);
+  }
+
+  async function deleteProject(projectId, projectName = projectId) {
+    synchronizeProjectRuntime();
+    if (!canDeleteProject(projectId)) return false;
+    const environmentId = getEnvironmentId();
+    const token = revision;
+    const target = JSON.stringify(state.projects.find((project) => project.id === projectId));
+    const confirmed = await confirmAction(
+      'Delete "' + projectName + '"? Its conversations will move to Conversations. The working folder and its files will not be deleted.',
+    );
+    if (!confirmed) return false;
+    if (!isCurrentEnvironment(environmentId, token)) return false;
+    if (!canDeleteProject(projectId)) return false;
+    if (JSON.stringify(state.projects.find((project) => project.id === projectId)) !== target) return false;
+    listRevision += 1;
+    state = { ...state, busyProjectId: projectId, loading: false };
+    publish();
+    let deleted = false;
+    try {
+      await client.deleteProject(projectId, environmentId);
+      if (!isCurrentEnvironment(environmentId, token)) return false;
+      deleted = true;
+      listRevision += 1;
+      state = { ...state,
+        projects: state.projects.filter((project) => project.id !== projectId),
+        deletedProjectIds: [...new Set([...state.deletedProjectIds, projectId])],
+        loading: false,
+      };
+      publish();
+      await loadSessions();
+      return isCurrentEnvironment(environmentId, token);
+    } catch (error) {
+      if (!isCurrentEnvironment(environmentId, token)) return false;
+      notify(errorMessage(error), "failed");
+      return deleted;
+    } finally {
+      if (isCurrentEnvironment(environmentId, token)) {
+        state = { ...state, busyProjectId: "" };
+        publish();
+      }
+    }
+  }
+
   function retainedProjectDraft(environmentChanged) {
     if (environmentChanged) return null;
     if (!state.draft) return null;
@@ -289,7 +348,7 @@ export function createProjectsController({
     listRevision += 1;
     browseRevision += 1;
     activationRevision += 1;
-    state = { projects: [], loading: false, error: "", draft, busyProjectId: "" };
+    state = { projects: [], deletedProjectIds: [], loading: false, error: "", draft, busyProjectId: "" };
     publish();
     return true;
   }
@@ -314,5 +373,7 @@ export function createProjectsController({
     browse,
     create,
     newConversation,
+    deleteProject,
+    getDeletedProjectIds,
   };
 }

package/dist/src/web-ui/app/controllers/reasoning-budget-controller.d.ts

@@ -0,0 +1,17 @@
+import type { ModelReasoningPreference } from "../../../shared/model-reasoning.js";
+import type { ConversationReasoningPreferences, ReasoningPreferenceScope } from "../services/conversation-reasoning-preferences.js";
+import type { ReasoningProfile } from "../lib/reasoning-preference.js";
+export declare function createReasoningBudgetController(options: {
+  state: { reasoningBudgetMenuOpen?: boolean };
+  dom: { reasoningBudgetButton?: HTMLButtonElement; reasoningBudgetMenu?: HTMLElement; reasoningBudgetControl?: HTMLElement; agentModeButton?: HTMLButtonElement };
+  preferences: ConversationReasoningPreferences;
+  getScope(): ReasoningPreferenceScope;
+  getProfile(): ReasoningProfile | null;
+  onApplied?(): void;
+  isModeBusy?(): boolean;
+  recordControlEvent?(event: { type: string; name: string; tone: string; summary: string }): void;
+}): {
+  render(): boolean;
+  isSaving(): boolean;
+  selectedPreference(): ModelReasoningPreference | undefined;
+};

package/dist/src/web-ui/app/controllers/reasoning-budget-controller.js

@@ -0,0 +1,80 @@
+import { canChooseReasoningBudget, readReasoningPreferenceField, reasoningPreferenceLabel, renderReasoningPreferenceField, syncReasoningPreferenceField } from "../lib/reasoning-preference.js";
+
+export function createReasoningBudgetController({ state, dom, preferences, getScope, getProfile, recordControlEvent, onApplied, isModeBusy = () => false }) {
+  let renderedKey;
+  let saving = false;
+  const isCurrentScope = (scope, profileId) => JSON.stringify(scope) === JSON.stringify(getScope()) && profileId === getProfile()?.id;
+  function selectedPreference() {
+    const profile = getProfile();
+    const preference = preferences?.loadReasoningPreference?.(getScope(), profile?.id || "");
+    if (preference && !canChooseReasoningBudget(profile))
+      throw new Error("The selected model no longer supports the saved thinking budget. Choose Profile default.");
+    return preference;
+  }
+  function syncControls() {
+    const busy = saving || isModeBusy();
+    dom.reasoningBudgetButton.disabled = busy;
+    if (dom.agentModeButton) dom.agentModeButton.disabled = busy;
+    const menu = dom.reasoningBudgetMenu;
+    const save = menu.querySelector("[data-save-budget]");
+    if (save) save.disabled = busy;
+    const mode = menu.querySelector("[data-reasoning-preference-mode]");
+    if (mode) mode.disabled = busy;
+    const input = menu.querySelector("[data-reasoning-budget]");
+    if (input) input.disabled = busy || mode?.value !== "budget";
+  }
+  function render() {
+    const button = dom.reasoningBudgetButton, menu = dom.reasoningBudgetMenu;
+    if (!button || !menu) return false;
+    const profile = getProfile();
+    const preference = preferences?.loadReasoningPreference?.(getScope(), profile?.id || "");
+    const available = canChooseReasoningBudget(profile) || Boolean(preference);
+    if (dom.reasoningBudgetControl) dom.reasoningBudgetControl.hidden = !available;
+    button.hidden = !available;
+    if (!available) { renderedKey = undefined; state.reasoningBudgetMenuOpen = false; menu.hidden = true; return false; }
+    const labels = { off: "Off", "server-default": "Server default" };
+    const label = preference?.mode === "budget" ? `${preference.budgetTokens} tokens` : labels[preference?.mode] || "Profile default";
+    button.title = `Thinking budget: ${reasoningPreferenceLabel(preference)}`;
+    button.setAttribute("aria-label", button.title);
+    button.setAttribute("aria-haspopup", "dialog");
+    button.setAttribute("aria-expanded", String(Boolean(state.reasoningBudgetMenuOpen)));
+    button.textContent = label;
+    button.classList.toggle("open", state.reasoningBudgetMenuOpen);
+    menu.classList.toggle("open", state.reasoningBudgetMenuOpen);
+    menu.hidden = !state.reasoningBudgetMenuOpen;
+    menu.setAttribute("role", "dialog");
+    menu.setAttribute("aria-label", "Thinking token budget");
+    const nextKey = JSON.stringify([getScope(), profile?.id, canChooseReasoningBudget(profile), preference]);
+    if (renderedKey === nextKey && menu.querySelector("[data-save-budget]")) { syncControls(); return true; }
+    renderedKey = nextKey;
+    menu.innerHTML = `${renderReasoningPreferenceField(profile, preference)}
+      <button type="button" data-save-budget>Apply to next message</button>
+      <p role="alert" data-budget-error hidden></p>`;
+    const scope = { ...getScope() };
+    menu.querySelector("[data-reasoning-preference-mode]").addEventListener("change", () => syncReasoningPreferenceField(menu, profile));
+    menu.querySelector("[data-save-budget]").addEventListener("click", async () => {
+      if (saving || isModeBusy()) return;
+      let applied = false;
+      try {
+        const next = readReasoningPreferenceField(menu);
+        saving = true; syncControls();
+        await preferences.saveReasoningPreference(scope, profile.id, next);
+        if (!isCurrentScope(scope, profile.id)) return;
+        state.reasoningBudgetMenuOpen = false;
+        if (onApplied) onApplied(); else render();
+        applied = true;
+      } catch (error) {
+        if (!isCurrentScope(scope, profile.id)) return;
+        const feedback = menu.querySelector("[data-budget-error]");
+        feedback.textContent = error.message; feedback.hidden = false;
+        recordControlEvent?.({ type: "control", name: "Thinking budget update failed", tone: "failed", summary: error.message });
+      } finally {
+        saving = false; syncControls();
+        if (applied && isCurrentScope(scope, profile.id)) (button.hidden ? dom.agentModeButton : button)?.focus();
+      }
+    });
+    syncControls();
+    return true;
+  }
+  return { render, selectedPreference, isSaving: () => saving };
+}

package/dist/src/web-ui/app/controllers/reasoning-budget-menu-events.js

@@ -0,0 +1,45 @@
+/** Independent thinking-budget popup; effort keeps its own menu and selection. */
+export function bindReasoningBudgetMenu({ state, dom, actions, modelSelector, documentRoot }) {
+  const button = dom.reasoningBudgetButton, menu = dom.reasoningBudgetMenu;
+  if (!button || !menu) return;
+  function close(restoreFocus = false) {
+    if (!state.reasoningBudgetMenuOpen) return;
+    state.reasoningBudgetMenuOpen = false;
+    actions.renderAgentMode();
+    if (restoreFocus) button.focus();
+  }
+  function open() {
+    if (button.disabled || dom.reasoningBudgetControl?.hidden) return;
+    modelSelector.close();
+    state.agentModeMenuOpen = false;
+    state.permissionModeMenuOpen = false;
+    state.reasoningBudgetMenuOpen = true;
+    actions.renderPermissionMode();
+    actions.renderAgentMode();
+    menu.querySelector("[data-reasoning-preference-mode]")?.focus();
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (state.reasoningBudgetMenuOpen) { close(); return; }
+    open();
+  });
+  button.addEventListener("keydown", (event) => {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+    event.preventDefault(); open();
+  });
+  menu.addEventListener("click", (event) => event.stopPropagation());
+  for (const trigger of [dom.agentModeButton, dom.permissionModeButton]) {
+    trigger.addEventListener("click", () => close());
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") close();
+    });
+  }
+  documentRoot.addEventListener("click", (event) => {
+    if (event.target === button || button.contains(event.target) || menu.contains(event.target)) return;
+    close();
+  });
+  documentRoot.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !state.reasoningBudgetMenuOpen) return;
+    close(true); event.preventDefault();
+  });
+}

package/dist/src/web-ui/app/controllers/reasoning-mode-controller.js

@@ -1,5 +1,6 @@
-import { escapeAttribute, escapeHtml, textOf } from "../lib/text-format.js";
-import { canChooseReasoning } from "../lib/reasoning-controls.js";
+import { escapeHtml, textOf } from "../lib/text-format.js";
+import { agentModeMeta, canChooseReasoning, renderReasoningModeButtons } from "../lib/reasoning-controls.js";
+import { createReasoningBudgetController } from "./reasoning-budget-controller.js";
 import { createReasoningOverridePrompt } from "../components/reasoning-override-prompt.js";
 
 export function normalizeAgentMode(mode) {
@@ -9,25 +10,10 @@ export function normalizeAgentMode(mode) {
     : "reasoning";
 }
 
-function agentModeMeta(mode) {
-  const modes = {
-    auto: { label: "Auto", description: "Lets the agent choose", icon: "*" },
-    fast: { label: "Low", description: "Shorter and quicker", icon: "!" },
-    deep: {
-      label: "Deep analysis",
-      description: "More careful responses",
-      icon: "D",
-    },
-    reasoning: {
-      label: "Reasoning",
-      description: "Balanced speed and thinking",
-      icon: "R",
-    },
-  };
-  return modes[normalizeAgentMode(mode)] || modes.reasoning;
-}
-
-export function createReasoningModeController({ state, dom, client, selectedEnvironmentId, selectedModelProfile, reloadModels, recordControlEvent }) {
+export function createReasoningModeController({ state, dom, client, selectedEnvironmentId, selectedModelProfile, reloadModels, recordControlEvent, preferences, getScope }) {
+  const budget = createReasoningBudgetController({ state, dom, preferences, getScope, getProfile: selectedModelProfile, recordControlEvent, onApplied: () => renderAgentMode(), isModeBusy: () => agentModeMutationInFlight });
+  let agentModeError = "";
+  let modeErrorScope;
   let agentModeLoadRevision = 0;
   const agentModeMutationRevisions = new Map();
   let agentModeMutationInFlight = false;
@@ -39,13 +25,14 @@ export function createReasoningModeController({ state, dom, client, selectedEnvi
     render: () => renderAgentMode(),
   });
   function renderAgentMode() {
+    budget.render();
     const allowed = canChooseReasoning(selectedModelProfile());
     const meta = allowed ? agentModeMeta(state.agentMode) : { label: "Provider default", icon: "—" };
     dom.agentModeButton.setAttribute("aria-haspopup", allowed ? "menu" : "dialog");
     dom.agentModeMenu.classList.toggle("reasoning-override-menu", !allowed);
     dom.agentModeButton.title = `Reasoning depth: ${meta.label}`;
     dom.agentModeButton.setAttribute("aria-label", `Reasoning depth: ${meta.label}`);
-    dom.agentModeButton.disabled = agentModeMutationInFlight;
+    dom.agentModeButton.disabled = agentModeMutationInFlight || budget.isSaving();
     dom.agentModeButton.innerHTML = `
       <span class="agent-mode-icon">${escapeHtml(meta.icon)}</span>
       <span>${escapeHtml(meta.label)}</span>`;
@@ -61,19 +48,11 @@ export function createReasoningModeController({ state, dom, client, selectedEnvi
     if (!allowed) { prompt.render(state.agentModeMenuOpen); return; }
     const restoreFocus = Boolean(dom.agentModeMenu.contains?.(dom.agentModeMenu.ownerDocument?.activeElement));
     prompt.reset();
-    dom.agentModeMenu.innerHTML = state.supportedAgentModes
-      .map((mode) => {
-        const item = agentModeMeta(mode);
-        const selected = normalizeAgentMode(mode) === state.agentMode;
-        return `
-          <button class="agent-mode-option ${selected ? "selected" : ""}" type="button"
-            role="menuitemradio" aria-checked="${selected ? "true" : "false"}"
-            tabindex="${selected ? "0" : "-1"}" data-mode="${escapeAttribute(mode)}" ${agentModeMutationInFlight ? "disabled" : ""}>
-            <span class="agent-mode-option-icon">${escapeHtml(item.icon)}</span>
-            <span><strong>${escapeHtml(item.label)}</strong><small>${escapeHtml(item.description)}</small></span>
-          </button>`;
-      })
-      .join("");
+    const thinkingOff = preferences?.loadReasoningPreference?.(getScope(), selectedModelProfile()?.id || "")?.mode === "off";
+    const modeError = modeErrorScope === JSON.stringify([getScope?.(), selectedModelProfile()?.id]) ? agentModeError : "";
+    dom.agentModeMenu.innerHTML = renderReasoningModeButtons(state.agentMode, state.supportedAgentModes, agentModeMutationInFlight || budget.isSaving())
+      + `<small class="reasoning-mode-default-note">${thinkingOff ? "Thinking is Off. Choosing a mode turns it back on. " : ""}Sets the default depth; model profile and calibration settings may override it. Token budgets are set separately.</small>
+        <p role="alert" data-mode-error${modeError ? "" : " hidden"}>${escapeHtml(modeError)}</p>`;
     dom.agentModeMenu
       .querySelectorAll(".agent-mode-option")
       .forEach((button) => {
@@ -121,10 +100,18 @@ export function createReasoningModeController({ state, dom, client, selectedEnvi
   }
 
   async function setAgentMode(mode) {
-    if (agentModeMutationInFlight) return false;
+    if (agentModeMutationInFlight || budget.isSaving()) return false;
     if (!canChooseReasoning(selectedModelProfile())) return false;
     agentModeMutationInFlight = true;
+    agentModeError = "";
+    const scope = getScope ? { ...getScope() } : undefined;
+    const profileId = selectedModelProfile()?.id || "";
+    const manualOverride = scope && preferences?.loadReasoningPreference?.(scope, profileId);
+    let modeSaved = false;
     const environmentId = selectedEnvironmentId();
+    const isOriginatingSelection = () => environmentId === selectedEnvironmentId()
+      && profileId === selectedModelProfile()?.id
+      && (!scope || JSON.stringify(scope) === JSON.stringify(getScope()));
     const revision = agentModeMutationRevisionFor(environmentId) + 1;
     agentModeMutationRevisions.set(environmentId, revision);
     const loadRevisionAtStart = ++agentModeLoadRevision;
@@ -133,9 +120,11 @@ export function createReasoningModeController({ state, dom, client, selectedEnvi
     state.agentMode = requestedMode;
     state.agentModeMenuOpen = false;
     renderAgentMode();
-    dom.agentModeButton.focus();
     try {
       const payload = await client.setAgentMode(requestedMode, environmentId);
+      modeSaved = true;
+      if (environmentId === selectedEnvironmentId()) state.agentMode = normalizeAgentMode(payload.mode);
+      if (manualOverride?.mode === "off") await preferences.saveReasoningPreference(scope, profileId, undefined);
       if (
         revision !== agentModeMutationRevisionFor(environmentId) ||
         environmentId !== selectedEnvironmentId()
@@ -153,22 +142,28 @@ export function createReasoningModeController({ state, dom, client, selectedEnvi
       ) {
         return false;
       }
-      if (agentModeLoadRevision === loadRevisionAtStart) {
+      if (!modeSaved && agentModeLoadRevision === loadRevisionAtStart) {
         state.agentMode = previousMode;
         renderAgentMode();
       }
+      modeErrorScope = JSON.stringify([scope, profileId]);
+      agentModeError = modeSaved
+        ? "The reasoning mode was saved, but Thinking Off could not be cleared. " + (error instanceof Error ? error.message : String(error))
+        : (error instanceof Error ? error.message : String(error));
+      if (isOriginatingSelection()) state.agentModeMenuOpen = true;
       recordControlEvent({
         type: "control",
         name: "Reasoning mode update failed",
         tone: "failed",
-        summary: error instanceof Error ? error.message : String(error),
+        summary: agentModeError,
       });
       return false;
     } finally {
       agentModeMutationInFlight = false;
       renderAgentMode();
+      if (isOriginatingSelection() && !state.agentModeMenuOpen) dom.agentModeButton.focus();
     }
   }
 
-  return { renderAgentMode, loadAgentMode, setAgentMode };
+  return { renderAgentMode, loadAgentMode, setAgentMode, selectedReasoningPreference: budget.selectedPreference };
 }

package/dist/src/web-ui/app/controllers/runtime-selection-controller.d.ts

@@ -93,6 +93,7 @@ export interface RuntimeSelectionControllerDependencies {
     agentMode: AgentMode;
     supportedAgentModes: AgentMode[];
     agentModeMenuOpen: boolean;
+    reasoningBudgetMenuOpen?: boolean;
     permissionModeMenuOpen: boolean;
     agentPickerOpen: boolean;
     modelProfiles: Array<
@@ -118,8 +119,11 @@ export interface RuntimeSelectionControllerDependencies {
     permissionModeMenu: RuntimeSelectionControlMenuSurface;
     agentModeButton: RuntimeSelectionAgentModeButtonSurface;
     agentModeMenu: RuntimeSelectionControlMenuSurface;
+    reasoningBudgetControl?: HTMLElement;
+    reasoningBudgetButton?: HTMLButtonElement;
+    reasoningBudgetMenu?: HTMLElement;
   }>;
-  readonly preferences: Readonly<{
+  readonly preferences: Readonly<Partial<import("../services/conversation-reasoning-preferences.js").ConversationReasoningPreferences> & {
     loadPinnedSessions(): string[];
     loadSessionModes(
       normalize: (value: unknown) => ToolPermissionMode,
@@ -183,6 +187,7 @@ export declare function createRuntimeSelectionController(
   renderPermissionMode(): void;
   saveModelPreferences(): void;
   selectedEnvironmentId(): string;
+  selectedReasoningPreference(): import("../../../shared/model-reasoning.js").ModelReasoningPreference | undefined;
   selectedModelPreference(): Record<string, unknown> | null;
   selectedModelSupportsImageInput(profileId?: string): boolean;
   setAgentMode(mode: AgentMode): Promise<boolean>;