diff --git a/apps/server/src/provider/AcpRegistryProbe.test.ts b/apps/server/src/provider/AcpRegistryProbe.test.ts
index bc7c14d3b3c8a..e6835159f9e7f 100644
--- a/apps/server/src/provider/AcpRegistryProbe.test.ts
+++ b/apps/server/src/provider/AcpRegistryProbe.test.ts
@@ -229,6 +229,7 @@ describe("ACP Registry probe", () => {
           { id: "medium", label: "Medium" },
           { id: "high", label: "High" },
         ],
+        role: "reasoning",
       },
     ]);
   });
diff --git a/apps/server/src/provider/GrokProvider.test.ts b/apps/server/src/provider/GrokProvider.test.ts
index 4ecc0ad28971b..8139df621f98c 100644
--- a/apps/server/src/provider/GrokProvider.test.ts
+++ b/apps/server/src/provider/GrokProvider.test.ts
@@ -129,9 +129,9 @@ describe("buildGrokModelCapabilities", () => {
         type: "select",
         currentValue: "medium",
         options: [
-          { id: "xhigh", label: "Extra High Effort", isDefault: true },
-          { id: "high", label: "High Effort" },
           { id: "medium", label: "Medium Effort" },
+          { id: "high", label: "High Effort" },
+          { id: "xhigh", label: "Extra High Effort", isDefault: true },
         ],
       },
     ]);
diff --git a/apps/web/src/components/chat/ComposerModelEffort.browser.test.tsx b/apps/web/src/components/chat/ComposerModelEffort.browser.test.tsx
new file mode 100644
index 0000000000000..3d704b5209305
--- /dev/null
+++ b/apps/web/src/components/chat/ComposerModelEffort.browser.test.tsx
@@ -0,0 +1,125 @@
+import {
+  ProviderDriverKind,
+  ProviderInstanceId,
+  type ProviderOptionSelection,
+  type ServerProviderModel,
+} from "@t3tools/contracts";
+import { createModelCapabilities } from "@t3tools/shared/model";
+import { useState } from "react";
+import { expect, it } from "vite-plus/test";
+import { page, userEvent } from "vite-plus/test/browser";
+
+import { render } from "../../../test/render";
+import { ComposerEffortColumn, describeComposerEffort } from "./ComposerModelEffort";
+import type { TraitsSelectionInput } from "./TraitsPicker";
+
+// Shaped like Devin over ACP: its session mode comes first, and its reasoning id is its own.
+const models: ReadonlyArray<ServerProviderModel> = [
+  {
+    slug: "fusion",
+    name: "Fusion (Claude Opus 5.5 Medium + SWE-2 High)",
+    isCustom: false,
+    capabilities: createModelCapabilities({
+      optionDescriptors: [
+        {
+          id: "mode",
+          label: "Session Mode",
+          type: "select",
+          currentValue: "bypass",
+          options: [
+            { id: "code", label: "Code" },
+            { id: "plan", label: "Plan" },
+            { id: "bypass", label: "Bypass Permissions" },
+          ],
+        },
+        {
+          id: "thought_level",
+          label: "Thinking",
+          type: "select",
+          role: "reasoning",
+          currentValue: "medium",
+          options: [
+            { id: "low", label: "Low" },
+            { id: "medium", label: "Medium" },
+            { id: "high", label: "High" },
+          ],
+        },
+        {
+          id: "speed",
+          label: "Speed",
+          type: "select",
+          currentValue: "standard",
+          options: [
+            { id: "standard", label: "Standard" },
+            { id: "fast", label: "Fast" },
+          ],
+        },
+        { id: "auto_approve", label: "Auto-approve tools", type: "boolean", currentValue: false },
+      ],
+    }),
+  },
+];
+
+function traitsInput(
+  modelOptions: ReadonlyArray<ProviderOptionSelection>,
+  onModelOptionsChange: (next: ReadonlyArray<ProviderOptionSelection> | undefined) => void,
+): TraitsSelectionInput {
+  return {
+    provider: ProviderDriverKind.make("acpRegistry"),
+    instanceId: ProviderInstanceId.make("devin"),
+    models,
+    model: "fusion",
+    modelOptions,
+    planModeEnabled: false,
+    onModelOptionsChange,
+  };
+}
+
+function Column() {
+  const [options, setOptions] = useState<ReadonlyArray<ProviderOptionSelection>>([]);
+  const traits = traitsInput(options, (next) => setOptions(next ?? []));
+  return (
+    <>
+      <div data-model-picker-effort>
+        <ComposerEffortColumn traits={traits} />
+      </div>
+      <p role="status">{describeComposerEffort(traits, "bars", "sm").suffix}</p>
+    </>
+  );
+}
+
+it("draws an agent's reasoning as bars and keeps its mode out of the levels", async () => {
+  await using screen = await render(<Column />, { router: false }); // no routes involved
+  const status = screen.getByRole("status");
+  expect(status.element().querySelector("[data-composer-effort-glyph]")).not.toBeNull();
+  await expect.element(status).toHaveTextContent("");
+
+  const levels = screen.getByRole("radiogroup", { name: "Thinking" });
+  await expect.element(levels.getByRole("radio")).toHaveLength(3);
+  await expect.element(screen.getByRole("radio", { name: "Plan" })).not.toBeInTheDocument();
+
+  // Up and Down walk from the levels through the option rows without opening their menus.
+  await userEvent.tab();
+  await expect.element(screen.getByRole("radio", { name: "Medium" })).toHaveFocus();
+  await userEvent.keyboard("{ArrowDown}{ArrowDown}{ArrowDown}");
+  const speed = screen.getByRole("button", { name: "Speed: Standard" });
+  await expect.element(speed).toHaveFocus();
+  await expect.element(page.getByRole("menuitemradio")).not.toBeInTheDocument();
+  await userEvent.keyboard("{ArrowRight}");
+  await expect.element(page.getByRole("menuitemradio", { name: "Standard" })).toHaveFocus();
+  await userEvent.keyboard("{ArrowLeft}");
+  await expect.element(page.getByRole("menuitemradio")).not.toBeInTheDocument();
+  await expect.element(speed).toHaveFocus();
+
+  await userEvent.click(screen.getByText("Auto-approve tools"));
+  await expect
+    .element(screen.getByRole("switch", { name: "Auto-approve tools" }))
+    .toHaveAttribute("aria-checked", "true");
+
+  await userEvent.click(screen.getByRole("button", { name: "Session Mode: Bypass Permissions" }));
+  await userEvent.click(page.getByRole("menuitemradio", { name: "Plan" }));
+  await expect
+    .element(screen.getByRole("button", { name: "Session Mode: Plan" }))
+    .toBeInTheDocument();
+  await expect.element(page.getByRole("menuitemradio")).not.toBeInTheDocument();
+});
diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index 5ce77c60b1078..3a863936101b2 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -1,16 +1,25 @@
 import {
   buildTraitsTriggerDisplay,
   getDescriptorStringValue,
-  REASONING_SELECT_DESCRIPTOR_IDS,
+  isReasoningControl,
   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 { getProviderOptionCurrentLabel } from "@t3tools/shared/model";
+import { CheckIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+import { type KeyboardEvent, type ReactNode, use, useRef, useState } from "react";
 
 import { cn } from "~/lib/utils";
-import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
+import {
+  Menu,
+  MenuPopup,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRadioItemIndicator,
+  MenuTrigger,
+} from "../ui/menu";
+import { Switch } from "../ui/switch";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import type { ComposerControlSize } from "./ComposerControl";
 import { ComposerPermissionsSection, type RuntimeModeOption } from "./ComposerFooterControls";
@@ -51,8 +60,8 @@ type ColumnControl =
   | { kind: "boolean"; descriptor: BooleanDescriptor };
 
 /**
- * The column lists the model's reasoning control first, under the header that names it, then
- * its other options.
+ * The column lists the model's reasoning levels under the header that names it. Other options,
+ * such as an agent's session mode, sit below as one row each.
  */
 function columnControls(
   provider: TraitsSelectionInput["provider"],
@@ -64,8 +73,7 @@ function columnControls(
     ...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;
+  const effort = controls.find((control) => isReasoningControl(control.descriptor)) ?? null;
   return { effort, others: controls.filter((control) => control !== effort) };
 }
 
@@ -94,20 +102,40 @@ export function describeComposerEffort(
     modelSelection,
     reportedModelSelection: traits.reportedModelSelection,
   });
+  // The same reasoning control the column lists, wherever the agent put it among its options.
+  const reasoning =
+    columnControls(traits.provider, visibility.selectDescriptors, visibility.booleanDescriptors)
+      .effort?.descriptor ?? null;
+  const ultrathink = visibility.ultrathinkPromptControlled && reasoning === primary;
   const glyph =
-    primary && REASONING_SELECT_DESCRIPTOR_IDS.has(primary.id)
+    reasoning?.type === "select"
       ? resolveEffortGlyph(
-          primary,
-          visibility.ultrathinkPromptControlled
+          reasoning,
+          ultrathink
             ? "ultrathink"
-            : getDescriptorStringValue(primary, modelSelection, traits.reportedModelSelection),
+            : getDescriptorStringValue(reasoning, 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;
+    : !reasoning
+      ? null
+      : reasoning.type === "boolean"
+        ? `${reasoning.label} ${reasoning.currentValue === true ? "On" : "Off"}`
+        : ultrathink
+          ? "Ultrathink"
+          : getProviderOptionCurrentLabel(reasoning, modelSelection, traits.reportedModelSelection);
+  const fast = display.speedLabel === "Fast" || display.speedLabel === "Ultrafast";
+  // Agent options such as modes live in the picker; the trigger adds only the context window.
+  const contextWindow =
+    visibility.contextWindowDescriptor &&
+    getProviderOptionCurrentLabel(
+      visibility.contextWindowDescriptor,
+      modelSelection,
+      traits.reportedModelSelection,
+    );
+  if (!word && !glyph && !fast && !contextWindow) return { suffix: null, detail: display.label };
   return {
     detail: display.label,
     suffix: (
@@ -118,22 +146,22 @@ export function describeComposerEffort(
           size === "sm" && "-ms-0.5",
         )}
       >
-        {word !== null ? (
-          <span data-composer-control-label>{word}</span>
+        {word ? (
+          <span data-composer-control-label className="max-w-24 truncate">
+            {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 ? (
+        {fast ? <FastBolt ultra={display.speedLabel === "Ultrafast"} /> : null}
+        {contextWindow ? (
           <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(" · ")}
+            {contextWindow}
           </span>
         ) : null}
       </span>
@@ -150,10 +178,10 @@ function ColumnRow(props: {
   /** Shown on hover; the column is too narrow to print it under the label. */
   description?: string | undefined;
   selected: boolean;
+  /** The column's one tab stop: the selected level, else the first when none shows as selected. */
+  tabStop: 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 = {
@@ -162,9 +190,10 @@ function ColumnRow(props: {
     "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,
+    // Focus lands on a level after a model pick.
+    "data-effort-level": true,
+    // Up and Down move between rows.
+    tabIndex: props.tabStop ? 0 : -1,
     className: COLUMN_ROW,
     onClick: props.onPick,
   } as const;
@@ -194,6 +223,8 @@ function ColumnRow(props: {
 
 function moveBetweenRows(event: KeyboardEvent<HTMLElement>) {
   if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+  // An option's side menu is a React child here, but it moves through its own items.
+  if (!event.currentTarget.contains(event.target as Node)) return;
   const rows = Array.from(
     event.currentTarget.querySelectorAll<HTMLButtonElement>("[data-effort-row]:not(:disabled)"),
   );
@@ -230,66 +261,222 @@ function EffortLevels(props: { traits: TraitsSelectionInput }) {
     );
   }
   if (!effort && others.length === 0) return <NoEffortRow />;
-  const renderControl = (control: ColumnControl) => {
-    const isEffort = control === effort;
-    const { descriptor } = control;
-    if (control.kind === "boolean") {
-      return (
+  // Ultrathink in the prompt locks the levels; the first option then holds the tab stop.
+  const locked =
+    effort?.descriptor.id === traits.primarySelectDescriptor?.id && traits.ultrathinkInBodyText;
+  return (
+    <>
+      {effort ? <EffortRows control={effort} traits={traits} locked={locked} /> : null}
+      {others.length > 0 ? (
         <div
-          key={descriptor.id}
-          role="radiogroup"
-          aria-label={descriptor.label}
-          className="flex flex-col gap-0.5"
+          className={cn("flex flex-col gap-0.5", effort && "mt-1 border-t border-border/70 pt-1")}
         >
-          {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)}
-            />
-          ))}
+          {others.map((control, index) =>
+            control.kind === "boolean" ? (
+              <OptionSwitchRow
+                key={control.descriptor.id}
+                descriptor={control.descriptor}
+                traits={traits}
+                tabStop={(!effort || locked) && index === 0}
+              />
+            ) : (
+              <OptionMenuRow
+                key={control.descriptor.id}
+                descriptor={control.descriptor}
+                traits={traits}
+                tabStop={(!effort || locked) && index === 0}
+              />
+            ),
+          )}
         </div>
-      );
-    }
-    const locked =
-      descriptor.id === traits.primarySelectDescriptor?.id && traits.ultrathinkInBodyText;
-    const value = traits.selectValue(control.descriptor);
+      ) : null}
+    </>
+  );
+}
+
+type TraitsSelection = ReturnType<typeof useTraitsSelection>;
+
+function EffortRows(props: { control: ColumnControl; traits: TraitsSelection; locked: boolean }) {
+  const { control, traits } = props;
+  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>}
-        {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) => (
+      <div role="radiogroup" aria-label={descriptor.label} className="flex flex-col gap-0.5">
+        {([true, false] as const).map((value) => (
           <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)}
+            key={String(value)}
+            label={value ? "On" : "Off"}
+            selected={(control.descriptor.currentValue === true) === value}
+            tabStop={(control.descriptor.currentValue === true) === value}
+            onPick={() => traits.changeBoolean(descriptor.id, value)}
           />
         ))}
       </div>
     );
-  };
+  }
+  const { locked } = props;
+  const value = traits.selectValue(control.descriptor);
+  const choices = selectableProviderOptionChoices(control.descriptor);
+  // An "Ultrathink:" prefix selects a level the column does not offer.
+  const shown = choices.some((option) => option.id === value);
   return (
-    <>
-      {effort ? renderControl(effort) : null}
-      {others.map(renderControl)}
-    </>
+    <div role="radiogroup" aria-label={descriptor.label} className="flex flex-col gap-0.5">
+      {locked ? (
+        <div className="px-2 pb-1.5 text-muted-foreground/80 text-xs">
+          {ULTRATHINK_IN_BODY_NOTE}
+        </div>
+      ) : null}
+      {choices.map((option, index) => (
+        <ColumnRow
+          key={option.id}
+          label={option.label}
+          selected={option.id === value}
+          tabStop={shown ? option.id === value : index === 0}
+          description={option.description}
+          isDefault={option.isDefault}
+          disabled={locked}
+          onPick={() => traits.changeSelect(control.descriptor, option.id)}
+        />
+      ))}
+    </div>
+  );
+}
+
+const OPTION_ROW = cn(COLUMN_ROW, "h-auto py-1");
+
+/** An option's name over its current value. */
+function OptionRowText(props: { label: string; value: string }) {
+  return (
+    <span className="flex min-w-0 flex-1 flex-col">
+      <span className="truncate text-muted-foreground text-xs">{props.label}</span>
+      <span className="truncate">{props.value}</span>
+    </span>
+  );
+}
+
+/**
+ * One select besides reasoning, such as an agent's session mode. It names the current choice and
+ * opens the rest beside the column, so any number of options leaves the levels in place.
+ */
+function OptionMenuRow(props: {
+  descriptor: SelectDescriptor;
+  traits: TraitsSelection;
+  /** Holds the column's tab stop when the model has no levels. */
+  tabStop: boolean;
+}) {
+  const { descriptor, traits } = props;
+  const [open, setOpen] = useState(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const choices = selectableProviderOptionChoices(descriptor);
+  const value = traits.selectValue(descriptor);
+  const current = choices.find((choice) => choice.id === value)?.label ?? "";
+  return (
+    <Menu
+      open={open}
+      // A modal menu would cover the picker, so the next click there would only close it.
+      modal={false}
+      onOpenChange={setOpen}
+      onOpenChangeComplete={(isOpen) => {
+        if (!isOpen) return;
+        const checked = popupRef.current?.querySelector<HTMLElement>(
+          '[role="menuitemradio"][aria-checked="true"]',
+        );
+        checked?.focus({ preventScroll: true });
+        checked?.scrollIntoView({ block: "nearest" });
+      }}
+    >
+      {/* No hover opening: an opened menu takes focus, which would steal typing from search. */}
+      <MenuTrigger
+        render={
+          <button
+            type="button"
+            data-effort-row
+            tabIndex={props.tabStop ? 0 : -1}
+            aria-label={`${descriptor.label}: ${current}`}
+            className={cn(OPTION_ROW, "data-popup-open:bg-foreground/[0.09]")}
+            onKeyDown={(event) => {
+              if (event.key !== "ArrowRight") return;
+              event.preventDefault();
+              event.stopPropagation();
+              setOpen(true);
+            }}
+          />
+        }
+      >
+        <OptionRowText label={descriptor.label} value={current} />
+        <ChevronRightIcon
+          aria-hidden="true"
+          className="-me-1 size-3.5 shrink-0 text-muted-foreground"
+        />
+      </MenuTrigger>
+      <MenuPopup
+        ref={popupRef}
+        side="right"
+        align="start"
+        sideOffset={6}
+        // A full-width column on phones leaves no room beside it, so fall below or above.
+        collisionAvoidance={{ fallbackAxisSide: "end" }}
+        className="max-w-72"
+        data-model-picker-option-menu
+        {...composerFloatingLayerProps}
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowLeft") return;
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen(false);
+        }}
+      >
+        <MenuRadioGroup
+          aria-label={descriptor.label}
+          value={value}
+          onValueChange={(next: string) => {
+            if (next !== value) traits.changeSelect(descriptor, next);
+          }}
+        >
+          {choices.map((choice) => (
+            <MenuRadioItem key={choice.id} value={choice.id} closeOnClick>
+              <span className="flex items-center gap-3">
+                <span className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate">{choice.label}</span>
+                  {choice.description ? (
+                    <span className="line-clamp-2 text-muted-foreground text-xs">
+                      {choice.description}
+                    </span>
+                  ) : null}
+                </span>
+                {choice.isDefault ? (
+                  <span className="text-muted-foreground/70 text-xs">Default</span>
+                ) : null}
+                <MenuRadioItemIndicator />
+              </span>
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}
+
+/** A two-state option toggles in place; a menu would add a click for nothing. */
+function OptionSwitchRow(props: {
+  descriptor: BooleanDescriptor;
+  traits: TraitsSelection;
+  tabStop: boolean;
+}) {
+  const { descriptor, traits } = props;
+  const checked = descriptor.currentValue === true;
+  return (
+    <label className={cn(OPTION_ROW, "has-focus-visible:bg-foreground/[0.09]")}>
+      <OptionRowText label={descriptor.label} value={checked ? "On" : "Off"} />
+      <Switch
+        size="sm"
+        checked={checked}
+        onCheckedChange={(next) => traits.changeBoolean(descriptor.id, next)}
+        aria-label={descriptor.label}
+        data-effort-row
+        tabIndex={props.tabStop ? 0 : -1}
+      />
+    </label>
   );
 }
 
@@ -303,20 +490,22 @@ function NoEffortRow() {
 export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | null }) {
   const picker = use(DockedPickerContext);
   const visibility = props.traits ? getTraitsSectionVisibility(props.traits) : null;
-  const effort =
+  const controls =
     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="text-muted-foreground">
+            {controls?.effort?.descriptor.label ?? (controls?.others.length ? "Options" : "Effort")}
+          </span>
           <span className="ms-auto min-w-0 truncate text-muted-foreground text-xs">
             {picker.modelLabel}
           </span>
@@ -325,7 +514,8 @@ export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | nul
       {/* 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}
+        // Capture, so Up and Down on an option row move rows instead of opening its menu.
+        onKeyDownCapture={moveBetweenRows}
       >
         {props.traits ? <EffortLevels traits={props.traits} /> : <NoEffortRow />}
       </div>
diff --git a/apps/web/src/components/chat/EffortGlyph.test.ts b/apps/web/src/components/chat/EffortGlyph.test.ts
index 712e4b796ba61..0b73e89e4f833 100644
--- a/apps/web/src/components/chat/EffortGlyph.test.ts
+++ b/apps/web/src/components/chat/EffortGlyph.test.ts
@@ -45,9 +45,11 @@ describe("resolveEffortGlyph", () => {
     });
   });
 
-  it("falls back to the word when the value is unknown or the scale has one level", () => {
+  it("falls back to the word when the value is unknown or the scale is too short or long", () => {
     expect(resolveEffortGlyph(claude, "unknown")).toBeNull();
     expect(resolveEffortGlyph(descriptor(["high"]), "high")).toBeNull();
+    const levels = Array.from({ length: 8 }, (_, index) => `level${index}`);
+    expect(resolveEffortGlyph(descriptor(levels), "level0")).toBeNull();
   });
 });
 
diff --git a/apps/web/src/components/chat/EffortGlyph.tsx b/apps/web/src/components/chat/EffortGlyph.tsx
index 39a46d2564901..7614e41c496a6 100644
--- a/apps/web/src/components/chat/EffortGlyph.tsx
+++ b/apps/web/src/components/chat/EffortGlyph.tsx
@@ -14,6 +14,8 @@ type SelectDescriptor = Extract<ProviderOptionDescriptor, { type: "select" }>;
 // Max is named too, so the full scale stops short of it.
 const NAMED_LEVELS = new Set(["ultracode", "max"]);
 const OFF_LEVELS = new Set(["off", "none"]);
+// More bars than this no longer fit the glyph's height in whole pixels.
+const MAX_BARS = 7;
 
 /**
  * Maps a reasoning select to bars: one per ordinary level, filled up to the current one, with an
@@ -22,7 +24,7 @@ const OFF_LEVELS = new Set(["off", "none"]);
 export function resolveEffortGlyph(descriptor: SelectDescriptor, current: string | null) {
   const special = new Set([...(descriptor.promptInjectedValues ?? []), ...NAMED_LEVELS]);
   const levels = descriptor.options.filter((option) => !special.has(option.id));
-  if (levels.length < 2 || current === null) return null;
+  if (levels.length < 2 || levels.length > MAX_BARS || current === null) return null;
   const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
   const count = startsAtOff ? levels.length - 1 : levels.length;
   if (special.has(current)) {
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 9928530b97f2a..e70c32b064a3e 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -67,7 +67,14 @@ export const ModelListRow = memo(function ModelListRow(props: {
         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">
+        <div
+          className="min-w-0 truncate text-sm font-normal leading-snug"
+          // Names the row in full on hover only when it is cut off.
+          onPointerEnter={(event) => {
+            const name = event.currentTarget;
+            name.title = name.scrollWidth > name.clientWidth ? getDisplayModelName(model) : "";
+          }}
+        >
           {getDisplayModelName(model)}
           {/* The logo is decorative, so name the provider for screen readers. */}
           <span className="sr-only">, {props.providerDisplayName}</span>
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 742a7cf6b09fd..f040df764cda9 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -366,6 +366,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   docked?: boolean;
   /** Right at the end of the search text moves into the popup's effort column. */
   onFocusEffort?: () => void;
+  /** Closes the list column, inside the popup's fixed height. */
+  listFooter?: ReactNode;
 }) {
   const {
     searchInputRef,
@@ -838,16 +840,17 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
         ref={pickerContentRef}
         className={cn(
           "relative flex w-screen max-w-90 flex-row overflow-hidden",
-          props.docked
-            ? "max-sm:h-56 max-sm:min-h-0! max-sm:w-full max-sm:max-w-none"
-            : "max-h-86.5",
+          props.docked ? "max-sm:h-56 max-sm:w-full max-sm:max-w-none" : "max-h-86.5",
         )}
+        // Docked, the popup sets the height; a minimum here would overflow short windows.
         style={
-          isSearching
-            ? { height: searchHeight }
-            : {
-                minHeight: `min(calc(var(--spacing) * ${tallestTabUnits + LIST_CHROME_UNITS} + 1px), calc(var(--spacing) * 86.5))`,
-              }
+          props.docked
+            ? undefined
+            : isSearching
+              ? { height: searchHeight }
+              : {
+                  minHeight: `min(calc(var(--spacing) * ${tallestTabUnits + LIST_CHROME_UNITS} + 1px), calc(var(--spacing) * 86.5))`,
+                }
         }
         data-model-picker-content="true"
       >
@@ -1072,6 +1075,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
               onRequestClose={onRequestClose}
               onOpenProviderSetup={onOpenProviderSetup}
             />
+            {props.listFooter}
           </div>
         </Combobox>
       </div>
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 1680e8d426b0b..848b1ee4532db 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -37,7 +37,9 @@ function lockBackgroundScroll(popup: HTMLElement | null) {
   const shouldAllowOverlayScroll = (target: EventTarget | null) => {
     return (
       target instanceof Element &&
-      target.closest("[data-model-picker-content], [data-model-picker-effort]")
+      target.closest(
+        "[data-model-picker-content], [data-model-picker-effort], [data-model-picker-option-menu]",
+      )
     );
   };
   const preventBackgroundWheel = (event: WheelEvent) => {
@@ -154,16 +156,22 @@ 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.
+   * to the column's first enabled option. 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 level =
+      column?.querySelector<HTMLElement>(
+        '[data-effort-level][aria-checked="true"]:not(:disabled)',
+      ) ?? column?.querySelector<HTMLElement>("[data-effort-level]:not(:disabled)");
+    // No aria-checked here: an On switch is checked but is not where focus belongs.
     const row =
-      first("[data-effort-level]") ?? (rows === "any" ? first("[data-effort-row]") : null);
+      level ??
+      (rows === "any"
+        ? column?.querySelector<HTMLElement>("[data-effort-row]:not(:disabled)")
+        : null);
     row?.focus({ preventScroll: true });
+    row?.scrollIntoView({ block: "nearest" });
     return row != null;
   };
   const openTarget = (target: "effort" | "permissions") => {
@@ -230,7 +238,11 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
 
   const triggerText = props.triggerLabel ?? multipleLabel ?? triggerTitle;
   const triggerTextProps = {
-    className: "min-w-0 flex-1 overflow-hidden truncate",
+    className: cn(
+      "min-w-0 flex-1 overflow-hidden truncate",
+      // Long names such as "Fusion (Claude Opus 5.5 Medium + SWE-2 High)" would push the composer.
+      props.isComposerOwned && "max-w-56",
+    ),
     "data-chat-provider-model-picker-label": "true",
   } as const;
 
@@ -262,7 +274,16 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
           : (props.getModelDisabledReason?.(instanceId, model) ?? null)
       }
       onInstanceModelChange={handleInstanceModelChange}
-      {...(docked ? { docked, onFocusEffort: () => void focusEffort("any") } : {})}
+      {...(docked
+        ? {
+            docked,
+            onFocusEffort: () => void focusEffort("any"),
+            // Inside the fixed height, so switching to or from a ChatGPT plan never resizes it.
+            ...(props.selectedModels === undefined
+              ? { listFooter: <ChatGptSharingControl provider={activeEntry?.snapshot ?? null} /> }
+              : {}),
+          }
+        : {})}
     />
   );
 
@@ -401,12 +422,14 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       >
         {props.effortColumn ? (
           <DockedPickerContext value={{ modelLabel: triggerTitle }}>
-            <div className="flex flex-col">
-              <div className="flex max-h-86.5 max-sm:max-h-none max-sm:flex-col">
+            <div className="flex max-h-(--available-height) flex-col">
+              {/* One fixed height, so a model with more options never resizes the popup. Short
+                  windows shrink it and keep the footer. */}
+              <div className="flex h-86.5 min-h-0 max-sm:h-auto 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"
+                  className="flex min-h-0 w-48 flex-col sm:shrink-0 border-l border-border/70 bg-muted/40 max-sm: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;
@@ -424,7 +447,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
         ) : (
           picker
         )}
-        {props.selectedModels === undefined ? (
+        {props.selectedModels === undefined && !docked ? (
           <ChatGptSharingControl provider={activeEntry?.snapshot ?? null} />
         ) : null}
       </PopoverPopup>
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 4639c0a3ec043..6c723c8bcb4e4 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -4,7 +4,7 @@ import {
   getTraitSelectChange,
   replaceDescriptorCurrentValue,
   selectableProviderOptionChoices,
-  REASONING_SELECT_DESCRIPTOR_IDS,
+  isReasoningSelect,
 } from "@t3tools/client-runtime/model-traits";
 import {
   type ModelSelection,
@@ -254,9 +254,7 @@ export function getReasoningTraitStep(input: {
     input.planModeEnabled,
   );
   if (selected.modelIsUnavailable || selected.ultrathinkInBodyText) return null;
-  const descriptor = selected.selectDescriptors.find((entry) =>
-    REASONING_SELECT_DESCRIPTOR_IDS.has(entry.id),
-  );
+  const descriptor = selected.selectDescriptors.find(isReasoningSelect);
   const choices = descriptor ? selectableProviderOptionChoices(descriptor) : [];
   if (!descriptor || choices.length < 2) return null;
   const isPrimary = descriptor.id === selected.primarySelectDescriptor?.id;
diff --git a/apps/web/src/components/chat/restingComposerControlsMeasurement.ts b/apps/web/src/components/chat/restingComposerControlsMeasurement.ts
index 50f6a34148dfb..474df488a6c6b 100644
--- a/apps/web/src/components/chat/restingComposerControlsMeasurement.ts
+++ b/apps/web/src/components/chat/restingComposerControlsMeasurement.ts
@@ -25,8 +25,18 @@ function providerModelPickerNaturalWidth(picker: HTMLElement): number {
   const style = getComputedStyle(picker);
   const label = picker.querySelector<HTMLElement>('[data-chat-provider-model-picker-label="true"]');
   const labelIsCollapsed = label?.clientWidth === 0 && getComputedStyle(label).flexGrow === "0";
+  // A label with its own max width, such as a long model name, never grows past it.
+  const labelMaxWidth = label ? Number.parseFloat(getComputedStyle(label).maxWidth) : Number.NaN;
   const hiddenLabelWidth =
-    label && !labelIsCollapsed ? Math.max(0, label.scrollWidth - label.clientWidth) : 0;
+    label && !labelIsCollapsed
+      ? Math.max(
+          0,
+          Math.min(
+            label.scrollWidth,
+            Number.isFinite(labelMaxWidth) ? labelMaxWidth : Number.POSITIVE_INFINITY,
+          ) - label.clientWidth,
+        )
+      : 0;
   const maxWidth = Number.parseFloat(style.maxWidth);
   const naturalWidth = Math.min(
     renderedWidth + hiddenLabelWidth,
diff --git a/apps/web/src/components/settings/ProviderModelsSection.tsx b/apps/web/src/components/settings/ProviderModelsSection.tsx
index 1bb6c9dde0d4a..3e39d6ccfc12b 100644
--- a/apps/web/src/components/settings/ProviderModelsSection.tsx
+++ b/apps/web/src/components/settings/ProviderModelsSection.tsx
@@ -5,7 +5,7 @@ import {
   type ProviderInstanceId,
   type ServerProviderModel,
 } from "@t3tools/contracts";
-import { REASONING_SELECT_DESCRIPTOR_IDS } from "@t3tools/client-runtime/model-traits";
+import { isReasoningControl } from "@t3tools/client-runtime/model-traits";
 import { type CustomModelDefinition, normalizeCustomModelSlug } from "@t3tools/shared/model";
 
 import { useStableCallback } from "../../hooks/useStableCallback";
@@ -31,9 +31,7 @@ const FILTER_THRESHOLD = 8;
 const PROVIDER_ALIAS_SLUGS = new Set(["default", "auto"]);
 
 function hasReasoningControl(model: ServerProviderModel): boolean {
-  return (model.capabilities?.optionDescriptors ?? []).some((descriptor) =>
-    REASONING_SELECT_DESCRIPTOR_IDS.has(descriptor.id),
-  );
+  return (model.capabilities?.optionDescriptors ?? []).some(isReasoningControl);
 }
 
 // Reasoning is the norm, so only its absence is labeled, and only when other models have it.
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 47ae92c241e15..1c199afe446f5 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -25,6 +25,7 @@ function MenuPopup({
   align = "center",
   alignOffset,
   side = "bottom",
+  collisionAvoidance,
   anchor,
   keepMounted = false,
   width = "default",
@@ -34,6 +35,7 @@ function MenuPopup({
   sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
   alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
   side?: MenuPrimitive.Positioner.Props["side"];
+  collisionAvoidance?: MenuPrimitive.Positioner.Props["collisionAvoidance"];
   anchor?: MenuPrimitive.Positioner.Props["anchor"];
   keepMounted?: boolean;
   width?: "default" | "content";
@@ -44,6 +46,7 @@ function MenuPopup({
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
+        collisionAvoidance={collisionAvoidance}
         className="z-[130]"
         data-slot="menu-positioner"
         render={renderClosingPositioner}
diff --git a/packages/client-runtime/src/modelTraits.ts b/packages/client-runtime/src/modelTraits.ts
index 23ada4ea11c46..b05f9226defb3 100644
--- a/packages/client-runtime/src/modelTraits.ts
+++ b/packages/client-runtime/src/modelTraits.ts
@@ -11,11 +11,25 @@ import {
 } from "@t3tools/shared/model";
 import { REASONING_EFFORT_OPTION_IDS } from "./state/threadExecution.ts";
 
-export const REASONING_SELECT_DESCRIPTOR_IDS: ReadonlySet<string> = new Set([
+const REASONING_DESCRIPTOR_IDS: ReadonlySet<string> = new Set([
   ...REASONING_EFFORT_OPTION_IDS,
   "thinking",
 ]);
 
+/** The model's reasoning control: a known effort id, or a select its agent marked as reasoning. */
+export function isReasoningControl(descriptor: ProviderOptionDescriptor): boolean {
+  return (
+    (descriptor.type === "select" && descriptor.role === "reasoning") ||
+    REASONING_DESCRIPTOR_IDS.has(descriptor.id)
+  );
+}
+
+export function isReasoningSelect(
+  descriptor: ProviderOptionDescriptor,
+): descriptor is Extract<ProviderOptionDescriptor, { type: "select" }> {
+  return descriptor.type === "select" && isReasoningControl(descriptor);
+}
+
 export function replaceDescriptorCurrentValue(
   descriptors: ReadonlyArray<ProviderOptionDescriptor>,
   descriptorId: string,
@@ -106,8 +120,6 @@ export function buildTraitsTriggerDisplay(input: {
   label: string;
   /** "Fast" or "Ultrafast" when a speed option is on. */
   speedLabel: string | null;
-  /** Labels other than reasoning and speed, such as context window or thinking. */
-  otherLabels: ReadonlyArray<string>;
 } {
   let fastModeFallbackLabel: string | null = null;
   let speedLabel: string | null = null;
@@ -154,20 +166,15 @@ export function buildTraitsTriggerDisplay(input: {
               input.reportedModelSelection,
             );
     if (typeof label === "string" && label.length > 0) {
-      if (
-        reasoningLabelIndex === -1 &&
-        descriptor.type === "select" &&
-        REASONING_SELECT_DESCRIPTOR_IDS.has(descriptor.id)
-      ) {
+      if (reasoningLabelIndex === -1 && isReasoningSelect(descriptor)) {
         reasoningLabelIndex = labels.length;
       }
       labels.push(label);
     }
   }
 
-  const otherLabels = labels.filter((_, index) => index !== reasoningLabelIndex);
   if (labels.length === 0 && fastModeFallbackLabel !== null) {
-    return { label: fastModeFallbackLabel, speedLabel, otherLabels };
+    return { label: fastModeFallbackLabel, speedLabel };
   }
   if (speedLabel) {
     if (reasoningLabelIndex >= 0) {
@@ -176,5 +183,5 @@ export function buildTraitsTriggerDisplay(input: {
       labels.push(speedLabel);
     }
   }
-  return { label: labels.join(" · "), speedLabel, otherLabels };
+  return { label: labels.join(" · "), speedLabel };
 }
diff --git a/packages/contracts/src/model.ts b/packages/contracts/src/model.ts
index 87990e7f542f7..1a04cc61c887a 100644
--- a/packages/contracts/src/model.ts
+++ b/packages/contracts/src/model.ts
@@ -27,6 +27,8 @@ export const SelectProviderOptionDescriptor = Schema.Struct({
   options: Schema.Array(ProviderOptionChoice),
   currentValue: Schema.optional(TrimmedNonEmptyString),
   promptInjectedValues: Schema.optional(Schema.Array(TrimmedNonEmptyString)),
+  /** Marks the reasoning control when its id is an agent's own, such as an ACP `thought_level`. */
+  role: Schema.optional(Schema.Literal("reasoning")),
 });
 export type SelectProviderOptionDescriptor = typeof SelectProviderOptionDescriptor.Type;
 
diff --git a/packages/provider-acp/src/server/sessionConfig.test.ts b/packages/provider-acp/src/server/sessionConfig.test.ts
index 308ba1db02ccf..ceb6ceb92783a 100644
--- a/packages/provider-acp/src/server/sessionConfig.test.ts
+++ b/packages/provider-acp/src/server/sessionConfig.test.ts
@@ -50,6 +50,7 @@ describe("acpProviderOptionDescriptors", () => {
           { id: "medium", label: "Medium", description: "Balanced" },
         ],
         currentValue: "medium",
+        role: "reasoning",
       },
     ]);
   });
diff --git a/packages/provider-acp/src/server/sessionConfig.ts b/packages/provider-acp/src/server/sessionConfig.ts
index 46269bb5e0d13..b79fdaebe245d 100644
--- a/packages/provider-acp/src/server/sessionConfig.ts
+++ b/packages/provider-acp/src/server/sessionConfig.ts
@@ -102,6 +102,7 @@ export function acpProviderOptionDescriptors(input: {
       ...(currentValue && choices.some((choice) => choice.id === currentValue)
         ? { currentValue }
         : {}),
+      ...(option.category === "thought_level" ? { role: "reasoning" as const } : {}),
     });
     if (descriptors.length === MAX_OPTION_DESCRIPTORS) return descriptors;
   }
diff --git a/packages/provider-grok/src/server/status.ts b/packages/provider-grok/src/server/status.ts
index c634c5b80c74e..67908d12385e7 100644
--- a/packages/provider-grok/src/server/status.ts
+++ b/packages/provider-grok/src/server/status.ts
@@ -126,6 +126,8 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+const GROK_EFFORT_RANK = ["none", "minimal", "low", "medium", "high", "xhigh", "max"];
+
 function grokReasoningOptionsFromModel(model: EffectAcpSchema.ModelInfo): {
   readonly options: ReadonlyArray<{
     value: string;
@@ -183,6 +185,11 @@ function grokReasoningOptionsFromModel(model: EffectAcpSchema.ModelInfo): {
   const selectedDefault =
     advertisedDefaults.find((option) => option.value === currentValue)?.value ??
     advertisedDefaults[0]?.value;
+  // Grok advertises its strongest level first; pickers and effort bars read lowest to highest.
+  const rank = (option: { value: string }) => GROK_EFFORT_RANK.indexOf(option.value);
+  if (options.every((option) => rank(option) >= 0)) {
+    options.sort((left, right) => rank(left) - rank(right));
+  }
   return {
     options: options.map(({ value, label, description }) => ({
       value,