From 7ef6d7c8c0bca6dc654afe54f76332340c092b11 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:24:02 -0700
Subject: [PATCH 1/6] feat(web): model and effort share one control

The composer showed the model and the effort level as two click targets that read
as one label. One trigger now opens the model picker with the effort levels docked
beside the list and speed and permissions in a footer under both. Picker rows are
one line with a leading provider logo in every tab, so Favorites matches the
provider tabs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx |   2 +
 .../chat/CompactComposerControlsMenu.tsx      |  20 +-
 .../components/chat/ComposerControlsBar.tsx   | 171 +++----
 .../chat/ComposerFooterControls.tsx           |   6 +-
 .../components/chat/ComposerModelEffort.tsx   | 409 ++++++++++++++++
 ...omposerPermissionsSection.browser.test.tsx |  40 +-
 apps/web/src/components/chat/EffortGlyph.tsx  |  19 +
 apps/web/src/components/chat/ModelListRow.tsx |  82 ++--
 .../components/chat/ModelPickerContent.tsx    |  69 ++-
 .../chat/ProviderModelPicker.browser.test.tsx |  77 +++
 .../components/chat/ProviderModelPicker.tsx   | 178 +++++--
 apps/web/src/components/chat/TraitsPicker.tsx | 452 ++++++------------
 .../chat/composerControlsOwnership.test.ts    |  43 +-
 .../chat/composerControlsOwnership.ts         |  61 +--
 .../src/components/chat/composerEventScope.ts |  29 +-
 .../components/chat/composerProviderState.tsx | 116 +----
 .../src/components/chat/providerIconUtils.ts  |  15 -
 apps/web/src/components/ui/combobox.tsx       |   6 +-
 docs/user/keybindings.md                      |   3 +-
 docs/user/permission-modes.md                 |   4 +-
 docs/user/providers-acp.md                    |   2 +-
 docs/user/providers-antigravity.md            |   2 +-
 22 files changed, 1049 insertions(+), 757 deletions(-)
 create mode 100644 apps/web/src/components/chat/ComposerModelEffort.tsx

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 6e2455bb340ba..0cbdc4e3c5bee 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -92,6 +92,7 @@ import { serializeComposerImages } from "./composerImagePersistence";
 import {
   isInsideCollapsedComposerControls,
   isInsideRestingComposerControlScope,
+  markOpenToEffort,
   markOpenToPermissions,
 } from "./composerEventScope";
 import {
@@ -2874,6 +2875,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         if (!trigger) return;
         trigger.focus({ preventScroll: true });
         if (command === "composer.mode") markOpenToPermissions(trigger);
+        if (command === "composer.effort") markOpenToEffort(trigger);
         trigger.click();
       },
       compactContext: compactThreadContextStable,
diff --git a/apps/web/src/components/chat/CompactComposerControlsMenu.tsx b/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
index 68ea2036b1667..e5fbddf56c769 100644
--- a/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
+++ b/apps/web/src/components/chat/CompactComposerControlsMenu.tsx
@@ -1,5 +1,5 @@
 import { ProviderInteractionMode, RuntimeMode } from "@t3tools/contracts";
-import { memo, type ReactNode, useRef } from "react";
+import { memo, useRef } from "react";
 import { EllipsisIcon } from "lucide-react";
 import {
   Menu,
@@ -19,7 +19,6 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
   runtimeMode: RuntimeMode;
   runtimeModeOptions: ReadonlyArray<RuntimeModeOption>;
   showInteractionModeToggle: boolean;
-  traitsMenuContent?: ReactNode;
   showPermissions?: boolean;
   size?: "sm" | "xs";
   /** Close the portaled popup when its trigger hides. */
@@ -45,28 +44,13 @@ export const CompactComposerControlsMenu = memo(function CompactComposerControls
             size={size}
             className="shrink-0"
             aria-label="More composer controls"
-            data-composer-shortcut={
-              [
-                props.showPermissions !== false ? "composer.mode" : null,
-                props.traitsMenuContent ? "composer.effort" : null,
-              ]
-                .filter(Boolean)
-                .join(" ") || undefined
-            }
+            data-composer-shortcut={props.showPermissions !== false ? "composer.mode" : undefined}
           />
         }
       >
         <ComposerControlIcon icon={EllipsisIcon} size={size} />
       </MenuTrigger>
       <MenuPopup align="start" {...composerFloatingLayerProps}>
-        {props.traitsMenuContent ? (
-          <>
-            {props.traitsMenuContent}
-            {props.showInteractionModeToggle || props.showPermissions !== false ? (
-              <MenuDivider />
-            ) : null}
-          </>
-        ) : null}
         {props.showInteractionModeToggle ? (
           <>
             <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">Mode</div>
diff --git a/apps/web/src/components/chat/ComposerControlsBar.tsx b/apps/web/src/components/chat/ComposerControlsBar.tsx
index 4dd547393ff74..ed2bef35caea5 100644
--- a/apps/web/src/components/chat/ComposerControlsBar.tsx
+++ b/apps/web/src/components/chat/ComposerControlsBar.tsx
@@ -6,7 +6,6 @@ import { CircleAlertIcon } from "lucide-react";
 import { CompactComposerControlsMenu } from "./CompactComposerControlsMenu";
 import { ComposerControl } from "./ComposerControl";
 import {
-  ComposerPermissionsSection,
   ComposerFooterModeControls,
   ComposerModelPicker,
   type RuntimeModeOption,
@@ -22,19 +21,21 @@ import {
 } from "@t3tools/contracts";
 import type { EffortDisplay } from "@t3tools/contracts/settings";
 import { cn } from "~/lib/utils";
-import { shortcutLabelForCommand } from "../../keybindings";
+import { resolveComposerTraitsInput } from "./composerProviderState";
 import {
-  renderProviderTraitsMenuContent,
-  renderProviderTraitsPicker,
-} from "./composerProviderState";
+  ComposerEffortColumn,
+  ComposerPickerFooter,
+  describeComposerEffort,
+} from "./ComposerModelEffort";
 import type { useComposerProviderModel } from "./useComposerProviderModel";
 import { resolveComposerControlsOwnership } from "./composerControlsOwnership";
 
 /**
- * The composer footer controls: model picker, traits, mode controls and the overflow menu for
- * blocks that do not fit. Rendered in the expanded footer or the resting controls host.
+ * The composer footer controls: the model picker (which also holds effort, speed and
+ * permissions), mode controls and the overflow menu for blocks that do not fit. Rendered in the
+ * expanded footer or the resting controls host.
  */
-// Model and effort sit a word space apart, so hover and open states brighten text, not a box.
+// Model and effort share one trigger; hover and open states brighten its text, not a box.
 const TEXT_CONTROL_STATES =
   "hover:bg-transparent data-pressed:bg-transparent data-popup-open:bg-transparent data-pressed:text-foreground data-popup-open:text-foreground";
 
@@ -137,111 +138,56 @@ export function ComposerControlsBar(props: {
     modelPickerIconClassName,
     getModelDisabledReason,
   } = props;
-  const providerTraitsMenuContent = renderProviderTraitsMenuContent({
-    provider: selectedProvider,
-    instanceId: selectedInstanceId,
-    ...(routeKind === "server" ? { threadRef: routeThreadRef } : {}),
-    ...(routeKind === "draft" && draftId ? { draftId } : {}),
-    model: selectedModel,
-    models: selectedProviderModels,
-    modelOptions: composerModelOptions?.[selectedInstanceId],
-    reportedModelSelection,
-    promptUltrathink,
-    onPromptEdit,
-    planModeEnabled,
-  });
   const accessMatchesDefault = compatibleRuntimeMode === defaultRuntimeMode;
-  const permissionsChipHidden = accessMatchesDefault || props.permissionsShownInStrip;
-  const providerTraitsPickerInput = {
-    provider: selectedProvider,
-    instanceId: selectedInstanceId,
-    ...(routeKind === "server" ? { threadRef: routeThreadRef } : {}),
-    ...(routeKind === "draft" && draftId ? { draftId } : {}),
-    model: selectedModel,
-    models: selectedProviderModels,
-    modelOptions: composerModelOptions?.[selectedInstanceId],
-    reportedModelSelection,
-    promptUltrathink,
-    onPromptEdit,
-    planModeEnabled,
-    isComposerOwned: true,
-    effortDisplay: props.effortDisplay,
-    triggerClassName: cn("ps-1.5 pe-1", TEXT_CONTROL_STATES),
-    // Permissions always live in the effort menu, so the section never unmounts while open.
-    extraMenuContent: (
-      <ComposerPermissionsSection
-        runtimeMode={compatibleRuntimeMode}
-        runtimeModeOptions={compatibleRuntimeModeOptions}
-        onRuntimeModeChange={handleRuntimeModeChange}
-      />
-    ),
-    ...(permissionsChipHidden
-      ? {
-          extraMenuHint: [
-            `Permissions: ${
-              compatibleRuntimeModeOptions.find((option) => option.mode === compatibleRuntimeMode)
-                ?.label ?? compatibleRuntimeMode
-            }`,
-            shortcutLabelForCommand(keybindings, "composer.mode"),
-          ]
-            .filter(Boolean)
-            .join(" · "),
-        }
-      : {}),
-  } satisfies Parameters<typeof renderProviderTraitsPicker>[0];
-  const providerTraitsPicker = renderProviderTraitsPicker(providerTraitsPickerInput);
   const {
     accessDisplay,
     showModeBlock,
     hiddenBlockCount: restingHiddenBlockCount,
     hiddenBlockIds: hiddenRestingBlockIds,
-    traitsHidden: traitsBlockHidden,
-    effortOwnsModeShortcut,
     overflowShowsPermissions,
+    pickerOwnsModeShortcut,
   } = resolveComposerControlsOwnership({
-    matchesDefault: permissionsChipHidden,
-    hasTraits: providerTraitsPicker !== null,
+    matchesDefault: accessMatchesDefault || props.permissionsShownInStrip,
     planModeUiEnabled,
     collapsed: composerControlsCollapsed,
     measuredHiddenBlockCount,
   });
-  const restingProviderTraitsPicker = renderProviderTraitsPicker({
-    ...providerTraitsPickerInput,
-    size: composerControlsCollapsed ? "xs" : "sm",
-    hidden: composerControlsHidden || traitsBlockHidden,
-    extraMenuOwnsModeShortcut: effortOwnsModeShortcut,
+  const controlSize = composerControlsCollapsed ? "xs" : "sm";
+  const traitsInput = resolveComposerTraitsInput({
+    provider: selectedProvider,
+    instanceId: selectedInstanceId,
+    ...(routeKind === "server" ? { threadRef: routeThreadRef } : {}),
+    ...(routeKind === "draft" && draftId ? { draftId } : {}),
+    model: selectedModel,
+    models: selectedProviderModels,
+    modelOptions: composerModelOptions?.[selectedInstanceId],
+    reportedModelSelection,
+    promptUltrathink,
+    onPromptEdit,
+    planModeEnabled,
   });
-  const restingBlockDefs = [
-    ...(providerTraitsPicker
-      ? [
-          {
-            id: "traits",
-            content: restingProviderTraitsPicker,
-          },
-        ]
-      : []),
-    ...(!showModeBlock
-      ? []
-      : [
-          {
-            id: "mode",
-            content: (
-              <ComposerFooterModeControls
-                showInteractionModeToggle={planModeUiEnabled}
-                interactionMode={interactionMode}
-                runtimeMode={compatibleRuntimeMode}
-                runtimeModeOptions={compatibleRuntimeModeOptions}
-                size={composerControlsCollapsed ? "xs" : "sm"}
-                hidden={composerControlsHidden || restingHiddenBlockCount > 0}
-                accessDisplay={accessDisplay}
-                emphasized={!accessMatchesDefault}
-                onToggleInteractionMode={toggleInteractionMode}
-                onRuntimeModeChange={handleRuntimeModeChange}
-              />
-            ),
-          },
-        ]),
-  ];
+  const effort = describeComposerEffort(traitsInput, props.effortDisplay, controlSize);
+  const restingBlockDefs = showModeBlock
+    ? [
+        {
+          id: "mode",
+          content: (
+            <ComposerFooterModeControls
+              showInteractionModeToggle={planModeUiEnabled}
+              interactionMode={interactionMode}
+              runtimeMode={compatibleRuntimeMode}
+              runtimeModeOptions={compatibleRuntimeModeOptions}
+              size={controlSize}
+              hidden={composerControlsHidden || restingHiddenBlockCount > 0}
+              accessDisplay={accessDisplay}
+              emphasized={!accessMatchesDefault}
+              onToggleInteractionMode={toggleInteractionMode}
+              onRuntimeModeChange={handleRuntimeModeChange}
+            />
+          ),
+        },
+      ]
+    : [];
   // Its own element, so typing (which rebuilds the controls around it) leaves it cached.
   const composerModelPicker = (
     <ComposerModelPicker
@@ -269,12 +215,26 @@ export function ComposerControlsBar(props: {
       instanceEntries={providerInstanceEntries}
       keybindings={keybindings}
       modelOptionsByInstance={modelOptionsByInstance}
-      size={composerControlsCollapsed ? "xs" : "sm"}
+      size={controlSize}
       triggerClassName={cn(
-        "pe-1",
+        "group/model-trigger pe-1",
         TEXT_CONTROL_STATES,
         composerControlsCollapsed ? "min-w-13 shrink text-xs!" : "min-w-13",
       )}
+      triggerSuffix={effort.suffix}
+      triggerDetail={effort.detail}
+      triggerShortcuts={
+        pickerOwnsModeShortcut ? "composer.effort composer.mode" : "composer.effort"
+      }
+      effortColumn={<ComposerEffortColumn traits={traitsInput} />}
+      footer={
+        <ComposerPickerFooter
+          traits={traitsInput}
+          runtimeMode={compatibleRuntimeMode}
+          runtimeModeOptions={compatibleRuntimeModeOptions}
+          onRuntimeModeChange={handleRuntimeModeChange}
+        />
+      }
       terminalOpen={terminalOpen}
       open={modelPickerOpen}
       instanceIndicatorBackground={
@@ -345,12 +305,9 @@ export function ComposerControlsBar(props: {
             interactionMode={interactionMode}
             runtimeMode={compatibleRuntimeMode}
             runtimeModeOptions={compatibleRuntimeModeOptions}
-            size={composerControlsCollapsed ? "xs" : "sm"}
+            size={controlSize}
             hidden={composerControlsHidden || hiddenRestingBlockIds.length === 0}
-            showInteractionModeToggle={planModeUiEnabled && hiddenRestingBlockIds.includes("mode")}
-            traitsMenuContent={
-              hiddenRestingBlockIds.includes("traits") ? providerTraitsMenuContent : undefined
-            }
+            showInteractionModeToggle={planModeUiEnabled && hiddenRestingBlockIds.length > 0}
             // Permissions join the overflow only when their normal home is in it.
             showPermissions={overflowShowsPermissions}
             onToggleInteractionMode={toggleInteractionMode}
diff --git a/apps/web/src/components/chat/ComposerFooterControls.tsx b/apps/web/src/components/chat/ComposerFooterControls.tsx
index d99e538f6fe1f..31c5889db9b22 100644
--- a/apps/web/src/components/chat/ComposerFooterControls.tsx
+++ b/apps/web/src/components/chat/ComposerFooterControls.tsx
@@ -93,7 +93,7 @@ export const ComposerFooterModeControls = memo(function ComposerFooterModeContro
     </Tooltip>
   ) : null;
 
-  // The chip opens the same Permissions toggle used in the effort menu.
+  // The chip opens the same Permissions toggle used in the model picker and the overflow menu.
   const permissionsTooltip = `Permissions: ${runtimeModeOption.label}. ${runtimeModeOption.description}`;
   const permissionsChip = (
     <Menu
@@ -112,7 +112,7 @@ export const ComposerFooterModeControls = memo(function ComposerFooterModeContro
                   ref={permissionsChipRef}
                   data-composer-shortcut="composer.mode"
                   size={size}
-                  // Mirrors the effort chip's trailing pe-1 so both gaps around the bars match.
+                  // Mirrors the model trigger's trailing pe-1 so the gaps on both sides of the chip match.
                   className="ps-1.5"
                   aria-label={`Permissions: ${runtimeModeOption.label}`}
                 />
@@ -156,7 +156,7 @@ export const ComposerFooterModeControls = memo(function ComposerFooterModeContro
 /**
  * Permission modes as one horizontal toggle, with the shown mode named below.
  * Each segment is a real menu radio item, so arrow keys reach it from the rest of the menu
- * and a pick closes the menu. Lives inside a Menu: the permissions chip, the effort menu,
+ * and a pick closes the menu. Lives inside a Menu: the permissions chip, the model picker,
  * or the overflow menu.
  */
 export function ComposerPermissionsSection(props: {
diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
new file mode 100644
index 0000000000000..7ecd1a0e95295
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -0,0 +1,409 @@
+import {
+  buildTraitsTriggerDisplay,
+  getDescriptorStringValue,
+  REASONING_SELECT_DESCRIPTOR_IDS,
+  selectableProviderOptionChoices,
+} from "@t3tools/client-runtime/model-traits";
+import type { ProviderOptionDescriptor, RuntimeMode } from "@t3tools/contracts";
+import type { EffortDisplay } from "@t3tools/contracts/settings";
+import { CheckIcon, ChevronUpIcon } from "lucide-react";
+import { type KeyboardEvent, type ReactNode, use, useRef } from "react";
+
+import { cn } from "~/lib/utils";
+import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import type { ComposerControlSize } from "./ComposerControl";
+import { ComposerPermissionsSection, type RuntimeModeOption } from "./ComposerFooterControls";
+import { composerFloatingLayerProps, focusCheckedPermission } from "./composerEventScope";
+import { EffortGlyph, FastBolt, resolveEffortGlyph } from "./EffortGlyph";
+import { DockedPickerContext } from "./ProviderModelPicker";
+import {
+  getTraitsSectionVisibility,
+  type TraitsSelectionInput,
+  ULTRATHINK_IN_BODY_NOTE,
+  useTraitsSelection,
+} from "./TraitsPicker";
+
+type SelectDescriptor = Extract<ProviderOptionDescriptor, { type: "select" }>;
+type BooleanDescriptor = Extract<ProviderOptionDescriptor, { type: "boolean" }>;
+
+/** Codex service tiers and Claude's Fast mode share the footer's speed control. */
+function splitSpeed(
+  provider: TraitsSelectionInput["provider"],
+  selects: ReadonlyArray<SelectDescriptor>,
+  toggles: ReadonlyArray<BooleanDescriptor>,
+) {
+  const speedSelect =
+    provider === "codex"
+      ? (selects.find((descriptor) => descriptor.id === "serviceTier") ?? null)
+      : null;
+  const fastToggle = toggles.find((descriptor) => descriptor.id === "fastMode") ?? null;
+  return {
+    speedSelect,
+    fastToggle,
+    columnSelects: selects.filter((descriptor) => descriptor !== speedSelect),
+    columnToggles: toggles.filter((descriptor) => descriptor !== fastToggle),
+  };
+}
+
+/**
+ * What the model trigger shows after the model name: the effort word (or bars, per the
+ * Appearance setting), a bolt for Fast, and other traits such as a context window.
+ */
+export function describeComposerEffort(
+  traits: TraitsSelectionInput | null,
+  effortDisplay: EffortDisplay,
+  size: ComposerControlSize,
+): { suffix: ReactNode; detail: string | null } {
+  if (!traits) return { suffix: null, detail: null };
+  const visibility = getTraitsSectionVisibility(traits);
+  if (!visibility.hasAnyControls) return { suffix: null, detail: null };
+  const modelSelection =
+    traits.instanceId && traits.model
+      ? { instanceId: traits.instanceId, model: traits.model, options: traits.modelOptions ?? [] }
+      : null;
+  const primary = visibility.primarySelectDescriptor;
+  const display = buildTraitsTriggerDisplay({
+    provider: traits.provider,
+    descriptors: visibility.descriptors,
+    primarySelectDescriptorId: primary?.id ?? null,
+    ultrathinkPromptControlled: visibility.ultrathinkPromptControlled,
+    modelSelection,
+    reportedModelSelection: traits.reportedModelSelection,
+  });
+  const glyph =
+    primary && REASONING_SELECT_DESCRIPTOR_IDS.has(primary.id)
+      ? resolveEffortGlyph(
+          primary,
+          visibility.ultrathinkPromptControlled
+            ? "ultrathink"
+            : getDescriptorStringValue(primary, modelSelection, traits.reportedModelSelection),
+        )
+      : null;
+  // Workflow levels such as Ultracode always show their name; the setting names every level.
+  const word = glyph
+    ? (glyph.special ?? (effortDisplay === "label" ? glyph.label : null))
+    : display.label;
+  return {
+    detail: [display.label, display.speedLabel, ...display.otherLabels].filter(Boolean).join(" · "),
+    suffix: (
+      <span className="-ms-0.5 flex shrink-0 items-center gap-1.5 text-muted-foreground group-hover/model-trigger:text-foreground group-data-pressed/model-trigger:text-foreground group-data-popup-open/model-trigger:text-foreground">
+        {word !== null ? (
+          <span data-composer-control-label>{word}</span>
+        ) : glyph ? (
+          <EffortGlyph count={glyph.count} filled={glyph.filled} size={size} />
+        ) : null}
+        {display.speedLabel === "Fast" || display.speedLabel === "Ultrafast" ? (
+          <FastBolt ultra={display.speedLabel === "Ultrafast"} />
+        ) : null}
+        {display.otherLabels.length > 0 ? (
+          <span
+            // A label, so icon-only footers drop it; compacted rows drop it before the model.
+            data-composer-control-label
+            data-composer-secondary-trait
+            className="max-w-24 truncate text-xs"
+          >
+            {display.otherLabels.join(" · ")}
+          </span>
+        ) : null}
+      </span>
+    ),
+  };
+}
+
+const COLUMN_ROW =
+  "flex h-8 w-full shrink-0 cursor-pointer items-center gap-2 rounded-sm px-2 text-left text-sm text-foreground outline-none hover:bg-foreground/[0.09] focus-visible:bg-foreground/[0.09] disabled:cursor-not-allowed disabled:opacity-64";
+const COLUMN_LABEL = "px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs";
+
+function ColumnRow(props: {
+  label: string;
+  selected: boolean;
+  isDefault?: boolean | undefined;
+  disabled?: boolean;
+  onPick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={props.selected}
+      disabled={props.disabled}
+      data-effort-row
+      // One tab stop per column; Up and Down move between rows.
+      tabIndex={props.selected ? 0 : -1}
+      className={COLUMN_ROW}
+      onClick={props.onPick}
+    >
+      <span className="min-w-0 flex-1 truncate">{props.label}</span>
+      {props.isDefault ? <span className="text-muted-foreground/70 text-xs">Default</span> : null}
+      <CheckIcon aria-hidden="true" className={cn("size-3.5", !props.selected && "invisible")} />
+    </button>
+  );
+}
+
+function moveBetweenRows(event: KeyboardEvent<HTMLElement>) {
+  if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+  const rows = Array.from(
+    event.currentTarget.querySelectorAll<HTMLButtonElement>("[data-effort-row]:not(:disabled)"),
+  );
+  const index = rows.findIndex((row) => row === document.activeElement);
+  const next =
+    rows[Math.min(rows.length - 1, Math.max(0, index + (event.key === "ArrowDown" ? 1 : -1)))];
+  if (!next) return;
+  event.preventDefault();
+  event.stopPropagation();
+  next.focus();
+  next.scrollIntoView({ block: "nearest" });
+}
+
+function EffortLevels(props: { traits: TraitsSelectionInput; onLevelPick: () => void }) {
+  const traits = useTraitsSelection(props.traits);
+  const { columnSelects, columnToggles } = splitSpeed(
+    props.traits.provider,
+    traits.selectDescriptors,
+    traits.booleanDescriptors,
+  );
+  if (traits.modelIsUnavailable) {
+    return (
+      <>
+        {traits.descriptors.map((descriptor) => {
+          const value = traits.currentLabel(descriptor);
+          return value ? (
+            <div key={descriptor.id}>
+              <div className={COLUMN_LABEL}>{descriptor.label}</div>
+              <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">{value}</div>
+            </div>
+          ) : null;
+        })}
+      </>
+    );
+  }
+  if (columnSelects.length === 0 && columnToggles.length === 0) return <NoEffortRow />;
+  return (
+    <>
+      {columnSelects.map((descriptor, index) => {
+        const isPrimary = descriptor.id === traits.primarySelectDescriptor?.id;
+        const locked = isPrimary && traits.ultrathinkInBodyText;
+        const value = traits.selectValue(descriptor);
+        return (
+          <div
+            key={descriptor.id}
+            role="radiogroup"
+            aria-label={descriptor.label}
+            className="flex flex-col gap-0.5"
+          >
+            {index > 0 ? <div className={COLUMN_LABEL}>{descriptor.label}</div> : null}
+            {locked ? (
+              <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
+                {ULTRATHINK_IN_BODY_NOTE}
+              </div>
+            ) : null}
+            {selectableProviderOptionChoices(descriptor).map((option) => (
+              <ColumnRow
+                key={option.id}
+                label={option.label}
+                selected={option.id === value}
+                isDefault={option.isDefault}
+                disabled={locked}
+                onPick={() => {
+                  traits.changeSelect(descriptor, option.id);
+                  // Picking the effort level finishes the job; other options keep the popup open.
+                  if (isPrimary) props.onLevelPick();
+                }}
+              />
+            ))}
+          </div>
+        );
+      })}
+      {columnToggles.map((descriptor) => (
+        <div
+          key={descriptor.id}
+          role="radiogroup"
+          aria-label={descriptor.label}
+          className="flex flex-col gap-0.5"
+        >
+          <div className={COLUMN_LABEL}>{descriptor.label}</div>
+          {([true, false] as const).map((value) => (
+            <ColumnRow
+              key={String(value)}
+              label={value ? "On" : "Off"}
+              selected={(descriptor.currentValue === true) === value}
+              onPick={() => traits.changeBoolean(descriptor.id, value)}
+            />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
+
+function NoEffortRow() {
+  return (
+    <div className="flex h-8 items-center px-2 text-muted-foreground text-sm">No effort levels</div>
+  );
+}
+
+/** The model picker's effort column: the selected model's levels and its other options. */
+export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | null }) {
+  const picker = use(DockedPickerContext);
+  const primary = props.traits
+    ? getTraitsSectionVisibility(props.traits).primarySelectDescriptor
+    : null;
+  return (
+    <>
+      {/* Matches the search row's box, so one rule runs across the top of the popup. */}
+      <div className="shrink-0 px-3 pt-2.5">
+        <div className="flex h-8.25 -translate-y-px items-center gap-2 border-b border-border/70 pb-1.5 text-sm">
+          <span className="text-muted-foreground">{primary?.label ?? "Effort"}</span>
+          <span className="ms-auto min-w-0 truncate text-muted-foreground text-xs">
+            {picker.modelLabel}
+          </span>
+        </div>
+      </div>
+      {/* pt-2.5 puts the first level on the same line as the first model. */}
+      <div
+        className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto overscroll-contain px-2 pt-2.5 pb-1.5"
+        onKeyDown={moveBetweenRows}
+      >
+        {props.traits ? (
+          <EffortLevels traits={props.traits} onLevelPick={picker.close} />
+        ) : (
+          <NoEffortRow />
+        )}
+      </div>
+    </>
+  );
+}
+
+const FOOTER_SEGMENT =
+  "flex h-6 cursor-pointer items-center justify-center gap-1 px-2 text-muted-foreground text-xs outline-none first:rounded-l-md last:rounded-r-md hover:text-foreground data-checked:bg-input/72 data-checked:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+function SpeedSegment(props: {
+  checked: boolean;
+  label: string;
+  description?: string | undefined;
+  onPick: () => void;
+}) {
+  const buttonProps = {
+    type: "button",
+    role: "radio",
+    "aria-checked": props.checked,
+    "data-checked": props.checked || undefined,
+    className: FOOTER_SEGMENT,
+    onClick: props.onPick,
+  } as const;
+  const content = (
+    <>
+      {props.label === "Fast" || props.label === "Ultrafast" ? (
+        <FastBolt ultra={props.label === "Ultrafast"} />
+      ) : null}
+      {props.label}
+    </>
+  );
+  if (!props.description) return <button {...buttonProps}>{content}</button>;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<button {...buttonProps} />}>{content}</TooltipTrigger>
+      <TooltipPopup side="top">{props.description}</TooltipPopup>
+    </Tooltip>
+  );
+}
+
+function SpeedControl(props: { traits: TraitsSelectionInput }) {
+  const traits = useTraitsSelection(props.traits);
+  const { speedSelect, fastToggle } = splitSpeed(
+    props.traits.provider,
+    traits.selectDescriptors,
+    traits.booleanDescriptors,
+  );
+  if (traits.modelIsUnavailable || (!speedSelect && !fastToggle)) return null;
+  return (
+    <div
+      role="radiogroup"
+      aria-label={speedSelect?.label ?? fastToggle?.label}
+      className="flex rounded-lg bg-input/40 p-0.5"
+    >
+      {speedSelect
+        ? selectableProviderOptionChoices(speedSelect).map((option) => (
+            <SpeedSegment
+              key={option.id}
+              checked={option.id === traits.selectValue(speedSelect)}
+              label={option.label}
+              description={option.description}
+              onPick={() => traits.changeSelect(speedSelect, option.id)}
+            />
+          ))
+        : fastToggle
+          ? ([false, true] as const).map((value) => (
+              <SpeedSegment
+                key={String(value)}
+                checked={(fastToggle.currentValue === true) === value}
+                label={value ? "Fast" : "Standard"}
+                onPick={() => traits.changeBoolean(fastToggle.id, value)}
+              />
+            ))
+          : null}
+    </div>
+  );
+}
+
+/** Permissions change rarely, so the footer names the mode and nests the choice in a menu. */
+function PermissionsMenu(props: {
+  runtimeMode: RuntimeMode;
+  options: ReadonlyArray<RuntimeModeOption>;
+  onChange: (mode: RuntimeMode) => void;
+}) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const current = props.options.find((option) => option.mode === props.runtimeMode);
+  if (!current) return null;
+  const CurrentIcon = current.icon;
+  return (
+    <Menu
+      onOpenChangeComplete={(open) => {
+        if (open) focusCheckedPermission(triggerRef.current);
+      }}
+    >
+      <MenuTrigger
+        render={
+          <button
+            ref={triggerRef}
+            type="button"
+            data-composer-permissions-trigger
+            aria-label={`Permissions: ${current.label}`}
+            className="ms-auto flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-muted-foreground text-xs outline-none hover:bg-foreground/[0.09] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-popup-open:bg-foreground/[0.09] data-popup-open:text-foreground"
+          />
+        }
+      >
+        <CurrentIcon aria-hidden="true" className="size-3.5" />
+        {current.label}
+        <ChevronUpIcon aria-hidden="true" className="size-3" />
+      </MenuTrigger>
+      <MenuPopup side="top" align="end" {...composerFloatingLayerProps}>
+        <ComposerPermissionsSection
+          runtimeMode={props.runtimeMode}
+          runtimeModeOptions={props.options}
+          onRuntimeModeChange={props.onChange}
+        />
+      </MenuPopup>
+    </Menu>
+  );
+}
+
+/** The model picker's footer: speed stays one click away, permissions sit one menu deeper. */
+export function ComposerPickerFooter(props: {
+  traits: TraitsSelectionInput | null;
+  runtimeMode: RuntimeMode;
+  runtimeModeOptions: ReadonlyArray<RuntimeModeOption>;
+  onRuntimeModeChange: (mode: RuntimeMode) => void;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 border-t border-border/70 bg-muted/40 px-3 py-2">
+      {props.traits ? <SpeedControl traits={props.traits} /> : null}
+      <PermissionsMenu
+        runtimeMode={props.runtimeMode}
+        options={props.runtimeModeOptions}
+        onChange={props.onRuntimeModeChange}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
index 74ab036f411e1..850256b28904a 100644
--- a/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
+++ b/apps/web/src/components/chat/ComposerPermissionsSection.browser.test.tsx
@@ -16,20 +16,20 @@ import { runtimeModeConfig, runtimeModeOptions } from "./runtimeModeConfig";
 
 const options = runtimeModeOptions.map((mode) => ({ mode, ...runtimeModeConfig[mode] }));
 
-// Mirrors the effort menu: effort radio items first, then the Permissions section.
-function EffortMenu() {
-  const [effort, setEffort] = useState("high");
+// Mirrors the overflow menu: mode radio items first, then the Permissions section.
+function OverflowMenu() {
+  const [interaction, setInteraction] = useState("plan");
   const [mode, setMode] = useState<RuntimeMode>("full-access");
   const composerMenuProps = useComposerMenuProps();
   const triggerRef = useRef<HTMLButtonElement>(null);
   return (
     <>
       <Menu onOpenChangeComplete={(open) => focusRequestedPermission(open, triggerRef.current)}>
-        <MenuTrigger ref={triggerRef}>Effort</MenuTrigger>
+        <MenuTrigger ref={triggerRef}>More</MenuTrigger>
         <MenuPopup {...composerMenuProps}>
-          <MenuRadioGroup value={effort} onValueChange={setEffort}>
-            <MenuRadioItem value="low">Low</MenuRadioItem>
-            <MenuRadioItem value="high">High</MenuRadioItem>
+          <MenuRadioGroup value={interaction} onValueChange={setInteraction}>
+            <MenuRadioItem value="default">Chat</MenuRadioItem>
+            <MenuRadioItem value="plan">Plan</MenuRadioItem>
           </MenuRadioGroup>
           <ComposerPermissionsSection
             runtimeMode={mode}
@@ -43,13 +43,13 @@ function EffortMenu() {
   );
 }
 
-it("reaches Permissions from the effort items with arrow keys, previews, and picks with Enter", async () => {
-  await using screen = await render(<EffortMenu />, { router: false }); // no routes involved
-  const trigger = screen.getByRole("button", { name: "Effort" });
+it("reaches Permissions from the mode items with arrow keys, previews, and picks with Enter", async () => {
+  await using screen = await render(<OverflowMenu />, { router: false }); // no routes involved
+  const trigger = screen.getByRole("button", { name: "More" });
   await userEvent.tab();
   await expect.element(trigger).toHaveFocus();
   await userEvent.keyboard("{ArrowDown}");
-  await expect.element(page.getByRole("menuitemradio", { name: "Low" })).toHaveFocus();
+  await expect.element(page.getByRole("menuitemradio", { name: "Chat" })).toHaveFocus();
 
   await userEvent.keyboard("{ArrowDown}{ArrowDown}");
   const supervised = page.getByRole("menuitemradio", { name: "Supervised" });
@@ -66,7 +66,7 @@ it("reaches Permissions from the effort items with arrow keys, previews, and pic
   await expect.element(page.getByRole("menuitemradio", { name: "Supervised" })).toHaveFocus();
 
   await userEvent.keyboard("{ArrowUp}");
-  await expect.element(page.getByRole("menuitemradio", { name: "High" })).toHaveFocus();
+  await expect.element(page.getByRole("menuitemradio", { name: "Plan" })).toHaveFocus();
 
   await userEvent.keyboard("{ArrowDown}{ArrowDown}{Enter}");
   await expect.element(screen.getByRole("status")).toHaveTextContent("auto-accept-edits");
@@ -77,14 +77,14 @@ it("reaches Permissions from the effort items with arrow keys, previews, and pic
 });
 
 it("marks the current mode as checked and closes on Escape", async () => {
-  await using screen = await render(<EffortMenu />, { router: false }); // no routes involved
+  await using screen = await render(<OverflowMenu />, { router: false }); // no routes involved
   await userEvent.tab();
   await userEvent.keyboard("{ArrowDown}");
   const fullAccess = page.getByRole("menuitemradio", { name: "Full access" });
   await expect.element(fullAccess).toHaveAttribute("aria-checked", "true");
   await userEvent.keyboard("{Escape}");
   await expect.element(fullAccess).not.toBeInTheDocument();
-  await expect.element(screen.getByRole("button", { name: "Effort" })).toHaveFocus();
+  await expect.element(screen.getByRole("button", { name: "More" })).toHaveFocus();
 });
 
 // The real composer menu focus rule (useComposerMenuProps), with a stub composer handle.
@@ -95,19 +95,19 @@ function withComposer(children: ReactNode) {
 }
 
 it("returns focus to the editor after a pick", async () => {
-  const { handle, ui } = withComposer(<EffortMenu />);
+  const { handle, ui } = withComposer(<OverflowMenu />);
   await using screen = await render(ui, { router: false }); // no routes involved
   await userEvent.tab();
   await userEvent.keyboard("{ArrowDown}");
-  await expect.element(page.getByRole("menuitemradio", { name: "Low" })).toHaveFocus();
+  await expect.element(page.getByRole("menuitemradio", { name: "Chat" })).toHaveFocus();
   await userEvent.keyboard("{ArrowDown}{ArrowDown}{Enter}");
   await expect.element(screen.getByRole("status")).toHaveTextContent("approval-required");
   await vi.waitFor(() => expect(handle.focusAtEnd).toHaveBeenCalled());
 });
 
 it("opens on the checked permission when composer.mode marked the trigger", async () => {
-  await using screen = await render(<EffortMenu />, { router: false }); // no routes involved
-  const trigger = screen.getByRole("button", { name: "Effort" });
+  await using screen = await render(<OverflowMenu />, { router: false }); // no routes involved
+  const trigger = screen.getByRole("button", { name: "More" });
   markOpenToPermissions(trigger.element() as HTMLElement);
   await userEvent.click(trigger);
   await expect.element(page.getByRole("menuitemradio", { name: "Full access" })).toHaveFocus();
@@ -124,7 +124,7 @@ function PermissionsChip() {
   return (
     <div data-slot="composer-shell">
       <button type="button" data-composer-shortcut="composer.effort composer.mode">
-        Effort
+        Model
       </button>
       {mode === "full-access" ? null : (
         <ComposerFooterModeControls
@@ -147,5 +147,5 @@ it("returns focus to the editor when picking the default hides the chip", async
   await userEvent.click(screen.getByRole("button", { name: "Permissions: Supervised" }));
   await userEvent.click(page.getByRole("menuitemradio", { name: "Full access" }));
   await vi.waitFor(() => expect(handle.focusAtEnd).toHaveBeenCalled());
-  await expect.element(screen.getByRole("button", { name: "Effort" })).not.toHaveFocus();
+  await expect.element(screen.getByRole("button", { name: "Model" })).not.toHaveFocus();
 });
diff --git a/apps/web/src/components/chat/EffortGlyph.tsx b/apps/web/src/components/chat/EffortGlyph.tsx
index 2e033c6caa8da..39a46d2564901 100644
--- a/apps/web/src/components/chat/EffortGlyph.tsx
+++ b/apps/web/src/components/chat/EffortGlyph.tsx
@@ -1,4 +1,5 @@
 import type { ProviderOptionDescriptor } from "@t3tools/contracts";
+import { ZapIcon } from "lucide-react";
 
 import type { ComposerControlSize } from "./ComposerControl";
 
@@ -84,3 +85,21 @@ export function EffortGlyph(props: { count: number; filled: number; size?: Compo
     </svg>
   );
 }
+
+/** One bolt for Fast. Ultrafast adds an outlined echo behind it, cut away by the surface color. */
+export function FastBolt(props: { ultra: boolean }) {
+  if (!props.ultra) {
+    return (
+      <ZapIcon aria-hidden="true" data-composer-control-icon className="size-3 fill-current" />
+    );
+  }
+  return (
+    <span aria-hidden="true" className="relative h-3 w-3.75 shrink-0">
+      <ZapIcon className="absolute top-0 left-0.75 size-3" />
+      <ZapIcon
+        strokeWidth={4}
+        className="absolute top-0 left-0 size-3 fill-current stroke-(--chat-composer-glass-surface) [paint-order:stroke]"
+      />
+    </span>
+  );
+}
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 1d318443e0891..a8f4d0e520131 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -1,7 +1,7 @@
 import { type ProviderDriverKind, type ProviderInstanceId } from "@t3tools/contracts";
 import { memo } from "react";
 import { CheckIcon, StarIcon } from "lucide-react";
-import { getDisplayModelName, getProviderRowLabel } from "./providerIconUtils";
+import { getDisplayModelName } from "./providerIconUtils";
 import { ComboboxItem } from "../ui/combobox";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
@@ -23,8 +23,11 @@ export const ModelListRow = memo(function ModelListRow(props: {
   acpRegistryAgentId?: string | undefined;
   acpRegistryIconUrl?: string | undefined;
   isFavorite: boolean;
+  /** In Favorites every row is starred, so the star shows only on hover. */
+  favoriteStarOnHover?: boolean;
   isSelected: boolean;
-  showProvider: boolean;
+  /** Marks this instance apart from another of the same provider. */
+  showInstanceBadge: boolean;
   showNewBadge?: boolean;
   unavailable?: boolean;
   jumpLabel?: string | null;
@@ -36,11 +39,11 @@ export const ModelListRow = memo(function ModelListRow(props: {
     name: props.name,
     subProvider: props.subProvider,
   };
-  const providerLabel = getProviderRowLabel(props.providerDisplayName, props.subProvider);
 
   const row = (
     <ComboboxItem
       hideIndicator
+      selectedFill={false}
       index={props.index}
       value={modelPickerModelKey(props.instanceId, props.slug)}
       disabled={Boolean(props.disabledReason)}
@@ -50,40 +53,41 @@ export const ModelListRow = memo(function ModelListRow(props: {
           "data-disabled:pointer-events-auto data-disabled:cursor-not-allowed",
       )}
     >
-      <div className="min-w-0 flex-1 text-left">
-        <div className="flex min-w-0 items-center gap-2">
-          <div className="min-w-0 truncate text-sm font-normal leading-snug">
-            {getDisplayModelName(model)}
-          </div>
-          {props.showNewBadge ? (
-            <span
-              className="shrink-0 rounded border border-update/35 bg-update/15 px-0.5 py-px text-3xs font-bold uppercase leading-none tracking-wide text-update-foreground"
-              aria-label="New model"
-            >
-              New
-            </span>
-          ) : null}
-          {props.unavailable ? (
-            <Badge variant="outline" size="sm">
-              Unavailable
-            </Badge>
-          ) : null}
+      {/* One row shape in every tab: the logo names the provider, so Favorites needs no second line. */}
+      <ProviderInstanceIcon
+        driverKind={props.driverKind}
+        displayName={props.providerDisplayName}
+        accentColor={props.providerAccentColor}
+        acpRegistryAgentId={props.acpRegistryAgentId}
+        acpRegistryIconUrl={props.acpRegistryIconUrl}
+        showBadge={props.showInstanceBadge}
+        className="size-4"
+        iconClassName="size-4"
+        indicatorBackground="var(--popover)"
+        badgeClassName="right-[-0.125rem] bottom-[-0.125rem] h-3 min-w-3 px-0.5 text-5xs"
+      />
+      <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
+        <div className="min-w-0 truncate text-sm font-normal leading-snug">
+          {getDisplayModelName(model)}
         </div>
-        {props.showProvider && (
-          <div className="mt-1 flex items-center gap-1.5">
-            <ProviderInstanceIcon
-              driverKind={props.driverKind}
-              displayName={props.providerDisplayName}
-              acpRegistryAgentId={props.acpRegistryAgentId}
-              acpRegistryIconUrl={props.acpRegistryIconUrl}
-              className="size-3"
-              iconClassName="size-3"
-            />
-            <span className="truncate text-xs font-normal leading-snug text-muted-foreground/70">
-              {providerLabel}
-            </span>
-          </div>
-        )}
+        {props.subProvider ? (
+          <span className="min-w-0 shrink truncate text-xs text-muted-foreground/70">
+            {props.subProvider}
+          </span>
+        ) : null}
+        {props.showNewBadge ? (
+          <span
+            className="shrink-0 rounded border border-update/35 bg-update/15 px-0.5 py-px text-3xs font-bold uppercase leading-none tracking-wide text-update-foreground"
+            aria-label="New model"
+          >
+            New
+          </span>
+        ) : null}
+        {props.unavailable ? (
+          <Badge variant="outline" size="sm">
+            Unavailable
+          </Badge>
+        ) : null}
       </div>
 
       <div className="flex shrink-0 items-center gap-1.5">
@@ -108,9 +112,9 @@ export const ModelListRow = memo(function ModelListRow(props: {
                 <StarIcon
                   className={cn(
                     "size-3.5 sm:size-3",
-                    props.isFavorite
-                      ? "fill-current text-warning"
-                      : "opacity-0 group-hover:opacity-100 group-data-highlighted:opacity-100 in-focus-visible:opacity-100 pointer-coarse:opacity-100",
+                    props.isFavorite && "fill-current text-warning",
+                    (!props.isFavorite || props.favoriteStarOnHover) &&
+                      "opacity-0 group-hover:opacity-100 group-data-highlighted:opacity-100 in-focus-visible:opacity-100 pointer-coarse:opacity-100",
                   )}
                 />
               </Button>
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 0db47deb289f4..fe73f3a945492 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -21,7 +21,7 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
-import { ChevronRightIcon } from "lucide-react";
+import { ArchiveIcon, ChevronRightIcon } from "lucide-react";
 import { ModelListRow } from "./ModelListRow";
 import { ModelPickerSidebar } from "./ModelPickerSidebar";
 import { getProviderStatusMessage, hasProviderSetup } from "./ProviderStatusBanner";
@@ -61,6 +61,7 @@ import { InlineButton } from "../ui/button";
 import {
   isProviderInstancePickerReady,
   isProviderInstancePickerVisible,
+  shouldShowInstanceBadge,
   type ProviderInstanceEntry,
 } from "../../providerInstances";
 import { providerModelKey, sortProviderModelItems } from "../../modelOrdering";
@@ -164,8 +165,7 @@ function adjacentModelPickerProvider(input: {
 const EMPTY_MODEL_JUMP_LABELS = new Map<string, string>();
 const MODEL_LIST_ESTIMATED_ITEM_SIZE = 32;
 // Rendered heights in `--spacing` units. Chrome is the search box and list padding, plus a 1px border.
-const ONE_LINE_ROW_UNITS = 8;
-const TWO_LINE_ROW_UNITS = 12;
+const ROW_UNITS = 8;
 const ROW_SEPARATOR_UNITS = 0.5;
 const LIST_CHROME_UNITS = 15.5;
 
@@ -363,6 +363,10 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   onInstanceModelChange: (instanceId: ProviderInstanceId, model: string) => void;
   /** The owning popup moves focus here when it opens (its `initialFocus`). */
   searchInputRef: RefObject<HTMLInputElement | null>;
+  /** Sits beside an effort column: fills the shared row, and stacks above it on narrow screens. */
+  docked?: boolean;
+  /** Right at the end of the search text moves into the popup's effort column. */
+  onFocusEffort?: () => void;
 }) {
   const {
     searchInputRef,
@@ -580,31 +584,28 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
 
   const isLocked = lockedProvider !== null;
   const isSearching = searchQuery.trim().length > 0;
-  // Inside one provider's tab the provider line repeats the selected rail icon on every row.
-  const rowsMixProviders = isSearching || selectedInstanceId === "favorites";
   // Fit the tallest tab so switching tabs never resizes the popup and moves the rail under the cursor.
   const tallestTabUnits = (() => {
     const unitsByTab = new Map<ProviderInstanceId | "favorites", number>();
-    const addRow = (tab: ProviderInstanceId | "favorites", twoLine: boolean) => {
-      const rowUnits = twoLine ? TWO_LINE_ROW_UNITS : ONE_LINE_ROW_UNITS;
+    const addRow = (tab: ProviderInstanceId | "favorites") => {
       const previous = unitsByTab.get(tab);
       unitsByTab.set(
         tab,
-        previous === undefined ? rowUnits : previous + ROW_SEPARATOR_UNITS + rowUnits,
+        previous === undefined ? ROW_UNITS : previous + ROW_SEPARATOR_UNITS + ROW_UNITS,
       );
     };
     const tabsWithLegacyRow = new Set<ProviderInstanceId>();
     for (const model of flatModels) {
       if (!matchesLockedProvider(model)) continue;
       const isFavorite = favoritesSet.has(providerModelKey(model.instanceId, model.slug));
-      if (isFavorite) addRow("favorites", true);
+      if (isFavorite) addRow("favorites");
       if (model.isLegacy && !isFavorite) {
         tabsWithLegacyRow.add(model.instanceId);
       } else {
-        addRow(model.instanceId, Boolean(model.subProvider));
+        addRow(model.instanceId);
       }
     }
-    for (const instanceId of tabsWithLegacyRow) addRow(instanceId, true);
+    for (const instanceId of tabsWithLegacyRow) addRow(instanceId);
     return Math.max(0, ...unitsByTab.values());
   })();
   const lockedDisabledInstanceIds = (() => {
@@ -765,7 +766,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     keybindings,
     props.terminalOpen,
   );
+  const badgedInstanceIds = new Set(
+    instanceEntries
+      .filter((entry) => shouldShowInstanceBadge(entry, instanceEntries))
+      .map((entry) => entry.instanceId),
+  );
   const modelListExtraData = {
+    badgedInstanceIds,
     favoritesSet,
     modelJumpLabelByKey,
     activeModelKey,
@@ -833,7 +840,12 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       <WindowKeyDownListener onKeyDown={onWindowKeyDown} />
       <div
         ref={pickerContentRef}
-        className="relative flex max-h-86.5 w-screen max-w-90 flex-row overflow-hidden"
+        className={cn(
+          "relative flex w-screen max-w-90 flex-row overflow-hidden",
+          props.docked
+            ? "h-full max-sm:h-56 max-sm:min-h-0! max-sm:w-full max-sm:max-w-none"
+            : "max-h-86.5",
+        )}
         style={
           isSearching
             ? { height: searchHeight }
@@ -951,6 +963,29 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                   onRequestClose?.();
                   return;
                 }
+                if (
+                  props.onFocusEffort &&
+                  e.key === "ArrowRight" &&
+                  !e.altKey &&
+                  !e.ctrlKey &&
+                  !e.metaKey &&
+                  !e.shiftKey &&
+                  e.currentTarget.selectionStart === searchQuery.length
+                ) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  // The column shows the selected model's effort, so a highlighted model is picked
+                  // first; the owning popup then moves focus to that model's levels.
+                  const highlighted = highlightedModelKeyRef.current
+                    ? parseModelPickerModelKey(highlightedModelKeyRef.current)
+                    : null;
+                  const pickedNew =
+                    highlighted !== null &&
+                    highlightedModelKeyRef.current !== activeModelKey &&
+                    handleModelSelect(highlighted.slug, highlighted.instanceId) !== null;
+                  if (!pickedNew) props.onFocusEffort();
+                  return;
+                }
                 if (e.key === "Enter" && highlightedModelKeyRef.current) {
                   (e as typeof e & { preventBaseUIHandler?: () => void }).preventBaseUIHandler?.();
                   e.preventDefault();
@@ -988,10 +1023,11 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                       aria-expanded={legacySection.isExpanded}
                       className="group w-full cursor-pointer"
                     >
-                      <div className="min-w-0 flex-1 text-left">
+                      <ArchiveIcon aria-hidden="true" className="size-4 opacity-70" />
+                      <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
                         <div className="text-sm font-normal leading-snug">Legacy models</div>
-                        <div className="mt-1 text-xs font-normal leading-snug text-muted-foreground">
-                          {legacySection.legacyModels.length} models
+                        <div className="text-xs font-normal leading-snug text-muted-foreground/70">
+                          {legacySection.legacyModels.length}
                         </div>
                       </div>
                       <ChevronRightIcon
@@ -1028,7 +1064,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         ? selectedModelKeySet.has(modelKey)
                         : modelKey === activeModelKey
                     }
-                    showProvider={rowsMixProviders || Boolean(model.subProvider)}
+                    favoriteStarOnHover={selectedInstanceId === "favorites" && !isSearching}
+                    showInstanceBadge={badgedInstanceIds.has(model.instanceId)}
                     showNewBadge={model.badge === "new"}
                     unavailable={model.isUnavailable === true}
                     jumpLabel={modelJumpLabelByKey.get(modelKey) ?? null}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
index 72c9cdf39f23d..4aa1d7b8cc145 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -88,3 +88,80 @@ it("keeps each registry image when adding a model from another ACP agent", async
   await userEvent.keyboard("{Escape}");
   await vi.waitFor(() => expect(imageWidths()).toEqual([11, 17]));
 });
+
+it("keeps a docked picker open after a pick and hands focus to that model's effort", async () => {
+  const instanceId = ProviderInstanceId.make("codex");
+  const entries = deriveProviderInstanceEntries([
+    {
+      instanceId,
+      driver: ProviderDriverKind.make("codex"),
+      enabled: true,
+      installed: true,
+      version: null,
+      status: "ready",
+      auth: { status: "authenticated" },
+      checkedAt: "2026-01-01T00:00:00.000Z",
+      models: [],
+      slashCommands: [],
+      skills: [],
+    },
+  ]);
+  const options = new Map([
+    [
+      instanceId,
+      [
+        { slug: "original", name: "Original model" },
+        { slug: "second", name: "Second model" },
+        { slug: "plain", name: "Plain model" },
+      ],
+    ],
+  ]);
+  // The last level is the selected one; "plain" has no effort to pick.
+  const levels: Record<string, ReadonlyArray<string>> = {
+    original: ["Low", "High"],
+    second: ["Medium"],
+    plain: [],
+  };
+
+  function Picker() {
+    const [model, setModel] = useState("original");
+    return (
+      <ProviderModelPicker
+        environmentId={null}
+        activeInstanceId={instanceId}
+        model={model}
+        lockedProvider={null}
+        instanceEntries={entries}
+        modelOptionsByInstance={options}
+        triggerAriaLabel="Choose model"
+        onInstanceModelChange={(_, selected) => setModel(selected)}
+        effortColumn={(levels[model] ?? []).map((level, index, all) => (
+          <button
+            key={level}
+            type="button"
+            role="radio"
+            aria-checked={index === all.length - 1}
+            data-effort-row
+          >
+            {level}
+          </button>
+        ))}
+      />
+    );
+  }
+
+  await using screen = await render(<Picker />);
+  await screen.getByRole("button", { name: "Choose model" }).click();
+  const search = page.getByPlaceholder("Search models...");
+  await expect.element(search).toHaveFocus();
+  await userEvent.keyboard("{ArrowRight}");
+  await expect.element(page.getByRole("radio", { name: "High" })).toHaveFocus();
+  await userEvent.keyboard("{ArrowLeft}");
+  await expect.element(search).toHaveFocus();
+
+  await page.getByRole("option", { name: /Second model/ }).click();
+  await expect.element(page.getByRole("radio", { name: "Medium" })).toHaveFocus();
+
+  await page.getByRole("option", { name: /Plain model/ }).click();
+  await expect.element(search).not.toBeInTheDocument();
+});
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 1551ac881e73f..8d11e485721ef 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -5,7 +5,7 @@ import {
   type ProviderDriverKind,
   type ResolvedKeybindingsConfig,
 } from "@t3tools/contracts";
-import { memo, useRef, useState } from "react";
+import { createContext, memo, type ReactNode, useRef, useState } from "react";
 import { Badge } from "../ui/badge";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
@@ -16,7 +16,7 @@ import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
 import { ModelEsque, getDisplayModelName, getTriggerDisplayModelName } from "./providerIconUtils";
 import { shouldShowInstanceBadge, type ProviderInstanceEntry } from "../../providerInstances";
 import { ComposerControl, type ComposerControlSize } from "./ComposerControl";
-import { useComposerMenuProps } from "./composerEventScope";
+import { takeOpenTarget, useComposerMenuProps } from "./composerEventScope";
 import { shortcutLabelForCommand } from "../../keybindings";
 
 /** Holds the page still behind the open picker; its lifetime is the popup element's. */
@@ -35,7 +35,10 @@ function lockBackgroundScroll(popup: HTMLElement | null) {
   }
 
   const shouldAllowOverlayScroll = (target: EventTarget | null) => {
-    return target instanceof Element && target.closest("[data-model-picker-content]");
+    return (
+      target instanceof Element &&
+      target.closest("[data-model-picker-content], [data-model-picker-effort]")
+    );
   };
   const preventBackgroundWheel = (event: WheelEvent) => {
     if (shouldAllowOverlayScroll(event.target)) {
@@ -65,6 +68,12 @@ function lockBackgroundScroll(popup: HTMLElement | null) {
   };
 }
 
+/** What a docked effort column needs from its picker: the model it serves, and a way to close. */
+export const DockedPickerContext = createContext<{ modelLabel: string; close: () => void }>({
+  modelLabel: "",
+  close: () => {},
+});
+
 export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
   environmentId: EnvironmentId | null;
   activeInstanceId: ProviderInstanceId;
@@ -91,12 +100,27 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
   onOpenProviderSetup?: (instanceId: ProviderInstanceId) => void;
   getModelDisabledReason?: (instanceId: ProviderInstanceId, model: string) => string | null;
   onInstanceModelChange: (instanceId: ProviderInstanceId, model: string) => void;
+  /** Shown after the model name inside the same trigger, such as the effort level. */
+  triggerSuffix?: ReactNode;
+  /** Names the suffix for the tooltip and screen readers. */
+  triggerDetail?: string | null;
+  /** Composer shortcuts this trigger answers besides the picker's own. */
+  triggerShortcuts?: string;
+  /**
+   * Docks an effort column beside the list and a footer under both. Picking a model then keeps
+   * the popup open and moves focus to the new model's levels.
+   */
+  effortColumn?: ReactNode;
+  footer?: ReactNode;
 }) {
   const composerFloatingLayerProps = useComposerMenuProps();
   const [uncontrolledIsMenuOpen, setUncontrolledIsMenuOpen] = useState(false);
   const isMenuOpen = props.open ?? uncontrolledIsMenuOpen;
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popupRef = useRef<HTMLDivElement | null>(null);
   const size = props.size ?? "sm";
+  const docked = props.effortColumn !== undefined;
 
   const activeEntry =
     props.instanceEntries.find((entry) => entry.instanceId === props.activeInstanceId) ?? null;
@@ -130,10 +154,27 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
     }
   };
 
+  /** Focuses the selected effort level, or the first row; false when the column has none. */
+  const focusEffort = () => {
+    const column = popupRef.current?.querySelector("[data-model-picker-effort]");
+    const row =
+      column?.querySelector<HTMLElement>('[data-effort-row][aria-checked="true"]:not(:disabled)') ??
+      column?.querySelector<HTMLElement>("[data-effort-row]:not(:disabled)");
+    row?.focus({ preventScroll: true });
+    return row != null;
+  };
+
   const handleInstanceModelChange = (instanceId: ProviderInstanceId, model: string) => {
     if (props.disabled) return;
     props.onInstanceModelChange(instanceId, model);
-    setIsMenuOpen(false);
+    if (!docked) {
+      setIsMenuOpen(false);
+      return;
+    }
+    // The column renders the new model's levels on commit; a model with none closes the popup.
+    window.requestAnimationFrame(() => {
+      if (!focusEffort()) setIsMenuOpen(false);
+    });
   };
 
   const shortcutLabel = props.keybindings
@@ -169,9 +210,45 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
   const allModelNames = selectedEntries
     ? selectedEntries.map((selection) => selection.fullLabel).join(", ") || "Choose models"
     : undefined;
-  const triggerTooltipContent = shortcutLabel
-    ? `${props.triggerLabel ?? allModelNames ?? triggerLabel} · ${shortcutLabel}`
-    : (props.triggerLabel ?? allModelNames ?? triggerLabel);
+  const triggerTooltipContent = [
+    props.triggerLabel ?? allModelNames ?? triggerLabel,
+    props.triggerDetail,
+    shortcutLabel,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  const picker = (
+    <ModelPickerContent
+      searchInputRef={searchInputRef}
+      environmentId={props.environmentId}
+      activeInstanceId={activeInstanceId}
+      model={props.model}
+      {...(props.selectedModels !== undefined ? { selectedModels: props.selectedModels } : {})}
+      {...(props.onToggleModel
+        ? {
+            onToggleModel: (instanceId: ProviderInstanceId, model: string) => {
+              if (!props.disabled) props.onToggleModel?.(instanceId, model);
+            },
+          }
+        : {})}
+      lockedProvider={props.lockedProvider}
+      lockedContinuationGroupKey={props.lockedContinuationGroupKey ?? null}
+      instanceEntries={props.instanceEntries}
+      {...(props.keybindings ? { keybindings: props.keybindings } : {})}
+      modelOptionsByInstance={props.modelOptionsByInstance}
+      terminalOpen={props.terminalOpen ?? false}
+      onRequestClose={() => setIsMenuOpen(false)}
+      {...(props.onOpenProviderSetup ? { onOpenProviderSetup: props.onOpenProviderSetup } : {})}
+      getModelDisabledReason={(instanceId, model) =>
+        props.disabled
+          ? "Model picker is disabled"
+          : (props.getModelDisabledReason?.(instanceId, model) ?? null)
+      }
+      onInstanceModelChange={handleInstanceModelChange}
+      {...(docked ? { docked, onFocusEffort: () => void focusEffort() } : {})}
+    />
+  );
 
   return (
     <Popover
@@ -183,15 +260,31 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
         }
         setIsMenuOpen(open);
       }}
+      onOpenChangeComplete={(open) => {
+        const target = takeOpenTarget(triggerRef.current);
+        if (!open || !docked || !target) return;
+        if (target === "effort") {
+          focusEffort();
+          return;
+        }
+        popupRef.current
+          ?.querySelector<HTMLButtonElement>("[data-composer-permissions-trigger]")
+          ?.click();
+      }}
     >
       <PopoverTrigger
         render={
           <ComposerControl
-            aria-label={
-              props.triggerAriaLabel ?? props.triggerLabel ?? allModelNames ?? triggerLabel
-            }
+            ref={triggerRef}
+            aria-label={[
+              props.triggerAriaLabel ?? props.triggerLabel ?? allModelNames ?? triggerLabel,
+              props.triggerDetail,
+            ]
+              .filter(Boolean)
+              .join(", ")}
             size={size}
             data-chat-provider-model-picker="true"
+            data-composer-shortcut={props.triggerShortcuts}
             className={cn(
               "min-w-0 shrink justify-between whitespace-nowrap",
               props.compact
@@ -267,6 +360,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             </TooltipTrigger>
             <TooltipPopup side="top">{triggerTooltipContent}</TooltipPopup>
           </Tooltip>
+          {props.triggerSuffix}
           {selectedModel?.isUnavailable && !selectedEntries && props.triggerLabel === undefined ? (
             <Badge variant="outline" size="sm">
               Unavailable
@@ -276,41 +370,47 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       </PopoverTrigger>
       <PopoverPopup
         {...(props.isComposerOwned ? composerFloatingLayerProps : {})}
-        ref={lockBackgroundScroll}
+        ref={(popup) => {
+          popupRef.current = popup;
+          const unlock = lockBackgroundScroll(popup);
+          return () => {
+            popupRef.current = null;
+            unlock?.();
+          };
+        }}
         initialFocus={searchInputRef}
         align="start"
         className="before:hidden"
         padding="none"
         touchBackdrop
       >
-        <ModelPickerContent
-          searchInputRef={searchInputRef}
-          environmentId={props.environmentId}
-          activeInstanceId={activeInstanceId}
-          model={props.model}
-          {...(props.selectedModels !== undefined ? { selectedModels: props.selectedModels } : {})}
-          {...(props.onToggleModel
-            ? {
-                onToggleModel: (instanceId: ProviderInstanceId, model: string) => {
-                  if (!props.disabled) props.onToggleModel?.(instanceId, model);
-                },
-              }
-            : {})}
-          lockedProvider={props.lockedProvider}
-          lockedContinuationGroupKey={props.lockedContinuationGroupKey ?? null}
-          instanceEntries={props.instanceEntries}
-          {...(props.keybindings ? { keybindings: props.keybindings } : {})}
-          modelOptionsByInstance={props.modelOptionsByInstance}
-          terminalOpen={props.terminalOpen ?? false}
-          onRequestClose={() => setIsMenuOpen(false)}
-          {...(props.onOpenProviderSetup ? { onOpenProviderSetup: props.onOpenProviderSetup } : {})}
-          getModelDisabledReason={(instanceId, model) =>
-            props.disabled
-              ? "Model picker is disabled"
-              : (props.getModelDisabledReason?.(instanceId, model) ?? null)
-          }
-          onInstanceModelChange={handleInstanceModelChange}
-        />
+        {props.effortColumn ? (
+          <div className="flex flex-col">
+            <div className="flex max-h-86.5 max-sm:max-h-none max-sm:flex-col">
+              {picker}
+              <div
+                data-model-picker-effort
+                className="flex min-h-0 w-48 shrink-0 flex-col border-l border-border/70 bg-muted/40 max-sm:max-h-64 max-sm:w-full max-sm:border-t max-sm:border-l-0"
+                onKeyDown={(event) => {
+                  if (event.key !== "ArrowLeft" || event.altKey || event.ctrlKey || event.metaKey)
+                    return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  searchInputRef.current?.focus();
+                }}
+              >
+                <DockedPickerContext
+                  value={{ modelLabel: triggerLabel, close: () => setIsMenuOpen(false) }}
+                >
+                  {props.effortColumn}
+                </DockedPickerContext>
+              </div>
+            </div>
+            {props.footer}
+          </div>
+        ) : (
+          picker
+        )}
         {props.selectedModels === undefined ? (
           <ChatGptSharingControl provider={activeEntry?.snapshot ?? null} />
         ) : null}
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 79a29d293dc49..8c50c5662fc49 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -16,7 +16,6 @@ import {
   type ScopedThreadRef,
   type ServerProviderModel,
 } from "@t3tools/contracts";
-import type { EffortDisplay } from "@t3tools/contracts/settings";
 import {
   buildProviderOptionSelectionsFromDescriptors,
   getProviderOptionCurrentLabel,
@@ -24,8 +23,8 @@ import {
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
 } from "@t3tools/shared/model";
-import { memo, type ReactNode, useRef } from "react";
-import { GaugeIcon, ZapIcon } from "lucide-react";
+import { memo } from "react";
+import { GaugeIcon } from "lucide-react";
 import {
   Menu,
   MenuGroup,
@@ -41,9 +40,7 @@ import { cn } from "~/lib/utils";
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ComposerControl, ComposerControlIcon, type ComposerControlSize } from "./ComposerControl";
-import { focusRequestedPermission, useComposerMenuProps } from "./composerEventScope";
 import { useComposerMenuState } from "./useComposerMenuState";
-import { EffortGlyph, resolveEffortGlyph } from "./EffortGlyph";
 
 type ProviderOptions = ReadonlyArray<ProviderOptionSelection>;
 
@@ -190,12 +187,12 @@ function getSelectedTraits(
   };
 }
 
-function getTraitsSectionVisibility(input: {
+export function getTraitsSectionVisibility(input: {
   provider: ProviderDriverKind;
   models: ReadonlyArray<ServerProviderModel>;
   model: string | null | undefined;
   promptUltrathink?: PromptUltrathink | undefined;
-  modelOptions: ProviderOptions | null | undefined;
+  modelOptions?: ProviderOptions | null | undefined;
   allowPromptInjectedEffort?: boolean;
   planModeEnabled: boolean;
 }) {
@@ -293,19 +290,7 @@ export function getReasoningTraitStep(input: {
   return null;
 }
 
-export function shouldRenderTraitsControls(input: {
-  provider: ProviderDriverKind;
-  models: ReadonlyArray<ServerProviderModel>;
-  model: string | null | undefined;
-  promptUltrathink?: PromptUltrathink | undefined;
-  modelOptions: ProviderOptions | null | undefined;
-  allowPromptInjectedEffort?: boolean;
-  planModeEnabled: boolean;
-}): boolean {
-  return getTraitsSectionVisibility(input).hasAnyControls;
-}
-
-interface TraitsMenuContentProps {
+export interface TraitsMenuContentProps {
   provider: ProviderDriverKind;
   instanceId?: ProviderInstanceId;
   models: ReadonlyArray<ServerProviderModel>;
@@ -318,18 +303,12 @@ interface TraitsMenuContentProps {
   allowPromptInjectedEffort?: boolean;
   planModeEnabled: boolean;
   triggerClassName?: string;
-  isComposerOwned?: boolean;
-  /** Composer chips name the effort level unless the user picked bars. */
-  effortDisplay?: EffortDisplay;
-  /** Extra section shown below the traits in the picker popup (Permissions). */
-  extraMenuContent?: ReactNode;
-  /** This trigger also answers composer.mode (while the permissions chip is hidden). */
-  extraMenuOwnsModeShortcut?: boolean;
-  /** Extra tooltip text naming what else the menu holds. */
-  extraMenuHint?: string;
 }
 
-export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
+export type TraitsSelectionInput = TraitsMenuContentProps & TraitsPersistence;
+
+/** The model's traits with their shown values, and writers that persist a change. */
+export function useTraitsSelection({
   provider,
   instanceId,
   models,
@@ -340,8 +319,9 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
   reportedModelSelection,
   allowPromptInjectedEffort = true,
   planModeEnabled,
+  triggerClassName: _triggerClassName,
   ...persistence
-}: TraitsMenuContentProps & TraitsPersistence) {
+}: TraitsSelectionInput) {
   const modelSelection =
     instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null;
   const setProviderModelOptions = useComposerDraftStore((store) => store.setProviderModelOptions);
@@ -369,32 +349,51 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
     allowPromptInjectedEffort,
     planModeEnabled,
   });
+  return {
+    ...selected,
+    /** The option a select shows, where an Ultrathink prompt owns the primary select. */
+    selectValue: (descriptor: Extract<ProviderOptionDescriptor, { type: "select" }>) =>
+      selected.ultrathinkPromptControlled && descriptor.id === selected.primarySelectDescriptor?.id
+        ? "ultrathink"
+        : (getDescriptorStringValue(descriptor, modelSelection, reportedModelSelection) ?? ""),
+    currentLabel: (descriptor: ProviderOptionDescriptor) =>
+      getProviderOptionCurrentLabel(descriptor, modelSelection, reportedModelSelection),
+    changeSelect: (
+      descriptor: Extract<ProviderOptionDescriptor, { type: "select" }>,
+      value: string,
+    ) => {
+      // Whether a pick applies, and the options it writes, do not depend on the prompt text.
+      const change = getTraitSelectChange(selected, descriptor, "", value);
+      if (!change) return;
+      onPromptEdit?.(
+        (prompt) => getTraitSelectChange(selected, descriptor, prompt, value)?.prompt ?? prompt,
+      );
+      if ("modelOptions" in change) updateModelOptions(change.modelOptions);
+    },
+    changeBoolean: (descriptorId: string, value: boolean) => {
+      updateModelOptions(
+        buildProviderOptionSelectionsFromDescriptors(
+          replaceDescriptorCurrentValue(selected.descriptors, descriptorId, value),
+        ),
+      );
+    },
+  };
+}
+
+export const ULTRATHINK_IN_BODY_NOTE =
+  'Your prompt contains "ultrathink" in the text. Remove it to change this option.';
+
+const TraitsMenuContent = memo(function TraitsMenuContentImpl(props: TraitsSelectionInput) {
+  const traits = useTraitsSelection(props);
   const {
     descriptors,
     selectDescriptors,
     booleanDescriptors,
     primarySelectDescriptor,
-    ultrathinkPromptControlled,
     ultrathinkInBodyText,
     hasAnyControls,
     modelIsUnavailable,
-  } = selected;
-  const updateDescriptors = (nextDescriptors: ReadonlyArray<ProviderOptionDescriptor>) => {
-    updateModelOptions(buildProviderOptionSelectionsFromDescriptors(nextDescriptors));
-  };
-
-  const handleSelectChange = (
-    descriptor: Extract<ProviderOptionDescriptor, { type: "select" }>,
-    value: string,
-  ) => {
-    // Whether a pick applies, and the options it writes, do not depend on the prompt text.
-    const change = getTraitSelectChange(selected, descriptor, "", value);
-    if (!change) return;
-    onPromptEdit?.(
-      (prompt) => getTraitSelectChange(selected, descriptor, prompt, value)?.prompt ?? prompt,
-    );
-    if ("modelOptions" in change) updateModelOptions(change.modelOptions);
-  };
+  } = traits;
 
   if (!hasAnyControls) {
     return null;
@@ -404,11 +403,7 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
     return (
       <>
         {descriptors.map((descriptor, index) => {
-          const value = getProviderOptionCurrentLabel(
-            descriptor,
-            modelSelection,
-            reportedModelSelection,
-          );
+          const value = traits.currentLabel(descriptor);
           if (!value) return null;
           return (
             <div key={descriptor.id}>
@@ -428,200 +423,100 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
 
   return (
     <>
-      {selectDescriptors.map((descriptor, index) => {
-        const selectedValue =
-          ultrathinkPromptControlled && descriptor.id === primarySelectDescriptor?.id
-            ? "ultrathink"
-            : (getDescriptorStringValue(descriptor, modelSelection, reportedModelSelection) ?? "");
-
-        return (
-          <div key={descriptor.id}>
-            {index > 0 ? <MenuDivider /> : null}
-            <MenuGroup>
-              <div className="px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs">
-                {descriptor.label}
-              </div>
-              {ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id ? (
-                <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
-                  Your prompt contains &quot;ultrathink&quot; in the text. Remove it to change this
-                  option.
-                </div>
-              ) : null}
-              <MenuRadioGroup
-                value={selectedValue}
-                onValueChange={(value) => handleSelectChange(descriptor, value)}
-              >
-                {selectableProviderOptionChoices(descriptor).map((option) => (
-                  <MenuRadioItem
-                    key={option.id}
-                    value={option.id}
-                    hideIndicator
-                    closeOnClick
-                    disabled={ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id}
-                  >
-                    <span className="flex w-full min-w-0 flex-col">
-                      <span className="flex min-w-0 items-center gap-1">
-                        <span className="min-w-0 truncate">{option.label}</span>
-                        {option.isDefault ? <DefaultBadge /> : null}
-                      </span>
-                      {option.description ? (
-                        <span className="max-w-56 text-pretty text-muted-foreground/80 text-xs">
-                          {option.description}
-                        </span>
-                      ) : null}
-                    </span>
-                  </MenuRadioItem>
-                ))}
-              </MenuRadioGroup>
-            </MenuGroup>
-          </div>
-        );
-      })}
-      {booleanDescriptors.map((descriptor, index) => {
-        const selectedValue = descriptor.currentValue === true ? "on" : "off";
-
-        return (
-          <div key={descriptor.id}>
-            {index > 0 || selectDescriptors.length > 0 ? <MenuDivider /> : null}
-            <MenuGroup>
-              <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
-                {descriptor.label}
+      {selectDescriptors.map((descriptor, index) => (
+        <div key={descriptor.id}>
+          {index > 0 ? <MenuDivider /> : null}
+          <MenuGroup>
+            <div className="px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs">
+              {descriptor.label}
+            </div>
+            {ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id ? (
+              <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
+                {ULTRATHINK_IN_BODY_NOTE}
               </div>
-              <MenuRadioGroup
-                value={selectedValue}
-                onValueChange={(value) => {
-                  updateDescriptors(
-                    replaceDescriptorCurrentValue(descriptors, descriptor.id, value === "on"),
-                  );
-                }}
-              >
-                {(["on", "off"] as const).map((value) => (
-                  <MenuRadioItem key={value} value={value} hideIndicator closeOnClick>
-                    <span className="flex w-full min-w-0 items-center justify-between gap-3">
-                      <span>{value === "on" ? "On" : "Off"}</span>
+            ) : null}
+            <MenuRadioGroup
+              value={traits.selectValue(descriptor)}
+              onValueChange={(value) => traits.changeSelect(descriptor, value)}
+            >
+              {selectableProviderOptionChoices(descriptor).map((option) => (
+                <MenuRadioItem
+                  key={option.id}
+                  value={option.id}
+                  hideIndicator
+                  closeOnClick
+                  disabled={ultrathinkInBodyText && descriptor.id === primarySelectDescriptor?.id}
+                >
+                  <span className="flex w-full min-w-0 flex-col">
+                    <span className="flex min-w-0 items-center gap-1">
+                      <span className="min-w-0 truncate">{option.label}</span>
+                      {option.isDefault ? <DefaultBadge /> : null}
                     </span>
-                  </MenuRadioItem>
-                ))}
-              </MenuRadioGroup>
-            </MenuGroup>
-          </div>
-        );
-      })}
+                    {option.description ? (
+                      <span className="max-w-56 text-pretty text-muted-foreground/80 text-xs">
+                        {option.description}
+                      </span>
+                    ) : null}
+                  </span>
+                </MenuRadioItem>
+              ))}
+            </MenuRadioGroup>
+          </MenuGroup>
+        </div>
+      ))}
+      {booleanDescriptors.map((descriptor, index) => (
+        <div key={descriptor.id}>
+          {index > 0 || selectDescriptors.length > 0 ? <MenuDivider /> : null}
+          <MenuGroup>
+            <div className="px-2 py-1.5 font-medium text-muted-foreground text-xs">
+              {descriptor.label}
+            </div>
+            <MenuRadioGroup
+              value={descriptor.currentValue === true ? "on" : "off"}
+              onValueChange={(value) => traits.changeBoolean(descriptor.id, value === "on")}
+            >
+              {(["on", "off"] as const).map((value) => (
+                <MenuRadioItem key={value} value={value} hideIndicator closeOnClick>
+                  <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                    <span>{value === "on" ? "On" : "Off"}</span>
+                  </span>
+                </MenuRadioItem>
+              ))}
+            </MenuRadioGroup>
+          </MenuGroup>
+        </div>
+      ))}
     </>
   );
 });
 
-/** One bolt for Fast. Ultrafast adds an outlined echo behind it, cut away by the surface color. */
-function FastBolt(props: { ultra: boolean }) {
-  if (!props.ultra) {
-    return (
-      <ZapIcon aria-hidden="true" data-composer-control-icon className="size-3 fill-current" />
-    );
-  }
-  return (
-    <span aria-hidden="true" className="relative h-3 w-3.75 shrink-0">
-      <ZapIcon className="absolute top-0 left-0.75 size-3" />
-      <ZapIcon
-        strokeWidth={4}
-        className="absolute top-0 left-0 size-3 fill-current stroke-(--chat-composer-glass-surface) [paint-order:stroke]"
-      />
-    </span>
-  );
-}
-
 export const TraitsPicker = memo(function TraitsPicker({
-  provider,
-  instanceId,
-  models,
-  model,
-  promptUltrathink,
-  onPromptEdit,
-  modelOptions,
-  reportedModelSelection,
-  allowPromptInjectedEffort = true,
-  planModeEnabled,
-  triggerClassName,
-  isComposerOwned,
-  effortDisplay = "label",
-  extraMenuContent,
-  extraMenuOwnsModeShortcut,
-  extraMenuHint,
   size = "sm",
   hidden = false,
   disabled = false,
-  ...persistence
-}: TraitsMenuContentProps &
-  TraitsPersistence & {
-    size?: ComposerControlSize;
-    hidden?: boolean;
-    disabled?: boolean;
-  }) {
-  const composerFloatingLayerProps = useComposerMenuProps();
+  ...props
+}: TraitsSelectionInput & {
+  size?: ComposerControlSize;
+  hidden?: boolean;
+  disabled?: boolean;
+}) {
   const [isMenuOpen, setIsMenuOpen] = useComposerMenuState(hidden || disabled);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const { descriptors, primarySelectDescriptor, ultrathinkPromptControlled } =
-    getTraitsSectionVisibility({
-      provider,
-      models,
-      model,
-      promptUltrathink,
-      modelOptions,
-      allowPromptInjectedEffort,
-      planModeEnabled,
-    });
-  if (
-    !shouldRenderTraitsControls({
-      provider,
-      models,
-      model,
-      promptUltrathink,
-      modelOptions,
-      allowPromptInjectedEffort,
-      planModeEnabled,
-    })
-  ) {
+  const traits = useTraitsSelection(props);
+  if (!traits.hasAnyControls) {
     return null;
   }
-
-  const {
-    label: triggerLabel,
-    speedLabel,
-    otherLabels,
-  } = buildTraitsTriggerDisplay({
-    provider,
-    descriptors,
-    primarySelectDescriptorId: primarySelectDescriptor?.id ?? null,
-    ultrathinkPromptControlled,
-    modelSelection: instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null,
-    reportedModelSelection,
+  const { label: triggerLabel } = buildTraitsTriggerDisplay({
+    provider: props.provider,
+    descriptors: traits.descriptors,
+    primarySelectDescriptorId: traits.primarySelectDescriptor?.id ?? null,
+    ultrathinkPromptControlled: traits.ultrathinkPromptControlled,
+    modelSelection:
+      props.instanceId && props.model
+        ? { instanceId: props.instanceId, model: props.model, options: props.modelOptions ?? [] }
+        : null,
+    reportedModelSelection: props.reportedModelSelection,
   });
-  const isCodexStyle = provider === "codex";
-  // In the composer the glyph has no word, so the tooltip and label name the control.
-  const triggerDescription = isComposerOwned
-    ? [`Effort: ${triggerLabel}`, speedLabel, extraMenuHint].filter(Boolean).join(" · ")
-    : triggerLabel;
-  const effortGlyph =
-    isComposerOwned &&
-    primarySelectDescriptor &&
-    REASONING_SELECT_DESCRIPTOR_IDS.has(primarySelectDescriptor.id)
-      ? resolveEffortGlyph(
-          primarySelectDescriptor,
-          ultrathinkPromptControlled
-            ? "ultrathink"
-            : getDescriptorStringValue(
-                primarySelectDescriptor,
-                instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null,
-                reportedModelSelection,
-              ),
-        )
-      : null;
-  // Workflow levels such as Ultracode always show their name; the setting names every level.
-  // Traits the bars cannot show, such as an agent mode, appear as words in the composer.
-  const effortWord = effortGlyph
-    ? (effortGlyph.special ?? (effortDisplay === "label" ? effortGlyph.label : null))
-    : isComposerOwned
-      ? triggerLabel
-      : null;
+  const isCodexStyle = props.provider === "codex";
 
   return (
     <Menu
@@ -629,7 +524,6 @@ export const TraitsPicker = memo(function TraitsPicker({
       onOpenChange={(open) => {
         setIsMenuOpen(open && !disabled);
       }}
-      onOpenChangeComplete={(open) => focusRequestedPermission(open, triggerRef.current)}
     >
       <Tooltip>
         <TooltipTrigger
@@ -637,79 +531,21 @@ export const TraitsPicker = memo(function TraitsPicker({
             <MenuTrigger
               render={
                 <ComposerControl
-                  ref={triggerRef}
                   disabled={disabled}
-                  aria-label={triggerDescription}
-                  data-composer-shortcut={
-                    isComposerOwned
-                      ? extraMenuOwnsModeShortcut
-                        ? "composer.effort composer.mode"
-                        : "composer.effort"
-                      : undefined
-                  }
+                  aria-label={triggerLabel}
                   size={size}
                   className={cn(
                     isCodexStyle
                       ? "min-w-0 max-w-40 shrink justify-start overflow-hidden whitespace-nowrap sm:max-w-48"
                       : "shrink-0 whitespace-nowrap",
-                    triggerClassName,
-                    // Effort reads on from the model name, "Opus 5.5 High", at about the space
-                    // inside the name: this cancels the model chip's end padding and the row gap.
-                    isComposerOwned && (effortWord !== null ? "-ms-1 ps-0" : "-ms-1 ps-0.5"),
-                    // The word is muted next to the model name and brightens like it on hover.
-                    effortWord !== null &&
-                      "text-muted-foreground hover:text-foreground data-pressed:text-foreground data-popup-open:text-foreground",
+                    props.triggerClassName,
                   )}
                 />
               }
             />
           }
         >
-          {effortGlyph ? (
-            <span className="flex items-center gap-1.5">
-              {effortWord === null ? (
-                <EffortGlyph count={effortGlyph.count} filled={effortGlyph.filled} size={size} />
-              ) : null}
-              {effortWord !== null ? (
-                <>
-                  <span data-composer-control-label>{effortWord}</span>
-                  {/* Icon-only footers hide labels and reveal this instead. */}
-                  <GaugeIcon
-                    aria-hidden="true"
-                    data-composer-control-compact-icon
-                    className="invisible absolute size-3.5"
-                  />
-                </>
-              ) : (
-                <span data-composer-control-label className="sr-only">
-                  {triggerLabel}
-                </span>
-              )}
-              {speedLabel === "Fast" || speedLabel === "Ultrafast" ? (
-                <FastBolt ultra={speedLabel === "Ultrafast"} />
-              ) : null}
-              {otherLabels.length > 0 ? (
-                <span
-                  aria-hidden="true"
-                  // A label, so icon-only footers drop it; compacted rows drop it before the model.
-                  data-composer-control-label
-                  data-composer-secondary-trait
-                  className="max-w-24 truncate text-xs"
-                >
-                  {otherLabels.join(" · ")}
-                </span>
-              ) : null}
-            </span>
-          ) : effortWord !== null ? (
-            <>
-              <span data-composer-control-label>{effortWord}</span>
-              <GaugeIcon
-                aria-hidden="true"
-                data-composer-control-compact-icon
-                className="invisible absolute size-3.5"
-              />
-            </>
-          ) : isCodexStyle ? (
+          {isCodexStyle ? (
             <span
               className={cn(
                 "flex min-w-0 w-full items-center",
@@ -728,28 +564,10 @@ export const TraitsPicker = memo(function TraitsPicker({
             </>
           )}
         </TooltipTrigger>
-        <TooltipPopup side="top">{triggerDescription}</TooltipPopup>
+        <TooltipPopup side="top">{triggerLabel}</TooltipPopup>
       </Tooltip>
-      <MenuPopup align="start" {...(isComposerOwned ? composerFloatingLayerProps : {})}>
-        <TraitsMenuContent
-          provider={provider}
-          {...(instanceId ? { instanceId } : {})}
-          models={models}
-          model={model}
-          promptUltrathink={promptUltrathink}
-          {...(onPromptEdit ? { onPromptEdit } : {})}
-          modelOptions={modelOptions}
-          reportedModelSelection={reportedModelSelection}
-          allowPromptInjectedEffort={allowPromptInjectedEffort}
-          planModeEnabled={planModeEnabled}
-          {...persistence}
-        />
-        {extraMenuContent ? (
-          <>
-            <MenuDivider />
-            {extraMenuContent}
-          </>
-        ) : null}
+      <MenuPopup align="start">
+        <TraitsMenuContent {...props} />
       </MenuPopup>
     </Menu>
   );
diff --git a/apps/web/src/components/chat/composerControlsOwnership.test.ts b/apps/web/src/components/chat/composerControlsOwnership.test.ts
index 92ce7bdbb498b..ad6ca38bf9af3 100644
--- a/apps/web/src/components/chat/composerControlsOwnership.test.ts
+++ b/apps/web/src/components/chat/composerControlsOwnership.test.ts
@@ -4,20 +4,19 @@ import { resolveComposerControlsOwnership } from "./composerControlsOwnership";
 
 const base = {
   matchesDefault: true,
-  hasTraits: true,
   planModeUiEnabled: false,
   collapsed: false,
   measuredHiddenBlockCount: 0,
 };
 
 describe("resolveComposerControlsOwnership", () => {
-  it("hides the chip at the default and lets the effort menu answer composer.mode", () => {
+  it("hides the chip at the default and lets the model picker answer composer.mode", () => {
     const result = resolveComposerControlsOwnership(base);
     expect(result).toMatchObject({
       accessDisplay: "hidden",
       showModeBlock: false,
       hiddenBlockIds: [],
-      effortOwnsModeShortcut: true,
+      pickerOwnsModeShortcut: true,
     });
   });
 
@@ -26,23 +25,22 @@ describe("resolveComposerControlsOwnership", () => {
     expect(result).toMatchObject({
       accessDisplay: "label",
       showModeBlock: true,
-      effortOwnsModeShortcut: false,
+      pickerOwnsModeShortcut: false,
     });
   });
 
-  it("never leaves an empty overflow menu: the effort chip overflows with the chip", () => {
+  it("moves an overflowed chip's Permissions into the overflow menu", () => {
     const result = resolveComposerControlsOwnership({
       ...base,
       matchesDefault: false,
       measuredHiddenBlockCount: 1,
     });
-    expect(result.hiddenBlockIds).toEqual(["traits", "mode"]);
+    expect(result.hiddenBlockIds).toEqual(["mode"]);
     expect(result.overflowShowsPermissions).toBe(true);
-    // One composer.mode target: the overflow menu, not the overflowed effort chip.
-    expect(result.effortOwnsModeShortcut).toBe(false);
+    expect(result.pickerOwnsModeShortcut).toBe(false);
   });
 
-  it("keeps the Plan toggle block at the default and overflows it before the effort chip", () => {
+  it("keeps the Plan toggle block at the default and leaves Permissions with the picker", () => {
     const result = resolveComposerControlsOwnership({
       ...base,
       planModeUiEnabled: true,
@@ -51,32 +49,7 @@ describe("resolveComposerControlsOwnership", () => {
     expect(result.showModeBlock).toBe(true);
     expect(result.hiddenBlockIds).toEqual(["mode"]);
     expect(result.overflowShowsPermissions).toBe(false);
-    expect(result.effortOwnsModeShortcut).toBe(true);
-  });
-
-  it("overflows only the chip when the Plan toggle gives the overflow menu content", () => {
-    const result = resolveComposerControlsOwnership({
-      ...base,
-      matchesDefault: false,
-      planModeUiEnabled: true,
-      measuredHiddenBlockCount: 1,
-    });
-    expect(result.hiddenBlockIds).toEqual(["mode"]);
-    // Permissions stay in the visible effort menu, which now answers composer.mode.
-    expect(result.overflowShowsPermissions).toBe(false);
-    expect(result.effortOwnsModeShortcut).toBe(true);
-  });
-
-  it("keeps a permissions icon for models without traits, even at the default", () => {
-    const result = resolveComposerControlsOwnership({ ...base, hasTraits: false });
-    expect(result.accessDisplay).toBe("icon");
-    const overflowed = resolveComposerControlsOwnership({
-      ...base,
-      hasTraits: false,
-      measuredHiddenBlockCount: 1,
-    });
-    expect(overflowed.hiddenBlockIds).toEqual(["mode"]);
-    expect(overflowed.overflowShowsPermissions).toBe(true);
+    expect(result.pickerOwnsModeShortcut).toBe(true);
   });
 
   it("shows the non-default chip as an icon in the compacted row", () => {
diff --git a/apps/web/src/components/chat/composerControlsOwnership.ts b/apps/web/src/components/chat/composerControlsOwnership.ts
index 5c1996c04bee4..b69f540203479 100644
--- a/apps/web/src/components/chat/composerControlsOwnership.ts
+++ b/apps/web/src/components/chat/composerControlsOwnership.ts
@@ -1,63 +1,32 @@
 /**
- * Where the permissions control lives, which blocks overflow, and which menu answers the
- * composer.mode shortcut. Blocks are ordered [traits, mode]; the last block overflows first.
- * The rule: Permissions have exactly one visible home and composer.mode exactly one target.
+ * Where the permissions chip shows, whether the mode block overflows, and which control answers
+ * the composer.mode shortcut. The model picker's footer always holds Permissions, so the chip
+ * only shows while the mode differs from the default. The rule: composer.mode has one target.
  */
 export function resolveComposerControlsOwnership(input: {
   /** Permissions hide while the mode is the default, or while the new-thread strip names it. */
   readonly matchesDefault: boolean;
-  /** The model has an effort (traits) menu, which then always holds Permissions. */
-  readonly hasTraits: boolean;
   readonly planModeUiEnabled: boolean;
   readonly collapsed: boolean;
   /** How many trailing blocks the width measurement moved into the overflow menu. */
   readonly measuredHiddenBlockCount: number;
 }) {
-  const accessDisplay = !input.matchesDefault
-    ? input.collapsed
+  const accessDisplay = input.matchesDefault
+    ? ("hidden" as const)
+    : input.collapsed
       ? ("icon" as const)
-      : ("label" as const)
-    : // Without traits there is no effort menu to hold Permissions, so keep an icon.
-      input.hasTraits
-      ? ("hidden" as const)
-      : ("icon" as const);
-  const showModeBlock = !(accessDisplay === "hidden" && !input.planModeUiEnabled);
-  const blockIds = [
-    ...(input.hasTraits ? ["traits" as const] : []),
-    ...(showModeBlock ? ["mode" as const] : []),
-  ];
-  const hiddenFor = (count: number) => blockIds.slice(blockIds.length - count);
-  const overflowShowsPermissionsFor = (hidden: ReadonlyArray<string>) =>
-    hidden.includes(input.hasTraits ? "traits" : "mode");
-  const overflowHasContent = (hidden: ReadonlyArray<string>) =>
-    hidden.includes("traits") ||
-    (input.planModeUiEnabled && hidden.includes("mode")) ||
-    overflowShowsPermissionsFor(hidden);
-
-  let hiddenBlockCount = Math.min(input.measuredHiddenBlockCount, blockIds.length);
-  // An overflow menu with nothing in it must not exist: overflow one more block instead.
-  while (
-    hiddenBlockCount > 0 &&
-    hiddenBlockCount < blockIds.length &&
-    !overflowHasContent(hiddenFor(hiddenBlockCount))
-  ) {
-    hiddenBlockCount += 1;
-  }
-  const hiddenBlockIds = hiddenFor(hiddenBlockCount);
-  const modeHidden = hiddenBlockIds.includes("mode");
-  const traitsHidden = hiddenBlockIds.includes("traits");
+      : ("label" as const);
+  const showModeBlock = accessDisplay !== "hidden" || input.planModeUiEnabled;
+  const modeHidden = showModeBlock && input.measuredHiddenBlockCount > 0;
+  const hiddenBlockIds = modeHidden ? (["mode"] as const) : ([] as const);
   return {
     accessDisplay,
     showModeBlock,
-    hiddenBlockCount,
+    hiddenBlockCount: hiddenBlockIds.length,
     hiddenBlockIds,
-    traitsHidden,
-    modeHidden,
-    /**
-     * The effort chip answers composer.mode while the chip is hidden or overflowed, until the
-     * effort chip overflows too; then the overflow menu (which holds Permissions) answers it.
-     */
-    effortOwnsModeShortcut: (input.matchesDefault || modeHidden) && !traitsHidden,
-    overflowShowsPermissions: overflowShowsPermissionsFor(hiddenBlockIds),
+    /** An overflowed chip takes Permissions into the overflow menu, which then answers composer.mode. */
+    overflowShowsPermissions: modeHidden && accessDisplay !== "hidden",
+    /** With no chip, the model picker answers composer.mode and opens its Permissions menu. */
+    pickerOwnsModeShortcut: accessDisplay === "hidden",
   };
 }
diff --git a/apps/web/src/components/chat/composerEventScope.ts b/apps/web/src/components/chat/composerEventScope.ts
index 8583bc84f084e..a0271b4a8257d 100644
--- a/apps/web/src/components/chat/composerEventScope.ts
+++ b/apps/web/src/components/chat/composerEventScope.ts
@@ -59,10 +59,35 @@ export function markOpenToPermissions(trigger: HTMLElement): void {
 export function focusRequestedPermission(open: boolean, trigger: HTMLElement | null): void {
   if (!trigger?.dataset.openToPermissions) return;
   delete trigger.dataset.openToPermissions;
-  if (!open) return;
-  const popupId = trigger.getAttribute("aria-controls");
+  if (open) focusCheckedPermission(trigger);
+}
+
+/** Focuses the checked permission in the menu this trigger opened. */
+export function focusCheckedPermission(trigger: HTMLElement | null): void {
+  const popupId = trigger?.getAttribute("aria-controls");
   const popup = popupId ? document.getElementById(popupId) : null;
   popup
     ?.querySelector<HTMLElement>("[data-composer-permissions] [aria-checked='true']")
     ?.focus({ preventScroll: true });
 }
+
+/**
+ * composer.effort marks the model picker trigger it opens; the picker then moves focus to the
+ * selected effort level once its popup is open.
+ */
+export function markOpenToEffort(trigger: HTMLElement): void {
+  trigger.dataset.openToEffort = "true";
+}
+
+/** Reads and clears an open-to mark: effort from composer.effort, permissions from composer.mode. */
+export function takeOpenTarget(trigger: HTMLElement | null): "effort" | "permissions" | null {
+  if (trigger?.dataset.openToEffort) {
+    delete trigger.dataset.openToEffort;
+    return "effort";
+  }
+  if (trigger?.dataset.openToPermissions) {
+    delete trigger.dataset.openToPermissions;
+    return "permissions";
+  }
+  return null;
+}
diff --git a/apps/web/src/components/chat/composerProviderState.tsx b/apps/web/src/components/chat/composerProviderState.tsx
index b2ba639230eb4..0e52e08a68aa2 100644
--- a/apps/web/src/components/chat/composerProviderState.tsx
+++ b/apps/web/src/components/chat/composerProviderState.tsx
@@ -7,7 +7,6 @@ import {
   type ScopedThreadRef,
   type ServerProviderModel,
 } from "@t3tools/contracts";
-import type { EffortDisplay } from "@t3tools/contracts/settings";
 import {
   buildExplicitProviderOptionSelectionsFromDescriptors,
   getProviderOptionCurrentValue,
@@ -15,17 +14,13 @@ import {
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
 } from "@t3tools/shared/model";
-import type { ReactNode } from "react";
 
 import type { DraftId } from "../../composerDraftStore";
 import { getProviderModelCapabilities } from "../../providerModels";
-import type { ComposerControlSize } from "./ComposerControl";
 import {
   getReasoningTraitStep,
-  shouldRenderTraitsControls,
-  TraitsMenuContent,
-  TraitsPicker,
   type PromptUltrathink,
+  type TraitsSelectionInput,
 } from "./TraitsPicker";
 
 type ComposerProviderStateInput = {
@@ -48,11 +43,11 @@ type ComposerProviderState = {
   modelPickerIconClassName?: string;
 };
 
-type TraitsRenderInput = {
+type ComposerTraitsTarget = {
   provider: ProviderDriverKind;
-  instanceId?: ProviderInstanceId;
-  threadRef?: ScopedThreadRef;
-  draftId?: DraftId;
+  instanceId: ProviderInstanceId;
+  threadRef?: ScopedThreadRef | undefined;
+  draftId?: DraftId | undefined;
   model: string;
   models: ReadonlyArray<ServerProviderModel>;
   modelOptions: ReadonlyArray<ProviderOptionSelection> | undefined;
@@ -60,14 +55,6 @@ type TraitsRenderInput = {
   promptUltrathink: PromptUltrathink;
   onPromptEdit: (edit: (prompt: string) => string) => void;
   planModeEnabled: boolean;
-  size?: ComposerControlSize;
-  hidden?: boolean;
-  triggerClassName?: string;
-  isComposerOwned?: boolean;
-  effortDisplay?: EffortDisplay;
-  extraMenuContent?: ReactNode;
-  extraMenuOwnsModeShortcut?: boolean;
-  extraMenuHint?: string;
 };
 
 export function getComposerPromptInjectionState(prompt: string): ComposerPromptInjectionState {
@@ -217,81 +204,22 @@ export function getComposerReasoningStep(input: {
   };
 }
 
-function renderTraitsControl(
-  Component: typeof TraitsMenuContent | typeof TraitsPicker,
-  input: TraitsRenderInput,
-): ReactNode {
-  const {
-    provider,
-    instanceId,
-    threadRef,
-    draftId,
-    model,
-    models,
-    modelOptions,
-    reportedModelSelection,
-    promptUltrathink,
-    onPromptEdit,
-    planModeEnabled,
-    size,
-    hidden,
-    triggerClassName,
-    isComposerOwned,
-    effortDisplay,
-    extraMenuContent,
-    extraMenuOwnsModeShortcut,
-    extraMenuHint,
-  } = input;
-  const hasTarget = threadRef !== undefined || draftId !== undefined;
-  const { selections: resolvedModelOptions } = resolveComposerOptionSelections(
-    models,
-    model,
-    provider,
-    modelOptions,
-    planModeEnabled,
-  );
-  if (
-    !hasTarget ||
-    !shouldRenderTraitsControls({
-      provider,
-      models,
-      model,
-      modelOptions: resolvedModelOptions,
-      promptUltrathink,
-      planModeEnabled,
-    })
-  ) {
-    return null;
-  }
-  return (
-    <Component
-      provider={provider}
-      {...(instanceId ? { instanceId } : {})}
-      models={models}
-      {...(threadRef ? { threadRef } : {})}
-      {...(draftId ? { draftId } : {})}
-      model={model}
-      modelOptions={resolvedModelOptions}
-      reportedModelSelection={reportedModelSelection}
-      promptUltrathink={promptUltrathink}
-      onPromptEdit={onPromptEdit}
-      planModeEnabled={planModeEnabled}
-      {...(size !== undefined ? { size } : {})}
-      {...(hidden !== undefined ? { hidden } : {})}
-      {...(triggerClassName !== undefined ? { triggerClassName } : {})}
-      {...(isComposerOwned ? { isComposerOwned } : {})}
-      {...(effortDisplay ? { effortDisplay } : {})}
-      {...(extraMenuContent ? { extraMenuContent } : {})}
-      {...(extraMenuOwnsModeShortcut ? { extraMenuOwnsModeShortcut } : {})}
-      {...(extraMenuHint ? { extraMenuHint } : {})}
-    />
+/**
+ * The composer's traits input with the model's implicit defaults applied, so a pick writes what
+ * the composer would send. Null without a draft or thread to persist to.
+ */
+export function resolveComposerTraitsInput(
+  input: ComposerTraitsTarget,
+): TraitsSelectionInput | null {
+  const { threadRef, draftId, ...rest } = input;
+  const { selections } = resolveComposerOptionSelections(
+    input.models,
+    input.model,
+    input.provider,
+    input.modelOptions,
+    input.planModeEnabled,
   );
-}
-
-export function renderProviderTraitsMenuContent(input: TraitsRenderInput): ReactNode {
-  return renderTraitsControl(TraitsMenuContent, input);
-}
-
-export function renderProviderTraitsPicker(input: TraitsRenderInput): ReactNode {
-  return renderTraitsControl(TraitsPicker, input);
+  const persistence = threadRef ? { threadRef } : draftId ? { draftId } : null;
+  if (!persistence) return null;
+  return { ...rest, ...persistence, modelOptions: selections };
 }
diff --git a/apps/web/src/components/chat/providerIconUtils.ts b/apps/web/src/components/chat/providerIconUtils.ts
index 3640faefa5c33..565dc25c05f1d 100644
--- a/apps/web/src/components/chat/providerIconUtils.ts
+++ b/apps/web/src/components/chat/providerIconUtils.ts
@@ -35,21 +35,6 @@ export function getDisplayModelName(
   return stripLeadingQualifier(name, model.subProvider);
 }
 
-export function getProviderRowLabel(
-  providerDisplayName: string,
-  subProvider: string | undefined,
-): string {
-  const provider = providerDisplayName.trim();
-  const sub = subProvider?.trim();
-  if (!sub) {
-    return providerDisplayName;
-  }
-  if (provider && new RegExp(`^${escapeRegExp(provider)}\\s+\\S`, "i").test(sub)) {
-    return sub;
-  }
-  return `${providerDisplayName} · ${sub}`;
-}
-
 export function getTriggerDisplayModelName(
   model: ModelEsque,
   driverKind: ProviderDriverKind | null | undefined,
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index 21f8136811868..a1db1108fa17a 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -185,14 +185,18 @@ function ComboboxItem({
   className,
   children,
   hideIndicator: _hideIndicator = false,
+  selectedFill = true,
   ...props
 }: ComboboxPrimitive.Item.Props & {
   hideIndicator?: boolean;
+  /** Off for rows that mark selection themselves, so a fill only means hover or highlight. */
+  selectedFill?: boolean;
 }) {
   return (
     <ComboboxPrimitive.Item
       className={cn(
-        "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base outline-none not-data-disabled:hover:bg-foreground/[0.09] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-selected:bg-foreground/[0.06] data-selected:text-foreground data-highlighted:bg-foreground/[0.09] data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-foreground/[0.09] [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "flex min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center rounded-sm px-2 py-1 text-base outline-none not-data-disabled:hover:bg-foreground/[0.09] data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-selected:text-foreground data-highlighted:bg-foreground/[0.09] data-highlighted:text-accent-foreground [&[data-highlighted][data-selected]]:bg-foreground/[0.09] [&[data-highlighted][data-selected]]:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        selectedFill && "data-selected:bg-foreground/[0.06]",
         className,
       )}
       data-slot="combobox-item"
diff --git a/docs/user/keybindings.md b/docs/user/keybindings.md
index ff0df9bf17646..dd256211a8516 100644
--- a/docs/user/keybindings.md
+++ b/docs/user/keybindings.md
@@ -37,7 +37,8 @@ lowest, and decrease wraps from the lowest level to the highest.
 
 In the model picker, press Left in an empty search field or Shift+Tab to reach
 the provider list. Use Up/Down to move and Enter to choose. Right returns to
-model search. `mod+shift+up` and `mod+shift+down` switch providers directly and clear the
+model search. Right at the end of the search moves to the highlighted model's effort
+levels, and Left comes back. Choosing a model keeps the picker open on its effort. `mod+shift+up` and `mod+shift+down` switch providers directly and clear the
 search. These provider shortcuts can also be changed in Settings.
 
 These shortcuts run inside the focused web or desktop client. `mod` uses Command
diff --git a/docs/user/permission-modes.md b/docs/user/permission-modes.md
index d7391de5b2249..a344d98f64516 100644
--- a/docs/user/permission-modes.md
+++ b/docs/user/permission-modes.md
@@ -2,8 +2,8 @@
 
 Permission modes control when an agent needs your approval to act. Choose a mode in the message
 composer; it applies to that thread. A new thread names its mode under the composer. In a thread
-on your default mode, open **Permissions** from the effort menu or press `mod+shift+a`. A thread on
-another mode, or a model without an effort menu, shows the mode next to the model.
+on your default mode, open the model picker and choose **Permissions** at its bottom, or press
+`mod+shift+a`. A thread on another mode shows the mode next to the model.
 
 Set the default for new threads in **Settings → Threads → New threads → Permissions**.
 Projects can override the environment default. New threads use this setting rather than the
diff --git a/docs/user/providers-acp.md b/docs/user/providers-acp.md
index cf7872d8c96c2..120df9c6141f6 100644
--- a/docs/user/providers-acp.md
+++ b/docs/user/providers-acp.md
@@ -82,7 +82,7 @@ The model picker lists the models the agent reports. If the agent reports none,
 your own model IDs under **Custom models** in the instance settings.
 
 Other settings the agent offers, such as reasoning effort or approval mode, appear in the
-composer's model options menu like they do for built-in providers. Agents with their own plan and
+composer's model picker, beside the model list, like they do for built-in providers. Agents with their own plan and
 build modes follow T3 Code's Plan and Build toggle. Models and options that change while an agent
 is running update the picker without waiting for another provider probe.
 
diff --git a/docs/user/providers-antigravity.md b/docs/user/providers-antigravity.md
index 268a32ec8dbe8..b951695ba105e 100644
--- a/docs/user/providers-antigravity.md
+++ b/docs/user/providers-antigravity.md
@@ -69,7 +69,7 @@ Leave the field blank to use the managed runtime, or a compatible executable on
 ## Models and threads
 
 The model list comes from your Antigravity account, including Claude and GPT models
-when your plan has them. Pick a thinking level in the composer's effort menu; it
+when your plan has them. Pick a thinking level beside the model list in the model picker; it
 shows only the levels the selected model supports. A resumed thread keeps its
 selected model. If access to that model ends, select another available model
 before continuing.

From 48009f9fb4fa2138a1ceb507d13b0408337431cd Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:31:16 -0700
Subject: [PATCH 2/6] fix(web): address review of the combined model and effort
 control

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/chat/ComposerModelEffort.tsx   | 154 ++++++++++++------
 apps/web/src/components/chat/ModelListRow.tsx |   2 +
 .../chat/ProviderModelPicker.browser.test.tsx |   1 +
 .../components/chat/ProviderModelPicker.tsx   |  83 ++++++----
 4 files changed, 154 insertions(+), 86 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index 7ecd1a0e95295..cb0357b8db379 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -46,6 +46,29 @@ function splitSpeed(
   };
 }
 
+type ColumnControl =
+  | { kind: "select"; descriptor: SelectDescriptor }
+  | { kind: "boolean"; descriptor: BooleanDescriptor };
+
+/**
+ * The column lists the model's reasoning control first, under the header that names it, then
+ * its other options. Picking a level of that control finishes the job and closes the popup.
+ */
+function columnControls(
+  provider: TraitsSelectionInput["provider"],
+  selects: ReadonlyArray<SelectDescriptor>,
+  toggles: ReadonlyArray<BooleanDescriptor>,
+) {
+  const { columnSelects, columnToggles } = splitSpeed(provider, selects, toggles);
+  const controls: ReadonlyArray<ColumnControl> = [
+    ...columnSelects.map((descriptor) => ({ kind: "select" as const, descriptor })),
+    ...columnToggles.map((descriptor) => ({ kind: "boolean" as const, descriptor })),
+  ];
+  const effort =
+    controls.find((control) => REASONING_SELECT_DESCRIPTOR_IDS.has(control.descriptor.id)) ?? null;
+  return { effort, others: controls.filter((control) => control !== effort) };
+}
+
 /**
  * What the model trigger shows after the model name: the effort word (or bars, per the
  * Appearance setting), a bolt for Fast, and other traits such as a context window.
@@ -80,12 +103,13 @@ export function describeComposerEffort(
             : getDescriptorStringValue(primary, modelSelection, traits.reportedModelSelection),
         )
       : null;
+  // Without a reasoning select the whole label is the word; it already names speed and the rest.
   // Workflow levels such as Ultracode always show their name; the setting names every level.
   const word = glyph
     ? (glyph.special ?? (effortDisplay === "label" ? glyph.label : null))
     : display.label;
   return {
-    detail: [display.label, display.speedLabel, ...display.otherLabels].filter(Boolean).join(" · "),
+    detail: display.label,
     suffix: (
       <span className="-ms-0.5 flex shrink-0 items-center gap-1.5 text-muted-foreground group-hover/model-trigger:text-foreground group-data-pressed/model-trigger:text-foreground group-data-popup-open/model-trigger:text-foreground">
         {word !== null ? (
@@ -93,10 +117,10 @@ export function describeComposerEffort(
         ) : glyph ? (
           <EffortGlyph count={glyph.count} filled={glyph.filled} size={size} />
         ) : null}
-        {display.speedLabel === "Fast" || display.speedLabel === "Ultrafast" ? (
+        {glyph && (display.speedLabel === "Fast" || display.speedLabel === "Ultrafast") ? (
           <FastBolt ultra={display.speedLabel === "Ultrafast"} />
         ) : null}
-        {display.otherLabels.length > 0 ? (
+        {glyph && display.otherLabels.length > 0 ? (
           <span
             // A label, so icon-only footers drop it; compacted rows drop it before the model.
             data-composer-control-label
@@ -120,6 +144,8 @@ function ColumnRow(props: {
   selected: boolean;
   isDefault?: boolean | undefined;
   disabled?: boolean;
+  /** A level of the reasoning control, where focus lands after a model pick. */
+  level: boolean;
   onPick: () => void;
 }) {
   return (
@@ -129,8 +155,9 @@ function ColumnRow(props: {
       aria-checked={props.selected}
       disabled={props.disabled}
       data-effort-row
-      // One tab stop per column; Up and Down move between rows.
-      tabIndex={props.selected ? 0 : -1}
+      data-effort-level={props.level || undefined}
+      // The reasoning control holds the column's one tab stop; Up and Down move between rows.
+      tabIndex={props.selected && props.level ? 0 : -1}
       className={COLUMN_ROW}
       onClick={props.onPick}
     >
@@ -158,7 +185,7 @@ function moveBetweenRows(event: KeyboardEvent<HTMLElement>) {
 
 function EffortLevels(props: { traits: TraitsSelectionInput; onLevelPick: () => void }) {
   const traits = useTraitsSelection(props.traits);
-  const { columnSelects, columnToggles } = splitSpeed(
+  const { effort, others } = columnControls(
     props.traits.provider,
     traits.selectDescriptors,
     traits.booleanDescriptors,
@@ -178,61 +205,71 @@ function EffortLevels(props: { traits: TraitsSelectionInput; onLevelPick: () =>
       </>
     );
   }
-  if (columnSelects.length === 0 && columnToggles.length === 0) return <NoEffortRow />;
-  return (
-    <>
-      {columnSelects.map((descriptor, index) => {
-        const isPrimary = descriptor.id === traits.primarySelectDescriptor?.id;
-        const locked = isPrimary && traits.ultrathinkInBodyText;
-        const value = traits.selectValue(descriptor);
-        return (
-          <div
-            key={descriptor.id}
-            role="radiogroup"
-            aria-label={descriptor.label}
-            className="flex flex-col gap-0.5"
-          >
-            {index > 0 ? <div className={COLUMN_LABEL}>{descriptor.label}</div> : null}
-            {locked ? (
-              <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
-                {ULTRATHINK_IN_BODY_NOTE}
-              </div>
-            ) : null}
-            {selectableProviderOptionChoices(descriptor).map((option) => (
-              <ColumnRow
-                key={option.id}
-                label={option.label}
-                selected={option.id === value}
-                isDefault={option.isDefault}
-                disabled={locked}
-                onPick={() => {
-                  traits.changeSelect(descriptor, option.id);
-                  // Picking the effort level finishes the job; other options keep the popup open.
-                  if (isPrimary) props.onLevelPick();
-                }}
-              />
-            ))}
-          </div>
-        );
-      })}
-      {columnToggles.map((descriptor) => (
+  if (!effort && others.length === 0) return <NoEffortRow />;
+  const renderControl = (control: ColumnControl) => {
+    const isEffort = control === effort;
+    const { descriptor } = control;
+    if (control.kind === "boolean") {
+      return (
         <div
           key={descriptor.id}
           role="radiogroup"
           aria-label={descriptor.label}
           className="flex flex-col gap-0.5"
         >
-          <div className={COLUMN_LABEL}>{descriptor.label}</div>
+          {isEffort ? null : <div className={COLUMN_LABEL}>{descriptor.label}</div>}
           {([true, false] as const).map((value) => (
             <ColumnRow
               key={String(value)}
               label={value ? "On" : "Off"}
-              selected={(descriptor.currentValue === true) === value}
-              onPick={() => traits.changeBoolean(descriptor.id, value)}
+              selected={(control.descriptor.currentValue === true) === value}
+              level={isEffort}
+              onPick={() => {
+                traits.changeBoolean(descriptor.id, value);
+                if (isEffort) props.onLevelPick();
+              }}
             />
           ))}
         </div>
-      ))}
+      );
+    }
+    const locked =
+      descriptor.id === traits.primarySelectDescriptor?.id && traits.ultrathinkInBodyText;
+    const value = traits.selectValue(control.descriptor);
+    return (
+      <div
+        key={descriptor.id}
+        role="radiogroup"
+        aria-label={descriptor.label}
+        className="flex flex-col gap-0.5"
+      >
+        {isEffort ? null : <div className={COLUMN_LABEL}>{descriptor.label}</div>}
+        {locked ? (
+          <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
+            {ULTRATHINK_IN_BODY_NOTE}
+          </div>
+        ) : null}
+        {selectableProviderOptionChoices(control.descriptor).map((option) => (
+          <ColumnRow
+            key={option.id}
+            label={option.label}
+            selected={option.id === value}
+            isDefault={option.isDefault}
+            disabled={locked}
+            level={isEffort}
+            onPick={() => {
+              traits.changeSelect(control.descriptor, option.id);
+              if (isEffort) props.onLevelPick();
+            }}
+          />
+        ))}
+      </div>
+    );
+  };
+  return (
+    <>
+      {effort ? renderControl(effort) : null}
+      {others.map(renderControl)}
     </>
   );
 }
@@ -246,15 +283,21 @@ function NoEffortRow() {
 /** The model picker's effort column: the selected model's levels and its other options. */
 export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | null }) {
   const picker = use(DockedPickerContext);
-  const primary = props.traits
-    ? getTraitsSectionVisibility(props.traits).primarySelectDescriptor
-    : null;
+  const visibility = props.traits ? getTraitsSectionVisibility(props.traits) : null;
+  const effort =
+    props.traits && visibility
+      ? columnControls(
+          props.traits.provider,
+          visibility.selectDescriptors,
+          visibility.booleanDescriptors,
+        ).effort
+      : null;
   return (
     <>
       {/* Matches the search row's box, so one rule runs across the top of the popup. */}
       <div className="shrink-0 px-3 pt-2.5">
         <div className="flex h-8.25 -translate-y-px items-center gap-2 border-b border-border/70 pb-1.5 text-sm">
-          <span className="text-muted-foreground">{primary?.label ?? "Effort"}</span>
+          <span className="text-muted-foreground">{effort?.descriptor.label ?? "Effort"}</span>
           <span className="ms-auto min-w-0 truncate text-muted-foreground text-xs">
             {picker.modelLabel}
           </span>
@@ -353,6 +396,7 @@ function PermissionsMenu(props: {
   options: ReadonlyArray<RuntimeModeOption>;
   onChange: (mode: RuntimeMode) => void;
 }) {
+  const picker = use(DockedPickerContext);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const current = props.options.find((option) => option.mode === props.runtimeMode);
   if (!current) return null;
@@ -382,7 +426,11 @@ function PermissionsMenu(props: {
         <ComposerPermissionsSection
           runtimeMode={props.runtimeMode}
           runtimeModeOptions={props.options}
-          onRuntimeModeChange={props.onChange}
+          // A mode change hands focus back to the prompt, so the whole picker closes with it.
+          onRuntimeModeChange={(mode) => {
+            props.onChange(mode);
+            picker.close();
+          }}
         />
       </MenuPopup>
     </Menu>
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index a8f4d0e520131..9928530b97f2a 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -69,6 +69,8 @@ export const ModelListRow = memo(function ModelListRow(props: {
       <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
         <div className="min-w-0 truncate text-sm font-normal leading-snug">
           {getDisplayModelName(model)}
+          {/* The logo is decorative, so name the provider for screen readers. */}
+          <span className="sr-only">, {props.providerDisplayName}</span>
         </div>
         {props.subProvider ? (
           <span className="min-w-0 shrink truncate text-xs text-muted-foreground/70">
diff --git a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
index 4aa1d7b8cc145..4c26f9ca9dde4 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -142,6 +142,7 @@ it("keeps a docked picker open after a pick and hands focus to that model's effo
             role="radio"
             aria-checked={index === all.length - 1}
             data-effort-row
+            data-effort-level
           >
             {level}
           </button>
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 8d11e485721ef..b6afdf5b75e08 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -154,15 +154,29 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
     }
   };
 
-  /** Focuses the selected effort level, or the first row; false when the column has none. */
-  const focusEffort = () => {
+  /**
+   * Focuses the selected reasoning level, else the first level. With `rows: "any"` it falls back
+   * to the column's other options. False when nothing took focus.
+   */
+  const focusEffort = (rows: "levels" | "any") => {
     const column = popupRef.current?.querySelector("[data-model-picker-effort]");
+    const first = (selector: string) =>
+      column?.querySelector<HTMLElement>(`${selector}[aria-checked="true"]:not(:disabled)`) ??
+      column?.querySelector<HTMLElement>(`${selector}:not(:disabled)`);
     const row =
-      column?.querySelector<HTMLElement>('[data-effort-row][aria-checked="true"]:not(:disabled)') ??
-      column?.querySelector<HTMLElement>("[data-effort-row]:not(:disabled)");
+      first("[data-effort-level]") ?? (rows === "any" ? first("[data-effort-row]") : null);
     row?.focus({ preventScroll: true });
     return row != null;
   };
+  const openTarget = (target: "effort" | "permissions") => {
+    if (target === "effort") {
+      focusEffort("any");
+      return;
+    }
+    popupRef.current
+      ?.querySelector<HTMLButtonElement>("[data-composer-permissions-trigger]")
+      ?.click();
+  };
 
   const handleInstanceModelChange = (instanceId: ProviderInstanceId, model: string) => {
     if (props.disabled) return;
@@ -173,7 +187,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
     }
     // The column renders the new model's levels on commit; a model with none closes the popup.
     window.requestAnimationFrame(() => {
-      if (!focusEffort()) setIsMenuOpen(false);
+      if (!focusEffort("levels")) setIsMenuOpen(false);
     });
   };
 
@@ -246,7 +260,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
           : (props.getModelDisabledReason?.(instanceId, model) ?? null)
       }
       onInstanceModelChange={handleInstanceModelChange}
-      {...(docked ? { docked, onFocusEffort: () => void focusEffort() } : {})}
+      {...(docked ? { docked, onFocusEffort: () => void focusEffort("any") } : {})}
     />
   );
 
@@ -262,14 +276,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       }}
       onOpenChangeComplete={(open) => {
         const target = takeOpenTarget(triggerRef.current);
-        if (!open || !docked || !target) return;
-        if (target === "effort") {
-          focusEffort();
-          return;
-        }
-        popupRef.current
-          ?.querySelector<HTMLButtonElement>("[data-composer-permissions-trigger]")
-          ?.click();
+        if (open && docked && target) openTarget(target);
       }}
     >
       <PopoverTrigger
@@ -285,6 +292,16 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             size={size}
             data-chat-provider-model-picker="true"
             data-composer-shortcut={props.triggerShortcuts}
+            onClick={(event) => {
+              if (!isMenuOpen || !docked) return;
+              const target = takeOpenTarget(triggerRef.current);
+              if (!target) return;
+              // A shortcut aimed at the open picker moves within it instead of closing it.
+              (
+                event as typeof event & { preventBaseUIHandler?: () => void }
+              ).preventBaseUIHandler?.();
+              openTarget(target);
+            }}
             className={cn(
               "min-w-0 shrink justify-between whitespace-nowrap",
               props.compact
@@ -385,29 +402,29 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
         touchBackdrop
       >
         {props.effortColumn ? (
-          <div className="flex flex-col">
-            <div className="flex max-h-86.5 max-sm:max-h-none max-sm:flex-col">
-              {picker}
-              <div
-                data-model-picker-effort
-                className="flex min-h-0 w-48 shrink-0 flex-col border-l border-border/70 bg-muted/40 max-sm:max-h-64 max-sm:w-full max-sm:border-t max-sm:border-l-0"
-                onKeyDown={(event) => {
-                  if (event.key !== "ArrowLeft" || event.altKey || event.ctrlKey || event.metaKey)
-                    return;
-                  event.preventDefault();
-                  event.stopPropagation();
-                  searchInputRef.current?.focus();
-                }}
-              >
-                <DockedPickerContext
-                  value={{ modelLabel: triggerLabel, close: () => setIsMenuOpen(false) }}
+          <DockedPickerContext
+            value={{ modelLabel: triggerLabel, close: () => setIsMenuOpen(false) }}
+          >
+            <div className="flex flex-col">
+              <div className="flex max-h-86.5 max-sm:max-h-none max-sm:flex-col">
+                {picker}
+                <div
+                  data-model-picker-effort
+                  className="flex min-h-0 w-48 shrink-0 flex-col border-l border-border/70 bg-muted/40 max-sm:max-h-64 max-sm:w-full max-sm:border-t max-sm:border-l-0"
+                  onKeyDown={(event) => {
+                    if (event.key !== "ArrowLeft" || event.altKey || event.ctrlKey || event.metaKey)
+                      return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    searchInputRef.current?.focus();
+                  }}
                 >
                   {props.effortColumn}
-                </DockedPickerContext>
+                </div>
               </div>
+              {props.footer}
             </div>
-            {props.footer}
-          </div>
+          </DockedPickerContext>
         ) : (
           picker
         )}

From d8f27ccf5b3b4e436823532d612ef4aa09b4f140 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:34:50 -0700
Subject: [PATCH 3/6] fix(web): keep the picker on locked levels and
 Permissions with the picker beside Plan

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/chat/ComposerModelEffort.tsx   | 10 +++++-----
 .../src/components/chat/ProviderModelPicker.tsx   |  5 ++++-
 .../chat/composerControlsOwnership.test.ts        | 15 ++++++++++++++-
 .../components/chat/composerControlsOwnership.ts  | 11 +++++++----
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index cb0357b8db379..f85ad777dcb67 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -403,6 +403,10 @@ function PermissionsMenu(props: {
   const CurrentIcon = current.icon;
   return (
     <Menu
+      // Any pick, even the current mode, ends the job; a change also hands focus to the prompt.
+      onOpenChange={(open, details) => {
+        if (!open && details.reason === "item-press") picker.close();
+      }}
       onOpenChangeComplete={(open) => {
         if (open) focusCheckedPermission(triggerRef.current);
       }}
@@ -426,11 +430,7 @@ function PermissionsMenu(props: {
         <ComposerPermissionsSection
           runtimeMode={props.runtimeMode}
           runtimeModeOptions={props.options}
-          // A mode change hands focus back to the prompt, so the whole picker closes with it.
-          onRuntimeModeChange={(mode) => {
-            props.onChange(mode);
-            picker.close();
-          }}
+          onRuntimeModeChange={props.onChange}
         />
       </MenuPopup>
     </Menu>
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index b6afdf5b75e08..ccce9b699aa24 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -186,8 +186,11 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       return;
     }
     // The column renders the new model's levels on commit; a model with none closes the popup.
+    // Levels an Ultrathink prompt locks still count, so the note explaining them stays visible.
     window.requestAnimationFrame(() => {
-      if (!focusEffort("levels")) setIsMenuOpen(false);
+      const hasLevels = popupRef.current?.querySelector("[data-effort-level]") != null;
+      if (hasLevels) focusEffort("levels");
+      else setIsMenuOpen(false);
     });
   };
 
diff --git a/apps/web/src/components/chat/composerControlsOwnership.test.ts b/apps/web/src/components/chat/composerControlsOwnership.test.ts
index ad6ca38bf9af3..8582956827b3c 100644
--- a/apps/web/src/components/chat/composerControlsOwnership.test.ts
+++ b/apps/web/src/components/chat/composerControlsOwnership.test.ts
@@ -29,7 +29,7 @@ describe("resolveComposerControlsOwnership", () => {
     });
   });
 
-  it("moves an overflowed chip's Permissions into the overflow menu", () => {
+  it("gives an overflowed chip's Permissions to the overflow menu when it has no Plan toggle", () => {
     const result = resolveComposerControlsOwnership({
       ...base,
       matchesDefault: false,
@@ -52,6 +52,19 @@ describe("resolveComposerControlsOwnership", () => {
     expect(result.pickerOwnsModeShortcut).toBe(true);
   });
 
+  it("overflows only the chip when the Plan toggle gives the overflow menu content", () => {
+    const result = resolveComposerControlsOwnership({
+      ...base,
+      matchesDefault: false,
+      planModeUiEnabled: true,
+      measuredHiddenBlockCount: 1,
+    });
+    expect(result.hiddenBlockIds).toEqual(["mode"]);
+    // Permissions stay in the model picker, which now answers composer.mode.
+    expect(result.overflowShowsPermissions).toBe(false);
+    expect(result.pickerOwnsModeShortcut).toBe(true);
+  });
+
   it("shows the non-default chip as an icon in the compacted row", () => {
     const result = resolveComposerControlsOwnership({
       ...base,
diff --git a/apps/web/src/components/chat/composerControlsOwnership.ts b/apps/web/src/components/chat/composerControlsOwnership.ts
index b69f540203479..c8174991d3d05 100644
--- a/apps/web/src/components/chat/composerControlsOwnership.ts
+++ b/apps/web/src/components/chat/composerControlsOwnership.ts
@@ -19,14 +19,17 @@ export function resolveComposerControlsOwnership(input: {
   const showModeBlock = accessDisplay !== "hidden" || input.planModeUiEnabled;
   const modeHidden = showModeBlock && input.measuredHiddenBlockCount > 0;
   const hiddenBlockIds = modeHidden ? (["mode"] as const) : ([] as const);
+  // An overflowed chip needs a home for Permissions only when the Plan toggle is not there to fill
+  // the overflow menu; otherwise Permissions stay in the model picker.
+  const overflowShowsPermissions =
+    modeHidden && accessDisplay !== "hidden" && !input.planModeUiEnabled;
   return {
     accessDisplay,
     showModeBlock,
     hiddenBlockCount: hiddenBlockIds.length,
     hiddenBlockIds,
-    /** An overflowed chip takes Permissions into the overflow menu, which then answers composer.mode. */
-    overflowShowsPermissions: modeHidden && accessDisplay !== "hidden",
-    /** With no chip, the model picker answers composer.mode and opens its Permissions menu. */
-    pickerOwnsModeShortcut: accessDisplay === "hidden",
+    overflowShowsPermissions,
+    /** Without a visible chip or an overflow menu holding it, the model picker answers composer.mode. */
+    pickerOwnsModeShortcut: !overflowShowsPermissions && (accessDisplay === "hidden" || modeHidden),
   };
 }

From c77c74f4dd88efee7c958fd633febeca744fce39 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:38:02 -0700
Subject: [PATCH 4/6] fix(web): effort column names the model by its short name

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ProviderModelPicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index ccce9b699aa24..c125a0aca608a 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -406,7 +406,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       >
         {props.effortColumn ? (
           <DockedPickerContext
-            value={{ modelLabel: triggerLabel, close: () => setIsMenuOpen(false) }}
+            value={{ modelLabel: triggerTitle, close: () => setIsMenuOpen(false) }}
           >
             <div className="flex flex-col">
               <div className="flex max-h-86.5 max-sm:max-h-none max-sm:flex-col">

From b356988ff158dec3872e5ad142294682ac784453 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:39:39 -0700
Subject: [PATCH 5/6] fix(web): effort column keeps option descriptions as
 tooltips

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/chat/ComposerModelEffort.tsx   | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index f85ad777dcb67..5d0103633d9ba 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -141,6 +141,8 @@ const COLUMN_LABEL = "px-2 pt-1.5 pb-1 font-medium text-muted-foreground text-xs
 
 function ColumnRow(props: {
   label: string;
+  /** Shown on hover; the column is too narrow to print it under the label. */
+  description?: string | undefined;
   selected: boolean;
   isDefault?: boolean | undefined;
   disabled?: boolean;
@@ -148,23 +150,33 @@ function ColumnRow(props: {
   level: boolean;
   onPick: () => void;
 }) {
-  return (
-    <button
-      type="button"
-      role="radio"
-      aria-checked={props.selected}
-      disabled={props.disabled}
-      data-effort-row
-      data-effort-level={props.level || undefined}
-      // The reasoning control holds the column's one tab stop; Up and Down move between rows.
-      tabIndex={props.selected && props.level ? 0 : -1}
-      className={COLUMN_ROW}
-      onClick={props.onPick}
-    >
+  const rowProps = {
+    type: "button",
+    role: "radio",
+    "aria-checked": props.selected,
+    disabled: props.disabled,
+    "data-effort-row": true,
+    "data-effort-level": props.level || undefined,
+    // The reasoning control holds the column's one tab stop; Up and Down move between rows.
+    tabIndex: props.selected && props.level ? 0 : -1,
+    className: COLUMN_ROW,
+    onClick: props.onPick,
+  } as const;
+  const content = (
+    <>
       <span className="min-w-0 flex-1 truncate">{props.label}</span>
       {props.isDefault ? <span className="text-muted-foreground/70 text-xs">Default</span> : null}
       <CheckIcon aria-hidden="true" className={cn("size-3.5", !props.selected && "invisible")} />
-    </button>
+    </>
+  );
+  if (!props.description) return <button {...rowProps}>{content}</button>;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<button {...rowProps} />}>{content}</TooltipTrigger>
+      <TooltipPopup side="right" className="max-w-56">
+        {props.description}
+      </TooltipPopup>
+    </Tooltip>
   );
 }
 
@@ -254,6 +266,7 @@ function EffortLevels(props: { traits: TraitsSelectionInput; onLevelPick: () =>
             key={option.id}
             label={option.label}
             selected={option.id === value}
+            description={option.description}
             isDefault={option.isDefault}
             disabled={locked}
             level={isEffort}

From 12f798521dadf6ee3b8991a5d995adb890fcd398 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Sat, 31 Oct 2026 01:41:43 -0700
Subject: [PATCH 6/6] fix(web): effort word keeps a word space in the compact
 composer

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ComposerModelEffort.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index 5d0103633d9ba..285a31b35d489 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -111,7 +111,13 @@ export function describeComposerEffort(
   return {
     detail: display.label,
     suffix: (
-      <span className="-ms-0.5 flex shrink-0 items-center gap-1.5 text-muted-foreground group-hover/model-trigger:text-foreground group-data-pressed/model-trigger:text-foreground group-data-popup-open/model-trigger:text-foreground">
+      <span
+        className={cn(
+          "flex shrink-0 items-center gap-1.5 text-muted-foreground group-hover/model-trigger:text-foreground group-data-pressed/model-trigger:text-foreground group-data-popup-open/model-trigger:text-foreground",
+          // A word space after the model name: the regular trigger's gap is wider than one.
+          size === "sm" && "-ms-0.5",
+        )}
+      >
         {word !== null ? (
           <span data-composer-control-label>{word}</span>
         ) : glyph ? (