feat: add useApiSettings hook for managing API settings, including providers, endpoints, cache, and model pools

- Implemented hooks for CRUD operations on providers and endpoints.
- Added cache management hooks for cache stats and settings.
- Introduced model pool management hooks for high availability and load balancing.
- Created localization files for English and Chinese translations of API settings.

ccw/frontend/src/components/codexlens/OverviewTab.tsx

@@ -9,22 +9,22 @@ import {
   FileText,
   CheckCircle2,
   XCircle,
-  RotateCw,
   Zap,
 } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
 import { cn } from '@/lib/utils';
 import type { CodexLensVenvStatus, CodexLensConfig } from '@/lib/api';
+import { IndexOperations } from './IndexOperations';
 
 interface OverviewTabProps {
   installed: boolean;
   status?: CodexLensVenvStatus;
   config?: CodexLensConfig;
   isLoading: boolean;
+  onRefresh?: () => void;
 }
 
-export function OverviewTab({ installed, status, config, isLoading }: OverviewTabProps) {
+export function OverviewTab({ installed, status, config, isLoading, onRefresh }: OverviewTabProps) {
   const { formatMessage } = useIntl();
 
   if (isLoading) {
@@ -142,42 +142,8 @@ export function OverviewTab({ installed, status, config, isLoading }: OverviewTa
         </Card>
       </div>
 
-      {/* Quick Actions */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {formatMessage({ id: 'codexlens.overview.actions.title' })}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
-            <QuickActionButton
-              icon={<RotateCw className="w-4 h-4" />}
-              label={formatMessage({ id: 'codexlens.overview.actions.ftsFull' })}
-              description={formatMessage({ id: 'codexlens.overview.actions.ftsFullDesc' })}
-              disabled={!isReady}
-            />
-            <QuickActionButton
-              icon={<Zap className="w-4 h-4" />}
-              label={formatMessage({ id: 'codexlens.overview.actions.ftsIncremental' })}
-              description={formatMessage({ id: 'codexlens.overview.actions.ftsIncrementalDesc' })}
-              disabled={!isReady}
-            />
-            <QuickActionButton
-              icon={<RotateCw className="w-4 h-4" />}
-              label={formatMessage({ id: 'codexlens.overview.actions.vectorFull' })}
-              description={formatMessage({ id: 'codexlens.overview.actions.vectorFullDesc' })}
-              disabled={!isReady}
-            />
-            <QuickActionButton
-              icon={<Zap className="w-4 h-4" />}
-              label={formatMessage({ id: 'codexlens.overview.actions.vectorIncremental' })}
-              description={formatMessage({ id: 'codexlens.overview.actions.vectorIncrementalDesc' })}
-              disabled={!isReady}
-            />
-          </div>
-        </CardContent>
-      </Card>
+      {/* Index Operations */}
+      <IndexOperations disabled={!isReady} onRefresh={onRefresh} />
 
       {/* Venv Details */}
       {status && (
@@ -210,37 +176,3 @@ export function OverviewTab({ installed, status, config, isLoading }: OverviewTa
     </div>
   );
 }
-
-interface QuickActionButtonProps {
-  icon: React.ReactNode;
-  label: string;
-  description: string;
-  disabled?: boolean;
-}
-
-function QuickActionButton({ icon, label, description, disabled }: QuickActionButtonProps) {
-  const { formatMessage } = useIntl();
-
-  const handleClick = () => {
-    // TODO: Implement index operations in future tasks
-    // For now, show a message that this feature is coming soon
-    alert(formatMessage({ id: 'codexlens.comingSoon' }));
-  };
-
-  return (
-    <Button
-      variant="outline"
-      className="h-auto p-4 flex flex-col items-start gap-2 text-left"
-      onClick={handleClick}
-      disabled={disabled}
-    >
-      <div className="flex items-center gap-2 w-full">
-        <span className={cn('text-muted-foreground', disabled && 'opacity-50')}>
-          {icon}
-        </span>
-        <span className="font-medium">{label}</span>
-      </div>
-      <p className="text-xs text-muted-foreground">{description}</p>
-    </Button>
-  );
-}