fix(frontend): apply missing UI redesign changes from #132

Include provider-neutral theming, GPU fit indicator redesign, animation
fixes, and Headlamp plugin cleanup that were left unstaged in #132.

- Remove provider-specific color/theming (getProviderBadgeClass,
  getProviderDisplayName, useProviderTheme, providerColors, [data-provider] CSS)
- Redesign GPU fit indicator with four-tier llmfit-inspired system
  (perfect/good/tight/won't fit) with upgrade delta display
- Fix animation timing: replace invalid ease-out-expo with cubic-bezier
- Update sidebar to fixed 240px with cyan active pill indicator
- Replace Card components with glass-panel styling across pages
- Remove getRuntimeColors/getRuntimeDescription from Headlamp plugin

Author: sozercan

frontend/src/components/deployments/DeploymentList.tsx

@@ -23,23 +23,24 @@ interface DeploymentListProps {
   isLoading?: boolean
 }
 
-function getProviderBadgeClass(provider: string): string {
-  switch (provider) {
-    case 'kuberay': return 'bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300'
-    case 'kaito':   return 'bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300'
-    case 'llmd':    return 'bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300'
-    default:        return 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300'
+function getStatusDotColor(phase: DeploymentStatus['phase']): string {
+  switch (phase) {
+    case 'Running':     return 'bg-green-500'
+    case 'Pending':     return 'bg-amber-400 animate-pulse'
+    case 'Deploying':   return 'bg-blue-500 animate-pulse'
+    case 'Failed':      return 'bg-red-400'
+    case 'Terminating': return 'bg-slate-400 animate-pulse'
+    default:            return 'bg-slate-500'
   }
 }
 
-function getProviderDisplayName(provider: string): string {
-  switch (provider) {
-    case 'kuberay': return 'KubeRay'
-    case 'kaito':   return 'KAITO'
-    case 'llmd':    return 'llm-d'
-    case 'dynamo':  return 'Dynamo'
-    default:        return provider
+function getReplicaColorClass(deployment: DeploymentStatus): string {
+  if (deployment.mode === 'disaggregated' && deployment.prefillReplicas && deployment.decodeReplicas) {
+    const allReady = deployment.prefillReplicas.ready === deployment.prefillReplicas.desired &&
+                     deployment.decodeReplicas.ready === deployment.decodeReplicas.desired
+    return allReady ? 'text-green-400' : 'text-amber-400'
   }
+  return deployment.replicas.ready === deployment.replicas.desired ? 'text-green-400' : 'text-amber-400'
 }
 
 /**
@@ -112,8 +113,8 @@ export function DeploymentList({ deployments, isLoading }: DeploymentListProps)
         {deployments.map((deployment, index) => (
           <div
             key={deployment.name}
-            className="rounded-lg border shadow-soft-sm p-4 space-y-3 bg-card"
-            style={{ animationDelay: `${index * 50}ms` }}
+            className="glass-panel !p-4 flex items-center gap-4 group hover:bg-white/5 hover:border-white/10 transition-all duration-200 animate-slide-up"
+            style={{ animationDelay: `${Math.min(index, 12) * 50}ms`, animationFillMode: 'both' }}
           >
             {/* Header: Name and Status */}
             <div className="flex items-start justify-between gap-2">
@@ -138,9 +139,8 @@ export function DeploymentList({ deployments, isLoading }: DeploymentListProps)
               </Badge>
               <Badge
                 variant="secondary"
-                className={getProviderBadgeClass(deployment.provider)}
               >
-                {getProviderDisplayName(deployment.provider)}
+                {deployment.provider}
               </Badge>
               {deployment.mode === 'disaggregated' && (
                 <Badge variant="secondary" className="text-xs">P/D</Badge>

frontend/src/components/layout/MainLayout.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useState, useCallback, useEffect, createContext, useContext } from 'react'
 import { Sidebar } from './Sidebar'
 import { Header } from './Header'
-import { useProviderTheme } from '@/hooks/useProviderTheme'
 
 interface SidebarContextValue {
   isOpen: boolean
@@ -25,9 +24,6 @@ interface MainLayoutProps {
 }
 
 export function MainLayout({ children }: MainLayoutProps) {
-  // Apply provider-specific theme colors
-  useProviderTheme()
-  
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
 
   const toggle = useCallback(() => {

frontend/src/components/layout/Sidebar.tsx

@@ -22,12 +22,23 @@ export function Sidebar({ onNavigate }: SidebarProps) {
   }
 
   return (
-    <div className="flex h-full w-64 flex-col border-r bg-card overflow-hidden shadow-soft-sm md:shadow-none">
-      {/* Header with logo */}
-      <div className="flex h-16 items-center justify-between border-b px-4 md:px-6">
-        <Link to="/" className="flex items-center gap-2" onClick={handleNavClick}>
-          <img src="/logo.png" alt="KubeAIRunway" className="h-8 w-8" />
-          <span className="text-xl font-bold text-foreground">KubeAIRunway</span>
+    <div
+      className={cn(
+        'flex h-full w-60 flex-col bg-background border-r border-white/5 overflow-hidden',
+        onNavigate && 'shadow-soft-sm'
+      )}
+    >
+      {/* Logo */}
+      <div className="flex h-14 items-center border-b border-white/5 px-4 shrink-0">
+        <Link
+          to="/"
+          className="flex items-center gap-2 min-w-0"
+          onClick={handleNavClick}
+        >
+          <img src="/logo.png" alt="KubeAIRunway" className="h-8 w-8 shrink-0" />
+          <span className="text-xl font-bold text-foreground whitespace-nowrap">
+            KubeAIRunway
+          </span>
         </Link>
 
         {/* Close button - mobile only */}
@@ -63,11 +74,23 @@ export function Sidebar({ onNavigate }: SidebarProps) {
                   : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground active:scale-[0.98]'
               )}
             >
-              <item.icon className={cn(
-                'h-5 w-5 transition-transform duration-150',
-                isActive && 'scale-110'
-              )} />
-              {item.name}
+              <span
+                className={cn(
+                  'absolute left-0 w-1 h-8 rounded-full bg-primary transition-all duration-200 ease-out origin-center',
+                  isActive
+                    ? 'opacity-100 scale-y-100'
+                    : 'opacity-0 scale-y-0'
+                )}
+              />
+              <item.icon
+                className={cn(
+                  'h-5 w-5 shrink-0 transition-transform duration-150',
+                  isActive && 'scale-110'
+                )}
+              />
+              <span className="whitespace-nowrap text-slate-300">
+                {item.name}
+              </span>
             </Link>
           )
         })}

frontend/src/components/metrics/MetricCard.tsx

@@ -64,8 +64,14 @@ export function MetricGrid({ metrics, className }: MetricGridProps) {
 
   return (
     <div className={cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-3", className)}>
-      {metrics.map((metric) => (
-        <MetricCard key={metric.name} metric={metric} />
+      {metrics.map((metric, index) => (
+        <div
+          key={metric.name}
+          className="animate-slide-up"
+          style={{ animationDelay: `${Math.min(index, 12) * 50}ms`, animationFillMode: 'both' }}
+        >
+          <MetricCard metric={metric} />
+        </div>
       ))}
     </div>
   )