🤖 fix: header heights and provider display names

- Use span instead of h2/h3 for headers to ensure consistent heights
- Add PROVIDER_DISPLAY_NAMES constant with proper casing (OpenAI, xAI, etc.)
- Update ProvidersSection and ModelsSection to use display names

Author: ibetitsmike

src/browser/components/Settings/SettingsModal.tsx

@@ -68,9 +68,9 @@ export function SettingsModal() {
         {/* Sidebar */}
         <div className="border-border-medium flex w-48 shrink-0 flex-col border-r">
           <div className="border-border-medium flex h-12 items-center border-b px-4">
-            <h2 id="settings-title" className="text-foreground text-sm font-semibold">
+            <span id="settings-title" className="text-foreground text-sm font-semibold">
               Settings
-            </h2>
+            </span>
           </div>
           <nav className="flex-1 overflow-y-auto p-2">
             {SECTIONS.map((section) => (
@@ -94,7 +94,7 @@ export function SettingsModal() {
         {/* Content */}
         <div className="flex flex-1 flex-col overflow-hidden">
           <div className="border-border-medium flex h-12 items-center justify-between border-b px-6">
-            <h3 className="text-foreground text-sm font-medium">{currentSection.label}</h3>
+            <span className="text-foreground text-sm font-medium">{currentSection.label}</span>
             <button
               type="button"
               onClick={handleClose}

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { Plus, Trash2 } from "lucide-react";
 import type { ProvidersConfigMap } from "../types";
-import { SUPPORTED_PROVIDERS } from "@/common/constants/providers";
+import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
 
 interface NewModelForm {
   provider: string;
@@ -98,7 +98,7 @@ export function ModelsSection() {
             <option value="">Select provider</option>
             {SUPPORTED_PROVIDERS.map((p) => (
               <option key={p} value={p}>
-                {p}
+                {PROVIDER_DISPLAY_NAMES[p]}
               </option>
             ))}
           </select>
@@ -136,7 +136,10 @@ export function ModelsSection() {
               className="border-border-medium bg-background-secondary flex items-center justify-between rounded-md border px-4 py-2"
             >
               <div className="flex items-center gap-3">
-                <span className="text-muted text-xs capitalize">{provider}</span>
+                <span className="text-muted text-xs">
+                  {PROVIDER_DISPLAY_NAMES[provider as keyof typeof PROVIDER_DISPLAY_NAMES] ??
+                    provider}
+                </span>
                 <span className="text-foreground font-mono text-sm">{modelId}</span>
               </div>
               <button

src/browser/components/Settings/sections/ProvidersSection.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ChevronDown, ChevronRight, Check, X } from "lucide-react";
 import type { ProvidersConfigMap } from "../types";
-import { SUPPORTED_PROVIDERS } from "@/common/constants/providers";
+import { SUPPORTED_PROVIDERS, PROVIDER_DISPLAY_NAMES } from "@/common/constants/providers";
 
 export function ProvidersSection() {
   const [config, setConfig] = useState<ProvidersConfigMap>({});
@@ -90,7 +90,9 @@ export function ProvidersSection() {
                 ) : (
                   <ChevronRight className="text-muted h-4 w-4" />
                 )}
-                <span className="text-foreground text-sm font-medium capitalize">{provider}</span>
+                <span className="text-foreground text-sm font-medium">
+                  {PROVIDER_DISPLAY_NAMES[provider]}
+                </span>
               </div>
               <div
                 className={`h-2 w-2 rounded-full ${configured ? "bg-green-500" : "bg-border-medium"}`}

src/common/constants/providers.ts

@@ -80,6 +80,18 @@ export type ProviderName = keyof typeof PROVIDER_REGISTRY;
  */
 export const SUPPORTED_PROVIDERS = Object.keys(PROVIDER_REGISTRY) as ProviderName[];
 
+/**
+ * Display names for providers (proper casing for UI)
+ */
+export const PROVIDER_DISPLAY_NAMES: Record<ProviderName, string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  google: "Google",
+  xai: "xAI",
+  ollama: "Ollama",
+  openrouter: "OpenRouter",
+};
+
 /**
  * Type guard to check if a string is a valid provider name
  */