fix(web): show selected model in context window tooltip (#4772)

Co-authored-by: Julius Marminge <julius0216@outlook.com>
Co-authored-by: codex <codex@users.noreply.github.com>

Author: 3 people

apps/web/src/components/chat/ChatComposer.tsx

@@ -103,6 +103,7 @@ import {
   renderProviderTraitsPicker,
 } from "./composerProviderState";
 import { ContextWindowMeter } from "./ContextWindowMeter";
+import { resolveContextWindowModelDisplayName } from "./ContextWindowMeter.logic";
 import { buildExpandedImagePreview, type ExpandedImagePreview } from "./ExpandedImagePreview";
 import { basenameOfPath } from "../../pierre-icons";
 import { cn, randomUUID } from "~/lib/utils";
@@ -210,7 +211,7 @@ import {
   XIcon,
 } from "lucide-react";
 import { proposedPlanTitle } from "../../proposedPlan";
-import { getProviderDisplayName, getProviderInteractionModeToggle } from "../../providerModels";
+import { getProviderInteractionModeToggle } from "../../providerModels";
 import {
   applyProviderInstanceSettings,
   deriveProviderInstanceEntries,
@@ -225,10 +226,7 @@ import type { UnifiedSettings } from "@t3tools/contracts/settings";
 import type { SessionPhase, Thread } from "../../types";
 import type { PendingUserInputDraftAnswer } from "../../pendingUserInput";
 import type { PendingApproval, PendingUserInput } from "../../session-logic";
-import {
-  deriveLatestContextWindowSnapshot,
-  formatProviderDisplayName,
-} from "../../lib/contextWindow";
+import { deriveLatestContextWindowSnapshot } from "../../lib/contextWindow";
 import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
 import { searchProviderSkills } from "../../providerSkillSearch";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
@@ -396,7 +394,7 @@ const ComposerFooterModeControls = memo(function ComposerFooterModeControls(prop
 const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(props: {
   compact: boolean;
   activeContextWindow: ReturnType<typeof deriveLatestContextWindowSnapshot>;
-  activeThreadProviderDisplayName: string | null;
+  activeThreadModelDisplayName: string | null;
   isPreparingWorktree: boolean;
   pendingAction: {
     questionIndex: number;
@@ -424,7 +422,7 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
       {props.activeContextWindow ? (
         <ContextWindowMeter
           usage={props.activeContextWindow}
-          providerDisplayName={props.activeThreadProviderDisplayName}
+          modelDisplayName={props.activeThreadModelDisplayName}
         />
       ) : null}
       {props.isPreparingWorktree ? (
@@ -930,16 +928,10 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     () => deriveLatestContextWindowSnapshot(activeThreadActivities ?? []),
     [activeThreadActivities],
   );
-  const activeThreadProviderDisplayName = useMemo(() => {
-    if (!activeThreadModelSelection) return null;
-    const entry = providerStatuses.find(
-      (p) => p.instanceId === activeThreadModelSelection.instanceId,
-    );
-    if (entry) {
-      return getProviderDisplayName(providerStatuses, entry.driver);
-    }
-    return formatProviderDisplayName(activeThreadModelSelection.instanceId);
-  }, [providerStatuses, activeThreadModelSelection]);
+  const activeThreadModelDisplayName = useMemo(
+    () => resolveContextWindowModelDisplayName(activeThreadModelSelection, modelOptionsByInstance),
+    [activeThreadModelSelection, modelOptionsByInstance],
+  );
 
   // ------------------------------------------------------------------
   // Composer-local state
@@ -3222,7 +3214,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 <ComposerFooterPrimaryActions
                   compact={isComposerPrimaryActionsCompact}
                   activeContextWindow={activeContextWindow}
-                  activeThreadProviderDisplayName={activeThreadProviderDisplayName}
+                  activeThreadModelDisplayName={activeThreadModelDisplayName}
                   pendingAction={pendingPrimaryAction}
                   isRunning={phase === "running"}
                   showPlanFollowUpPrompt={pendingUserInputs.length === 0 && showPlanFollowUpPrompt}

apps/web/src/components/chat/ContextWindowMeter.logic.test.ts

@@ -0,0 +1,58 @@
+import { ProviderInstanceId } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+import {
+  formatContextWindowCompactionMessage,
+  resolveContextWindowModelDisplayName,
+} from "./ContextWindowMeter.logic";
+
+describe("resolveContextWindowModelDisplayName", () => {
+  it("uses the selected model from the exact provider instance", () => {
+    const primaryInstanceId = ProviderInstanceId.make("codex");
+    const selectedInstanceId = ProviderInstanceId.make("codex-work");
+    const modelOptionsByInstance = new Map([
+      [
+        primaryInstanceId,
+        [{ slug: "gpt-5.6-sol", name: "Primary profile model", shortName: "Primary" }],
+      ],
+      [selectedInstanceId, [{ slug: "gpt-5.6-sol", name: "GPT-5.6 Sol", shortName: "5.6 Sol" }]],
+    ]);
+
+    expect(
+      resolveContextWindowModelDisplayName(
+        {
+          instanceId: selectedInstanceId,
+          model: "gpt-5.6-sol",
+        },
+        modelOptionsByInstance,
+      ),
+    ).toBe("5.6 Sol");
+  });
+
+  it("falls back to the selected model slug when model metadata is unavailable", () => {
+    const selectedInstanceId = ProviderInstanceId.make("codex-work");
+
+    expect(
+      resolveContextWindowModelDisplayName(
+        {
+          instanceId: selectedInstanceId,
+          model: "custom-model",
+        },
+        new Map(),
+      ),
+    ).toBe("custom-model");
+  });
+});
+
+describe("formatContextWindowCompactionMessage", () => {
+  it("describes compaction in terms of the selected model", () => {
+    expect(formatContextWindowCompactionMessage("GPT-5.6 Sol")).toBe(
+      "Context for GPT-5.6 Sol compacts automatically when needed.",
+    );
+  });
+
+  it("uses neutral copy when the model is unavailable", () => {
+    expect(formatContextWindowCompactionMessage(null)).toBe(
+      "Context compacts automatically when needed.",
+    );
+  });
+});

apps/web/src/components/chat/ContextWindowMeter.logic.ts

@@ -0,0 +1,25 @@
+import type { ModelSelection, ProviderInstanceId } from "@t3tools/contracts";
+import { getTriggerDisplayModelName, type ModelEsque } from "./providerIconUtils";
+
+export function resolveContextWindowModelDisplayName(
+  selection: ModelSelection | null | undefined,
+  modelOptionsByInstance: ReadonlyMap<ProviderInstanceId, ReadonlyArray<ModelEsque>>,
+): string | null {
+  if (!selection) {
+    return null;
+  }
+
+  const selectedModel = modelOptionsByInstance
+    .get(selection.instanceId)
+    ?.find((model) => model.slug === selection.model);
+
+  return selectedModel ? getTriggerDisplayModelName(selectedModel) : selection.model;
+}
+
+export function formatContextWindowCompactionMessage(
+  modelDisplayName: string | null | undefined,
+): string {
+  return modelDisplayName
+    ? `Context for ${modelDisplayName} compacts automatically when needed.`
+    : "Context compacts automatically when needed.";
+}

apps/web/src/components/chat/ContextWindowMeter.tsx

@@ -1,6 +1,7 @@
 import { Button } from "../ui/button";
 import { type ContextWindowSnapshot, formatContextWindowTokens } from "~/lib/contextWindow";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
+import { formatContextWindowCompactionMessage } from "./ContextWindowMeter.logic";
 
 function formatPercentage(value: number | null): string | null {
   if (value === null || !Number.isFinite(value)) {
@@ -14,9 +15,9 @@ function formatPercentage(value: number | null): string | null {
 
 export function ContextWindowMeter(props: {
   usage: ContextWindowSnapshot;
-  providerDisplayName?: string | null;
+  modelDisplayName?: string | null;
 }) {
-  const { usage, providerDisplayName } = props;
+  const { usage, modelDisplayName } = props;
   const usedPercentage = formatPercentage(usage.usedPercentage);
   const normalizedPercentage = Math.max(0, Math.min(100, usage.usedPercentage ?? 0));
   const radius = 9.75;
@@ -127,7 +128,7 @@ export function ContextWindowMeter(props: {
           ) : null}
           {usage.compactsAutomatically ? (
             <div className="mt-1 text-pretty text-secondary-label text-[11px] font-medium">
-              {providerDisplayName ?? "It"} automatically compacts its context when needed.
+              {formatContextWindowCompactionMessage(modelDisplayName)}
             </div>
           ) : null}
         </div>