feat(api-settings): add CCW-LiteLLM installation progress overlay and related localization

ccw/frontend/src/components/api-settings/CcwLitellmStatus.tsx

@@ -23,11 +23,13 @@ import {
   useUninstallCcwLitellm,
 } from '@/hooks/useApiSettings';
 import { useNotifications } from '@/hooks/useNotifications';
+import { LitellmInstallProgressOverlay } from './LitellmInstallProgressOverlay';
 
 export function CcwLitellmStatus() {
   const { formatMessage } = useIntl();
   const { success, error: notifyError } = useNotifications();
   const [refresh, setRefresh] = useState(false);
+  const [isInstallOverlayOpen, setIsInstallOverlayOpen] = useState(false);
 
   const { data: status, isLoading, refetch } = useCcwLitellmStatus({ refresh });
   const { install, isInstalling } = useInstallCcwLitellm();
@@ -35,17 +37,22 @@ export function CcwLitellmStatus() {
 
   const isBusy = isInstalling || isUninstalling;
 
-  const handleInstall = async () => {
+  const handleInstallViaOverlay = async (): Promise<{ success: boolean }> => {
     try {
       await install();
       success(formatMessage({ id: 'apiSettings.ccwLitellm.messages.installSuccess' }));
-      setRefresh(true);
-      refetch();
+      return { success: true };
     } catch {
       notifyError(formatMessage({ id: 'apiSettings.ccwLitellm.messages.installFailed' }));
+      return { success: false };
     }
   };
 
+  const handleInstallSuccess = () => {
+    setRefresh(true);
+    refetch();
+  };
+
   const handleUninstall = async () => {
     try {
       await uninstall();
@@ -66,6 +73,7 @@ export function CcwLitellmStatus() {
   const version = status?.version;
 
   return (
+    <>
     <Card>
       <CardContent className="p-4">
         <div className="flex items-center justify-between">
@@ -131,7 +139,7 @@ export function CcwLitellmStatus() {
               <Button
                 variant="default"
                 size="sm"
-                onClick={handleInstall}
+                onClick={() => setIsInstallOverlayOpen(true)}
                 disabled={isBusy}
               >
                 {isInstalling ? (
@@ -146,6 +154,15 @@ export function CcwLitellmStatus() {
         </div>
       </CardContent>
     </Card>
+
+      {/* Install Progress Overlay */}
+      <LitellmInstallProgressOverlay
+        open={isInstallOverlayOpen}
+        onOpenChange={setIsInstallOverlayOpen}
+        onInstall={handleInstallViaOverlay}
+        onSuccess={handleInstallSuccess}
+      />
+    </>
   );
 }
 

ccw/frontend/src/components/api-settings/LitellmInstallProgressOverlay.tsx

@@ -0,0 +1,267 @@
+// ========================================
+// CCW-LiteLLM Install Progress Overlay
+// ========================================
+// Dialog overlay showing staged progress during ccw-litellm installation
+// Adapted from CodexLens InstallProgressOverlay pattern
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Check,
+  Download,
+  Info,
+  Loader2,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/Dialog';
+import { Button } from '@/components/ui/Button';
+import { Progress } from '@/components/ui/Progress';
+import { Card, CardContent } from '@/components/ui/Card';
+
+// ----------------------------------------
+// Types
+// ----------------------------------------
+
+interface InstallStage {
+  progress: number;
+  messageId: string;
+}
+
+interface LitellmInstallProgressOverlayProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onInstall: () => Promise<{ success: boolean }>;
+  onSuccess?: () => void;
+}
+
+// ----------------------------------------
+// Constants
+// ----------------------------------------
+
+const INSTALL_STAGES: InstallStage[] = [
+  { progress: 10, messageId: 'apiSettings.ccwLitellm.install.stage.checkingVenv' },
+  { progress: 25, messageId: 'apiSettings.ccwLitellm.install.stage.detectingPackage' },
+  { progress: 45, messageId: 'apiSettings.ccwLitellm.install.stage.installingDeps' },
+  { progress: 65, messageId: 'apiSettings.ccwLitellm.install.stage.installingPackage' },
+  { progress: 85, messageId: 'apiSettings.ccwLitellm.install.stage.verifying' },
+];
+
+const STAGE_INTERVAL_MS = 2000;
+
+// ----------------------------------------
+// Checklist items
+// ----------------------------------------
+
+interface ChecklistItem {
+  labelId: string;
+  descId: string;
+}
+
+const CHECKLIST_ITEMS: ChecklistItem[] = [
+  { labelId: 'apiSettings.ccwLitellm.install.codexlensVenv', descId: 'apiSettings.ccwLitellm.install.codexlensVenvDesc' },
+  { labelId: 'apiSettings.ccwLitellm.install.litellmPackage', descId: 'apiSettings.ccwLitellm.install.litellmPackageDesc' },
+  { labelId: 'apiSettings.ccwLitellm.install.embeddingSupport', descId: 'apiSettings.ccwLitellm.install.embeddingSupportDesc' },
+];
+
+// ----------------------------------------
+// Component
+// ----------------------------------------
+
+export function LitellmInstallProgressOverlay({
+  open,
+  onOpenChange,
+  onInstall,
+  onSuccess,
+}: LitellmInstallProgressOverlayProps) {
+  const { formatMessage } = useIntl();
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [stageText, setStageText] = useState('');
+  const [isComplete, setIsComplete] = useState(false);
+  const [errorText, setErrorText] = useState('');
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const clearStageInterval = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setIsInstalling(false);
+      setProgress(0);
+      setStageText('');
+      setIsComplete(false);
+      setErrorText('');
+      clearStageInterval();
+    }
+  }, [open, clearStageInterval]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearStageInterval();
+  }, [clearStageInterval]);
+
+  const handleInstall = async () => {
+    setIsInstalling(true);
+    setProgress(0);
+    setIsComplete(false);
+    setErrorText('');
+
+    // Start stage simulation
+    let currentStage = 0;
+    setStageText(formatMessage({ id: INSTALL_STAGES[0].messageId }));
+    setProgress(INSTALL_STAGES[0].progress);
+    currentStage = 1;
+
+    intervalRef.current = setInterval(() => {
+      if (currentStage < INSTALL_STAGES.length) {
+        setStageText(formatMessage({ id: INSTALL_STAGES[currentStage].messageId }));
+        setProgress(INSTALL_STAGES[currentStage].progress);
+        currentStage++;
+      }
+    }, STAGE_INTERVAL_MS);
+
+    try {
+      const result = await onInstall();
+      clearStageInterval();
+
+      if (result.success) {
+        setProgress(100);
+        setStageText(formatMessage({ id: 'apiSettings.ccwLitellm.install.stage.complete' }));
+        setIsComplete(true);
+
+        // Auto-close after showing completion
+        setTimeout(() => {
+          onOpenChange(false);
+          onSuccess?.();
+        }, 1200);
+      } else {
+        setIsInstalling(false);
+        setProgress(0);
+        setStageText('');
+        setErrorText(formatMessage({ id: 'apiSettings.ccwLitellm.messages.installFailed' }));
+      }
+    } catch {
+      clearStageInterval();
+      setIsInstalling(false);
+      setProgress(0);
+      setStageText('');
+      setErrorText(formatMessage({ id: 'apiSettings.ccwLitellm.messages.installFailed' }));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={isInstalling ? undefined : onOpenChange}>
+      <DialogContent className="max-w-lg" onPointerDownOutside={isInstalling ? (e) => e.preventDefault() : undefined}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Download className="w-5 h-5 text-primary" />
+            {formatMessage({ id: 'apiSettings.ccwLitellm.install.title' })}
+          </DialogTitle>
+          <DialogDescription>
+            {formatMessage({ id: 'apiSettings.ccwLitellm.install.description' })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Install Checklist */}
+          <div>
+            <h4 className="text-sm font-medium mb-2">
+              {formatMessage({ id: 'apiSettings.ccwLitellm.install.checklist' })}
+            </h4>
+            <ul className="space-y-2">
+              {CHECKLIST_ITEMS.map((item) => (
+                <li key={item.labelId} className="flex items-start gap-2 text-sm">
+                  <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  <span>
+                    <strong>{formatMessage({ id: item.labelId })}</strong>
+                    {' - '}
+                    {formatMessage({ id: item.descId })}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Install Info */}
+          <Card className="bg-primary/5 border-primary/20">
+            <CardContent className="p-3 flex items-start gap-2">
+              <Info className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
+              <div className="text-sm text-muted-foreground">
+                <p className="font-medium text-foreground">
+                  {formatMessage({ id: 'apiSettings.ccwLitellm.install.location' })}
+                </p>
+                <p className="mt-1">
+                  <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+                    {formatMessage({ id: 'apiSettings.ccwLitellm.install.locationPath' })}
+                  </code>
+                </p>
+                <p className="mt-1">
+                  {formatMessage({ id: 'apiSettings.ccwLitellm.install.timeEstimate' })}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Progress Section - shown during install */}
+          {isInstalling && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                {isComplete ? (
+                  <Check className="w-5 h-5 text-green-500" />
+                ) : (
+                  <Loader2 className="w-5 h-5 text-primary animate-spin" />
+                )}
+                <span className="text-sm">{stageText}</span>
+              </div>
+              <Progress value={progress} className="h-2" />
+            </div>
+          )}
+
+          {/* Error message */}
+          {errorText && !isInstalling && (
+            <p className="text-sm text-destructive">{errorText}</p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isInstalling}
+          >
+            {formatMessage({ id: 'apiSettings.common.cancel' })}
+          </Button>
+          <Button
+            onClick={handleInstall}
+            disabled={isInstalling}
+          >
+            {isInstalling ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                {formatMessage({ id: 'apiSettings.ccwLitellm.install.installing' })}
+              </>
+            ) : (
+              <>
+                <Download className="w-4 h-4 mr-2" />
+                {formatMessage({ id: 'apiSettings.ccwLitellm.install.installNow' })}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default LitellmInstallProgressOverlay;

ccw/frontend/src/components/codexlens/SettingsTab.test.tsx

@@ -18,8 +18,6 @@ vi.mock('@/hooks', async (importOriginal) => {
     useCodexLensEnv: vi.fn(),
     useUpdateCodexLensEnv: vi.fn(),
     useCodexLensModels: vi.fn(),
-    useCodexLensRerankerConfig: vi.fn(),
-    useUpdateRerankerConfig: vi.fn(),
     useNotifications: vi.fn(() => ({
       toasts: [],
       wsStatus: 'disconnected' as const,
@@ -50,8 +48,6 @@ import {
   useCodexLensEnv,
   useUpdateCodexLensEnv,
   useCodexLensModels,
-  useCodexLensRerankerConfig,
-  useUpdateRerankerConfig,
   useNotifications,
 } from '@/hooks';
 
@@ -106,25 +102,6 @@ function setupDefaultMocks() {
     error: null,
     refetch: vi.fn(),
   });
-  vi.mocked(useCodexLensRerankerConfig).mockReturnValue({
-    data: undefined,
-    backend: 'fastembed',
-    modelName: '',
-    apiProvider: '',
-    apiKeySet: false,
-    availableBackends: ['onnx', 'api', 'litellm', 'legacy'],
-    apiProviders: ['siliconflow', 'cohere', 'jina'],
-    litellmModels: undefined,
-    configSource: 'default',
-    isLoading: false,
-    error: null,
-    refetch: vi.fn(),
-  });
-  vi.mocked(useUpdateRerankerConfig).mockReturnValue({
-    updateConfig: vi.fn().mockResolvedValue({ success: true, message: 'Saved' }),
-    isUpdating: false,
-    error: null,
-  });
 }
 
 describe('SettingsTab', () => {
@@ -347,25 +324,6 @@ describe('SettingsTab', () => {
         error: null,
         refetch: vi.fn(),
       });
-      vi.mocked(useCodexLensRerankerConfig).mockReturnValue({
-        data: undefined,
-        backend: 'fastembed',
-        modelName: '',
-        apiProvider: '',
-        apiKeySet: false,
-        availableBackends: [],
-        apiProviders: [],
-        litellmModels: undefined,
-        configSource: 'default',
-        isLoading: false,
-        error: null,
-        refetch: vi.fn(),
-      });
-      vi.mocked(useUpdateRerankerConfig).mockReturnValue({
-        updateConfig: vi.fn().mockResolvedValue({ success: true }),
-        isUpdating: false,
-        error: null,
-      });
 
       render(<SettingsTab enabled={true} />);
 

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

@@ -7,263 +7,22 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { Save, RefreshCw, Loader2 } from 'lucide-react';
+import { Save, RefreshCw } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Label } from '@/components/ui/Label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SelectGroup,
-  SelectLabel,
-} from '@/components/ui/Select';
 import {
   useCodexLensConfig,
   useCodexLensEnv,
   useUpdateCodexLensEnv,
   useCodexLensModels,
-  useCodexLensRerankerConfig,
-  useUpdateRerankerConfig,
 } from '@/hooks';
 import { useNotifications } from '@/hooks';
 import { cn } from '@/lib/utils';
 import { SchemaFormRenderer } from './SchemaFormRenderer';
 import { envVarGroupsSchema, getSchemaDefaults } from './envVarSchema';
 
-// ========== Reranker Configuration Card ==========
-
-interface RerankerConfigCardProps {
-  enabled?: boolean;
-}
-
-function RerankerConfigCard({ enabled = true }: RerankerConfigCardProps) {
-  const { formatMessage } = useIntl();
-  const { success: showSuccess, error: showError } = useNotifications();
-
-  const {
-    backend: serverBackend,
-    modelName: serverModelName,
-    apiProvider: serverApiProvider,
-    apiKeySet,
-    availableBackends,
-    apiProviders,
-    litellmModels,
-    configSource,
-    isLoading,
-  } = useCodexLensRerankerConfig({ enabled });
-
-  const { updateConfig, isUpdating } = useUpdateRerankerConfig();
-
-  const [backend, setBackend] = useState('');
-  const [modelName, setModelName] = useState('');
-  const [apiProvider, setApiProvider] = useState('');
-  const [hasChanges, setHasChanges] = useState(false);
-
-  // Initialize form from server data
-  useEffect(() => {
-    setBackend(serverBackend);
-    setModelName(serverModelName);
-    setApiProvider(serverApiProvider);
-    setHasChanges(false);
-  }, [serverBackend, serverModelName, serverApiProvider]);
-
-  // Detect changes
-  useEffect(() => {
-    const changed =
-      backend !== serverBackend ||
-      modelName !== serverModelName ||
-      apiProvider !== serverApiProvider;
-    setHasChanges(changed);
-  }, [backend, modelName, apiProvider, serverBackend, serverModelName, serverApiProvider]);
-
-  const handleSave = async () => {
-    try {
-      const request: Record<string, string> = {};
-      if (backend !== serverBackend) request.backend = backend;
-      if (modelName !== serverModelName) {
-        // When backend is litellm, model_name is sent as litellm_endpoint
-        if (backend === 'litellm') {
-          request.litellm_endpoint = modelName;
-        } else {
-          request.model_name = modelName;
-        }
-      }
-      if (apiProvider !== serverApiProvider) request.api_provider = apiProvider;
-
-      const result = await updateConfig(request);
-      if (result.success) {
-        showSuccess(
-          formatMessage({ id: 'codexlens.reranker.saveSuccess' }),
-          result.message || ''
-        );
-      } else {
-        showError(
-          formatMessage({ id: 'codexlens.reranker.saveFailed' }),
-          result.error || ''
-        );
-      }
-    } catch (err) {
-      showError(
-        formatMessage({ id: 'codexlens.reranker.saveFailed' }),
-        err instanceof Error ? err.message : ''
-      );
-    }
-  };
-
-  // Determine whether to show litellm model dropdown or text input
-  const showLitellmModelSelect = backend === 'litellm' && litellmModels && litellmModels.length > 0;
-  // Show provider dropdown only for api backend
-  const showProviderSelect = backend === 'api';
-
-  if (isLoading) {
-    return (
-      <Card className="p-6">
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <Loader2 className="w-4 h-4 animate-spin" />
-          <span>{formatMessage({ id: 'common.loading' })}</span>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="p-6">
-      <h3 className="text-lg font-semibold text-foreground mb-1">
-        {formatMessage({ id: 'codexlens.reranker.title' })}
-      </h3>
-      <p className="text-sm text-muted-foreground mb-4">
-        {formatMessage({ id: 'codexlens.reranker.description' })}
-      </p>
-
-      <div className="space-y-4">
-        {/* Backend Select */}
-        <div className="space-y-2">
-          <Label>{formatMessage({ id: 'codexlens.reranker.backend' })}</Label>
-          <Select value={backend} onValueChange={setBackend}>
-            <SelectTrigger>
-              <SelectValue placeholder={formatMessage({ id: 'codexlens.reranker.selectBackend' })} />
-            </SelectTrigger>
-            <SelectContent>
-              {availableBackends.length > 0 ? (
-                availableBackends.map((b) => (
-                  <SelectItem key={b} value={b}>
-                    {b}
-                  </SelectItem>
-                ))
-              ) : (
-                <SelectItem value="_none" disabled>
-                  {formatMessage({ id: 'codexlens.reranker.noBackends' })}
-                </SelectItem>
-              )}
-            </SelectContent>
-          </Select>
-          <p className="text-xs text-muted-foreground">
-            {formatMessage({ id: 'codexlens.reranker.backendHint' })}
-          </p>
-        </div>
-
-        {/* Model - Select for litellm, Input for others */}
-        <div className="space-y-2">
-          <Label>{formatMessage({ id: 'codexlens.reranker.model' })}</Label>
-          {showLitellmModelSelect ? (
-            <Select value={modelName} onValueChange={setModelName}>
-              <SelectTrigger>
-                <SelectValue placeholder={formatMessage({ id: 'codexlens.reranker.selectModel' })} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>
-                    {formatMessage({ id: 'codexlens.reranker.litellmModels' })}
-                  </SelectLabel>
-                  {litellmModels!.map((m) => (
-                    <SelectItem key={m.modelId} value={m.modelId}>
-                      {m.modelName}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          ) : (
-            <Input
-              value={modelName}
-              onChange={(e) => setModelName(e.target.value)}
-              placeholder={formatMessage({ id: 'codexlens.reranker.selectModel' })}
-            />
-          )}
-          <p className="text-xs text-muted-foreground">
-            {formatMessage({ id: 'codexlens.reranker.modelHint' })}
-          </p>
-        </div>
-
-        {/* Provider Select (only for api backend) */}
-        {showProviderSelect && (
-          <div className="space-y-2">
-            <Label>{formatMessage({ id: 'codexlens.reranker.provider' })}</Label>
-            <Select value={apiProvider} onValueChange={setApiProvider}>
-              <SelectTrigger>
-                <SelectValue placeholder={formatMessage({ id: 'codexlens.reranker.selectProvider' })} />
-              </SelectTrigger>
-              <SelectContent>
-                {apiProviders.length > 0 ? (
-                  apiProviders.map((p) => (
-                    <SelectItem key={p} value={p}>
-                      {p}
-                    </SelectItem>
-                  ))
-                ) : (
-                  <SelectItem value="_none" disabled>
-                    {formatMessage({ id: 'codexlens.reranker.noProviders' })}
-                  </SelectItem>
-                )}
-              </SelectContent>
-            </Select>
-            <p className="text-xs text-muted-foreground">
-              {formatMessage({ id: 'codexlens.reranker.providerHint' })}
-            </p>
-          </div>
-        )}
-
-        {/* Status Row */}
-        <div className="flex items-center gap-4 text-sm text-muted-foreground pt-2 border-t">
-          <span>
-            {formatMessage({ id: 'codexlens.reranker.apiKeyStatus' })}:{' '}
-            <span className={apiKeySet ? 'text-green-600' : 'text-yellow-600'}>
-              {apiKeySet
-                ? formatMessage({ id: 'codexlens.reranker.apiKeySet' })
-                : formatMessage({ id: 'codexlens.reranker.apiKeyNotSet' })}
-            </span>
-          </span>
-          <span>
-            {formatMessage({ id: 'codexlens.reranker.configSource' })}: {configSource}
-          </span>
-        </div>
-
-        {/* Save Button */}
-        <div className="flex items-center gap-2 pt-2">
-          <Button
-            onClick={handleSave}
-            disabled={isUpdating || !hasChanges}
-            size="sm"
-          >
-            {isUpdating ? (
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-            ) : (
-              <Save className="w-4 h-4 mr-2" />
-            )}
-            {isUpdating
-              ? formatMessage({ id: 'codexlens.reranker.saving' })
-              : formatMessage({ id: 'codexlens.reranker.save' })}
-          </Button>
-        </div>
-      </div>
-    </Card>
-  );
-}
-
 // ========== Settings Tab ==========
 
 interface SettingsTabProps {
@@ -462,9 +221,6 @@ export function SettingsTab({ enabled = true }: SettingsTabProps) {
         </div>
       </Card>
 
-      {/* Reranker Configuration */}
-      <RerankerConfigCard enabled={enabled} />
-
       {/* General Configuration */}
       <Card className="p-6">
         <h3 className="text-lg font-semibold text-foreground mb-4">

ccw/frontend/src/components/dashboard/widgets/WorkflowTaskWidget.tsx

@@ -650,14 +650,14 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
               onClick={() => handleSessionClick(currentSession.session_id)}
             >
               {/* Session Header */}
-              <div className="mb-2 pb-2 border-b border-border shrink-0">
-                <div className="flex items-start gap-2">
+              <div className="mb-2 pb-2 border-b border-border shrink-0 min-w-0">
+                <div className="flex items-start gap-2 min-w-0">
                   <div className={cn('px-2 py-1 rounded text-xs font-medium shrink-0', sessionStatusColors[currentSession.status]?.bg || 'bg-muted', sessionStatusColors[currentSession.status]?.text || 'text-muted-foreground')}>
                     {formatMessage({ id: `common.status.${currentSession.status === 'in_progress' ? 'inProgress' : currentSession.status}` })}
                   </div>
-                  <div className="flex-1 min-w-0">
+                  <div className="flex-1 min-w-0 overflow-hidden">
                     <p className="text-sm font-medium text-foreground truncate">{currentSession.title || currentSession.session_id}</p>
-                    <p className="text-xs text-muted-foreground">{currentSession.session_id}</p>
+                    <p className="text-xs text-muted-foreground truncate">{currentSession.session_id}</p>
                   </div>
                 </div>
                 {/* Description */}

ccw/frontend/src/locales/en/api-settings.json

@@ -337,6 +337,30 @@
       "installFailed": "Failed to install ccw-litellm",
       "uninstallSuccess": "ccw-litellm uninstalled successfully",
       "uninstallFailed": "Failed to uninstall ccw-litellm"
+    },
+    "install": {
+      "title": "Install CCW-LiteLLM",
+      "description": "Install ccw-litellm into the CodexLens Python virtual environment for embedding support.",
+      "checklist": "What will be installed",
+      "codexlensVenv": "CodexLens Venv",
+      "codexlensVenvDesc": "Ensures CodexLens Python virtual environment is ready",
+      "litellmPackage": "ccw-litellm Package",
+      "litellmPackageDesc": "LiteLLM-based embedding client for multi-provider support",
+      "embeddingSupport": "Embedding Support",
+      "embeddingSupportDesc": "Enables LiteLLM embedding backend for semantic search",
+      "location": "Install Location",
+      "locationPath": "~/.codexlens/venv",
+      "timeEstimate": "Installation may take 1-3 minutes depending on network speed.",
+      "installNow": "Install Now",
+      "installing": "Installing...",
+      "stage": {
+        "checkingVenv": "Checking CodexLens virtual environment...",
+        "detectingPackage": "Detecting ccw-litellm package source...",
+        "installingDeps": "Installing dependencies...",
+        "installingPackage": "Installing ccw-litellm package...",
+        "verifying": "Verifying installation...",
+        "complete": "Installation complete!"
+      }
     }
   },
   "common": {

ccw/frontend/src/locales/zh/api-settings.json

@@ -337,6 +337,30 @@
       "installFailed": "ccw-litellm 安装失败",
       "uninstallSuccess": "ccw-litellm 卸载成功",
       "uninstallFailed": "ccw-litellm 卸载失败"
+    },
+    "install": {
+      "title": "安装 CCW-LiteLLM",
+      "description": "将 ccw-litellm 安装到 CodexLens Python 虚拟环境中以支持嵌入功能。",
+      "checklist": "将要安装的内容",
+      "codexlensVenv": "CodexLens 虚拟环境",
+      "codexlensVenvDesc": "确保 CodexLens Python 虚拟环境就绪",
+      "litellmPackage": "ccw-litellm 包",
+      "litellmPackageDesc": "基于 LiteLLM 的嵌入客户端，支持多提供商",
+      "embeddingSupport": "嵌入支持",
+      "embeddingSupportDesc": "启用 LiteLLM 嵌入后端用于语义搜索",
+      "location": "安装位置",
+      "locationPath": "~/.codexlens/venv",
+      "timeEstimate": "安装可能需要 1-3 分钟，取决于网络速度。",
+      "installNow": "立即安装",
+      "installing": "安装中...",
+      "stage": {
+        "checkingVenv": "正在检查 CodexLens 虚拟环境...",
+        "detectingPackage": "正在检测 ccw-litellm 包来源...",
+        "installingDeps": "正在安装依赖项...",
+        "installingPackage": "正在安装 ccw-litellm 包...",
+        "verifying": "正在验证安装...",
+        "complete": "安装完成！"
+      }
     }
   },
   "common": {