feat(ui): add Thinking settings tab to dashboard

- add ThinkingSection with mode selector and tier defaults

- add useThinkingConfig hook for API integration

- add tab navigation for Thinking settings

- add ThinkingConfig types for UI

Refs #307

ui/src/pages/settings/components/tab-navigation.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Globe, Settings2, Server, KeyRound } from 'lucide-react';
+import { Globe, Settings2, Server, KeyRound, Brain } from 'lucide-react';
 import type { SettingsTab } from '../types';
 
 interface TabNavigationProps {
@@ -24,6 +24,10 @@ export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
           <Settings2 className="w-4 h-4" />
           Global Env
         </TabsTrigger>
+        <TabsTrigger value="thinking" className="flex-1 gap-2">
+          <Brain className="w-4 h-4" />
+          Thinking
+        </TabsTrigger>
         <TabsTrigger value="proxy" className="flex-1 gap-2">
           <Server className="w-4 h-4" />
           Proxy

ui/src/pages/settings/hooks/index.ts

@@ -8,3 +8,4 @@ export { useWebSearchConfig } from './use-websearch-config';
 export { useGlobalEnvConfig } from './use-globalenv-config';
 export { useProxyConfig } from './use-proxy-config';
 export { useRawConfig } from './use-raw-config';
+export { useThinkingConfig } from './use-thinking-config';

ui/src/pages/settings/hooks/use-thinking-config.ts

@@ -0,0 +1,121 @@
+/**
+ * Thinking Config Hook
+ * Manages thinking budget configuration with direct API calls
+ */
+
+import { useCallback, useState } from 'react';
+import type { ThinkingConfig, ThinkingMode } from '../types';
+
+const DEFAULT_THINKING_CONFIG: ThinkingConfig = {
+  mode: 'auto',
+  tier_defaults: {
+    opus: 'high',
+    sonnet: 'medium',
+    haiku: 'low',
+  },
+  show_warnings: true,
+};
+
+export function useThinkingConfig() {
+  const [config, setConfig] = useState<ThinkingConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const fetchConfig = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const res = await fetch('/api/thinking');
+      if (!res.ok) throw new Error('Failed to load Thinking config');
+      const data = await res.json();
+      setConfig(data.config || DEFAULT_THINKING_CONFIG);
+    } catch (err) {
+      setError((err as Error).message);
+      setConfig(DEFAULT_THINKING_CONFIG);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const saveConfig = useCallback(
+    async (updates: Partial<ThinkingConfig>) => {
+      const currentConfig = config || DEFAULT_THINKING_CONFIG;
+      const optimisticConfig = { ...currentConfig, ...updates };
+      setConfig(optimisticConfig);
+
+      try {
+        setSaving(true);
+        setError(null);
+
+        const res = await fetch('/api/thinking', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(optimisticConfig),
+        });
+
+        if (!res.ok) {
+          const data = await res.json();
+          throw new Error(data.error || 'Failed to save');
+        }
+
+        const data = await res.json();
+        setConfig(data.config);
+        setSuccess(true);
+        setTimeout(() => setSuccess(false), 1500);
+      } catch (err) {
+        setConfig(currentConfig);
+        setError((err as Error).message);
+      } finally {
+        setSaving(false);
+      }
+    },
+    [config]
+  );
+
+  const setMode = useCallback(
+    (mode: ThinkingMode) => {
+      saveConfig({ mode });
+    },
+    [saveConfig]
+  );
+
+  const setTierDefault = useCallback(
+    (tier: 'opus' | 'sonnet' | 'haiku', value: string) => {
+      const currentDefaults = config?.tier_defaults || DEFAULT_THINKING_CONFIG.tier_defaults;
+      saveConfig({
+        tier_defaults: { ...currentDefaults, [tier]: value },
+      });
+    },
+    [config, saveConfig]
+  );
+
+  const setShowWarnings = useCallback(
+    (show: boolean) => {
+      saveConfig({ show_warnings: show });
+    },
+    [saveConfig]
+  );
+
+  const setManualOverride = useCallback(
+    (value: string | number | undefined) => {
+      saveConfig({ mode: 'manual', override: value });
+    },
+    [saveConfig]
+  );
+
+  return {
+    config: config || DEFAULT_THINKING_CONFIG,
+    loading,
+    saving,
+    error,
+    success,
+    fetchConfig,
+    saveConfig,
+    setMode,
+    setTierDefault,
+    setShowWarnings,
+    setManualOverride,
+  };
+}

ui/src/pages/settings/index.tsx

@@ -17,6 +17,7 @@ import type { SettingsTab } from './types';
 // Lazy-loaded sections
 const WebSearchSection = lazy(() => import('./sections/websearch'));
 const GlobalEnvSection = lazy(() => import('./sections/globalenv-section'));
+const ThinkingSection = lazy(() => import('./sections/thinking'));
 const ProxySection = lazy(() => import('./sections/proxy'));
 const AuthSection = lazy(() => import('./sections/auth-section'));
 
@@ -57,6 +58,7 @@ function SettingsPageInner() {
             <Suspense fallback={<SectionSkeleton />}>
               {activeTab === 'websearch' && <WebSearchSection />}
               {activeTab === 'globalenv' && <GlobalEnvSection />}
+              {activeTab === 'thinking' && <ThinkingSection />}
               {activeTab === 'proxy' && <ProxySection />}
               {activeTab === 'auth' && <AuthSection />}
             </Suspense>

ui/src/pages/settings/sections/thinking/index.tsx

@@ -0,0 +1,208 @@
+/**
+ * Thinking Section
+ * Settings section for thinking budget configuration
+ */
+
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { RefreshCw, CheckCircle2, AlertCircle, Brain } from 'lucide-react';
+import { useThinkingConfig } from '../../hooks';
+import type { ThinkingMode } from '../../types';
+
+const THINKING_LEVELS = [
+  { value: 'minimal', label: 'Minimal (512 tokens)' },
+  { value: 'low', label: 'Low (1K tokens)' },
+  { value: 'medium', label: 'Medium (8K tokens)' },
+  { value: 'high', label: 'High (24K tokens)' },
+  { value: 'xhigh', label: 'Extra High (32K tokens)' },
+  { value: 'auto', label: 'Auto (dynamic)' },
+];
+
+export default function ThinkingSection() {
+  const {
+    config,
+    loading,
+    saving,
+    error,
+    success,
+    fetchConfig,
+    setMode,
+    setTierDefault,
+    setShowWarnings,
+  } = useThinkingConfig();
+
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex items-center gap-3 text-muted-foreground">
+          <RefreshCw className="w-5 h-5 animate-spin" />
+          <span>Loading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Toast-style alerts */}
+      <div
+        className={`absolute left-5 right-5 top-20 z-10 transition-all duration-200 ease-out ${
+          error || success
+            ? 'opacity-100 translate-y-0'
+            : 'opacity-0 -translate-y-2 pointer-events-none'
+        }`}
+      >
+        {error && (
+          <Alert variant="destructive" className="py-2 shadow-lg">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+        {success && (
+          <div className="flex items-center gap-2 px-3 py-2 rounded-md border border-green-200 bg-green-50 text-green-700 shadow-lg dark:border-green-900/50 dark:bg-green-900/90 dark:text-green-300">
+            <CheckCircle2 className="h-4 w-4 shrink-0" />
+            <span className="text-sm font-medium">Saved</span>
+          </div>
+        )}
+      </div>
+
+      {/* Scrollable Content */}
+      <ScrollArea className="flex-1">
+        <div className="p-5 space-y-6">
+          <div className="flex items-center gap-3">
+            <Brain className="w-5 h-5 text-primary" />
+            <p className="text-sm text-muted-foreground">
+              Configure extended thinking/reasoning for supported models.
+            </p>
+          </div>
+
+          {/* Mode Selection */}
+          <div className="space-y-3">
+            <h3 className="text-base font-medium">Thinking Mode</h3>
+            <div className="space-y-2">
+              {(['auto', 'off', 'manual'] as ThinkingMode[]).map((mode) => (
+                <div
+                  key={mode}
+                  className={`flex items-center justify-between p-4 rounded-lg cursor-pointer transition-colors ${
+                    config.mode === mode
+                      ? 'bg-primary/10 border border-primary/30'
+                      : 'bg-muted/50 hover:bg-muted/80'
+                  }`}
+                  onClick={() => setMode(mode)}
+                >
+                  <div>
+                    <p className="font-medium capitalize">{mode}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {mode === 'auto' && 'Automatically set thinking based on model tier'}
+                      {mode === 'off' && 'Disable extended thinking'}
+                      {mode === 'manual' && 'Use --thinking flag to control manually'}
+                    </p>
+                  </div>
+                  <div
+                    className={`w-4 h-4 rounded-full border-2 ${
+                      config.mode === mode
+                        ? 'bg-primary border-primary'
+                        : 'border-muted-foreground/50'
+                    }`}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Tier Defaults (only shown when mode is auto) */}
+          {config.mode === 'auto' && (
+            <div className="space-y-3">
+              <h3 className="text-base font-medium">Tier Defaults</h3>
+              <p className="text-sm text-muted-foreground">
+                Default thinking level for each model tier when in auto mode.
+              </p>
+
+              <div className="space-y-3">
+                {(['opus', 'sonnet', 'haiku'] as const).map((tier) => (
+                  <div key={tier} className="flex items-center gap-4 p-3 rounded-lg bg-muted/30">
+                    <Label className="w-20 capitalize font-medium">{tier}</Label>
+                    <Select
+                      value={config.tier_defaults[tier]}
+                      onValueChange={(value) => setTierDefault(tier, value)}
+                      disabled={saving}
+                    >
+                      <SelectTrigger className="flex-1">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {THINKING_LEVELS.map((level) => (
+                          <SelectItem key={level.value} value={level.value}>
+                            {level.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Show Warnings Toggle */}
+          <div className="flex items-center justify-between p-4 rounded-lg bg-muted/50">
+            <div>
+              <p className="font-medium">Show Warnings</p>
+              <p className="text-sm text-muted-foreground">
+                Display warnings when thinking values are clamped or adjusted
+              </p>
+            </div>
+            <Switch
+              checked={config.show_warnings ?? true}
+              onCheckedChange={setShowWarnings}
+              disabled={saving}
+            />
+          </div>
+
+          {/* Info Box */}
+          <div className="p-4 rounded-lg border bg-muted/30">
+            <h4 className="text-sm font-medium mb-2">CLI Override</h4>
+            <p className="text-sm text-muted-foreground mb-2">
+              Use <code className="px-1.5 py-0.5 rounded bg-muted">--thinking</code> flag to
+              override settings per session:
+            </p>
+            <div className="space-y-1 text-sm font-mono text-muted-foreground">
+              <p>ccs gemini --thinking high</p>
+              <p>ccs agy --thinking 16384</p>
+              <p>ccs gemini --thinking off</p>
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+
+      {/* Footer */}
+      <div className="p-4 border-t bg-background">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={fetchConfig}
+          disabled={loading || saving}
+          className="w-full"
+        >
+          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </Button>
+      </div>
+    </>
+  );
+}

ui/src/pages/settings/types.ts

@@ -49,7 +49,25 @@ export interface GlobalEnvConfig {
 
 // === Tab Types ===
 
-export type SettingsTab = 'websearch' | 'globalenv' | 'proxy' | 'auth';
+export type SettingsTab = 'websearch' | 'globalenv' | 'proxy' | 'auth' | 'thinking';
+
+// === Thinking Types ===
+
+export type ThinkingMode = 'auto' | 'off' | 'manual';
+
+export interface ThinkingTierDefaults {
+  opus: string;
+  sonnet: string;
+  haiku: string;
+}
+
+export interface ThinkingConfig {
+  mode: ThinkingMode;
+  override?: string | number;
+  tier_defaults: ThinkingTierDefaults;
+  provider_overrides?: Record<string, Partial<ThinkingTierDefaults>>;
+  show_warnings?: boolean;
+}
 
 // === Re-exports from api-client ===