Skip to content

fix(web): match effort gauge position to reasoning level #25354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
PixPMusic wants to merge 6 commits into
base: main
Choose a base branch
from
+141 −6
Draft

fix(web): match effort gauge position to reasoning level #25354

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ec133b6
fix(web): match effort gauge position to reasoning level
PixPMusic Oct 26, 2026
b962aa0
fix(web): preserve Lucide effort gauge geometry
PixPMusic Oct 26, 2026
a9e7817
fix(web): reflect boolean thinking in effort gauge
PixPMusic Oct 26, 2026
18a7d62
fix(web): keep effort needle within gauge arc
PixPMusic Oct 26, 2026
a343178
fix(web): order effort gauge levels by meaning
PixPMusic Oct 26, 2026
a029204
docs(web): explain native effort gauge semantics
PixPMusic Oct 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions apps/web/src/components/chat/TraitsPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
normalizeModelSlug,
} from "@t3tools/shared/model";
import { memo } from "react";
import { BrainIcon, GaugeIcon } from "lucide-react";
import { BrainIcon, Icon } from "lucide-react";
import {
Menu,
MenuGroup,
Expand Down Expand Up @@ -115,6 +115,32 @@ function DefaultBadge() {
);
}

function EffortGaugeIcon({
descriptor,
value,
size,
}: {
descriptor: Extract<ProviderOptionDescriptor, { type: "select" }> | null;
value: string | null;
size: ComposerControlSize;
}) {
const levels = descriptor?.options.filter((option) => option.id !== "default") ?? [];
const index = levels.findIndex((option) => option.id === value);
// Spread each model's levels clockwise from 8 o'clock to 4:30.
const angle = index >= 0 && levels.length > 1 ? -120 + (index / (levels.length - 1)) * 255 : 45;

return (
<Icon
iconNode={[["path", { d: "M3.34 19a10 10 0 1 1 15.73 2.07", key: "dial" }]]}
aria-hidden="true"
data-composer-control-icon
className={cn("hidden shrink-0 redesign:block", size === "xs" ? "size-3" : "size-4")}
>
<path d="M12 14v-6" transform={`rotate(${angle} 12 14)`} />
</Icon>
);
}

function getSelectedTraits(
provider: ProviderDriverKind,
models: ReadonlyArray<ServerProviderModel>,
Expand Down Expand Up @@ -531,7 +557,7 @@ export const TraitsPicker = memo(function TraitsPicker({
}) {
const composerFloatingLayerProps = useComposerMenuProps();
const [isMenuOpen, setIsMenuOpen] = useComposerMenuState(hidden || disabled);
const { descriptors, primarySelectDescriptor, ultrathinkPromptControlled } =
const { descriptors, selectDescriptors, primarySelectDescriptor, ultrathinkPromptControlled } =
getTraitsSectionVisibility({
provider,
models,
Expand All @@ -555,14 +581,23 @@ export const TraitsPicker = memo(function TraitsPicker({
return null;
}

const modelSelection =
instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null;
const { label: triggerLabel } = buildTraitsTriggerDisplay({
provider,
descriptors,
primarySelectDescriptorId: primarySelectDescriptor?.id ?? null,
ultrathinkPromptControlled,
modelSelection: instanceId && model ? { instanceId, model, options: modelOptions ?? [] } : null,
modelSelection,
reportedModelSelection,
});
const reasoningDescriptor =
selectDescriptors.find((descriptor) => REASONING_SELECT_DESCRIPTOR_IDS.has(descriptor.id)) ??
null;
const effort =
Comment thread
PixPMusic marked this conversation as resolved.
Resolved
ultrathinkPromptControlled && reasoningDescriptor?.id === primarySelectDescriptor?.id
? "ultrathink"
: getDescriptorStringValue(reasoningDescriptor, modelSelection, reportedModelSelection);
const isCodexStyle = provider === "codex";

return (
Expand Down Expand Up @@ -601,7 +636,7 @@ export const TraitsPicker = memo(function TraitsPicker({
)}
>
<ComposerControlIcon icon={BrainIcon} size={size} className="redesign:hidden" />
<ComposerControlIcon icon={GaugeIcon} size={size} className="hidden redesign:block" />
<EffortGaugeIcon descriptor={reasoningDescriptor} value={effort} size={size} />
<span data-composer-control-label className="min-w-0 truncate">
{triggerLabel}
</span>
Expand All @@ -610,7 +645,7 @@ export const TraitsPicker = memo(function TraitsPicker({
) : (
<>
<ComposerControlIcon icon={BrainIcon} size={size} className="redesign:hidden" />
<ComposerControlIcon icon={GaugeIcon} size={size} className="hidden redesign:block" />
<EffortGaugeIcon descriptor={reasoningDescriptor} value={effort} size={size} />
<span data-composer-control-label>{triggerLabel}</span>
<ComposerControlChevron size={size} />
</>
Expand Down
Loading