@gravito/zenith 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravito/zenith",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Gravito Zenith: Zero-config control plane for Gravito Flux & Stream",
   "type": "module",
   "bin": {
@@ -17,13 +17,15 @@
     "test": "bun test",
     "typecheck": "bun tsc -p tsconfig.json --noEmit --skipLibCheck",
     "seed": "bun scripts/seed.ts",
-    "worker": "bun scripts/worker.ts"
+    "worker": "bun scripts/worker.ts",
+    "test:unit": "bun test",
+    "test:integration": "test $(find tests -name '*.integration.test.ts' 2>/dev/null | wc -l) -gt 0 && find tests -name '*.integration.test.ts' -print0 | xargs -0 bun test --timeout=10000 || echo 'No integration tests found'"
   },
   "dependencies": {
-    "@gravito/atlas": "workspace:*",
-    "@gravito/photon": "workspace:*",
-    "@gravito/quasar": "workspace:*",
-    "@gravito/stream": "workspace:*",
+    "@gravito/atlas": "^1.6.0",
+    "@gravito/photon": "^1.0.1",
+    "@gravito/quasar": "^1.3.0",
+    "@gravito/stream": "^2.0.2",
     "@tanstack/react-query": "^5.0.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -51,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

package/src/client/Layout.tsx

@@ -379,20 +379,20 @@ export function Layout({ children }: LayoutProps) {
         animate={{ width: isSidebarOpen ? 260 : 80 }}
         className="border-r border-border/40 bg-card/50 backdrop-blur-xl flex flex-col z-50 transition-all duration-300 ease-[0.22, 1, 0.36, 1]"
       >
-        <div className="h-16 flex items-center px-6 border-b border-border/40 bg-card/80">
+        <div className="h-16 flex items-center px-6 border-b border-white/5 bg-black/40">
           <div className="flex items-center gap-3 overflow-hidden">
-            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shrink-0 shadow-lg shadow-primary/20">
-              <Zap className="text-primary-foreground fill-current" size={18} />
+            <div className="w-9 h-9 rounded-xl bg-primary flex items-center justify-center shrink-0 shadow-[0_0_20px_rgba(0,240,255,0.3)]">
+              <Zap className="text-black fill-current" size={20} />
             </div>
             <motion.div
               animate={{ opacity: isSidebarOpen ? 1 : 0 }}
               className="flex flex-col min-w-[140px]"
             >
-              <span className="font-extrabold text-lg tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
+              <span className="font-black text-xl tracking-tighter leading-none text-white font-heading italic uppercase">
                 Zenith
               </span>
-              <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-[0.2em]">
-                Control Plane
+              <span className="text-[8px] font-black text-primary uppercase tracking-[0.3em] mt-0.5">
+                Quantum Control
               </span>
             </motion.div>
           </div>
@@ -430,17 +430,17 @@ export function Layout({ children }: LayoutProps) {
             </button>
 
             {/* System Integrity Indicator */}
-            <div className="hidden lg:flex items-center gap-3 px-4 py-1.5 rounded-full bg-primary/5 border border-primary/10 transition-all hover:bg-primary/10 hover:border-primary/20 cursor-default group">
+            <div className="hidden lg:flex items-center gap-3 px-4 py-2 rounded-xl bg-primary/5 border border-primary/20 transition-all hover:bg-primary/10 cursor-default group shadow-[inset_0_0_20px_rgba(0,240,255,0.02)]">
               <div className="relative flex items-center justify-center">
-                <ShieldCheck size={14} className="text-primary z-10" />
-                <div className="absolute w-3 h-3 bg-primary rounded-full glow-pulse"></div>
+                <ShieldCheck size={16} className="text-primary z-10" />
+                <div className="absolute w-4 h-4 bg-primary/20 rounded-full glow-pulse"></div>
               </div>
               <div className="flex flex-col">
-                <span className="text-[9px] font-black uppercase tracking-[0.1em] text-primary/60 leading-none">
-                  System Integrity
+                <span className="text-[8px] font-black uppercase tracking-[0.2em] text-primary/60 leading-none">
+                  Quantum Core
                 </span>
-                <span className="text-[11px] font-black tracking-tight leading-none">
-                  {health.toFixed(1)}% Nominal
+                <span className="text-[11px] font-black tracking-tight leading-none text-white mt-0.5 font-mono">
+                  {health.toFixed(2)}% NOMINAL
                 </span>
               </div>
             </div>
@@ -452,6 +452,7 @@ export function Layout({ children }: LayoutProps) {
               onClick={toggleTheme}
               className="p-2.5 hover:bg-muted rounded-xl text-muted-foreground hover:text-primary transition-all duration-300 active:scale-95 group relative"
               title={theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
+              aria-label={theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
             >
               {theme === 'light' ? (
                 <Moon size={20} className="group-hover:rotate-[15deg] transition-transform" />
@@ -483,45 +484,41 @@ export function Layout({ children }: LayoutProps) {
         </div>
 
         {/* Dynamic Status Bar (Ambient) */}
-        <footer className="h-7 border-t bg-card/80 backdrop-blur-md flex items-center justify-between px-6 z-10 transition-colors">
+        <footer className="h-8 border-t border-white/5 bg-black/60 backdrop-blur-xl flex items-center justify-between px-6 z-10 transition-colors">
           <div className="flex items-center gap-6 overflow-hidden">
-            <div className="flex items-center gap-2 border-r border-border/50 pr-4">
-              <span className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]"></span>
-              <span className="text-[10px] font-black text-muted-foreground/60 uppercase tracking-widest whitespace-nowrap">
-                Node: {systemStatus?.env || 'production-east-1'}
+            <div className="flex items-center gap-2 border-r border-white/10 pr-4">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_#10B981]"></span>
+              <span className="text-[9px] font-black text-white/40 uppercase tracking-[0.2em] whitespace-nowrap font-mono">
+                {systemStatus?.env || 'QUANTUM-1'}
               </span>
             </div>
-            <div className="flex items-center gap-4 text-[9px] font-black text-muted-foreground/40 uppercase tracking-[0.2em] animate-in fade-in slide-in-from-left duration-1000">
-              <span className="flex items-center gap-1.5">
-                <Activity size={10} className="text-primary/40" /> Latency: 4ms
+            <div className="flex items-center gap-4 text-[9px] font-black text-white/20 uppercase tracking-[0.3em] animate-in fade-in slide-in-from-left duration-1000">
+              <span className="flex items-center gap-1.5 text-primary/60">
+                <Activity size={10} className="text-primary" /> 4MS
               </span>
-              <span className="hidden sm:inline border-l border-border/30 pl-4 text-primary">
-                RAM: {systemStatus?.memory?.rss || '...'} /{' '}
-                {systemStatus?.memory?.total || '4.00 GB'}
+              <span className="hidden sm:inline border-l border-white/5 pl-4 text-white/40">
+                MEM: {systemStatus?.memory?.rss || '...'}
               </span>
-              <span className="hidden md:inline border-l border-border/30 pl-4 uppercase">
-                Engine: {systemStatus?.engine || 'v2.4.1-beta'}
-              </span>
-              <span className="hidden lg:inline border-l border-border/30 pl-4 lowercase">
-                v: {systemStatus?.node || '...'}
+              <span className="hidden md:inline border-l border-white/5 pl-4 text-white/40">
+                ENGINE: {systemStatus?.engine || 'V2.4.1'}
               </span>
             </div>
           </div>
-          <div className="flex items-center gap-4 pl-4 bg-gradient-to-l from-card via-card to-transparent text-right">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-1 bg-muted rounded-full overflow-hidden">
+          <div className="flex items-center gap-4 pl-4 bg-gradient-to-l from-black via-black to-transparent text-right">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-1 bg-white/5 rounded-full overflow-hidden">
                 <motion.div
-                  animate={{ x: [-20, 20] }}
-                  transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
-                  className="w-4 h-full bg-primary/40"
+                  animate={{ x: [-48, 48] }}
+                  transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
+                  className="w-6 h-full bg-primary/40 shadow-[0_0_10px_#00F0FF]"
                 />
               </div>
-              <span className="text-[9px] font-black text-primary/60 uppercase tracking-widest">
-                Bus Traffic
+              <span className="text-[8px] font-black text-primary uppercase tracking-[0.3em]">
+                SYNCING
               </span>
             </div>
-            <span className="font-mono text-[10px] text-muted-foreground/60 tabular-nums lowercase">
-              {new Date().toISOString().split('T')[1]?.split('.')[0] || ''} utc
+            <span className="font-mono text-[9px] text-white/30 tabular-nums uppercase">
+              {new Date().toISOString().split('T')[1]?.split('.')[0] || ''} Z
             </span>
           </div>
         </footer>

package/src/client/Sidebar.tsx

@@ -56,17 +56,17 @@ export function Sidebar({ className, collapsed, toggleCollapse }: SidebarProps)
               key={i}
               to={item.path}
               className={cn(
-                'w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all text-muted-foreground group/item relative overflow-hidden',
+                'w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all text-muted-foreground/60 group/item relative overflow-hidden font-heading',
                 isActive
-                  ? 'bg-primary text-primary-foreground shadow-lg shadow-primary/20 hover:scale-[1.02]'
-                  : 'hover:bg-muted font-medium hover:text-foreground active:scale-95'
+                  ? 'bg-primary/10 text-primary shadow-[0_0_20px_rgba(0,240,255,0.1)] border border-primary/20'
+                  : 'hover:bg-white/[0.03] font-medium hover:text-foreground active:scale-95'
               )}
             >
               <item.icon
-                size={22}
+                size={20}
                 className={cn(
                   'transition-all shrink-0',
-                  isActive ? 'scale-110' : 'group-hover/item:scale-110'
+                  isActive ? 'scale-110 text-primary' : 'group-hover/item:scale-110'
                 )}
               />
               <motion.span
@@ -75,14 +75,14 @@ export function Sidebar({ className, collapsed, toggleCollapse }: SidebarProps)
                   opacity: collapsed ? 0 : 1,
                   display: collapsed ? 'none' : 'block',
                 }}
-                className="font-semibold whitespace-nowrap tracking-tight"
+                className="font-black whitespace-nowrap tracking-tight uppercase text-[11px]"
               >
                 {item.label}
               </motion.span>
               {isActive && (
                 <motion.div
                   layoutId="active-pill"
-                  className="absolute left-0 w-1 h-6 bg-primary-foreground rounded-r-full"
+                  className="absolute left-0 w-1 h-5 bg-primary rounded-r-full shadow-[0_0_10px_#00F0FF]"
                 />
               )}
             </NavLink>

package/src/client/ThroughputChart.tsx

@@ -70,21 +70,23 @@ export function ThroughputChart() {
       <div className="flex justify-between items-start mb-6 z-10">
         <div>
           <div className="flex items-center gap-2">
-            <h3 className="text-xl font-bold tracking-tight">System Throughput</h3>
-            <div className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-500 text-[8px] font-black uppercase tracking-widest rounded-full border border-green-500/20">
-              <span className="w-1 h-1 bg-green-500 rounded-full animate-ping"></span>
+            <h3 className="text-xl font-black tracking-tight font-heading">System Throughput</h3>
+            <div className="flex items-center gap-1.5 px-2 py-0.5 bg-primary/10 text-primary text-[8px] font-black uppercase tracking-widest rounded-full border border-primary/20">
+              <span className="w-1 h-1 bg-primary rounded-full animate-ping"></span>
               Live
             </div>
           </div>
-          <p className="text-[10px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-1">
+          <p className="text-[10px] text-muted-foreground uppercase tracking-[0.2em] font-black mt-1">
             Jobs processed per minute
           </p>
         </div>
         <div className="text-right">
-          <p className="text-2xl font-black text-foreground">
+          <p className="text-3xl font-black text-foreground font-mono">
             {chartData[chartData.length - 1]?.value || 0}
           </p>
-          <p className="text-[8px] text-muted-foreground uppercase font-bold">Current Rate</p>
+          <p className="text-[8px] text-muted-foreground uppercase font-black tracking-tighter">
+            Current Rate
+          </p>
         </div>
       </div>
 
@@ -93,7 +95,7 @@ export function ThroughputChart() {
           <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <defs>
               <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.4} />
+                <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.5} />
                 <stop offset="50%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
                 <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
               </linearGradient>
@@ -102,38 +104,50 @@ export function ThroughputChart() {
               strokeDasharray="3 3"
               vertical={false}
               stroke="hsl(var(--border))"
-              opacity={0.5}
+              opacity={0.3}
             />
             <XAxis
               dataKey="time"
               axisLine={false}
               tickLine={false}
-              tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+              tick={{
+                fontSize: 9,
+                fill: 'hsl(var(--muted-foreground))',
+                fontWeight: 700,
+                fontFamily: 'Fira Code',
+              }}
               dy={10}
             />
             <YAxis
               axisLine={false}
               tickLine={false}
-              tick={{ fontSize: 9, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+              tick={{
+                fontSize: 9,
+                fill: 'hsl(var(--muted-foreground))',
+                fontWeight: 700,
+                fontFamily: 'Fira Code',
+              }}
             />
             <Tooltip
               cursor={{ stroke: 'hsl(var(--primary))', strokeWidth: 1, strokeDasharray: '4 4' }}
               contentStyle={{
-                backgroundColor: 'hsl(var(--card))',
-                border: '1px solid hsl(var(--border))',
-                borderRadius: '16px',
-                fontSize: '12px',
-                boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+                backgroundColor: 'rgba(9, 9, 11, 0.9)',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                borderRadius: '12px',
+                fontSize: '11px',
+                fontFamily: 'Fira Code',
+                boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)',
+                backdropFilter: 'blur(8px)',
               }}
               itemStyle={{ fontWeight: 'bold', color: 'hsl(var(--primary))' }}
             />
             <Area
-              type="stepAfter"
+              type="monotone"
               dataKey="value"
               stroke="hsl(var(--primary))"
               fillOpacity={1}
               fill="url(#colorValue)"
-              strokeWidth={2.5}
+              strokeWidth={3}
               animationDuration={1500}
             />
           </AreaChart>

package/src/client/WorkerStatus.tsx

@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from 'clsx'
-import { Activity, Cpu, Terminal } from 'lucide-react'
+import { Activity, Cpu } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 function cn(...inputs: ClassValue[]) {
@@ -73,28 +73,28 @@ export function WorkerStatus({
 
   return (
     <div className="card-premium h-full flex flex-col overflow-hidden">
-      <div className="p-6 pb-0 flex-none">
-        <div className="flex justify-between items-center mb-6">
+      <div className="p-5 pb-0 flex-none">
+        <div className="flex justify-between items-center mb-5">
           <div>
-            <h3 className="text-lg font-black flex items-center gap-2 tracking-tight">
-              <Cpu size={20} className="text-primary" />
+            <h3 className="text-base font-black flex items-center gap-2 tracking-tight font-heading">
+              <Cpu size={18} className="text-primary" />
               Cluster Nodes
             </h3>
-            <p className="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
-              Real-time load
+            <p className="text-[9px] text-muted-foreground uppercase font-black tracking-[0.2em] opacity-50 mt-0.5">
+              Live Infrastructure
             </p>
           </div>
-          <span className="text-[10px] font-black text-green-500 bg-green-500/10 px-3 py-1 rounded-full uppercase tracking-widest border border-green-500/20">
+          <span className="text-[9px] font-black text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded-md uppercase tracking-widest border border-emerald-500/20">
             {onlineCount} ACTIVE
           </span>
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto min-h-0 px-6 space-y-3 scrollbar-thin pb-6">
+      <div className="flex-1 overflow-y-auto min-h-0 px-5 space-y-2 scrollbar-thin pb-5">
         {workers.length === 0 && (
-          <div className="py-12 text-center text-muted-foreground/30 flex flex-col items-center gap-2">
-            <Activity size={24} className="opacity-20 animate-pulse" />
-            <p className="text-[10px] font-black uppercase tracking-widest">No nodes connected</p>
+          <div className="py-12 text-center text-muted-foreground/20 flex flex-col items-center gap-2">
+            <Activity size={24} className="opacity-30 animate-pulse" />
+            <p className="text-[9px] font-black uppercase tracking-[0.3em]">Awaiting signals...</p>
           </div>
         )}
 
@@ -102,52 +102,41 @@ export function WorkerStatus({
           <div
             key={worker.id}
             className={cn(
-              'relative flex items-center gap-4 p-4 rounded-2xl border transition-all group overflow-hidden shrink-0',
+              'relative flex items-center gap-3 p-3 rounded-xl border transition-all group overflow-hidden shrink-0',
               worker.id === highlightedWorkerId
-                ? 'bg-primary/5 border-primary/50 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
-                : 'bg-card hover:bg-muted/10 border-border/50 hover:border-primary/20'
+                ? 'bg-primary/10 border-primary/40 shadow-[0_0_20px_rgba(0,240,255,0.1)] -translate-x-1 z-10'
+                : 'bg-black/20 hover:bg-white/[0.03] border-white/5 hover:border-primary/20'
             )}
           >
             {/* Status bar */}
             <div
               className={cn(
                 'absolute left-0 top-0 bottom-0 w-1 transition-all',
-                worker.status === 'online' ? 'bg-green-500' : 'bg-muted-foreground/30'
+                worker.status === 'online'
+                  ? 'bg-emerald-500 shadow-[0_0_10px_#10B981]'
+                  : 'bg-muted-foreground/20'
               )}
             />
 
-            {/* Icon/Dot */}
-            <div className="relative shrink-0 ml-1">
-              <div
-                className={cn(
-                  'w-3 h-3 rounded-full',
-                  worker.status === 'online'
-                    ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
-                    : 'bg-muted-foreground/40'
-                )}
-              />
-            </div>
-
             {/* Main Info */}
-            <div className="flex-1 min-w-0 flex flex-col justify-center mr-2">
+            <div className="flex-1 min-w-0 flex flex-col justify-center">
               {worker.service && (
-                <span className="text-[10px] font-black text-primary/80 uppercase tracking-widest mb-0.5 whitespace-nowrap">
+                <span className="text-[8px] font-black text-primary uppercase tracking-widest mb-0.5 whitespace-nowrap opacity-80">
                   {worker.service}
                 </span>
               )}
               <h4
-                className="text-sm font-black tracking-tight text-foreground truncate"
+                className="text-xs font-black tracking-tight text-foreground/90 truncate font-heading"
                 title={worker.id}
               >
                 {getWorkerName(worker.id, worker.pid) || worker.id}
               </h4>
-              <div className="flex items-center gap-2 mt-1">
-                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider whitespace-nowrap">
-                  PID {worker.pid}
+              <div className="flex items-center gap-2 mt-0.5">
+                <span className="text-[8px] font-bold text-muted-foreground/40 uppercase font-mono">
+                  PID:{worker.pid}
                 </span>
                 {worker.meta?.laravel && worker.meta.laravel.workerCount > 0 && (
-                  <span className="inline-flex items-center gap-1 text-[9px] font-black text-white bg-red-500 px-1.5 py-0.5 rounded shadow-sm uppercase tracking-widest leading-none whitespace-nowrap">
-                    <Terminal size={8} />
+                  <span className="inline-flex items-center gap-1 text-[8px] font-black text-white bg-red-500/80 px-1 rounded shadow-sm uppercase tracking-tighter leading-none whitespace-nowrap">
                     {worker.meta.laravel.workerCount} PHP
                   </span>
                 )}
@@ -155,57 +144,44 @@ export function WorkerStatus({
             </div>
 
             {/* Metrics (Right Side) */}
-            <div className="flex items-center gap-3 text-right shrink-0">
+            <div className="flex items-center gap-4 text-right shrink-0">
               {worker.metrics && (
                 <>
-                  <div className="hidden sm:block space-y-1 w-12">
-                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>CPU</span>
-                      <span
-                        className={cn(
-                          worker.metrics.cpu > (worker.metrics.cores || 1) * 100 && 'text-red-500'
-                        )}
-                      >
-                        {worker.metrics.cpu.toFixed(0)}%
-                      </span>
-                    </div>
-                    <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-foreground transition-all duration-700"
-                        style={{ width: `${Math.min(100, worker.metrics.cpu)}%` }}
-                      ></div>
-                    </div>
+                  <div className="hidden sm:flex flex-col items-end gap-1 w-10">
+                    <span className="text-[8px] font-black text-muted-foreground/40 uppercase font-mono">
+                      CPU
+                    </span>
+                    <span
+                      className={cn(
+                        'text-[10px] font-black font-mono tracking-tighter',
+                        worker.metrics.cpu > 80 ? 'text-red-500' : 'text-primary'
+                      )}
+                    >
+                      {worker.metrics.cpu.toFixed(0)}%
+                    </span>
                   </div>
 
-                  <div className="hidden sm:block space-y-1 w-12">
-                    <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>RAM</span>
-                      <span className="truncate ml-1">
-                        {formatBytes(worker.metrics.ram.rss).split(' ')[0]}
-                      </span>
-                    </div>
-                    <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-indigo-500 transition-all duration-700"
-                        style={{
-                          width: `${Math.min(100, (worker.metrics.ram.rss / 2000000000) * 100)}%`,
-                        }}
-                      ></div>
-                    </div>
+                  <div className="hidden sm:flex flex-col items-end gap-1 w-12">
+                    <span className="text-[8px] font-black text-muted-foreground/40 uppercase font-mono">
+                      RAM
+                    </span>
+                    <span className="text-[10px] font-black font-mono tracking-tighter text-white/80">
+                      {formatBytes(worker.metrics.ram.rss).split(' ')[0]}
+                    </span>
                   </div>
                 </>
               )}
 
-              <div className="w-12">
-                <p className="text-xs font-black tracking-tighter tabular-nums text-foreground">
+              <div className="flex flex-col items-end gap-1 w-10">
+                <span className="text-[8px] font-black text-muted-foreground/40 uppercase font-mono">
+                  UP
+                </span>
+                <p className="text-[10px] font-black tracking-tighter font-mono text-foreground/60 tabular-nums">
                   {worker.uptime > 3600
-                    ? `${(worker.uptime / 3600).toFixed(1)}h`
+                    ? `${(worker.uptime / 3600).toFixed(1)}H`
                     : worker.uptime > 60
-                      ? `${(worker.uptime / 60).toFixed(0)}m`
-                      : `${worker.uptime.toFixed(0)}s`}
-                </p>
-                <p className="text-[8px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
-                  UP
+                      ? `${(worker.uptime / 60).toFixed(0)}M`
+                      : `${worker.uptime.toFixed(0)}S`}
                 </p>
               </div>
             </div>
@@ -213,12 +189,12 @@ export function WorkerStatus({
         ))}
       </div>
 
-      <div className="p-6 pt-0 flex-none">
+      <div className="p-5 pt-0 flex-none">
         <button
           type="button"
-          className="w-full py-3 bg-muted text-[10px] font-black rounded-xl hover:bg-primary hover:text-primary-foreground transition-all uppercase tracking-[0.2em] opacity-60 hover:opacity-100 active:scale-95 shadow-lg shadow-transparent hover:shadow-primary/20"
+          className="w-full py-2.5 bg-muted/50 text-[9px] font-black rounded-lg hover:bg-primary hover:text-primary-foreground transition-all uppercase tracking-[0.2em] border border-white/5 hover:border-primary/50 active:scale-95 shadow-lg shadow-transparent hover:shadow-primary/10 font-heading"
         >
-          Manage Nodes
+          Node Orchestration
         </button>
       </div>
     </div>

package/src/client/components/ConfirmDialog.tsx

@@ -60,16 +60,21 @@ export function ConfirmDialog({
           onKeyDown={(e) => e.stopPropagation()}
         >
           <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-            className="bg-card border rounded-2xl p-6 max-w-md shadow-2xl"
+            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.95, opacity: 0, y: 20 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+            className="bg-zinc-900 border border-white/10 rounded-3xl p-8 max-w-md shadow-[0_0_50px_rgba(0,0,0,0.8)] scanline overflow-hidden"
             onClick={(e) => e.stopPropagation()}
           >
-            <h3 className="text-xl font-black mb-2">{title}</h3>
-            <p className="text-sm text-muted-foreground mb-6 whitespace-pre-line">{message}</p>
-            <div className="flex gap-3 justify-end">
+            <h3 className="text-2xl font-black mb-3 font-heading tracking-tight text-white uppercase italic italic">
+              {title}
+            </h3>
+            <div className="h-px w-full bg-white/5 mb-6" />
+            <p className="text-[13px] font-bold text-muted-foreground mb-8 leading-relaxed uppercase tracking-wide opacity-80">
+              {message}
+            </p>
+            <div className="flex gap-4 justify-end">
               <button
                 type="button"
                 onClick={(e) => {
@@ -77,7 +82,7 @@ export function ConfirmDialog({
                   onCancel()
                 }}
                 disabled={isProcessing}
-                className="px-4 py-2 bg-muted text-foreground rounded-lg hover:bg-muted/80 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-6 py-3 bg-zinc-800 text-white/60 rounded-xl hover:bg-zinc-700 transition-all disabled:opacity-20 disabled:cursor-not-allowed text-[10px] font-black uppercase tracking-[0.2em] font-heading border border-white/5"
               >
                 {cancelText}
               </button>
@@ -89,10 +94,13 @@ export function ConfirmDialog({
                 }}
                 disabled={isProcessing}
                 className={cn(
-                  'px-4 py-2 rounded-lg text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2',
-                  variant === 'danger' && 'bg-red-500 hover:bg-red-600',
-                  variant === 'warning' && 'bg-amber-500 hover:bg-amber-600',
-                  variant === 'info' && 'bg-blue-500 hover:bg-blue-600'
+                  'px-6 py-3 rounded-xl text-black transition-all disabled:opacity-20 disabled:cursor-not-allowed flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] font-heading shadow-lg',
+                  variant === 'danger' &&
+                    'bg-red-500 shadow-[0_0_20px_rgba(239,68,68,0.3)] hover:bg-red-400',
+                  variant === 'warning' &&
+                    'bg-amber-500 shadow-[0_0_20px_rgba(245,158,11,0.3)] hover:bg-amber-400',
+                  variant === 'info' &&
+                    'bg-primary shadow-[0_0_20px_rgba(0,240,255,0.3)] hover:bg-primary/80'
                 )}
               >
                 {isProcessing && (
@@ -114,7 +122,7 @@ export function ConfirmDialog({
                     />
                   </svg>
                 )}
-                {isProcessing ? 'Processing...' : confirmText}
+                {isProcessing ? 'Executing...' : confirmText}
               </button>
             </div>
           </motion.div>