From e2b9c465e4485c13086b82d282d9c67ae640dc77 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Mon, 26 Jan 2026 14:46:26 -0500
Subject: [PATCH] fix(ui): update sync card for local sync design

- rename Remote Sync to Profile Sync

- change status from Connected/Disconnected to Ready/No Config

- update icons and messaging for local config sync
---
 .../cliproxy/sync/sync-status-card.tsx        | 50 +++++++------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/ui/src/components/cliproxy/sync/sync-status-card.tsx b/ui/src/components/cliproxy/sync/sync-status-card.tsx
index 028dc0ed..b80dec9f 100644
--- a/ui/src/components/cliproxy/sync/sync-status-card.tsx
+++ b/ui/src/components/cliproxy/sync/sync-status-card.tsx
@@ -1,13 +1,13 @@
 /**
  * Sync Status Card Component
- * Shows remote CLIProxy connection status and sync controls
+ * Shows local CLIProxy config sync status and controls
  */
 
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Loader2, RefreshCw, Upload, Wifi, WifiOff, AlertCircle } from 'lucide-react';
+import { Loader2, RefreshCw, FileDown, Check, AlertCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { SyncDialog } from './sync-dialog';
 import { useSyncStatus, useExecuteSync } from '@/hooks/use-cliproxy-sync';
@@ -30,8 +30,8 @@ export function SyncStatusCard() {
       <Card>
         <CardHeader className="pb-3">
           <CardTitle className="text-sm font-medium flex items-center gap-2">
-            <Upload className="w-4 h-4" />
-            Remote Sync
+            <FileDown className="w-4 h-4" />
+            Profile Sync
           </CardTitle>
         </CardHeader>
         <CardContent className="flex items-center justify-center py-6">
@@ -41,7 +41,6 @@ export function SyncStatusCard() {
     );
   }
 
-  const isConnected = status?.connected ?? false;
   const isConfigured = status?.configured ?? false;
 
   return (
@@ -50,50 +49,38 @@ export function SyncStatusCard() {
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <CardTitle className="text-sm font-medium flex items-center gap-2">
-              <Upload className="w-4 h-4" />
-              Remote Sync
+              <FileDown className="w-4 h-4" />
+              Profile Sync
             </CardTitle>
             <Badge
-              variant={isConnected ? 'default' : 'secondary'}
+              variant={isConfigured ? 'default' : 'secondary'}
               className={cn(
                 'gap-1.5',
-                isConnected
+                isConfigured
                   ? 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
-                  : !isConfigured
-                    ? 'bg-muted text-muted-foreground'
-                    : 'bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30'
+                  : 'bg-muted text-muted-foreground'
               )}
             >
-              {isConnected ? (
-                <Wifi className="w-3 h-3" />
-              ) : !isConfigured ? (
-                <WifiOff className="w-3 h-3" />
-              ) : (
-                <AlertCircle className="w-3 h-3" />
-              )}
-              {isConnected ? 'Connected' : !isConfigured ? 'Not Configured' : 'Disconnected'}
+              {isConfigured ? <Check className="w-3 h-3" /> : <AlertCircle className="w-3 h-3" />}
+              {isConfigured ? 'Ready' : 'No Config'}
             </Badge>
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          {isConnected && status?.remoteUrl && (
+          {isConfigured && (
             <div className="text-xs text-muted-foreground">
-              <span className="font-medium">Remote:</span> {status.remoteUrl}
-              {status.latencyMs !== undefined && (
-                <span className="ml-2">({status.latencyMs}ms)</span>
-              )}
+              Syncs API profiles to local CLIProxy config
             </div>
           )}
 
           {!isConfigured && (
             <p className="text-xs text-muted-foreground">
-              Configure remote proxy in Settings to enable profile sync.
+              Run <code className="bg-muted px-1 rounded">ccs doctor --fix</code> to generate
+              config.
             </p>
           )}
 
-          {isConfigured && !isConnected && status?.error && (
-            <p className="text-xs text-red-500">{status.error}</p>
-          )}
+          {status?.error && <p className="text-xs text-red-500">{status.error}</p>}
 
           <div className="flex gap-2">
             <Button
@@ -101,16 +88,15 @@ export function SyncStatusCard() {
               size="sm"
               className="flex-1"
               onClick={() => setDialogOpen(true)}
-              disabled={!isConfigured}
             >
-              Configure
+              Aliases
             </Button>
             <Button
               variant="default"
               size="sm"
               className="flex-1 gap-2"
               onClick={handleQuickSync}
-              disabled={!isConnected || isSyncing}
+              disabled={!isConfigured || isSyncing}
             >
               {isSyncing ? (
                 <Loader2 className="w-3 h-3 animate-spin" />