chore: commit current working state with config updates, test fixes, and continuity ledgers

src/components/proxy/advanced/CapabilitiesTab.tsx

@@ -1,39 +1,61 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
+import { groupBy } from 'lodash-es';
 import { ipc } from '@/ipc/manager';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Loader2, Eye, Zap, Code, Mic, Image } from 'lucide-react';
+import { Loader2, Eye, Zap, Code, Brain, Star } from 'lucide-react';
 
 interface ModelCapability {
   id: string;
   object: string;
+  displayName?: string;
   capabilities: {
     vision: boolean;
+    thinking: boolean;
     streaming: boolean;
     jsonMode: boolean;
-    audio: boolean;
-    imageGeneration: boolean;
+    recommended: boolean;
+  };
+  limits: {
+    maxTokens?: number;
+    maxOutputTokens?: number;
+    thinkingBudget?: number;
   };
 }
 
 const CAPABILITY_ICONS = {
   vision: Eye,
+  thinking: Brain,
   streaming: Zap,
   jsonMode: Code,
-  audio: Mic,
-  imageGeneration: Image,
+  recommended: Star,
 } as const;
 
 const CAPABILITY_LABELS = {
   vision: 'Vision',
+  thinking: 'Thinking',
   streaming: 'Streaming',
   jsonMode: 'JSON Mode',
-  audio: 'Audio',
-  imageGeneration: 'Image Generation',
+  recommended: 'Recommended',
 } as const;
 
+function getProvider(modelId: string): string {
+  const id = modelId.toLowerCase();
+  if (id.startsWith('gemini')) return 'Google';
+  if (id.startsWith('claude')) return 'Anthropic';
+  if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.startsWith('text-')) return 'OpenAI';
+  if (id.startsWith('deepseek')) return 'DeepSeek';
+  if (id.startsWith('meta-llama') || id.startsWith('llama')) return 'Meta';
+  if (id.startsWith('mistral') || id.startsWith('mixtral')) return 'Mistral';
+  if (id.startsWith('qwen')) return 'Alibaba';
+  if (id.startsWith('x-ai') || id.startsWith('grok')) return 'xAI';
+  if (id.startsWith('sonar')) return 'Perplexity';
+  if (id.startsWith('command')) return 'Cohere';
+  return 'Other';
+}
+
 export const CapabilitiesTab: React.FC = () => {
   const { t } = useTranslation();
 
@@ -47,12 +69,23 @@ export const CapabilitiesTab: React.FC = () => {
     ? (capabilitiesData.data as ModelCapability[])
     : [];
 
+  const groupedModels = useMemo(() => {
+    return groupBy(models, (m) => getProvider(m.id));
+  }, [models]);
+
+  // Sort providers alphabetically, but keep 'Other' at the bottom
+  const sortedProviders = Object.keys(groupedModels).sort((a, b) => {
+    if (a === 'Other') return 1;
+    if (b === 'Other') return -1;
+    return a.localeCompare(b);
+  });
+
   return (
     <div className="space-y-5">
       {/* Header */}
       <div>
-        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title')}</h3>
-        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description')}</p>
+        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title', 'Model Capabilities')}</h3>
+        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description', 'Discover what each model can do')}</p>
       </div>
 
       {/* Capabilities Grid */}
@@ -61,57 +94,93 @@ export const CapabilitiesTab: React.FC = () => {
           <Loader2 className="h-6 w-6 animate-spin" />
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {models.map((model) => (
-            <Card key={model.id}>
-              <CardHeader>
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-base">{model.id}</CardTitle>
-                  <Badge variant="outline">{model.object}</Badge>
-                </div>
-                <CardDescription>Model capabilities and features</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-2 gap-2">
-                  {Object.entries(model.capabilities).map(([key, supported]) => {
-                    const iconKey = key as keyof typeof CAPABILITY_ICONS;
-                    const Icon = CAPABILITY_ICONS[iconKey];
-                    const label = CAPABILITY_LABELS[iconKey];
-                    return (
-                      <div
-                        key={key}
-                        className={`flex items-center gap-2 rounded-md border p-2 ${
-                          supported
-                            ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950'
-                            : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900'
-                        }`}
-                      >
-                        <Icon
-                          className={`h-4 w-4 ${
-                            supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
-                          }`}
-                        />
-                        <span
-                          className={`text-xs font-medium ${
-                            supported
-                              ? 'text-green-700 dark:text-green-300'
-                              : 'text-gray-500 dark:text-gray-400'
-                          }`}
-                        >
-                          {label}
-                        </span>
-                        {supported && (
-                          <Badge variant="default" className="ml-auto h-5 bg-green-600 text-[10px]">
-                            ✓
-                          </Badge>
-                        )}
+        <div className="space-y-8">
+          {sortedProviders.map((provider) => (
+            <div key={provider} className="space-y-4">
+              <h4 className="text-md font-semibold text-foreground border-b pb-2">
+                {provider}
+              </h4>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {groupedModels[provider].map((model) => (
+                  <Card key={model.id} className="flex flex-col transition-shadow hover:shadow-md">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-base truncate pr-2" title={model.displayName || model.id}>
+                          {model.displayName || model.id}
+                        </CardTitle>
+                        <Badge variant="outline" className="shrink-0">{model.object}</Badge>
                       </div>
-                    );
-                  })}
-                </div>
-              </CardContent>
-            </Card>
+                      <CardDescription className="text-xs font-mono text-muted-foreground truncate" title={model.id}>
+                        {model.id}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4 flex-1 flex flex-col justify-between">
+                      <div className="grid grid-cols-2 gap-2">
+                        {Object.entries(model.capabilities).map(([key, supported]) => {
+                          const iconKey = key as keyof typeof CAPABILITY_ICONS;
+                          const Icon = CAPABILITY_ICONS[iconKey];
+                          const label = CAPABILITY_LABELS[iconKey];
+                          return (
+                            <div
+                              key={key}
+                              className={`flex items-center gap-2 rounded-md border p-2 ${
+                                supported
+                                  ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30'
+                                  : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'
+                              }`}
+                            >
+                              <Icon
+                                className={`h-4 w-4 shrink-0 ${
+                                  supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
+                                }`}
+                              />
+                              <span
+                                className={`text-[11px] font-medium truncate ${
+                                  supported
+                                    ? 'text-green-700 dark:text-green-300'
+                                    : 'text-gray-500 dark:text-gray-400'
+                                }`}
+                                title={label}
+                              >
+                                {label}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                      {Object.values(model.limits).some((v) => v != null) && (
+                        <div className="space-y-2 pt-2 border-t mt-auto">
+                          <p className="text-xs font-medium text-muted-foreground">Limits</p>
+                          <div className="flex flex-wrap gap-1.5">
+                            {model.limits.maxTokens != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
+                                Context: {model.limits.maxTokens.toLocaleString()}
+                              </Badge>
+                            )}
+                            {model.limits.maxOutputTokens != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
+                                Output: {model.limits.maxOutputTokens.toLocaleString()}
+                              </Badge>
+                            )}
+                            {model.limits.thinkingBudget != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5 border-blue-200 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-800 dark:text-blue-300">
+                                Think: {model.limits.thinkingBudget.toLocaleString()}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
           ))}
+          {models.length === 0 && (
+             <div className="text-center py-10 text-muted-foreground border rounded-lg border-dashed">
+               No models found. Check your provider configurations.
+             </div>
+          )}
         </div>
       )}
     </div>

src/components/proxy/advanced/ToolsTab.tsx

@@ -4,7 +4,6 @@ import { useQuery, useQueries } from '@tanstack/react-query';
 import { ipc } from '@/ipc/manager';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { useToast } from '@/components/ui/use-toast';
 import { StatCard } from '@/components/usage/StatCard';
 import { Loader2, Copy, CheckCircle, ShieldAlert, XCircle, Terminal, Code2, Braces } from 'lucide-react';

src/components/proxy/advanced/TrafficLogTable.tsx

@@ -22,6 +22,15 @@ interface TrafficLogTableProps {
 type SortKey = 'timestamp' | 'direction' | 'endpoint' | 'method' | 'status' | 'duration';
 type SortDir = 'asc' | 'desc';
 
+function SortIcon({ column, sortKey, sortDir }: { column: SortKey; sortKey: SortKey; sortDir: SortDir }) {
+  if (sortKey !== column) return <span className="ml-1 inline-block w-3" />;
+  return sortDir === 'asc' ? (
+    <ArrowUp className="ml-1 inline h-3 w-3" />
+  ) : (
+    <ArrowDown className="ml-1 inline h-3 w-3" />
+  );
+}
+
 export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoading }) => {
   const { t } = useTranslation();
   const [sortKey, setSortKey] = useState<SortKey>('timestamp');
@@ -64,15 +73,6 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
     });
   }, [logs, sortKey, sortDir]);
 
-  const SortIcon = ({ column }: { column: SortKey }) => {
-    if (sortKey !== column) return <span className="ml-1 inline-block w-3" />;
-    return sortDir === 'asc' ? (
-      <ArrowUp className="ml-1 inline h-3 w-3" />
-    ) : (
-      <ArrowDown className="ml-1 inline h-3 w-3" />
-    );
-  };
-
   return (
     <Card>
       <CardHeader>
@@ -99,42 +99,42 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                     onClick={() => toggleSort('timestamp')}
                   >
                     {t('proxy.advanced.trafficLog.timestamp')}
-                    <SortIcon column="timestamp" />
+                    <SortIcon column="timestamp" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                   <th
                     className="cursor-pointer pb-2 pr-4 font-medium select-none"
                     onClick={() => toggleSort('direction')}
                   >
                     {t('proxy.advanced.trafficLog.direction')}
-                    <SortIcon column="direction" />
+                    <SortIcon column="direction" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                   <th
                     className="cursor-pointer pb-2 pr-4 font-medium select-none"
                     onClick={() => toggleSort('endpoint')}
                   >
                     {t('proxy.advanced.trafficLog.endpoint')}
-                    <SortIcon column="endpoint" />
+                    <SortIcon column="endpoint" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                   <th
                     className="cursor-pointer pb-2 pr-4 font-medium select-none"
                     onClick={() => toggleSort('method')}
                   >
                     {t('proxy.advanced.trafficLog.method')}
-                    <SortIcon column="method" />
+                    <SortIcon column="method" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                   <th
                     className="cursor-pointer pb-2 pr-4 font-medium select-none"
                     onClick={() => toggleSort('status')}
                   >
                     {t('proxy.advanced.trafficLog.status')}
-                    <SortIcon column="status" />
+                    <SortIcon column="status" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                   <th
                     className="cursor-pointer pb-2 font-medium select-none"
                     onClick={() => toggleSort('duration')}
                   >
                     {t('proxy.advanced.trafficLog.duration')}
-                    <SortIcon column="duration" />
+                    <SortIcon column="duration" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                 </tr>
               </thead>