@abot-ai/runtime 1.8.1 → 2.0.0

package/dist/src/web-ui/app/index.html

@@ -143,6 +143,7 @@
             <span class="rail-button-label">System</span>
           </button>
         </div>
+        <div id="appearanceRoot"></div>
         <div class="rail-spacer"></div>
         <div class="rail-runtime">
           <select
@@ -206,6 +207,10 @@
             <h1 id="sessionsHeading">Conversations</h1>
           </div>
           <div class="sheet-heading-actions">
+            <button id="sessionSearchToggleButton" class="icon-button" type="button"
+              aria-label="Search conversations" title="Search conversations" aria-controls="sessionSearchField" aria-expanded="false">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" /><path d="m16 16 4 4" /></svg>
+            </button>
             <button
               id="refreshSessionsButton"
               class="icon-button"
@@ -233,7 +238,16 @@
           </div>
         </div>
 
-        <div class="session-create-row">
+        <div class="session-navigation-tools">
+          <label id="sessionSearchField" class="session-search" hidden>
+            <span class="sr-only">Search conversations</span>
+            <input
+              id="sessionSearchInput"
+              type="search"
+              placeholder="Search conversations"
+              autocomplete="off"
+            />
+          </label>
           <button
             id="newSessionButton"
             class="sessions-new-button"
@@ -246,41 +260,25 @@
             </svg>
             <span>New chat</span>
           </button>
-          <button
-            id="newProjectButton"
-            class="sessions-project-button"
-            type="button"
-            disabled
-            aria-label="Create a project"
-            title="Create a project"
-            aria-controls="projectCreationRoot"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M3 7V5h6l2 2h10v13H3ZM12 10v7M8.5 13.5h7" />
-            </svg>
-            <span>New project</span>
-          </button>
         </div>
 
         <section class="sessions-section" aria-labelledby="sessionsHeading">
-          <div class="sessions-heading-row">
-            <span class="sessions-list-label">Recent conversations</span>
-            <span id="sessionsCount" class="count-badge">0</span>
+          <div id="sessionsList" class="sessions-list">
+            <button
+              id="newProjectButton"
+              class="sessions-project-button"
+              type="button"
+              disabled
+              aria-label="Create a project"
+              title="Create a project"
+              aria-controls="projectCreationRoot"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M3 7V5h6l2 2h10v13H3ZM12 10v7M8.5 13.5h7" />
+              </svg>
+              <span>New project</span>
+            </button>
           </div>
-          <label class="session-search">
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <circle cx="11" cy="11" r="6.5" />
-              <path d="m16 16 4 4" />
-            </svg>
-            <span class="sr-only">Search conversations</span>
-            <input
-              id="sessionSearchInput"
-              type="search"
-              placeholder="Search conversations"
-              autocomplete="off"
-            />
-          </label>
-          <div id="sessionsList" class="sessions-list"></div>
         </section>
       </aside>
 
@@ -437,6 +435,14 @@
                   </button>
                   <div id="agentModeMenu" class="agent-mode-menu"></div>
                 </div>
+                <div id="reasoningBudgetControl" class="control-cluster reasoning-budget-control" hidden>
+                  <span class="control-label">Budget</span>
+                  <button id="reasoningBudgetButton" class="agent-mode-button reasoning-budget-button"
+                    type="button" aria-controls="reasoningBudgetMenu" aria-haspopup="dialog" aria-expanded="false">
+                    Profile default
+                  </button>
+                  <div id="reasoningBudgetMenu" class="agent-mode-menu reasoning-budget-menu" hidden></div>
+                </div>
                 <div
                   id="composerContextWindow"
                   class="composer-context-window"

package/dist/src/web-ui/app/lib/color-palettes.d.ts

@@ -0,0 +1,17 @@
+export const PALETTE_PREFERENCE_KEY: "abot-web.colorPalette";
+export const DEFAULT_PALETTE_ID: "harbor";
+export type ColorPaletteId = "harbor" | "midnight" | "graphite" | "charcoal" | "onyx" | "sand";
+export interface ColorPalette {
+  id: ColorPaletteId;
+  name: string;
+  description: string;
+  background: string;
+  panel: string;
+  accent: string;
+}
+export const COLOR_PALETTES: ColorPalette[];
+export function isColorPaletteId(value: unknown): value is ColorPaletteId;
+export function savedColorPalette(storage: {
+  getItem(key: string): string | null;
+  snapshot?(): { preferences: Record<string, string> } | null;
+}): ColorPaletteId;

package/dist/src/web-ui/app/lib/color-palettes.js

@@ -0,0 +1,20 @@
+export const PALETTE_PREFERENCE_KEY = "abot-web.colorPalette";
+export const DEFAULT_PALETTE_ID = "harbor";
+export const COLOR_PALETTES = [
+  { id: "harbor", name: "Harbor", description: "Deep blue · sea glass", background: "#090f17", panel: "#0d151e", accent: "#82d4c2" },
+  { id: "midnight", name: "Midnight", description: "Near black · ice blue", background: "#090b10", panel: "#10131b", accent: "#97bdff" },
+  { id: "graphite", name: "Graphite", description: "Soft charcoal · lilac", background: "#101012", panel: "#18181c", accent: "#c4b5ed" },
+  { id: "charcoal", name: "Onyx Soft", description: "Soft black · silver", background: "#0d0d0d", panel: "#151515", accent: "#c7c7c7" },
+  { id: "onyx", name: "Onyx", description: "Pure black · soft white", background: "#070707", panel: "#101010", accent: "#d4d4d4" },
+  { id: "sand", name: "Onyx Steel", description: "Cool black · steel", background: "#080b0e", panel: "#101519", accent: "#b5c6d2" },
+];
+
+export function isColorPaletteId(value) {
+  return COLOR_PALETTES.some((palette) => palette.id === value);
+}
+
+export function savedColorPalette(storage) {
+  const acknowledged = storage.snapshot?.();
+  const value = acknowledged ? acknowledged.preferences[PALETTE_PREFERENCE_KEY] : storage.getItem(PALETTE_PREFERENCE_KEY);
+  return isColorPaletteId(value) ? value : DEFAULT_PALETTE_ID;
+}

package/dist/src/web-ui/app/lib/conversation-role-model.d.ts

@@ -1,4 +1,6 @@
 import type { ConversationToolAction } from "./tool-activity-model.js";
+import type { RoleDelegation } from "./role-delegation-event.js";
+import type { RoleReturn } from "./role-return-event.js";
 
 export type ConversationRole =
   | "supervisor"
@@ -17,6 +19,9 @@ export interface ConversationRoleCard {
   summary: string;
   facts: string[];
   toolActions?: ConversationToolAction[];
+  skillActivities?: { summary: string; tone: string }[];
+  delegations?: RoleDelegation[];
+  returns?: RoleReturn[];
   active: boolean;
   tone: "active" | "failed" | "recorded";
 }

package/dist/src/web-ui/app/lib/conversation-role-model.js

@@ -5,6 +5,14 @@ import {
   titleCaseEventValue,
 } from "./event-presentation.js";
 import { textOf } from "./text-format.js";
+import {
+  isRoleDelegationEvent,
+  projectRoleDelegationEvent,
+} from "./role-delegation-event.js";
+import {
+  isRoleReturnEvent,
+  projectRoleReturnEvent,
+} from "./role-return-event.js";
 import { countToolInvocations } from "./tool-invocation-count.js";
 import { projectToolActivityEvent } from "./tool-activity-event.js";
 import { correlateToolApprovalActivity } from "./tool-approval-activity.js";
@@ -32,13 +40,16 @@ const ROLE_RESPONSIBILITIES = Object.freeze({
 });
 
 function latestRoleAction(group) {
+  if (group.summarySupersededByReturn) return "";
+  if (!group.latestEvent) return "";
   if (group.toolActions.some((action) => !action.legacy)) {
-    return group.latestRoleEvent
+    return group.latestRoleEvent && !isSupervisorSkillActivity(group.latestRoleEvent)
       ? roleActivitySummary(group.latestRoleEvent)
       : "";
   }
   const toolEvent = group.toolEvents.at(-1);
-  return roleActivitySummary(toolEvent || group.latestEvent);
+  const event = toolEvent || group.latestEvent;
+  return isSupervisorSkillActivity(event) ? "" : roleActivitySummary(event);
 }
 
 function belongsToRoleRequest(event, requestId) {
@@ -64,14 +75,20 @@ function orderedRequestActivity(events, requestId) {
   for (const event of events) {
     if (!belongsToRoleRequest(event, requestId)) continue;
     const position = activityPosition(event);
-    if (!position) {
+    const delegation = projectRoleDelegationEvent(event);
+    const receipt = projectRoleReturnEvent(event);
+    if (!position && !delegation && !receipt) {
       unique.push({ event, position });
       continue;
     }
-    const identity = `${position.domain}:${position.value}`;
+    let identity;
+    if (receipt) identity = `return:${receipt.id}`;
+    else if (delegation) identity = `delegation:${delegation.id}`;
+    else identity = `${position.domain}:${position.value}`;
     if (seen.has(identity)) continue;
     seen.add(identity);
     unique.push({ event, position });
+    if (!position) continue;
     const domain = domains.get(position.domain) || { events: [], next: 0 };
     domain.events.push({ event, position });
     domains.set(position.domain, domain);
@@ -104,8 +121,14 @@ function isToolActivityEvent(event) {
   return activityEventName(event).startsWith("tool.");
 }
 
+function isSupervisorSkillActivity(event) {
+  return event.stage === "supervisor" && event.phase === "skills"
+    && !isToolActivityEvent(event);
+}
+
 function roleActivityStage(event) {
   if (isToolActivityEvent(event)) return "";
+  if (isRoleDelegationEvent(event) || isRoleReturnEvent(event)) return "";
   return textOf(event.stage).trim();
 }
 
@@ -114,6 +137,7 @@ function hasSupportedRoleStage(stage) {
 }
 
 function isFailedRoleActivity(event) {
+  if (!event) return false;
   if (isToolActivityEvent(event)) return false;
   return (textOf(event.tone) || eventTone(event)) === "failed";
 }
@@ -134,6 +158,10 @@ function createRoleGroup(role, event) {
     latestRoleEvent: null,
     toolEvents: [],
     toolActions: [],
+    skillActivities: [],
+    delegations: [],
+    returns: [],
+    summarySupersededByReturn: false,
   };
 }
 
@@ -153,6 +181,7 @@ function buildRoleCard(group, activeRole, streaming) {
   const active = isActiveRoleActivity(group, activeRole, streaming);
   const toolCount = countToolInvocations(group.toolEvents);
   const toolSummary = summarizeConversationTools(group.toolActions);
+  const roleIdentityRecorded = group.latestRoleEvent || group.delegations[0];
   let tone = "recorded";
   if (active) tone = "active";
   if (failed) tone = "failed";
@@ -160,12 +189,17 @@ function buildRoleCard(group, activeRole, streaming) {
     id: group.role,
     role: group.role,
     title:
-      group.role === "supervisor" && !group.latestRoleEvent
+      group.role === "supervisor" && !roleIdentityRecorded
         ? "Root agent"
         : ROLE_TITLES[group.role],
     responsibility: ROLE_RESPONSIBILITIES[group.role],
     phaseLabel: titleCaseEventValue(group.phase),
     summary: latestRoleAction(group),
+    ...(group.skillActivities.length > 0
+      ? { skillActivities: group.skillActivities }
+      : {}),
+    ...(group.delegations.length > 0 ? { delegations: group.delegations } : {}),
+    ...(group.returns.length > 0 ? { returns: group.returns } : {}),
     toolActions: group.toolActions,
     facts: toolSummary
       ? [toolSummary]
@@ -203,6 +237,23 @@ export function buildConversationRoleCards({
       continue;
     }
 
+    const delegation = projectRoleDelegationEvent(event);
+    if (delegation) {
+      const group = groups.get("supervisor") || createRoleGroup("supervisor", null);
+      group.delegations.push(delegation);
+      groups.set("supervisor", group);
+      continue;
+    }
+
+    const receipt = projectRoleReturnEvent(event);
+    if (receipt) {
+      const group = groups.get("planner") || createRoleGroup("planner", null);
+      group.returns.push(receipt);
+      group.summarySupersededByReturn = true;
+      groups.set("planner", group);
+      continue;
+    }
+
     const stage = roleActivityStage(event);
     if (stage) {
       activeRole = "";
@@ -212,6 +263,13 @@ export function buildConversationRoleCards({
         group.phase = textOf(event.phase);
         group.latestEvent = event;
         group.latestRoleEvent = event;
+        group.summarySupersededByReturn = false;
+        if (isSupervisorSkillActivity(event)) {
+          group.skillActivities.push({
+            summary: roleActivitySummary(event),
+            tone: textOf(event.tone) || eventTone(event),
+          });
+        }
         groups.set(stage, group);
       }
     }

package/dist/src/web-ui/app/lib/event-presentation.js

@@ -1,8 +1,19 @@
 import { textOf } from "./text-format.js";
 import { isStopResult } from "./request-stop-state.js";
+import {
+  isRoleDelegationEvent,
+  projectRoleDelegationEvent,
+} from "./role-delegation-event.js";
+
+import {
+  isRoleReturnEvent,
+  projectRoleReturnEvent,
+} from "./role-return-event.js";
 
 function canMergeEventTimelineEntries(previous, event, name, summary) {
   if (!previous) return false;
+  if (isRoleDelegationEvent(previous) || isRoleDelegationEvent(event)) return false;
+  if (isRoleReturnEvent(previous) || isRoleReturnEvent(event)) return false;
   if (previous.name !== name) return false;
   if (previous.summary !== summary) return false;
   if (previous.tone !== event.tone) return false;
@@ -119,7 +130,22 @@ export function getPlanItemPayload(message) {
   };
 }
 
+function isMissingSkillLookup(message) {
+  if (message.type !== "event") return false;
+  if (message.stage !== "supervisor") return false;
+  if (message.phase !== "skills") return false;
+  // Runtime-owned status text, before or after event enrichment.
+  const name = textOf(message.name || message.rawType);
+  const status = textOf(message.message || name);
+  return (name === "runtime.state" || name === status)
+    && status === "Skill lookup failed: knowledge_skill_not_found";
+}
+
 export function formatEventLabel(message) {
+  const receipt = projectRoleReturnEvent(message);
+  if (receipt) return receipt.outcome === "failed" ? "Planner failed" : "Returned result";
+  const delegation = projectRoleDelegationEvent(message);
+  if (delegation) return `Delegated to ${titleCaseEventValue(delegation.childRole)}`;
   const name = textOf(message.name || message.rawType || message.type);
   const status = textOf(message.status);
   const phase = textOf(message.phase);
@@ -155,6 +181,7 @@ export function formatEventLabel(message) {
   if (name === "request.failed" || message.type === "failed") {
     return isStopResult(message) ? "Response stopped" : "Response failed";
   }
+  if (isMissingSkillLookup(message)) return "Skill not found";
   if (name === "runtime.state") {
     return status || textOf(message.output) || "Runtime state";
   }
@@ -180,6 +207,11 @@ function uncompletedToolLabel(message, name) {
 }
 
 export function formatEventDetail(message) {
+  const receipt = projectRoleReturnEvent(message);
+  if (receipt) return receipt.summary;
+  const delegation = projectRoleDelegationEvent(message);
+  if (delegation) return delegation.objective;
+  if (isMissingSkillLookup(message)) return "";
   if (isStopResult(message)) return "Stopped by you.";
   const parts = [];
   const name = textOf(message.name || message.rawType || message.type);
@@ -209,10 +241,12 @@ export function formatEventDetail(message) {
 }
 
 export function eventTone(message) {
+  if (isRoleReturnEvent(message)) return "neutral";
   const name = textOf(message.name || message.type);
   const normalized = name.toLowerCase();
   if (isStopResult(message)) return "neutral";
   if (isUncompletedToolEvent(message)) return "neutral";
+  if (isMissingSkillLookup(message)) return "neutral";
   if (
     message.ok === false ||
     textOf(message.status).toLowerCase() === "failed" ||

package/dist/src/web-ui/app/lib/memory-activity-model.d.ts

@@ -0,0 +1,12 @@
+export type MemoryActivity = {
+  state: "active" | "done" | "failed" | "incomplete";
+  label: string;
+  detail: string;
+};
+
+export declare function isMemoryRetrievalEvent(event: unknown): boolean;
+export declare function buildMemoryActivities(input?: {
+  requestId?: string;
+  events?: Record<string, unknown>[];
+  streaming?: boolean;
+}): MemoryActivity[];

package/dist/src/web-ui/app/lib/memory-activity-model.js

@@ -0,0 +1,61 @@
+import { textOf } from "./text-format.js";
+
+const RETRIEVAL_STATES = Object.freeze({
+  "memory.retrieval.started": "active",
+  "memory.retrieval.completed": "done",
+  "memory.retrieval.failed": "failed",
+});
+
+export function isMemoryRetrievalEvent(event) {
+  return Object.hasOwn(RETRIEVAL_STATES, memoryEventName(event));
+}
+
+function memoryEventName(event) {
+  return textOf(event?.eventName || event?.name || event?.rawType || event?.type);
+}
+
+function sequenceOf(event, field) {
+  const value = field === "replay" ? event.lastSeqNo ?? event.seqNo : event.eventSequence;
+  return Number.isSafeInteger(value) && value > 0 ? value : null;
+}
+
+function hasCompleteMemoryOrdering(events, field) {
+  return events.every((event) => sequenceOf(event, field) !== null);
+}
+
+function orderedMemoryEvents(events) {
+  for (const field of ["runtime", "replay"]) {
+    if (!hasCompleteMemoryOrdering(events, field)) continue;
+    const unique = new Map();
+    for (const event of events) {
+      const sequence = sequenceOf(event, field);
+      if (!unique.has(sequence)) unique.set(sequence, event);
+    }
+    return [...unique.entries()].sort(([left], [right]) => left - right).map(([, event]) => event);
+  }
+  return events;
+}
+
+function memoryActivity(event, streaming) {
+  const recordedState = RETRIEVAL_STATES[memoryEventName(event)];
+  const state = recordedState === "active" && !streaming ? "incomplete" : recordedState;
+  const labels = {
+    active: "Checking memory…",
+    done: "Memory checked",
+    failed: "Memory retrieval failed",
+    incomplete: "Memory check incomplete",
+  };
+  return {
+    state,
+    label: labels[state],
+    detail: state === "failed" ? textOf(event.summary || event.reason || event.error) : "",
+  };
+}
+
+/** Show the latest retrieval status for this request; recorded events stay intact. */
+export function buildMemoryActivities({ requestId, events = [], streaming = false } = {}) {
+  const scoped = events.filter((event) =>
+    textOf(event?.requestId) === requestId && isMemoryRetrievalEvent(event));
+  const latest = orderedMemoryEvents(scoped).at(-1);
+  return latest ? [memoryActivity(latest, streaming)] : [];
+}

package/dist/src/web-ui/app/lib/navigation-display.d.ts

@@ -0,0 +1,8 @@
+export const NAVIGATION_PREFERENCE_KEY: "abot-web.navigationDisplay";
+export const DEFAULT_NAVIGATION_MODE: "labels";
+export type NavigationMode = "labels" | "icons";
+export function isNavigationMode(value: unknown): value is NavigationMode;
+export function savedNavigationMode(storage: {
+  getItem(key: string): string | null;
+  snapshot?(): { preferences: Record<string, string> } | null;
+}): NavigationMode;

package/dist/src/web-ui/app/lib/navigation-display.js

@@ -0,0 +1,12 @@
+export const NAVIGATION_PREFERENCE_KEY = "abot-web.navigationDisplay";
+export const DEFAULT_NAVIGATION_MODE = "labels";
+
+export function isNavigationMode(value) {
+  return value === "labels" || value === "icons";
+}
+
+export function savedNavigationMode(storage) {
+  const acknowledged = storage.snapshot?.();
+  const value = acknowledged ? acknowledged.preferences[NAVIGATION_PREFERENCE_KEY] : storage.getItem(NAVIGATION_PREFERENCE_KEY);
+  return isNavigationMode(value) ? value : DEFAULT_NAVIGATION_MODE;
+}

package/dist/src/web-ui/app/lib/reasoning-controls.js

@@ -1,6 +1,8 @@
+import { reasoningPreferenceLabel, renderReasoningPreferenceField, syncReasoningPreferenceField } from "./reasoning-preference.js";
 import { escapeHtml } from "./text-format.js";
 
-export function displayReasoningMode(mode) {
+export function displayReasoningMode(mode, preference) {
+  if (preference) return `${agentModeMeta(mode).label} · ${reasoningPreferenceLabel(preference)}`;
   if (mode === "fast") return "Low";
   return mode;
 }
@@ -16,10 +18,34 @@ export function reasoningModeOptions(mode, enabled, modes = ["fast", "reasoning"
   return modes.map((value) => `<option value="${escapeHtml(value)}"${value === mode ? " selected" : ""}>${escapeHtml(labels[value] || value)}</option>`).join("");
 }
 
-export function renderReasoningModeField(mode, profile, modes) {
+export function agentModeMeta(mode) {
+  const modes = {
+    auto: { label: "Auto", description: "Lets the agent choose", icon: "*" },
+    fast: { label: "Low", description: "Shorter and quicker", icon: "!" },
+    reasoning: { label: "Reasoning", description: "Balanced speed and thinking", icon: "R" },
+    deep: { label: "Deep", description: "More careful responses", icon: "D" },
+  };
+  return modes[mode] || modes.reasoning;
+}
+
+export function renderReasoningModeButtons(mode, modes, disabled = false) {
+  return modes.map((value) => {
+    const item = agentModeMeta(value);
+    const selected = value === mode;
+    return `<button class="agent-mode-option ${selected ? "selected" : ""}" type="button"
+      role="menuitemradio" aria-checked="${selected}" tabindex="${selected ? "0" : "-1"}"
+      data-mode="${escapeHtml(value)}" ${disabled ? "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("");
+}
+
+export function renderReasoningModeField(mode, profile, modes, preference) {
   const enabled = canChooseReasoning(profile);
-  return `<label>Reasoning depth<select name="agentMode" data-reasoning-mode${enabled ? "" : " disabled"}>${reasoningModeOptions(mode, enabled, modes)}</select>
-    <small data-reasoning-mode-note${enabled ? " hidden" : ""}>Uses the provider default. Enable reasoning controls for this model in Models.</small></label>`;
+  return `<label data-legacy-reasoning>Reasoning depth<select name="agentMode" data-reasoning-mode data-retained-mode="${escapeHtml(mode || "reasoning")}"${enabled ? "" : " disabled"}>${reasoningModeOptions(mode, enabled, modes)}</select>
+    <small data-reasoning-mode-note${enabled ? " hidden" : ""}>Uses the provider default. Enable reasoning controls for this model in Models.</small>
+    <small data-reasoning-default-note${enabled ? "" : " hidden"}>Sets the default depth; model profile and calibration settings may override it. Token budgets are separate. Changing the mode turns Thinking Off back on.</small></label>${renderReasoningPreferenceField(profile, preference)}`;
 }
 
 export function syncReasoningModeField(form, profiles, modes) {
@@ -28,13 +54,28 @@ export function syncReasoningModeField(form, profiles, modes) {
   const profileId = form.querySelector('[name="modelProfileId"]')?.value;
   const profile = profiles?.find((item) => item.id === profileId);
   const enabled = canChooseReasoning(profile);
-  const mode = select.value;
+  syncReasoningPreferenceField(form, profile);
+  const mode = select.value || select.dataset.retainedMode || "reasoning";
+  select.dataset.retainedMode = mode;
   select.innerHTML = reasoningModeOptions(mode, enabled, modes);
   select.disabled = !enabled;
   const note = form.querySelector("[data-reasoning-mode-note]");
   if (note) note.hidden = enabled;
+  const defaultNote = form.querySelector("[data-reasoning-default-note]");
+  if (defaultNote) defaultNote.hidden = !enabled;
+}
+
+export function clearReasoningOffForMode(form, profiles, modes) {
+  const select = form.querySelector("[data-reasoning-mode]");
+  if (!select?.value || select.disabled) return;
+  select.dataset.retainedMode = select.value;
+  const preferenceMode = form.querySelector("[data-reasoning-preference-mode]");
+  if (preferenceMode?.value !== "off") return;
+  preferenceMode.value = "inherit";
+  syncReasoningModeField(form, profiles, modes);
 }
 
 export function retainedReasoningMode(form, fallback) {
-  return form.querySelector("[data-reasoning-mode]")?.value || fallback;
+  const select = form.querySelector("[data-reasoning-mode]");
+  return select?.value || select?.dataset.retainedMode || fallback;
 }

package/dist/src/web-ui/app/lib/reasoning-preference.d.ts

@@ -0,0 +1,9 @@
+import type { ModelReasoningPreference } from "../../../shared/model-reasoning.js";
+export type ReasoningProfile = { id?: string; supportsThinking?: boolean; reasoningControls?: { budgetTokens: boolean } };
+export declare const MAX_REASONING_BUDGET_TOKENS: number;
+export declare function canChooseReasoningBudget(profile: ReasoningProfile | null | undefined): boolean;
+export declare function isReasoningPreference(value: unknown): value is ModelReasoningPreference;
+export declare function reasoningPreferenceLabel(preference?: ModelReasoningPreference): string;
+export declare function renderReasoningPreferenceField(profile?: ReasoningProfile | null, preference?: ModelReasoningPreference): string;
+export declare function syncReasoningPreferenceField(form: ParentNode, profile?: ReasoningProfile | null): void;
+export declare function readReasoningPreferenceField(form: ParentNode): ModelReasoningPreference | undefined;

package/dist/src/web-ui/app/lib/reasoning-preference.js

@@ -0,0 +1,75 @@
+import { escapeHtml } from "./text-format.js";
+
+export const MAX_REASONING_BUDGET_TOKENS = 2147483647;
+export function canChooseReasoningBudget(profile) {
+  return profile?.supportsThinking === true && profile?.reasoningControls?.budgetTokens === true;
+}
+export function isReasoningPreference(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  if (typeof value.profileId !== "string" || !value.profileId.trim()) return false;
+  if (!["off", "budget", "server-default"].includes(value.mode)) return false;
+  const fields = value.mode === "budget" ? ["profileId", "mode", "budgetTokens"] : ["profileId", "mode"];
+  if (Object.keys(value).some((key) => !fields.includes(key))) return false;
+  return value.mode !== "budget" || (Number.isInteger(value.budgetTokens)
+    && value.budgetTokens >= 0 && value.budgetTokens <= MAX_REASONING_BUDGET_TOKENS);
+}
+export function reasoningPreferenceLabel(preference) {
+  const zeroBudgetDisablesThinking = preference?.mode === "budget" && preference.budgetTokens === 0;
+  if (zeroBudgetDisablesThinking) return "Thinking off";
+  if (preference?.mode === "budget") return `${preference.budgetTokens} thinking tokens`;
+  if (preference?.mode === "off") return "Thinking off";
+  if (preference?.mode === "server-default") return "Server thinking default";
+  return "Profile default";
+}
+export function renderReasoningPreferenceField(profile, preference) {
+  const available = canChooseReasoningBudget(profile);
+  const mode = preference?.mode || "inherit";
+  const profileId = profile?.id || preference?.profileId || "";
+  return `<div data-reasoning-preference data-profile-id="${escapeHtml(profileId)}" data-budget-available="${available}"${available || preference ? "" : " hidden"}>
+    <label>Thinking budget<select name="reasoningPreferenceMode" data-reasoning-preference-mode>
+      ${[["inherit", "Profile default"], ["off", "Off"], ["budget", "Custom token budget"], ["server-default", "Server default"]].map(([value, label]) => `<option value="${value}"${value === mode ? " selected" : ""}${!available && value !== "inherit" ? " disabled" : ""}>${label}</option>`).join("")}
+    </select></label>
+    <label data-reasoning-budget-label${mode === "budget" ? "" : " hidden"}>Thinking tokens<input name="reasoningBudgetTokens" data-reasoning-budget type="number" min="0" max="${MAX_REASONING_BUDGET_TOKENS}" step="1" inputmode="numeric" value="${preference?.mode === "budget" ? escapeHtml(String(preference.budgetTokens)) : ""}"${mode === "budget" ? " required" : " disabled"}></label>
+    <small data-reasoning-preference-note>${available ? "The token limit is independent of reasoning depth and counts toward the total output limit. Off or a token limit of 0 disables thinking." : "This model cannot use the saved thinking budget. Choose Profile default to clear it."}</small>
+  </div><small data-reasoning-model-change-note hidden>Changing the model reset the thinking budget to Profile default.</small>`;
+}
+export function syncReasoningPreferenceField(form, profile) {
+  const field = form?.querySelector("[data-reasoning-preference]");
+  if (!field) return;
+  const changed = field.dataset.profileId !== (profile?.id || "");
+  const mode = field.querySelector("[data-reasoning-preference-mode]");
+  const notice = form.querySelector("[data-reasoning-model-change-note]");
+  if (changed) {
+    if (notice) notice.hidden = mode.value === "inherit";
+    field.dataset.profileId = profile?.id || "";
+    mode.value = "inherit";
+    field.querySelector("[data-reasoning-budget]").value = "";
+  }
+  const available = canChooseReasoningBudget(profile);
+  field.dataset.budgetAvailable = String(available);
+  field.hidden = !available && mode.value === "inherit";
+  for (const option of mode.querySelectorAll("option")) option.disabled = !available && option.value !== "inherit";
+  if (!changed && mode.value !== "inherit" && notice) notice.hidden = true;
+  const custom = mode.value === "budget";
+  field.querySelector("[data-reasoning-budget-label]").hidden = !custom;
+  const input = field.querySelector("[data-reasoning-budget]");
+  input.disabled = !custom; input.required = custom;
+}
+function readReasoningBudgetTokens(field) {
+  const raw = field.querySelector("[data-reasoning-budget]").value;
+  if (raw.trim() === "") return NaN;
+  return Number(raw);
+}
+
+export function readReasoningPreferenceField(form) {
+  const field = form?.querySelector("[data-reasoning-preference]");
+  const mode = field?.querySelector("[data-reasoning-preference-mode]")?.value || "inherit";
+  if (mode === "inherit") return undefined;
+  if (field.dataset.budgetAvailable !== "true")
+    throw new Error("This model does not support thinking budgets. Choose Profile default.");
+  const preference = { profileId: field.dataset.profileId, mode };
+  if (mode === "budget") preference.budgetTokens = readReasoningBudgetTokens(field);
+  if (!isReasoningPreference(preference))
+    throw new Error(`Enter a whole thinking token budget from 0 to ${MAX_REASONING_BUDGET_TOKENS}; 0 disables thinking.`);
+  return preference;
+}