feat(frontend): Midnight Cyberpunk UI redesign

[sozercan]

Summary

Complete visual overhaul of the KubeAIRunway frontend with a dark, glassmorphism-based design system, plus subtle motion design, provider-neutral theming, and improved GPU fit indicators.

Theme & Foundation

• Background: Navy-black (#0F1419) with Electric Cyan (#00D9FF) accent
• Glassmorphism: Translucent surfaces with backdrop-blur, rgba(255,255,255,0.03) backgrounds, subtle borders
• Typography: Satoshi (headings) + Inter (body) + JetBrains Mono (code)
• No radial gradient decorations — clean dark background throughout

Layout Changes

• Sidebar: Fixed 240px navigation rail with cyan active pill indicator (CSS-transitioned, not conditionally rendered), cluster status dot, and height-aligned logo area (matches header at 56px)
• Header: Glass top bar with breadcrumb navigation, cluster connection badge, and refresh button
• Mobile: Hamburger drawer with backdrop overlay and slide-in transition

Motion Design (CSS-only, no animation library)

• Page entrances: animate-slide-up (8px translateY + fade, 250ms) on all page root containers
• Staggered lists: Deployment rows, model cards, and metric cards cascade in with 50ms stagger delays and animation-fill-mode: both
• Section stagger: DeploymentDetailsPage and DeployPage sections cascade with incremental delays
• Sidebar indicator: Active bar transitions with opacity/scale instead of conditional mount
• Settings tabs: Tab content slides up on switch
• Reduced motion: Existing prefers-reduced-motion: reduce rule disables all animations
• Bug fix: All animation timing functions were using ease-out-expo (a Tailwind transition token), which is invalid in CSS animation shorthand — replaced with actual cubic-bezier(0.16, 1, 0.3, 1) values

Provider-Neutral Theming

Removed all provider-specific color/theming code from the UI — runtimes are displayed neutrally:

• Deleted useProviderTheme hook (was already a no-op)
• Removed getProviderBadgeClass() / getProviderDisplayName() from DeploymentDetailsPage and DeploymentList — badges now use neutral variant="secondary" and show the raw provider string
• Removed providerColors map and colored top borders from SettingsPage runtime cards
• Removed dead [data-provider] CSS blocks from index.css (never matched since nothing set the attribute)
• Removed getRuntimeColors() and hardcoded provider display names from Headlamp plugin
• Removed getRuntimeDescription() with its hardcoded per-provider descriptions from Headlamp RuntimesStatus

GPU Fit Indicator Redesign

Replaced the color-only bar with a four-tier fit system (inspired by llmfit):

Level	Utilization	Display
Perfect fit	< 60%	Green ✓ icon + label
Good fit	60–80%	Cyan ✓ icon + label
Tight fit	80–100%	Amber ⚠ icon + "may not leave headroom for KV cache"
Won't fit	> 100%	Red ✕ icon + "Exceeds cluster GPU capacity"

• Fit level label and icon are always visible (not tooltip-only)
• Shows utilization as X.X / Y GB inline
• Upgrade delta: When marginal or exceeding, shows "+N GB VRAM needed for comfortable fit" (uses 1.2x recommended headroom)
• Tooltip provides full detail with percentage

Component Updates (15 UI primitives)

• Rounded-2xl buttons with cyan glow shadows
• Glass-panel cards, dialogs, selects, tooltips
• Underline-style tabs with cyan active border
• Cyan focus rings (ring-primary/40) throughout

Page Redesigns

Page	Key Changes
Models	Hero section, glass model cards with hover lift, four-tier GPU fit indicator, glass search + filter chips
Deploy	Glass-panel form sections, staggered section entrance, full-width deploy button
Deployments	Card-based rows (replaced table), color-coded status dots with pulse animation, engine badges
Details	Glass panels with cascading entrance, metric cards with left accent border, terminal-style logs (#0A0A0A), monospace code blocks
Settings	Glass panels, provider-neutral runtime cards, integration status cards

Testing

• All 78 frontend tests pass (6 test files)
• All 548 backend tests pass
• No TypeScript compilation errors
• 42 files changed, 1188 insertions, 1118 deletions

Design Principles

• WCAG AA contrast maintained for all text on dark backgrounds
• prefers-reduced-motion respected — all animations disabled
• Responsive: 4-col → 3-col → 2-col → 1-col grid, hamburger drawer on mobile
• All interactive elements have visible focus indicators
• Icon-only buttons have aria-label and tooltips
• Provider-neutral — no hardcoded provider colors or display names in the UI