Refactor code structure for improved readability and maintainability

ccw/frontend/src/pages/ApiSettingsPage.tsx

@@ -24,12 +24,11 @@ import {
   MultiKeySettingsModal,
   ManageModelsModal,
 } from '@/components/api-settings';
-import { ConfigSync } from '@/components/shared';
 import { useProviders, useEndpoints, useModelPools, useCliSettings, useSyncApiConfig } from '@/hooks/useApiSettings';
 import { useNotifications } from '@/hooks/useNotifications';
 
 // Tab type definitions
-type TabType = 'providers' | 'endpoints' | 'cache' | 'modelPools' | 'cliSettings' | 'configSync';
+type TabType = 'providers' | 'endpoints' | 'cache' | 'modelPools' | 'cliSettings';
 
 export function ApiSettingsPage() {
   const { formatMessage } = useIntl();
@@ -218,7 +217,6 @@ export function ApiSettingsPage() {
           { value: 'cache', label: formatMessage({ id: 'apiSettings.tabs.cache' }) },
           { value: 'modelPools', label: formatMessage({ id: 'apiSettings.tabs.modelPools' }) },
           { value: 'cliSettings', label: formatMessage({ id: 'apiSettings.tabs.cliSettings' }) },
-          { value: 'configSync', label: formatMessage({ id: 'apiSettings.tabs.configSync' }) || 'Config Sync' },
         ]}
       />
 
@@ -268,12 +266,6 @@ export function ApiSettingsPage() {
         </div>
       )}
 
-      {activeTab === 'configSync' && (
-        <div className="mt-4">
-          <ConfigSync />
-        </div>
-      )}
-
       {/* Modals */}
       <ProviderModal
         open={providerModalOpen}

ccw/frontend/src/pages/CodexLensManagerPage.tsx

@@ -34,6 +34,7 @@ import { GpuSelector } from '@/components/codexlens/GpuSelector';
 import { ModelsTab } from '@/components/codexlens/ModelsTab';
 import { SearchTab } from '@/components/codexlens/SearchTab';
 import { SemanticInstallDialog } from '@/components/codexlens/SemanticInstallDialog';
+import { InstallProgressOverlay } from '@/components/codexlens/InstallProgressOverlay';
 import { useCodexLensDashboard, useCodexLensMutations } from '@/hooks';
 import { cn } from '@/lib/utils';
 
@@ -42,6 +43,7 @@ export function CodexLensManagerPage() {
   const [activeTab, setActiveTab] = useState('overview');
   const [isUninstallDialogOpen, setIsUninstallDialogOpen] = useState(false);
   const [isSemanticInstallOpen, setIsSemanticInstallOpen] = useState(false);
+  const [isInstallOverlayOpen, setIsInstallOverlayOpen] = useState(false);
 
   const {
     installed,
@@ -64,11 +66,13 @@ export function CodexLensManagerPage() {
     refetch();
   };
 
-  const handleBootstrap = async () => {
+  const handleBootstrap = () => {
+    setIsInstallOverlayOpen(true);
+  };
+
+  const handleBootstrapInstall = async () => {
     const result = await bootstrap();
-    if (result.success) {
-      refetch();
-    }
+    return result;
   };
 
   const handleUninstall = async () => {
@@ -231,6 +235,14 @@ export function CodexLensManagerPage() {
         onOpenChange={setIsSemanticInstallOpen}
         onSuccess={() => refetch()}
       />
+
+      {/* Install Progress Overlay */}
+      <InstallProgressOverlay
+        open={isInstallOverlayOpen}
+        onOpenChange={setIsInstallOverlayOpen}
+        onInstall={handleBootstrapInstall}
+        onSuccess={() => refetch()}
+      />
     </div>
   );
 }