From 5bb5faa4b79c52f28875336edfc6b57306d36a7a Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Tue, 7 Apr 2026 19:48:07 -0400
Subject: [PATCH] fix(cliproxy): tighten sidebar routing presentation

---
 .../account/account-safety-warning-card.tsx   | 60 +++++--------------
 .../cliproxy/routing-guidance-card.tsx        | 36 ++++++++---
 2 files changed, 42 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/account/account-safety-warning-card.tsx b/ui/src/components/account/account-safety-warning-card.tsx
index 15918095..b412caae 100644
--- a/ui/src/components/account/account-safety-warning-card.tsx
+++ b/ui/src/components/account/account-safety-warning-card.tsx
@@ -95,67 +95,45 @@ export function AccountSafetyWarningCard({
       role="alert"
       className={cn(
         'relative overflow-hidden rounded-xl border border-amber-500/30 bg-gradient-to-br from-amber-50 via-background to-rose-50/70 shadow-sm dark:from-amber-950/20 dark:to-rose-950/20',
-        compact &&
-          'rounded-lg border-amber-400/25 bg-gradient-to-r from-amber-50/90 via-background to-background shadow-none dark:from-amber-950/10 dark:to-background',
         className
       )}
     >
       <div className="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500" />
 
-      <div className={cn('space-y-3 p-4', compact && 'space-y-2 px-3 py-2.5')}>
+      <div className="space-y-3 p-4">
         <div className="flex items-start justify-between gap-3">
           <div className="flex items-start gap-2.5">
-            <div
-              className={cn(
-                'mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-amber-700 dark:text-amber-400',
-                compact && 'h-6 w-6 rounded-lg'
-              )}
-            >
+            <div className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-amber-700 dark:text-amber-400">
               <AlertTriangle className="h-4 w-4" />
             </div>
             <div>
-              <p className={cn('text-sm font-semibold leading-5', compact && 'text-xs')}>{title}</p>
+              <p className="text-sm font-semibold leading-5">{title}</p>
               <p className="text-xs text-muted-foreground">{subtitle}</p>
             </div>
           </div>
           <Badge
             variant="outline"
-            className={cn(
-              'border-amber-500/40 text-amber-700 dark:text-amber-300',
-              compact && 'h-5 px-1.5 text-[10px]'
-            )}
+            className="border-amber-500/40 text-amber-700 dark:text-amber-300"
           >
             High Risk
           </Badge>
         </div>
 
-        {compact ? (
-          <div className="space-y-1.5">
-            <p className="text-xs leading-5 text-muted-foreground">{firstLine}</p>
-            <p className="text-xs font-medium leading-5 text-amber-900 dark:text-amber-200">
-              {secondLine}
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-2 text-sm leading-relaxed">
-            <p>{firstLine}</p>
-            <p className="font-medium text-amber-900 dark:text-amber-200">{secondLine}</p>
-            <p className="text-xs text-muted-foreground">
-              CCS is provided as-is and does not take responsibility for suspension, bans, or access
-              loss from upstream providers.
-            </p>
-          </div>
-        )}
+        <div className="space-y-2 text-sm leading-relaxed">
+          <p>{firstLine}</p>
+          <p className="font-medium text-amber-900 dark:text-amber-200">{secondLine}</p>
+          <p className="text-xs text-muted-foreground">
+            CCS is provided as-is and does not take responsibility for suspension, bans, or access
+            loss from upstream providers.
+          </p>
+        </div>
 
         <div className="flex flex-wrap items-center gap-2">
           <a
             href={issueUrl}
             target="_blank"
             rel="noreferrer"
-            className={cn(
-              'inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200',
-              compact && 'px-2 py-0.5 text-[11px]'
-            )}
+            className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200"
           >
             {issueLabel}
             <ExternalLink className="h-3.5 w-3.5" />
@@ -163,21 +141,13 @@ export function AccountSafetyWarningCard({
           {showProxySettingsLink && (
             <a
               href="/settings?tab=proxy"
-              className={cn(
-                'inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200',
-                compact && 'px-2 py-0.5 text-[11px]'
-              )}
+              className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200"
             >
               <Settings2 className="h-3.5 w-3.5" />
               {proxySettingsLabel}
             </a>
           )}
-          <span
-            className={cn(
-              'rounded-md border border-border/70 bg-muted/60 px-2.5 py-1 text-xs text-muted-foreground',
-              compact && 'px-2 py-0.5 text-[11px]'
-            )}
-          >
+          <span className="rounded-md border border-border/70 bg-muted/60 px-2.5 py-1 text-xs text-muted-foreground">
             Applies to CLI and dashboard auth
           </span>
         </div>
diff --git a/ui/src/components/cliproxy/routing-guidance-card.tsx b/ui/src/components/cliproxy/routing-guidance-card.tsx
index 1fb1eac9..73c85590 100644
--- a/ui/src/components/cliproxy/routing-guidance-card.tsx
+++ b/ui/src/components/cliproxy/routing-guidance-card.tsx
@@ -51,14 +51,32 @@ export function RoutingGuidanceCard({
     };
 
     return (
-      <div className={cn('flex items-center justify-between', className)}>
-        <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-          <ArrowRightLeft className="h-3.5 w-3.5" />
-          <span>Routing</span>
-          {isSaving && <RefreshCw className="ml-0.5 h-3 w-3 shrink-0 animate-spin opacity-50" />}
+      <div
+        className={cn(
+          'group/routing flex items-center justify-between mt-1 p-1 -mx-1 rounded-lg transition-colors hover:bg-primary/5',
+          className
+        )}
+      >
+        <div className="flex items-center gap-2 text-xs font-medium text-foreground">
+          <div className="relative flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-background border border-border/60 text-muted-foreground shadow-sm overflow-hidden transition-all duration-300 group-hover/routing:border-primary/40 group-hover/routing:text-primary group-hover/routing:shadow-[0_0_12px_rgba(59,130,246,0.15)] dark:group-hover/routing:shadow-[0_0_12px_rgba(59,130,246,0.1)]">
+            <div className="absolute inset-0 bg-primary/10 translate-y-full group-hover/routing:translate-y-0 transition-transform duration-300 ease-out" />
+            <ArrowRightLeft className="relative z-10 h-3.5 w-3.5 transition-transform duration-300 group-hover/routing:scale-110" />
+          </div>
+          <span className="tracking-tight transition-colors duration-300 group-hover/routing:text-primary group-hover/routing:font-semibold">
+            Routing
+          </span>
+          {isSaving && <RefreshCw className="ml-1 h-3 w-3 shrink-0 animate-spin text-primary" />}
         </div>
 
-        <div className="flex items-center rounded-md border border-border/50 bg-muted/40 p-0.5">
+        <div className="relative grid grid-cols-2 p-0.5 gap-0.5 rounded-lg border border-border/60 bg-muted/30 shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)] transition-colors duration-300 group-hover/routing:border-primary/20 group-hover/routing:bg-primary/5">
+          <div
+            className={cn(
+              'absolute inset-y-0.5 left-0.5 w-[calc(50%-0.1875rem)] rounded bg-background shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-black/5 dark:ring-white/10 transition-all duration-300',
+              selected === 'fill-first' ? 'translate-x-[calc(100%+0.125rem)]' : 'translate-x-0',
+              'group-hover/routing:shadow-[0_0_8px_rgba(59,130,246,0.15)] dark:group-hover/routing:shadow-[0_0_8px_rgba(59,130,246,0.1)] group-hover/routing:ring-primary/30'
+            )}
+            style={{ transitionTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
+          />
           {(
             Object.entries(STRATEGY_COPY) as Array<
               [RoutingStrategy, { title: string; description: string }]
@@ -70,10 +88,10 @@ export function RoutingGuidanceCard({
                 key={strategy}
                 type="button"
                 className={cn(
-                  'relative z-10 rounded-[4px] px-2 py-0.5 text-[10px] font-medium transition-all duration-200',
+                  'relative z-10 flex items-center justify-center rounded px-2.5 py-0.5 text-[10px] font-medium whitespace-nowrap transition-colors duration-200',
                   active
-                    ? 'bg-background text-foreground shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-black/5 dark:ring-white/10'
-                    : 'text-muted-foreground hover:bg-black/5 hover:text-foreground dark:hover:bg-white/5'
+                    ? 'text-foreground group-hover/routing:text-primary'
+                    : 'text-muted-foreground/70 hover:text-foreground/90 group-hover/routing:text-muted-foreground/90'
                 )}
                 onClick={() => handleApply(strategy)}
                 disabled={isLoading || isSaving || !!error}