🤖 fix: make model tooltip abbreviations dynamic

Tooltip now derives abbreviation examples from KNOWN_MODELS instead of
hardcoding model names, so updates to model versions automatically
propagate to the tooltip.

_Generated with `mux`_

Author: ethanndickson

src/browser/components/ChatInput/index.tsx

@@ -57,6 +57,7 @@ import {
 
 import type { ThinkingLevel } from "@/common/types/thinking";
 import type { MuxFrontendMetadata } from "@/common/types/message";
+import { MODEL_ABBREVIATION_EXAMPLES } from "@/common/constants/knownModels";
 import { useTelemetry } from "@/browser/hooks/useTelemetry";
 import { getTokenCountPromise } from "@/browser/utils/tokenizer/rendererClient";
 import { CreationCenterContent } from "./CreationCenterContent";
@@ -933,8 +934,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     <br />
                     <br />
                     <strong>Abbreviations:</strong>
-                    <br />• <code>/model opus</code> - Claude Opus 4.1
-                    <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
+                    {MODEL_ABBREVIATION_EXAMPLES.map((ex) => (
+                      <React.Fragment key={ex.abbrev}>
+                        <br />• <code>/model {ex.abbrev}</code> - {ex.displayName}
+                      </React.Fragment>
+                    ))}
                     <br />
                     <br />
                     <strong>Full format:</strong>

src/common/constants/knownModels.ts

@@ -159,3 +159,9 @@ export const KNOWN_MODEL_OPTIONS = Object.values(KNOWN_MODELS).map((model) => ({
   label: formatModelDisplayName(model.providerModelId),
   value: model.id,
 }));
+
+/** Tooltip-friendly abbreviation examples: show representative shortcuts */
+export const MODEL_ABBREVIATION_EXAMPLES = (["opus", "sonnet"] as const).map((abbrev) => ({
+  abbrev,
+  displayName: formatModelDisplayName(MODEL_ABBREVIATIONS[abbrev].split(":")[1]),
+}));