feat(ui): Enhance web overview with new components and data

src/web-server/overview-routes.ts

@@ -9,6 +9,8 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { getCcsDir, loadConfig } from '../utils/config-manager';
 import { runHealthChecks } from './health-service';
+import { getAllAuthStatus, initializeAccounts } from '../cliproxy/auth-handler';
+import { getVersion } from '../utils/version';
 
 export const overviewRoutes = Router();
 
@@ -20,14 +22,25 @@ overviewRoutes.get('/', (_req: Request, res: Response) => {
     const config = loadConfig();
 
     const profileCount = Object.keys(config.profiles).length;
-    const cliproxyCount = Object.keys(config.cliproxy || {}).length;
+    const cliproxyVariantCount = Object.keys(config.cliproxy || {}).length;
+
+    // Count authenticated built-in providers (gemini, codex, agy, qwen, iflow)
+    initializeAccounts();
+    const authStatuses = getAllAuthStatus();
+    const authenticatedProviderCount = authStatuses.filter((s) => s.authenticated).length;
+
+    // Total CLIProxy = custom variants + authenticated providers
+    const totalCliproxyCount = cliproxyVariantCount + authenticatedProviderCount;
 
     // Get quick health summary
     const health = runHealthChecks();
 
     res.json({
+      version: getVersion(),
       profiles: profileCount,
-      cliproxy: cliproxyCount,
+      cliproxy: totalCliproxyCount,
+      cliproxyVariants: cliproxyVariantCount,
+      cliproxyProviders: authenticatedProviderCount,
       accounts: getAccountCount(),
       health: {
         status:
@@ -38,8 +51,11 @@ overviewRoutes.get('/', (_req: Request, res: Response) => {
     });
   } catch {
     res.json({
+      version: getVersion(),
       profiles: 0,
       cliproxy: 0,
+      cliproxyVariants: 0,
+      cliproxyProviders: 0,
       accounts: 0,
       health: { status: 'error', passed: 0, total: 0 },
     });

ui/src/components/connection-indicator.tsx

@@ -11,7 +11,7 @@ export function ConnectionIndicator() {
   const { status } = useWebSocket();
 
   const statusConfig = {
-    connected: { icon: Wifi, color: 'text-green-500', label: 'Connected' },
+    connected: { icon: Wifi, color: 'text-green-600', label: 'Connected' },
     connecting: { icon: Wifi, color: 'text-yellow-500', label: 'Connecting...' },
     disconnected: { icon: WifiOff, color: 'text-red-500', label: 'Disconnected' },
   };

ui/src/components/health-card.tsx

@@ -15,7 +15,7 @@ interface HealthCheck {
 const statusConfig = {
   ok: {
     icon: CheckCircle,
-    color: 'text-green-500',
+    color: 'text-green-600',
     bg: 'bg-green-50 dark:bg-green-900/20',
     border: 'border-green-200 dark:border-green-800',
   },

ui/src/components/hero-section.tsx

@@ -0,0 +1,86 @@
+import { Badge } from '@/components/ui/badge';
+import { CcsLogo } from '@/components/ccs-logo';
+import { CheckCircle2, AlertCircle, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface HeroSectionProps {
+  version?: string;
+  healthStatus?: 'ok' | 'warning' | 'error';
+  healthPassed?: number;
+  healthTotal?: number;
+}
+
+const statusConfig = {
+  ok: {
+    icon: CheckCircle2,
+    label: 'All Systems Operational',
+    color: 'text-green-600',
+    badgeBg: 'bg-green-500/10 text-green-600 border-green-500/20',
+  },
+  warning: {
+    icon: AlertCircle,
+    label: 'Some Issues Detected',
+    color: 'text-yellow-500',
+    badgeBg: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+  },
+  error: {
+    icon: XCircle,
+    label: 'Action Required',
+    color: 'text-red-500',
+    badgeBg: 'bg-red-500/10 text-red-500 border-red-500/20',
+  },
+};
+
+export function HeroSection({
+  version = '5.0.0',
+  healthStatus = 'ok',
+  healthPassed = 0,
+  healthTotal = 0,
+}: HeroSectionProps) {
+  const status = statusConfig[healthStatus];
+  const StatusIcon = status.icon;
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border bg-gradient-to-br from-background via-background to-muted/30 p-6">
+      {/* Subtle background pattern */}
+      <div className="absolute inset-0 opacity-[0.03] pointer-events-none">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
+            backgroundSize: '24px 24px',
+          }}
+        />
+      </div>
+
+      <div className="relative flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        {/* Left: Logo and Welcome */}
+        <div className="flex items-center gap-4">
+          <CcsLogo size="lg" showText={false} />
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className="text-2xl font-bold">CCS Config</h1>
+              <Badge variant="outline" className="font-mono text-xs">
+                v{version}
+              </Badge>
+            </div>
+            <p className="text-muted-foreground text-sm mt-1">Claude Code Switch Dashboard</p>
+          </div>
+        </div>
+
+        {/* Right: Health Status */}
+        <div className={cn('flex items-center gap-3 px-4 py-2 rounded-lg border', status.badgeBg)}>
+          <StatusIcon className={cn('w-5 h-5', status.color)} />
+          <div>
+            <p className={cn('text-sm font-medium', status.color)}>{status.label}</p>
+            {healthTotal > 0 && (
+              <p className="text-xs opacity-80">
+                {healthPassed}/{healthTotal} checks passed
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/src/components/quick-commands.tsx

@@ -0,0 +1,92 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Copy, Check, Terminal } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface CommandSnippet {
+  label: string;
+  command: string;
+  description: string;
+}
+
+const defaultSnippets: CommandSnippet[] = [
+  {
+    label: 'Start Default',
+    command: 'ccs',
+    description: 'Launch Claude with default profile',
+  },
+  {
+    label: 'GLM Profile',
+    command: 'ccs glm',
+    description: 'Switch to GLM model',
+  },
+  {
+    label: 'Health Check',
+    command: 'ccs doctor',
+    description: 'Run system diagnostics',
+  },
+  {
+    label: 'Delegate Task',
+    command: 'ccs glm -p "your task"',
+    description: 'Delegate to GLM profile',
+  },
+];
+
+interface QuickCommandsProps {
+  snippets?: CommandSnippet[];
+}
+
+export function QuickCommands({ snippets = defaultSnippets }: QuickCommandsProps) {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const copyToClipboard = async (text: string, index: number) => {
+    await navigator.clipboard.writeText(text);
+    setCopiedIndex(index);
+    setTimeout(() => setCopiedIndex(null), 2000);
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Terminal className="w-5 h-5 text-muted-foreground" />
+          Quick Commands
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          {snippets.map((snippet, index) => (
+            <div
+              key={index}
+              className={cn(
+                'group flex items-center justify-between gap-2 px-3 py-2',
+                'rounded-lg border bg-muted/30 hover:bg-muted/50 transition-colors'
+              )}
+            >
+              <div className="flex-1 min-w-0">
+                <p className="text-xs text-muted-foreground">{snippet.label}</p>
+                <code className="text-sm font-mono font-medium truncate block">
+                  {snippet.command}
+                </code>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                onClick={() => copyToClipboard(snippet.command, index)}
+                title={snippet.description}
+              >
+                {copiedIndex === index ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

ui/src/components/stat-card.tsx

@@ -1,33 +1,86 @@
 import { Card, CardContent } from '@/components/ui/card';
 import type { LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 interface StatCardProps {
   title: string;
   value: number | string;
   icon: LucideIcon;
   color?: string;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
+  subtitle?: string;
   onClick?: () => void;
 }
 
+const variantStyles = {
+  default: {
+    iconBg: 'bg-muted',
+    iconColor: 'text-muted-foreground',
+    borderHover: 'hover:border-primary',
+  },
+  success: {
+    iconBg: 'bg-green-500/10',
+    iconColor: 'text-green-600',
+    borderHover: 'hover:border-green-500/50',
+  },
+  warning: {
+    iconBg: 'bg-yellow-500/10',
+    iconColor: 'text-yellow-500',
+    borderHover: 'hover:border-yellow-500/50',
+  },
+  error: {
+    iconBg: 'bg-red-500/10',
+    iconColor: 'text-red-500',
+    borderHover: 'hover:border-red-500/50',
+  },
+  accent: {
+    iconBg: 'bg-accent/10',
+    iconColor: 'text-accent',
+    borderHover: 'hover:border-accent/50',
+  },
+};
+
 export function StatCard({
   title,
   value,
   icon: Icon,
-  color = 'text-primary',
+  color,
+  variant = 'default',
+  subtitle,
   onClick,
 }: StatCardProps) {
+  const styles = variantStyles[variant];
+  const iconColorClass = color || styles.iconColor;
+
   return (
     <Card
-      className={`cursor-pointer hover:shadow-md transition-shadow ${onClick ? 'hover:border-primary' : ''}`}
+      className={cn(
+        'cursor-pointer transition-all duration-200',
+        'hover:shadow-lg hover:-translate-y-0.5',
+        styles.borderHover,
+        onClick && 'active:scale-[0.98]'
+      )}
       onClick={onClick}
     >
-      <CardContent className="pt-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm text-muted-foreground">{title}</p>
-            <p className={`text-2xl font-bold ${color}`}>{value}</p>
+      <CardContent className="pt-4 pb-4">
+        <div className="flex items-center gap-4">
+          {/* Icon Container with background */}
+          <div
+            className={cn(
+              'flex items-center justify-center w-12 h-12 rounded-lg transition-transform duration-200',
+              styles.iconBg,
+              'group-hover:scale-105'
+            )}
+          >
+            <Icon className={cn('w-6 h-6', iconColorClass)} />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-muted-foreground truncate">{title}</p>
+            <p className={cn('text-2xl font-bold font-mono', iconColorClass)}>{value}</p>
+            {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
           </div>
-          <Icon className={`w-8 h-8 ${color} opacity-20`} />
         </div>
       </CardContent>
     </Card>

ui/src/hooks/use-overview.ts

@@ -1,8 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 
 interface Overview {
+  version: string;
   profiles: number;
   cliproxy: number;
+  cliproxyVariants: number;
+  cliproxyProviders: number;
   accounts: number;
   health: {
     status: 'ok' | 'warning' | 'error';

ui/src/pages/home.tsx

@@ -2,6 +2,8 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { StatCard } from '@/components/stat-card';
+import { HeroSection } from '@/components/hero-section';
+import { QuickCommands } from '@/components/quick-commands';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -14,14 +16,15 @@ import {
   BookOpen,
   FolderOpen,
   AlertTriangle,
+  ArrowRight,
 } from 'lucide-react';
 import { useOverview } from '@/hooks/use-overview';
 import { useSharedSummary } from '@/hooks/use-shared';
 
-const HEALTH_COLORS = {
-  ok: 'text-green-500',
-  warning: 'text-yellow-500',
-  error: 'text-red-500',
+const HEALTH_VARIANTS = {
+  ok: 'success',
+  warning: 'warning',
+  error: 'error',
 } as const;
 
 export function HomePage() {
@@ -32,44 +35,48 @@ export function HomePage() {
   if (isOverviewLoading || isSharedLoading) {
     return (
       <div className="p-6 space-y-6">
-        <div>
-          <Skeleton className="h-9 w-[200px] mb-2" />
-          <Skeleton className="h-5 w-[320px]" />
+        {/* Hero Skeleton */}
+        <div className="rounded-xl border p-6">
+          <div className="flex items-center gap-4">
+            <Skeleton className="h-12 w-12 rounded-lg" />
+            <div>
+              <Skeleton className="h-7 w-[180px] mb-2" />
+              <Skeleton className="h-4 w-[220px]" />
+            </div>
+          </div>
         </div>
+
+        {/* Stats Skeleton */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           {[1, 2, 3, 4].map((i) => (
-            <div key={i} className="space-y-3 p-4 border rounded-lg">
-              <div className="flex items-center justify-between">
-                <Skeleton className="h-8 w-8 rounded-full" />
-                <Skeleton className="h-6 w-12" />
-              </div>
-              <div>
-                <Skeleton className="h-4 w-20 mb-1" />
-                <Skeleton className="h-7 w-16" />
+            <div key={i} className="space-y-3 p-4 border rounded-xl">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-12 w-12 rounded-lg" />
+                <div className="flex-1">
+                  <Skeleton className="h-4 w-20 mb-2" />
+                  <Skeleton className="h-7 w-12" />
+                </div>
               </div>
             </div>
           ))}
         </div>
-        <div className="border rounded-lg p-6 space-y-4">
-          <Skeleton className="h-6 w-[180px]" />
+
+        {/* Quick Actions Skeleton */}
+        <div className="border rounded-xl p-6 space-y-4">
+          <Skeleton className="h-6 w-[140px]" />
           <div className="flex flex-wrap gap-3">
             <Skeleton className="h-10 w-[140px] rounded-md" />
             <Skeleton className="h-10 w-[120px] rounded-md" />
             <Skeleton className="h-10 w-[150px] rounded-md" />
           </div>
         </div>
-        <div className="border rounded-lg p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-6 w-[140px]" />
-            <Skeleton className="h-8 w-[80px] rounded-md" />
-          </div>
-          <div className="flex gap-6">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="flex items-center gap-2">
-                <Skeleton className="h-4 w-4" />
-                <Skeleton className="h-4 w-8" />
-                <Skeleton className="h-4 w-16" />
-              </div>
+
+        {/* Quick Commands Skeleton */}
+        <div className="border rounded-xl p-6 space-y-4">
+          <Skeleton className="h-6 w-[160px]" />
+          <div className="grid grid-cols-2 gap-2">
+            {[1, 2, 3, 4].map((i) => (
+              <Skeleton key={i} className="h-14 rounded-lg" />
             ))}
           </div>
         </div>
@@ -77,13 +84,21 @@ export function HomePage() {
     );
   }
 
+  const healthVariant = overview?.health
+    ? HEALTH_VARIANTS[overview.health.status as keyof typeof HEALTH_VARIANTS]
+    : undefined;
+
   return (
     <div className="p-6 space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold">Welcome to CCS Config</h1>
-        <p className="text-muted-foreground">Manage your Claude Code Switch configuration</p>
-      </div>
+      {/* Hero Section */}
+      <HeroSection
+        version={overview?.version}
+        healthStatus={overview?.health?.status}
+        healthPassed={overview?.health?.passed}
+        healthTotal={overview?.health?.total}
+      />
 
+      {/* Configuration Warning */}
       {shared?.symlinkStatus && !shared.symlinkStatus.valid && (
         <Alert variant="warning">
           <AlertTriangle className="h-4 w-4" />
@@ -98,74 +113,87 @@ export function HomePage() {
           title="API Profiles"
           value={overview?.profiles ?? 0}
           icon={Key}
+          variant="accent"
+          subtitle="Settings-based"
           onClick={() => navigate('/api')}
         />
         <StatCard
-          title="CLIProxy Variants"
+          title="CLIProxy"
           value={overview?.cliproxy ?? 0}
           icon={Zap}
+          variant="accent"
+          subtitle={`${overview?.cliproxyProviders ?? 0} auth + ${overview?.cliproxyVariants ?? 0} custom`}
           onClick={() => navigate('/cliproxy')}
         />
         <StatCard
           title="Accounts"
           value={overview?.accounts ?? 0}
           icon={Users}
+          variant="default"
+          subtitle="Isolated instances"
           onClick={() => navigate('/accounts')}
         />
         <StatCard
           title="Health"
           value={overview?.health ? `${overview.health.passed}/${overview.health.total}` : '-'}
           icon={Activity}
-          color={
-            overview?.health
-              ? HEALTH_COLORS[overview.health.status as keyof typeof HEALTH_COLORS]
-              : undefined
-          }
+          variant={healthVariant}
+          subtitle="System checks"
           onClick={() => navigate('/health')}
         />
       </div>
 
       {/* Quick Actions */}
       <Card>
-        <CardHeader>
+        <CardHeader className="pb-3">
           <CardTitle className="text-lg">Quick Actions</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-wrap gap-3">
-          <Button onClick={() => navigate('/api')}>
-            <Plus className="w-4 h-4 mr-2" /> New Profile
+          <Button onClick={() => navigate('/api')} className="gap-2">
+            <Plus className="w-4 h-4" /> New Profile
           </Button>
-          <Button variant="outline" onClick={() => navigate('/health')}>
-            <Stethoscope className="w-4 h-4 mr-2" /> Run Doctor
+          <Button variant="outline" onClick={() => navigate('/health')} className="gap-2">
+            <Stethoscope className="w-4 h-4" /> Run Doctor
           </Button>
-          <Button variant="outline" asChild>
+          <Button variant="outline" asChild className="gap-2">
             <a href="https://github.com/kaitranntt/ccs" target="_blank" rel="noopener noreferrer">
-              <BookOpen className="w-4 h-4 mr-2" /> Documentation
+              <BookOpen className="w-4 h-4" /> Documentation
             </a>
           </Button>
         </CardContent>
       </Card>
 
+      {/* Quick Commands */}
+      <QuickCommands />
+
       {/* Shared Data Summary */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-lg">Shared Data</CardTitle>
-          <Button variant="ghost" size="sm" onClick={() => navigate('/shared')}>
-            View All
+      <Card className="group hover:border-primary/50 transition-colors">
+        <CardHeader className="flex flex-row items-center justify-between pb-3">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <FolderOpen className="w-5 h-5 text-muted-foreground" />
+            Shared Data
+          </CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/shared')}
+            className="gap-1 opacity-70 group-hover:opacity-100 transition-opacity"
+          >
+            View All <ArrowRight className="w-4 h-4" />
           </Button>
         </CardHeader>
         <CardContent>
           <div className="flex gap-6 text-sm">
-            <div className="flex items-center gap-2">
-              <FolderOpen className="w-4 h-4 text-muted-foreground" />
-              <span className="font-medium">{shared?.commands ?? 0}</span>
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50">
+              <span className="text-xl font-bold font-mono">{shared?.commands ?? 0}</span>
               <span className="text-muted-foreground">Commands</span>
             </div>
-            <div className="flex items-center gap-2">
-              <span className="font-medium">{shared?.skills ?? 0}</span>
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50">
+              <span className="text-xl font-bold font-mono">{shared?.skills ?? 0}</span>
               <span className="text-muted-foreground">Skills</span>
             </div>
-            <div className="flex items-center gap-2">
-              <span className="font-medium">{shared?.agents ?? 0}</span>
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50">
+              <span className="text-xl font-bold font-mono">{shared?.agents ?? 0}</span>
               <span className="text-muted-foreground">Agents</span>
             </div>
           </div>