@gravito/zenith 1.1.2 → 1.1.3

package/src/client/pages/LoginPage.tsx

@@ -53,31 +53,35 @@ export function LoginPage() {
         className="relative z-10 w-full max-w-md"
       >
         {/* Logo & Title */}
-        <div className="text-center mb-8">
+        <div className="text-center mb-8 font-heading">
           <motion.div
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
             transition={{ type: 'spring', delay: 0.2 }}
-            className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-primary to-indigo-600 rounded-3xl shadow-2xl shadow-primary/30 mb-6"
+            className="inline-flex items-center justify-center w-24 h-24 bg-primary rounded-3xl shadow-[0_0_40px_rgba(0,240,255,0.2)] mb-8"
           >
-            <Activity size={40} className="text-primary-foreground" />
+            <Activity size={48} className="text-black" />
           </motion.div>
-          <h1 className="text-4xl font-black tracking-tighter mb-2">GRAVITO</h1>
-          <p className="text-[10px] font-bold text-primary uppercase tracking-[0.4em]">
-            Flux Console
+          <h1 className="text-5xl font-black tracking-tighter mb-2 text-white italic uppercase">
+            ZENITH
+          </h1>
+          <p className="text-[10px] font-black text-primary uppercase tracking-[0.5em] ml-1">
+            Quantum Control Plane
           </p>
         </div>
 
         {/* Login Card */}
-        <div className="card-premium p-8 backdrop-blur-xl">
-          <div className="text-center mb-8">
-            <h2 className="text-xl font-bold mb-2">Welcome Back</h2>
-            <p className="text-sm text-muted-foreground">
-              Enter your password to access the console
+        <div className="card-premium p-10 backdrop-blur-2xl bg-zinc-900/40 border-white/5">
+          <div className="text-center mb-10">
+            <h2 className="text-xl font-black text-white uppercase tracking-tight font-heading">
+              Secure Access
+            </h2>
+            <p className="text-xs text-muted-foreground mt-2 font-bold uppercase tracking-widest opacity-60">
+              Biometric or Password verification required
             </p>
           </div>
 
-          <form onSubmit={handleSubmit} className="space-y-6">
+          <form onSubmit={handleSubmit} className="space-y-8 font-heading">
             {/* Error Message */}
             {error && (
               <motion.div
@@ -86,21 +90,21 @@ export function LoginPage() {
                 className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500"
               >
                 <AlertCircle size={18} />
-                <span className="text-sm font-medium">{error}</span>
+                <span className="text-[11px] font-black uppercase tracking-widest">{error}</span>
               </motion.div>
             )}
 
             {/* Password Field */}
-            <div className="space-y-2">
+            <div className="space-y-3">
               <label
                 htmlFor="password"
-                className="text-sm font-bold text-muted-foreground uppercase tracking-widest"
+                className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] ml-1"
               >
-                Password
+                System Authentication
               </label>
               <div className="relative">
                 <Lock
-                  className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
+                  className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground/40"
                   size={18}
                 />
                 <input
@@ -108,11 +112,11 @@ export function LoginPage() {
                   type={showPassword ? 'text' : 'password'}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter console password"
+                  placeholder="Enter access code..."
                   className={cn(
-                    'w-full bg-muted/40 border border-border/50 rounded-xl py-4 pl-12 pr-12',
-                    'text-sm font-medium placeholder:text-muted-foreground/40',
-                    'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50',
+                    'w-full bg-black/40 border border-white/5 rounded-xl py-4 pl-12 pr-12 font-mono',
+                    'text-sm font-bold placeholder:text-white/10 tracking-widest',
+                    'focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40',
                     'transition-all'
                   )}
                   disabled={isLoading}
@@ -120,7 +124,7 @@ export function LoginPage() {
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                  className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground/40 hover:text-primary transition-colors"
                 >
                   {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                 </button>
@@ -132,20 +136,18 @@ export function LoginPage() {
               type="submit"
               disabled={isLoading || !password}
               className={cn(
-                'w-full py-4 rounded-xl font-bold text-sm uppercase tracking-widest',
-                'bg-gradient-to-r from-primary to-indigo-600 text-primary-foreground',
-                'shadow-lg shadow-primary/30 hover:shadow-xl hover:shadow-primary/40',
-                'transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]',
-                'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100',
-                'flex items-center justify-center gap-2'
+                'w-full py-4 rounded-xl font-black text-xs uppercase tracking-[0.3em]',
+                'bg-primary text-black font-heading shadow-[0_0_30px_rgba(0,240,255,0.2)] hover:shadow-[0_0_40px_rgba(0,240,255,0.4)]',
+                'transition-all duration-500 hover:scale-[1.02] active:scale-95',
+                'disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:scale-100',
+                'flex items-center justify-center gap-3'
               )}
             >
               {isLoading ? (
-                <div className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                <div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
               ) : (
                 <>
-                  Access Console
-                  <ArrowRight size={18} />
+                  Connect <ArrowRight size={18} />
                 </>
               )}
             </button>

package/src/client/pages/MetricsPage.tsx

@@ -213,7 +213,7 @@ export function MetricsPage() {
             <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
               <defs>
                 <linearGradient id="colorThroughput" 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="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                 </linearGradient>
               </defs>
@@ -221,25 +221,37 @@ export function MetricsPage() {
                 strokeDasharray="3 3"
                 vertical={false}
                 stroke="hsl(var(--border))"
-                opacity={0.5}
+                opacity={0.3}
               />
               <XAxis
                 dataKey="time"
                 axisLine={false}
                 tickLine={false}
-                tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                tick={{
+                  fontSize: 10,
+                  fill: 'hsl(var(--muted-foreground))',
+                  fontWeight: 700,
+                  fontFamily: 'Fira Code',
+                }}
               />
               <YAxis
                 axisLine={false}
                 tickLine={false}
-                tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                tick={{
+                  fontSize: 10,
+                  fill: 'hsl(var(--muted-foreground))',
+                  fontWeight: 700,
+                  fontFamily: 'Fira Code',
+                }}
               />
               <Tooltip
                 contentStyle={{
-                  backgroundColor: 'hsl(var(--card))',
-                  border: '1px solid hsl(var(--border))',
+                  backgroundColor: 'rgba(9, 9, 11, 0.95)',
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
                   borderRadius: '12px',
-                  fontSize: '12px',
+                  fontSize: '11px',
+                  fontFamily: 'Fira Code',
+                  backdropFilter: 'blur(8px)',
                 }}
               />
               <Area
@@ -248,7 +260,7 @@ export function MetricsPage() {
                 stroke="hsl(var(--primary))"
                 fillOpacity={1}
                 fill="url(#colorThroughput)"
-                strokeWidth={2}
+                strokeWidth={3}
               />
             </AreaChart>
           </ResponsiveContainer>
@@ -279,37 +291,39 @@ export function MetricsPage() {
                   dataKey="name"
                   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',
+                  }}
                   angle={-45}
                   textAnchor="end"
                 />
                 <YAxis
                   axisLine={false}
                   tickLine={false}
-                  tick={{ fontSize: 10, fill: 'hsl(var(--muted-foreground))', fontWeight: 600 }}
+                  tick={{
+                    fontSize: 10,
+                    fill: 'hsl(var(--muted-foreground))',
+                    fontWeight: 700,
+                    fontFamily: 'Fira Code',
+                  }}
                 />
                 <Tooltip
                   contentStyle={{
-                    backgroundColor: 'hsl(var(--card))',
-                    border: '1px solid hsl(var(--border))',
+                    backgroundColor: 'rgba(9, 9, 11, 0.95)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
                     borderRadius: '12px',
-                    fontSize: '12px',
+                    fontSize: '11px',
+                    fontFamily: 'Fira Code',
+                    backdropFilter: 'blur(8px)',
                   }}
                 />
-                <Legend />
-                <Bar
-                  dataKey="waiting"
-                  fill="hsl(45, 93%, 47%)"
-                  name="Waiting"
-                  radius={[4, 4, 0, 0]}
-                />
-                <Bar
-                  dataKey="delayed"
-                  fill="hsl(217, 91%, 60%)"
-                  name="Delayed"
-                  radius={[4, 4, 0, 0]}
-                />
-                <Bar dataKey="failed" fill="hsl(0, 84%, 60%)" name="Failed" radius={[4, 4, 0, 0]} />
+                <Legend iconType="circle" />
+                <Bar dataKey="waiting" fill="#F59E0B" name="Waiting" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="delayed" fill="#3B82F6" name="Delayed" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="failed" fill="#EF4444" name="Failed" radius={[4, 4, 0, 0]} />
               </BarChart>
             </ResponsiveContainer>
           </div>
@@ -391,26 +405,40 @@ interface StatCardProps {
 
 function StatCard({ icon: Icon, label, value, color }: StatCardProps) {
   const colorClasses = {
-    amber: 'text-amber-500 bg-amber-500/10',
-    blue: 'text-blue-500 bg-blue-500/10',
-    green: 'text-green-500 bg-green-500/10',
-    red: 'text-red-500 bg-red-500/10',
-    indigo: 'text-indigo-500 bg-indigo-500/10',
-    primary: 'text-primary bg-primary/10',
+    amber:
+      'text-amber-500 bg-amber-500/10 border-amber-500/20 shadow-[0_0_15px_rgba(245,158,11,0.05)]',
+    blue: 'text-blue-500 bg-blue-500/10 border-blue-500/20 shadow-[0_0_15px_rgba(59,130,246,0.05)]',
+    green:
+      'text-emerald-500 bg-emerald-500/10 border-emerald-500/20 shadow-[0_0_15px_rgba(16,185,129,0.05)]',
+    red: 'text-red-500 bg-red-500/10 border-red-500/20 shadow-[0_0_15px_rgba(239,68,68,0.05)]',
+    indigo:
+      'text-indigo-400 bg-indigo-500/10 border-indigo-500/20 shadow-[0_0_15px_rgba(99,102,241,0.05)]',
+    primary: 'text-primary bg-primary/10 border-primary/20 shadow-[0_0_15px_rgba(0,240,255,0.05)]',
   }
 
   return (
-    <div className="card-premium p-4 flex items-center gap-3">
+    <div
+      className={cn(
+        'card-premium p-4 flex items-center gap-4 border-l-4',
+        colorClasses[color]
+          .split(' ')
+          .find((c) => c.startsWith('border-'))
+          ?.replace('border-', 'border-l-')
+      )}
+    >
       <div
-        className={cn('w-10 h-10 rounded-xl flex items-center justify-center', colorClasses[color])}
+        className={cn(
+          'w-10 h-10 rounded-xl flex items-center justify-center border transition-transform group-hover:scale-110',
+          colorClasses[color]
+        )}
       >
         <Icon size={20} />
       </div>
       <div>
-        <p className="text-[9px] font-black text-muted-foreground/50 uppercase tracking-widest">
+        <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] font-heading mb-0.5">
           {label}
         </p>
-        <p className="text-xl font-black">{value.toLocaleString()}</p>
+        <p className="text-xl font-black font-mono tracking-tighter">{value.toLocaleString()}</p>
       </div>
     </div>
   )

package/src/client/pages/OverviewPage.tsx

@@ -76,6 +76,7 @@ function LiveLogs({
           <button
             type="button"
             onClick={onSearchArchive}
+            aria-label="Search Logs Archive"
             className="flex items-center gap-1.5 px-2 py-1 hover:bg-muted rounded-md text-[10px] font-black uppercase tracking-tighter text-muted-foreground transition-all"
           >
             <Search size={12} />
@@ -89,12 +90,12 @@ function LiveLogs({
       </div>
       <ul
         ref={scrollRef}
-        className="flex-1 min-h-0 overflow-y-auto p-4 font-mono text-[11px] space-y-2.5 scrollbar-thin scroll-smooth"
+        className="flex-1 min-h-0 overflow-y-auto p-4 font-mono text-[10px] space-y-2 scrollbar-thin scroll-smooth bg-black/20"
       >
         {logs.length === 0 ? (
-          <div className="h-full flex flex-col items-center justify-center text-muted-foreground/30 gap-2 opacity-50">
-            <Activity size={24} className="animate-pulse" />
-            <p className="font-bold uppercase tracking-widest text-[9px]">Awaiting signals...</p>
+          <div className="h-full flex flex-col items-center justify-center text-muted-foreground/20 gap-2">
+            <Activity size={24} className="animate-pulse opacity-50" />
+            <p className="font-bold uppercase tracking-[0.3em] text-[8px]">Scanning spectrum...</p>
           </div>
         ) : (
           logs.map((log, i) => (
@@ -102,9 +103,9 @@ function LiveLogs({
               key={i}
               onMouseEnter={() => onWorkerHover?.(log.workerId)}
               onMouseLeave={() => onWorkerHover?.(null)}
-              className="group flex gap-3 hover:bg-primary/[0.02] -mx-2 px-2 py-0.5 rounded transition-all animate-in fade-in slide-in-from-left-2 duration-300 cursor-default"
+              className="group flex gap-3 hover:bg-white/[0.03] -mx-2 px-3 py-1 rounded transition-all animate-in fade-in slide-in-from-left-1 duration-200 cursor-default border-l-2 border-transparent hover:border-primary/40"
             >
-              <span className="text-muted-foreground/40 shrink-0 tabular-nums select-none opacity-0 group-hover:opacity-100 transition-opacity">
+              <span className="text-muted-foreground/60 shrink-0 tabular-nums select-none opacity-60 group-hover:opacity-100 transition-opacity">
                 {new Date(log.timestamp).toLocaleTimeString([], {
                   hour12: false,
                   hour: '2-digit',
@@ -116,23 +117,23 @@ function LiveLogs({
                 <div className="flex items-center gap-2 mb-0.5">
                   <span
                     className={cn(
-                      'text-[9px] font-black uppercase tracking-tighter',
+                      'text-[8px] font-black uppercase tracking-widest px-1 rounded',
                       log.level === 'error'
-                        ? 'text-red-500'
+                        ? 'bg-red-500/10 text-red-500'
                         : log.level === 'warn'
-                          ? 'text-amber-500'
+                          ? 'bg-amber-500/10 text-amber-500'
                           : log.level === 'success'
-                            ? 'text-green-500'
-                            : 'text-blue-500'
+                            ? 'bg-green-500/10 text-green-500'
+                            : 'bg-primary/10 text-primary'
                     )}
                   >
-                    [{log.level}]
+                    {log.level}
                   </span>
-                  <span className="text-[9px] font-black text-muted-foreground/40 uppercase opacity-0 group-hover:opacity-100 transition-all">
-                    {log.workerId}
+                  <span className="text-[8px] font-bold text-muted-foreground/40 uppercase tracking-tighter opacity-0 group-hover:opacity-100 transition-all">
+                    ID:{log.workerId}
                   </span>
                 </div>
-                <p className="text-foreground/80 leading-relaxed whitespace-pre-wrap break-all">
+                <p className="text-foreground/70 group-hover:text-foreground leading-relaxed whitespace-pre-wrap break-all">
                   {log.message}
                 </p>
               </div>
@@ -219,13 +220,13 @@ function MetricCard({ title, value, icon, color, trend, data }: MetricCardProps)
   const max = Math.max(...displayData, 10)
 
   return (
-    <div className="card-premium p-8 hover:shadow-2xl transform hover:-translate-y-2 group relative overflow-hidden">
+    <div className="card-premium p-6 hover:shadow-2xl transform hover:-translate-y-1 group relative overflow-hidden flex flex-col justify-between">
       <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none scanline z-0"></div>
 
-      <div className="flex justify-between items-start mb-6 z-10 relative">
+      <div className="flex justify-between items-start mb-4 z-10 relative">
         <div
           className={cn(
-            'p-4 rounded-2xl bg-muted/30 transition-all group-hover:bg-primary/20 group-hover:text-primary group-hover:rotate-12 duration-500 border border-transparent group-hover:border-primary/20 shadow-inner',
+            'p-3 rounded-xl bg-muted/20 transition-all group-hover:scale-110 duration-500 border border-transparent group-hover:border-primary/20 shadow-inner',
             color
           )}
         >
@@ -233,14 +234,14 @@ function MetricCard({ title, value, icon, color, trend, data }: MetricCardProps)
         </div>
         {trend && (
           <div className="flex flex-col items-end">
-            <span className="text-[10px] font-black text-muted-foreground/40 uppercase tracking-widest">
+            <span className={cn('text-[9px] font-black uppercase tracking-widest', color)}>
               {trend}
             </span>
-            <div className="w-8 h-1 bg-muted/50 rounded-full mt-1 overflow-hidden">
+            <div className="w-10 h-1 bg-muted/30 rounded-full mt-1 overflow-hidden">
               <motion.div
                 initial={{ width: 0 }}
                 animate={{ width: '100%' }}
-                transition={{ duration: 1, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 1.5, repeat: Infinity, repeatType: 'reverse' }}
                 className={cn('h-full', color.replace('text-', 'bg-'))}
               />
             </div>
@@ -249,29 +250,29 @@ function MetricCard({ title, value, icon, color, trend, data }: MetricCardProps)
       </div>
 
       <div className="z-10 relative">
-        <p className="text-[11px] font-black text-muted-foreground/50 uppercase tracking-[0.2em] mb-2">
+        <p className="text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] mb-1 font-heading">
           {title}
         </p>
-        <div className="text-4xl font-black tracking-tighter flex items-center gap-1">
+        <div className="text-3xl font-black tracking-tight flex items-baseline gap-1 font-mono">
           <AnimatedNumber value={value} />
           {title === 'Waiting Jobs' && value > 100 && (
-            <span className="text-red-500 animate-pulse text-xs">!</span>
+            <span className="text-red-500 animate-pulse text-sm ml-1">!</span>
           )}
         </div>
       </div>
 
-      <div className="mt-8 flex items-end gap-1.5 h-16 opacity-5 group-hover:opacity-20 transition-all duration-700 absolute bottom-0 left-0 right-0 p-1.5 pointer-events-none">
+      <div className="mt-6 flex items-end gap-1 h-12 opacity-10 group-hover:opacity-30 transition-all duration-700 absolute bottom-0 left-0 right-0 pointer-events-none">
         {displayData.map((v, i) => (
           <div
             key={i}
             className={cn(
-              'flex-1 rounded-t-lg transition-all duration-1000',
+              'flex-1 rounded-t-sm transition-all duration-1000',
               color.replace('text-', 'bg-')
             )}
             style={{
               height: `${(v / max) * 100}%`,
-              opacity: 0.1 + (i / displayData.length) * 0.9,
-              transitionDelay: `${i * 30}ms`,
+              opacity: 0.2 + (i / displayData.length) * 0.8,
+              transitionDelay: `${i * 20}ms`,
             }}
           ></div>
         ))}
@@ -333,6 +334,7 @@ function QueueList({
                       onClick={() => setSelectedQueue(queue.name)}
                       className="p-1.5 bg-muted hover:bg-primary/20 hover:text-primary rounded text-muted-foreground transition-all active:scale-90"
                       title="Inspect"
+                      aria-label={`Inspect ${queue.name} queue`}
                     >
                       <ArrowRight size={14} />
                     </button>