From ef2670dbd2494b30740e569b522c8c6f0e06a55a Mon Sep 17 00:00:00 2001
From: Pixel Perfect <me@pixp.cc>
Date: Thu, 29 Oct 2026 15:04:19 -0700
Subject: [PATCH 1/4] fix(web): make composer reasoning bars readable

---
 .../src/components/chat/EffortGlyph.test.ts   | 44 +++++++++++++---
 apps/web/src/components/chat/EffortGlyph.tsx  | 50 ++++++++++++-------
 apps/web/src/components/chat/TraitsPicker.tsx | 27 ++++++----
 3 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/components/chat/EffortGlyph.test.ts b/apps/web/src/components/chat/EffortGlyph.test.ts
index 712e4b796ba61..39f138a66c057 100644
--- a/apps/web/src/components/chat/EffortGlyph.test.ts
+++ b/apps/web/src/components/chat/EffortGlyph.test.ts
@@ -16,33 +16,63 @@ describe("resolveEffortGlyph", () => {
     ["ultrathink"],
   );
 
-  it("fills bars up to the current level and leaves max and workflow levels off the scale", () => {
+  it("fills bars up to the current level and leaves named modes off the scale", () => {
     expect(resolveEffortGlyph(claude, "xhigh")).toEqual({
-      count: 4,
+      count: 5,
       filled: 4,
       special: null,
       label: "Xhigh",
     });
   });
 
-  it("names max instead of drawing it", () => {
-    expect(resolveEffortGlyph(claude, "max")?.special).toBe("Max");
+  it("includes max in the scale, including DeepSeek's three enabled levels", () => {
+    expect(resolveEffortGlyph(claude, "max")).toMatchObject({
+      count: 5,
+      filled: 5,
+      special: null,
+    });
+    const deepseek = descriptor(["none", "low", "high", "max"]);
+    expect(resolveEffortGlyph(deepseek, "none")?.filled).toBe(0);
+    expect(resolveEffortGlyph(deepseek, "high")).toMatchObject({ count: 3, filled: 2 });
+    expect(resolveEffortGlyph(deepseek, "max")).toMatchObject({ count: 3, filled: 3 });
   });
 
-  it("names Ultracode and Ultrathink instead of drawing a level", () => {
+  it("names Ultra, Ultracode and Ultrathink instead of drawing a level", () => {
+    expect(resolveEffortGlyph(descriptor(["low", "high", "ultra"]), "ultra")?.special).toBe(
+      "Ultra",
+    );
     expect(resolveEffortGlyph(claude, "ultracode")?.special).toBe("Ultracode");
     expect(resolveEffortGlyph(claude, "ultrathink")?.special).toBe("Ultrathink");
   });
 
   it("draws the lowest level as one bar, and an off level as none", () => {
-    expect(resolveEffortGlyph(claude, "low")).toMatchObject({ count: 4, filled: 1 });
-    expect(resolveEffortGlyph(claude, "medium")).toMatchObject({ count: 4, filled: 2 });
+    expect(resolveEffortGlyph(claude, "low")).toMatchObject({ count: 5, filled: 1 });
+    expect(resolveEffortGlyph(claude, "medium")).toMatchObject({ count: 5, filled: 2 });
     expect(resolveEffortGlyph(descriptor(["off", "low", "high"]), "off")).toEqual({
       count: 2,
       filled: 0,
       special: null,
       label: "Off",
     });
+    expect(resolveEffortGlyph(descriptor(["off", "on"]), "off")).toMatchObject({
+      count: 3,
+      filled: 0,
+    });
+    expect(resolveEffortGlyph(descriptor(["off", "on"]), "on")).toMatchObject({
+      count: 3,
+      filled: 3,
+    });
+  });
+
+  it.each([true, false])("draws boolean thinking with every bar on or off: %s", (enabled) => {
+    expect(
+      resolveEffortGlyph({ id: "thinking", label: "Thinking", type: "boolean" }, enabled),
+    ).toEqual({
+      count: 3,
+      filled: enabled ? 3 : 0,
+      special: null,
+      label: `Thinking ${enabled ? "On" : "Off"}`,
+    });
   });
 
   it("falls back to the word when the value is unknown or the scale has one level", () => {
diff --git a/apps/web/src/components/chat/EffortGlyph.tsx b/apps/web/src/components/chat/EffortGlyph.tsx
index 2e033c6caa8da..7da9e27af14da 100644
--- a/apps/web/src/components/chat/EffortGlyph.tsx
+++ b/apps/web/src/components/chat/EffortGlyph.tsx
@@ -2,28 +2,39 @@ import type { ProviderOptionDescriptor } from "@t3tools/contracts";
 
 import type { ComposerControlSize } from "./ComposerControl";
 
-const GLYPH_HEIGHT_SM = 14;
-const GLYPH_HEIGHT_XS = 12;
+const GLYPH_HEIGHT_SM = 18;
+const GLYPH_HEIGHT_XS = 16;
 // Bars stop this far above the box's bottom, which puts their flat base on the text baseline.
 const BASELINE_INSET = 2;
 
-type SelectDescriptor = Extract<ProviderOptionDescriptor, { type: "select" }>;
-
-// Ultracode changes the workflow, not only intensity, so it keeps its name like Ultrathink.
-// Max is named too, so the full scale stops short of it.
-const NAMED_LEVELS = new Set(["ultracode", "max"]);
+const NAMED_LEVELS = new Set(["ultra", "ultracode", "ultrathink"]);
 const OFF_LEVELS = new Set(["off", "none"]);
 
 /**
- * Maps a reasoning select to bars: one per ordinary level, filled up to the current one, with an
- * off level as none filled. Max, prompt-injected and workflow levels are named instead of drawn.
+ * One bar per reasoning level; binary thinking lights the whole scale or none of it.
+ * Prompt-injected and named modes keep their labels.
  */
-export function resolveEffortGlyph(descriptor: SelectDescriptor, current: string | null) {
+export function resolveEffortGlyph(
+  descriptor: ProviderOptionDescriptor,
+  current: string | boolean | null,
+) {
+  if (descriptor.type === "boolean") {
+    return typeof current === "boolean"
+      ? {
+          count: 3,
+          filled: current ? 3 : 0,
+          special: null,
+          label: `${descriptor.label} ${current ? "On" : "Off"}`,
+        }
+      : null;
+  }
+  if (typeof current !== "string") return 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) return null;
   const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
-  const count = startsAtOff ? levels.length - 1 : levels.length;
+  const binary = startsAtOff && levels.length === 2;
+  const count = binary ? 3 : startsAtOff ? levels.length - 1 : levels.length;
   if (special.has(current)) {
     const label = descriptor.options.find((option) => option.id === current)?.label ?? current;
     return { count, filled: count, special: label, label };
@@ -32,7 +43,7 @@ export function resolveEffortGlyph(descriptor: SelectDescriptor, current: string
   if (index < 0) return null;
   return {
     count,
-    filled: startsAtOff ? index : index + 1,
+    filled: binary ? index * count : startsAtOff ? index : index + 1,
     special: null,
     label: levels[index]!.label,
   };
@@ -51,8 +62,11 @@ export function effortBarHeights(count: number, maxBar: number): number[] {
  */
 export function EffortGlyph(props: { count: number; filled: number; size?: ComposerControlSize }) {
   const height = props.size === "xs" ? GLYPH_HEIGHT_XS : GLYPH_HEIGHT_SM;
-  const step = 4;
-  const width = step * props.count - 2;
+  const step = 5;
+  const barWidth = 3;
+  const barsWidth = step * (props.count - 1) + barWidth;
+  const width = Math.max(24, barsWidth);
+  const inset = Math.floor((width - barsWidth) / 2);
   const maxBar = height - BASELINE_INSET;
   return (
     <svg
@@ -68,16 +82,16 @@ export function EffortGlyph(props: { count: number; filled: number; size?: Compo
       data-composer-control-icon
     >
       {effortBarHeights(props.count, maxBar).map((barHeight, index) => {
-        const x = index * step;
+        const x = inset + index * step;
         return (
           <rect
             key={x}
             x={x}
             y={maxBar - barHeight}
-            width={2}
+            width={barWidth}
             height={barHeight}
             fill="currentColor"
-            opacity={index < props.filled ? 1 : 0.4}
+            opacity={index < props.filled ? 1 : 0.25}
           />
         );
       })}
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 79a29d293dc49..82665ec105a8b 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -20,6 +20,7 @@ import type { EffortDisplay } from "@t3tools/contracts/settings";
 import {
   buildProviderOptionSelectionsFromDescriptors,
   getProviderOptionCurrentLabel,
+  getProviderOptionCurrentValue,
   getProviderOptionDescriptors,
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
@@ -559,7 +560,7 @@ export const TraitsPicker = memo(function TraitsPicker({
   const composerFloatingLayerProps = useComposerMenuProps();
   const [isMenuOpen, setIsMenuOpen] = useComposerMenuState(hidden || disabled);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const { descriptors, primarySelectDescriptor, ultrathinkPromptControlled } =
+  const { descriptors, primarySelectDescriptor, thinkingDescriptor, ultrathinkPromptControlled } =
     getTraitsSectionVisibility({
       provider,
       models,
@@ -600,21 +601,27 @@ export const TraitsPicker = memo(function TraitsPicker({
   const triggerDescription = isComposerOwned
     ? [`Effort: ${triggerLabel}`, speedLabel, extraMenuHint].filter(Boolean).join(" · ")
     : triggerLabel;
+  const reasoningDescriptor =
+    primarySelectDescriptor && REASONING_SELECT_DESCRIPTOR_IDS.has(primarySelectDescriptor.id)
+      ? primarySelectDescriptor
+      : thinkingDescriptor;
   const effortGlyph =
-    isComposerOwned &&
-    primarySelectDescriptor &&
-    REASONING_SELECT_DESCRIPTOR_IDS.has(primarySelectDescriptor.id)
+    isComposerOwned && reasoningDescriptor
       ? resolveEffortGlyph(
-          primarySelectDescriptor,
+          reasoningDescriptor,
           ultrathinkPromptControlled
             ? "ultrathink"
-            : getDescriptorStringValue(
-                primarySelectDescriptor,
+            : (getProviderOptionCurrentValue(
+                reasoningDescriptor,
                 instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null,
                 reportedModelSelection,
-              ),
+              ) ?? null),
         )
       : null;
+  const secondaryLabels =
+    reasoningDescriptor?.type === "boolean" && effortGlyph
+      ? otherLabels.filter((label) => label !== effortGlyph.label)
+      : otherLabels;
   // 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
@@ -688,7 +695,7 @@ export const TraitsPicker = memo(function TraitsPicker({
               {speedLabel === "Fast" || speedLabel === "Ultrafast" ? (
                 <FastBolt ultra={speedLabel === "Ultrafast"} />
               ) : null}
-              {otherLabels.length > 0 ? (
+              {secondaryLabels.length > 0 ? (
                 <span
                   aria-hidden="true"
                   // A label, so icon-only footers drop it; compacted rows drop it before the model.
@@ -696,7 +703,7 @@ export const TraitsPicker = memo(function TraitsPicker({
                   data-composer-secondary-trait
                   className="max-w-24 truncate text-xs"
                 >
-                  {otherLabels.join(" · ")}
+                  {secondaryLabels.join(" · ")}
                 </span>
               ) : null}
             </span>

From 17c4103719920f974cbc9adf8d936c3c1421cf3b Mon Sep 17 00:00:00 2001
From: Pixel Perfect <me@pixp.cc>
Date: Thu, 29 Oct 2026 15:12:51 -0700
Subject: [PATCH 2/4] fix(web): clarify binary thinking and short effort scales

---
 .../src/components/chat/EffortGlyph.test.ts   | 38 ++++++++++---------
 apps/web/src/components/chat/EffortGlyph.tsx  | 29 +++++++-------
 apps/web/src/components/chat/TraitsPicker.tsx | 30 ++++++++++++---
 3 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/chat/EffortGlyph.test.ts b/apps/web/src/components/chat/EffortGlyph.test.ts
index 39f138a66c057..9ecc1a5677223 100644
--- a/apps/web/src/components/chat/EffortGlyph.test.ts
+++ b/apps/web/src/components/chat/EffortGlyph.test.ts
@@ -20,7 +20,7 @@ describe("resolveEffortGlyph", () => {
     expect(resolveEffortGlyph(claude, "xhigh")).toEqual({
       count: 5,
       filled: 4,
-      special: null,
+      kind: "bars",
       label: "Xhigh",
     });
   });
@@ -29,20 +29,25 @@ describe("resolveEffortGlyph", () => {
     expect(resolveEffortGlyph(claude, "max")).toMatchObject({
       count: 5,
       filled: 5,
-      special: null,
+      kind: "bars",
     });
     const deepseek = descriptor(["none", "low", "high", "max"]);
-    expect(resolveEffortGlyph(deepseek, "none")?.filled).toBe(0);
+    expect(resolveEffortGlyph(deepseek, "none")).toMatchObject({ kind: "bars", filled: 0 });
     expect(resolveEffortGlyph(deepseek, "high")).toMatchObject({ count: 3, filled: 2 });
     expect(resolveEffortGlyph(deepseek, "max")).toMatchObject({ count: 3, filled: 3 });
   });
 
   it("names Ultra, Ultracode and Ultrathink instead of drawing a level", () => {
-    expect(resolveEffortGlyph(descriptor(["low", "high", "ultra"]), "ultra")?.special).toBe(
-      "Ultra",
-    );
-    expect(resolveEffortGlyph(claude, "ultracode")?.special).toBe("Ultracode");
-    expect(resolveEffortGlyph(claude, "ultrathink")?.special).toBe("Ultrathink");
+    for (const [id, label] of [
+      ["ultra", "Ultra"],
+      ["ultracode", "Ultracode"],
+      ["ultrathink", "Ultrathink"],
+    ] as const) {
+      expect(resolveEffortGlyph(descriptor(["low", "high", id]), id)).toEqual({
+        kind: "label",
+        label,
+      });
+    }
   });
 
   it("draws the lowest level as one bar, and an off level as none", () => {
@@ -51,26 +56,25 @@ describe("resolveEffortGlyph", () => {
     expect(resolveEffortGlyph(descriptor(["off", "low", "high"]), "off")).toEqual({
       count: 2,
       filled: 0,
-      special: null,
+      kind: "bars",
       label: "Off",
     });
     expect(resolveEffortGlyph(descriptor(["off", "on"]), "off")).toMatchObject({
-      count: 3,
-      filled: 0,
+      kind: "thinking",
+      enabled: false,
     });
     expect(resolveEffortGlyph(descriptor(["off", "on"]), "on")).toMatchObject({
-      count: 3,
-      filled: 3,
+      kind: "thinking",
+      enabled: true,
     });
   });
 
-  it.each([true, false])("draws boolean thinking with every bar on or off: %s", (enabled) => {
+  it.each([true, false])("distinguishes binary thinking from an effort scale: %s", (enabled) => {
     expect(
       resolveEffortGlyph({ id: "thinking", label: "Thinking", type: "boolean" }, enabled),
     ).toEqual({
-      count: 3,
-      filled: enabled ? 3 : 0,
-      special: null,
+      kind: "thinking",
+      enabled,
       label: `Thinking ${enabled ? "On" : "Off"}`,
     });
   });
diff --git a/apps/web/src/components/chat/EffortGlyph.tsx b/apps/web/src/components/chat/EffortGlyph.tsx
index 7da9e27af14da..c0327d183747f 100644
--- a/apps/web/src/components/chat/EffortGlyph.tsx
+++ b/apps/web/src/components/chat/EffortGlyph.tsx
@@ -11,7 +11,7 @@ const NAMED_LEVELS = new Set(["ultra", "ultracode", "ultrathink"]);
 const OFF_LEVELS = new Set(["off", "none"]);
 
 /**
- * One bar per reasoning level; binary thinking lights the whole scale or none of it.
+ * One bar per reasoning level; binary thinking has a distinct icon.
  * Prompt-injected and named modes keep their labels.
  */
 export function resolveEffortGlyph(
@@ -21,9 +21,8 @@ export function resolveEffortGlyph(
   if (descriptor.type === "boolean") {
     return typeof current === "boolean"
       ? {
-          count: 3,
-          filled: current ? 3 : 0,
-          special: null,
+          kind: "thinking" as const,
+          enabled: current,
           label: `${descriptor.label} ${current ? "On" : "Off"}`,
         }
       : null;
@@ -32,20 +31,22 @@ export function resolveEffortGlyph(
   const special = new Set([...(descriptor.promptInjectedValues ?? []), ...NAMED_LEVELS]);
   const levels = descriptor.options.filter((option) => !special.has(option.id));
   if (levels.length < 2) return null;
-  const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
-  const binary = startsAtOff && levels.length === 2;
-  const count = binary ? 3 : startsAtOff ? levels.length - 1 : levels.length;
   if (special.has(current)) {
     const label = descriptor.options.find((option) => option.id === current)?.label ?? current;
-    return { count, filled: count, special: label, label };
+    return { kind: "label" as const, label };
   }
   const index = levels.findIndex((option) => option.id === current);
   if (index < 0) return null;
+  const label = levels[index]!.label;
+  const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
+  if (startsAtOff && levels.length === 2) {
+    return { kind: "thinking" as const, enabled: index > 0, label };
+  }
   return {
-    count,
-    filled: binary ? index * count : startsAtOff ? index : index + 1,
-    special: null,
-    label: levels[index]!.label,
+    kind: "bars" as const,
+    count: startsAtOff ? levels.length - 1 : levels.length,
+    filled: startsAtOff ? index : index + 1,
+    label,
   };
 }
 
@@ -62,8 +63,8 @@ export function effortBarHeights(count: number, maxBar: number): number[] {
  */
 export function EffortGlyph(props: { count: number; filled: number; size?: ComposerControlSize }) {
   const height = props.size === "xs" ? GLYPH_HEIGHT_XS : GLYPH_HEIGHT_SM;
-  const step = 5;
-  const barWidth = 3;
+  const barWidth = props.count <= 3 ? 5 : 3;
+  const step = barWidth + 2;
   const barsWidth = step * (props.count - 1) + barWidth;
   const width = Math.max(24, barsWidth);
   const inset = Math.floor((width - barsWidth) / 2);
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 82665ec105a8b..6052907ae7b3d 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -25,8 +25,8 @@ import {
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
 } from "@t3tools/shared/model";
-import { memo, type ReactNode, useRef } from "react";
-import { GaugeIcon, ZapIcon } from "lucide-react";
+import { memo, type ReactNode, type SVGProps, useRef } from "react";
+import { BrainIcon, GaugeIcon, ZapIcon } from "lucide-react";
 import {
   Menu,
   MenuGroup,
@@ -512,6 +512,14 @@ export const TraitsMenuContent = memo(function TraitsMenuContentImpl({
   );
 });
 
+function BrainOffIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <BrainIcon {...props}>
+      <path d="m3 3 18 18" />
+    </BrainIcon>
+  );
+}
+
 /** 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) {
@@ -625,10 +633,14 @@ export const TraitsPicker = memo(function TraitsPicker({
   // 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))
+    ? effortGlyph.kind === "label" || effortDisplay === "label"
+      ? effortGlyph.label
+      : null
     : isComposerOwned
       ? triggerLabel
       : null;
+  const EffortIcon =
+    effortGlyph?.kind === "thinking" ? (effortGlyph.enabled ? BrainIcon : BrainOffIcon) : GaugeIcon;
 
   return (
     <Menu
@@ -674,14 +686,22 @@ export const TraitsPicker = memo(function TraitsPicker({
         >
           {effortGlyph ? (
             <span className="flex items-center gap-1.5">
-              {effortWord === null ? (
+              {effortWord === null && effortGlyph.kind === "thinking" ? (
+                <span className="flex w-6 shrink-0 items-center justify-center">
+                  <ComposerControlIcon
+                    icon={EffortIcon}
+                    size={size}
+                    className={cn("text-current", size === "xs" ? "size-4" : "size-4.5")}
+                  />
+                </span>
+              ) : effortWord === null && effortGlyph.kind === "bars" ? (
                 <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
+                  <EffortIcon
                     aria-hidden="true"
                     data-composer-control-compact-icon
                     className="invisible absolute size-3.5"

From 3c4f7c5e4428fce3cbd07395c86f9048bdc1a2fa Mon Sep 17 00:00:00 2001
From: Pixel Perfect <me@pixp.cc>
Date: Thu, 29 Oct 2026 15:20:22 -0700
Subject: [PATCH 3/4] fix(client): keep thinking indicators consistent

---
 .../src/components/chat/EffortGlyph.test.ts   | 21 ++++++----
 apps/web/src/components/chat/EffortGlyph.tsx  |  6 +--
 .../client-runtime/src/modelTraits.test.ts    | 41 +++++++++++++++++++
 packages/client-runtime/src/modelTraits.ts    |  2 +-
 4 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 packages/client-runtime/src/modelTraits.test.ts

diff --git a/apps/web/src/components/chat/EffortGlyph.test.ts b/apps/web/src/components/chat/EffortGlyph.test.ts
index 9ecc1a5677223..a4a5cf61a8644 100644
--- a/apps/web/src/components/chat/EffortGlyph.test.ts
+++ b/apps/web/src/components/chat/EffortGlyph.test.ts
@@ -59,14 +59,19 @@ describe("resolveEffortGlyph", () => {
       kind: "bars",
       label: "Off",
     });
-    expect(resolveEffortGlyph(descriptor(["off", "on"]), "off")).toMatchObject({
-      kind: "thinking",
-      enabled: false,
-    });
-    expect(resolveEffortGlyph(descriptor(["off", "on"]), "on")).toMatchObject({
-      kind: "thinking",
-      enabled: true,
-    });
+    for (const ids of [
+      ["off", "on"],
+      ["on", "off"],
+    ]) {
+      expect(resolveEffortGlyph(descriptor(ids), "off")).toMatchObject({
+        kind: "thinking",
+        enabled: false,
+      });
+      expect(resolveEffortGlyph(descriptor(ids), "on")).toMatchObject({
+        kind: "thinking",
+        enabled: true,
+      });
+    }
   });
 
   it.each([true, false])("distinguishes binary thinking from an effort scale: %s", (enabled) => {
diff --git a/apps/web/src/components/chat/EffortGlyph.tsx b/apps/web/src/components/chat/EffortGlyph.tsx
index c0327d183747f..dccd6c051fe2b 100644
--- a/apps/web/src/components/chat/EffortGlyph.tsx
+++ b/apps/web/src/components/chat/EffortGlyph.tsx
@@ -38,10 +38,10 @@ export function resolveEffortGlyph(
   const index = levels.findIndex((option) => option.id === current);
   if (index < 0) return null;
   const label = levels[index]!.label;
-  const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
-  if (startsAtOff && levels.length === 2) {
-    return { kind: "thinking" as const, enabled: index > 0, label };
+  if (levels.length === 2 && levels.some((level) => OFF_LEVELS.has(level.id))) {
+    return { kind: "thinking" as const, enabled: !OFF_LEVELS.has(current), label };
   }
+  const startsAtOff = OFF_LEVELS.has(levels[0]!.id);
   return {
     kind: "bars" as const,
     count: startsAtOff ? levels.length - 1 : levels.length,
diff --git a/packages/client-runtime/src/modelTraits.test.ts b/packages/client-runtime/src/modelTraits.test.ts
new file mode 100644
index 0000000000000..068277dbe3317
--- /dev/null
+++ b/packages/client-runtime/src/modelTraits.test.ts
@@ -0,0 +1,41 @@
+import { ProviderDriverKind, ProviderInstanceId } from "@t3tools/contracts";
+import { getProviderOptionDescriptors } from "@t3tools/shared/model";
+import { expect, it } from "vite-plus/test";
+
+import { buildTraitsTriggerDisplay } from "./modelTraits.ts";
+
+it.each([
+  { reported: true, explicit: undefined, expected: true },
+  { reported: false, explicit: undefined, expected: false },
+  { reported: true, explicit: false, expected: false },
+  { reported: false, explicit: true, expected: true },
+])("resolves thinking labels from reported $reported and explicit $explicit", (input) => {
+  const modelSelection = {
+    instanceId: ProviderInstanceId.make("claude"),
+    model: "thinking-model",
+    options: input.explicit === undefined ? [] : [{ id: "thinking", value: input.explicit }],
+  };
+  const descriptors = getProviderOptionDescriptors({
+    caps: {
+      optionDescriptors: [
+        { id: "thinking", label: "Thinking", type: "boolean", currentValue: !input.reported },
+      ],
+    },
+    selections: modelSelection.options,
+  });
+  const label = `Thinking ${input.expected ? "On" : "Off"}`;
+
+  expect(
+    buildTraitsTriggerDisplay({
+      provider: ProviderDriverKind.make("claudeAgent"),
+      descriptors,
+      primarySelectDescriptorId: null,
+      ultrathinkPromptControlled: false,
+      modelSelection,
+      reportedModelSelection: {
+        ...modelSelection,
+        options: [{ id: "thinking", value: input.reported }],
+      },
+    }),
+  ).toEqual({ label, speedLabel: null, otherLabels: [label] });
+});
diff --git a/packages/client-runtime/src/modelTraits.ts b/packages/client-runtime/src/modelTraits.ts
index 734a84c468aa0..35e95d03e1cbb 100644
--- a/packages/client-runtime/src/modelTraits.ts
+++ b/packages/client-runtime/src/modelTraits.ts
@@ -155,7 +155,7 @@ export function buildTraitsTriggerDisplay(input: {
       input.ultrathinkPromptControlled && descriptor.id === input.primarySelectDescriptorId
         ? "Ultrathink"
         : descriptor.type === "boolean"
-          ? `${descriptor.label} ${descriptor.currentValue === true ? "On" : "Off"}`
+          ? `${descriptor.label} ${getProviderOptionCurrentValue(descriptor, input.modelSelection, input.reportedModelSelection) === true ? "On" : "Off"}`
           : getProviderOptionCurrentLabel(
               descriptor,
               input.modelSelection,

From 1bb66c22e026cc21eeeb22291ce9583058bde835 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Sat, 31 Oct 2026 23:24:10 +0000
Subject: [PATCH 4/4] fix(web): align thinking picker with resolved provider
 state

---
 apps/web/src/components/chat/ComposerModelEffort.tsx | 4 ++--
 apps/web/src/components/chat/TraitsPicker.tsx        | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index f9df8ea90508a..07a8e2b402717 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -263,7 +263,7 @@ function EffortLevels(props: { traits: TraitsSelectionInput }) {
             <ColumnRow
               key={String(value)}
               label={value ? "On" : "Off"}
-              selected={(control.descriptor.currentValue === true) === value}
+              selected={traits.booleanValue(control.descriptor) === value}
               level={isEffort}
               onPick={() => traits.changeBoolean(descriptor.id, value)}
             />
@@ -412,7 +412,7 @@ function SpeedControl(props: { traits: TraitsSelectionInput }) {
           ? ([false, true] as const).map((value) => (
               <SpeedSegment
                 key={String(value)}
-                checked={(fastToggle.currentValue === true) === value}
+                checked={traits.booleanValue(fastToggle) === value}
                 label={value ? "Fast" : "Standard"}
                 onPick={() => traits.changeBoolean(fastToggle.id, value)}
               />
diff --git a/apps/web/src/components/chat/TraitsPicker.tsx b/apps/web/src/components/chat/TraitsPicker.tsx
index 4639c0a3ec043..9234d8c40c4d3 100644
--- a/apps/web/src/components/chat/TraitsPicker.tsx
+++ b/apps/web/src/components/chat/TraitsPicker.tsx
@@ -18,6 +18,7 @@ import {
 import {
   buildProviderOptionSelectionsFromDescriptors,
   getProviderOptionCurrentLabel,
+  getProviderOptionCurrentValue,
   getProviderOptionDescriptors,
   isClaudeUltrathinkPrompt,
   normalizeModelSlug,
@@ -347,6 +348,8 @@ export function useTraitsSelection({
       selected.ultrathinkPromptControlled && descriptor.id === selected.primarySelectDescriptor?.id
         ? "ultrathink"
         : (getDescriptorStringValue(descriptor, modelSelection, reportedModelSelection) ?? ""),
+    booleanValue: (descriptor: Extract<ProviderOptionDescriptor, { type: "boolean" }>) =>
+      getProviderOptionCurrentValue(descriptor, modelSelection, reportedModelSelection) === true,
     currentLabel: (descriptor: ProviderOptionDescriptor) =>
       getProviderOptionCurrentLabel(descriptor, modelSelection, reportedModelSelection),
     changeSelect: (
@@ -463,7 +466,7 @@ const TraitsMenuContent = memo(function TraitsMenuContentImpl(props: TraitsSelec
               {descriptor.label}
             </div>
             <MenuRadioGroup
-              value={descriptor.currentValue === true ? "on" : "off"}
+              value={traits.booleanValue(descriptor) ? "on" : "off"}
               onValueChange={(value) => traits.changeBoolean(descriptor.id, value === "on")}
             >
               {(["on", "off"] as const).map((value) => (