Model selection UI is available when multiple models are offered

When the backend routes between GPT-4o, GPT-4o-mini, Claude Sonnet, and Claude Haiku based on opaque rules, users lose predictability — a prompt that worked yesterday returns a weaker answer today because the router silently downgraded to a cheaper model. Exposing model selection in the UI hands that control back to the user, makes cost-vs-capability trade-offs explicit, and prevents the support backlog that grows when users cannot explain why response quality varies.

Add a model picker in the composer header that persists the selection to localStorage and passes the chosen model id in the request body. Display the active model on each assistant message so the user can see which model produced which answer. Implement in src/components/chat/model-selector.tsx.

<Select value={model} onValueChange={setModel}>
  {MODELS.map(m => <SelectItem key={m.id} value={m.id}>{m.label}</SelectItem>)}
</Select>

• ID: ai-ux-patterns.transparency.model-selection-ui

• Severity: medium

• What to look for: Count all distinct model names or identifiers referenced in API routes, configuration files, and UI components. For each model, enumerate whether it is selectable via a user-facing control (dropdown, picker, toggle). Check the backend for multi-model routing logic or model name parameters. If only 1 model is used (hardcoded in all API calls), this check should skip.

• Pass criteria: If at least 2 models are available, a UI control exists for users to select between them. The selected model is clearly displayed. Report on pass: "X models available with selection UI."

• Fail criteria: The application uses multiple models (evidenced by conditional model selection in API routes or model configuration options) but does not expose this choice to users, or exposes it without indicating which model is currently active.

• Skip (N/A) when: Only a single AI model is used throughout the application — no conditional model selection, no model configuration options. Signal: a single hardcoded model name in all API calls.

• Detail on fail: "Multiple model names detected in API routes but no model selector UI found — users cannot choose between models".

• Remediation: If you offer multiple models, make the selection explicit. Users care about model choice, especially when it affects capability and cost.

  const MODELS = [
    { id: 'gpt-4o', label: 'GPT-4o', description: 'Most capable' },
    { id: 'gpt-4o-mini', label: 'GPT-4o Mini', description: 'Faster, lower cost' },
  ]
  
  <Select value={selectedModel} onValueChange={setSelectedModel}>
    <SelectTrigger className="w-[180px]">
      <SelectValue placeholder="Select model" />
    </SelectTrigger>
    <SelectContent>
      {MODELS.map(model => (
        <SelectItem key={model.id} value={model.id}>
          <div>
            <div className="font-medium">{model.label}</div>
            <div className="text-xs text-muted-foreground">{model.description}</div>
          </div>
        </SelectItem>
      ))}
    </SelectContent>
  </Select>