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..285a31b35d489
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -0,0 +1,476 @@
+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),
+  };
+}
+
+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.
+ */
+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;
+  // 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,
+    suffix: (
+      <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 ? (
+          <EffortGlyph count={glyph.count} filled={glyph.filled} size={size} />
+        ) : null}
+        {glyph && (display.speedLabel === "Fast" || display.speedLabel === "Ultrafast") ? (
+          <FastBolt ultra={display.speedLabel === "Ultrafast"} />
+        ) : null}
+        {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
+            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;
+  /** Shown on hover; the column is too narrow to print it under the label. */
+  description?: string | undefined;
+  selected: boolean;
+  isDefault?: boolean | undefined;
+  disabled?: boolean;
+  /** A level of the reasoning control, where focus lands after a model pick. */
+  level: boolean;
+  onPick: () => void;
+}) {
+  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")} />
+    </>
+  );
+  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>
+  );
+}
+
+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 { effort, others } = columnControls(
+    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 (!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"
+        >
+          {isEffort ? null : <div className={COLUMN_LABEL}>{descriptor.label}</div>}
+          {([true, false] as const).map((value) => (
+            <ColumnRow
+              key={String(value)}
+              label={value ? "On" : "Off"}
+              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}
+            description={option.description}
+            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)}
+    </>
+  );
+}
+
+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 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">{effort?.descriptor.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 picker = use(DockedPickerContext);
+  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
+      // 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);
+      }}
+    >
+      <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..9928530b97f2a 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,43 @@ 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)}
+          {/* The logo is decorative, so name the provider for screen readers. */}
+          <span className="sr-only">, {props.providerDisplayName}</span>
         </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 +114,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..4c26f9ca9dde4 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -88,3 +88,81 @@ 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
+            data-effort-level
+          >
+            {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..c125a0aca608a 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,44 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
     }
   };
 
+  /**
+   * 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 =
+      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;
     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.
+    // Levels an Ultrathink prompt locks still count, so the note explaining them stays visible.
+    window.requestAnimationFrame(() => {
+      const hasLevels = popupRef.current?.querySelector("[data-effort-level]") != null;
+      if (hasLevels) focusEffort("levels");
+      else setIsMenuOpen(false);
+    });
   };
 
   const shortcutLabel = props.keybindings
@@ -169,9 +227,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("any") } : {})}
+    />
+  );
 
   return (
     <Popover
@@ -183,15 +277,34 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
         }
         setIsMenuOpen(open);
       }}
+      onOpenChangeComplete={(open) => {
+        const target = takeOpenTarget(triggerRef.current);
+        if (open && docked && target) openTarget(target);
+      }}
     >
       <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}
+            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
@@ -267,6 +380,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 +390,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 ? (
+          <DockedPickerContext
+            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">
+                {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}
+                </div>
+              </div>
+              {props.footer}
+            </div>
+          </DockedPickerContext>
+        ) : (
+          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..8582956827b3c 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("gives an overflowed chip's Permissions to the overflow menu when it has no Plan toggle", () => {
     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,7 +49,7 @@ describe("resolveComposerControlsOwnership", () => {
     expect(result.showModeBlock).toBe(true);
     expect(result.hiddenBlockIds).toEqual(["mode"]);
     expect(result.overflowShowsPermissions).toBe(false);
-    expect(result.effortOwnsModeShortcut).toBe(true);
+    expect(result.pickerOwnsModeShortcut).toBe(true);
   });
 
   it("overflows only the chip when the Plan toggle gives the overflow menu content", () => {
@@ -62,21 +60,9 @@ describe("resolveComposerControlsOwnership", () => {
       measuredHiddenBlockCount: 1,
     });
     expect(result.hiddenBlockIds).toEqual(["mode"]);
-    // Permissions stay in the visible effort menu, which now answers composer.mode.
+    // Permissions stay in the model picker, 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..c8174991d3d05 100644
--- a/apps/web/src/components/chat/composerControlsOwnership.ts
+++ b/apps/web/src/components/chat/composerControlsOwnership.ts
@@ -1,63 +1,35 @@
 /**
- * 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);
+  // 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,
+    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),
+    overflowShowsPermissions,
+    /** Without a visible chip or an overflow menu holding it, the model picker answers composer.mode. */
+    pickerOwnsModeShortcut: !overflowShowsPermissions && (accessDisplay === "hidden" || modeHidden),
   };
 }
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.