@gravito/zenith 1.1.2 → 1.1.3

package/src/client/pages/QueuesPage.tsx

@@ -10,7 +10,6 @@ import {
   Play,
   RefreshCcw,
   Search,
-  Trash2,
   XCircle,
 } from 'lucide-react'
 import React from 'react'
@@ -129,59 +128,68 @@ export function QueuesPage() {
 
         {/* Summary Cards */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="card-premium p-6">
-            <p className="text-[10px] font-black text-muted-foreground/50 uppercase tracking-widest mb-1">
+          <div className="card-premium p-5 flex flex-col justify-between">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] mb-2 font-heading">
               Total Waiting
             </p>
-            <p className="text-3xl font-black">{totalWaiting.toLocaleString()}</p>
+            <p className="text-3xl font-black font-mono tracking-tighter">
+              {totalWaiting.toLocaleString()}
+            </p>
           </div>
-          <div className="card-premium p-6">
-            <p className="text-[10px] font-black text-muted-foreground/50 uppercase tracking-widest mb-1">
+          <div className="card-premium p-5 flex flex-col justify-between">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] mb-2 font-heading">
               Total Delayed
             </p>
-            <p className="text-3xl font-black text-amber-500">{totalDelayed.toLocaleString()}</p>
+            <p className="text-3xl font-black text-amber-500 font-mono tracking-tighter">
+              {totalDelayed.toLocaleString()}
+            </p>
           </div>
-          <div className="card-premium p-6">
-            <p className="text-[10px] font-black text-muted-foreground/50 uppercase tracking-widest mb-1">
+          <div className="card-premium p-5 flex flex-col justify-between">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] mb-2 font-heading">
               Total Failed
             </p>
-            <p className="text-3xl font-black text-red-500">{totalFailed.toLocaleString()}</p>
+            <p className="text-3xl font-black text-red-500 font-mono tracking-tighter">
+              {totalFailed.toLocaleString()}
+            </p>
           </div>
-          <div className="card-premium p-6">
-            <p className="text-[10px] font-black text-muted-foreground/50 uppercase tracking-widest mb-1">
+          <div className="card-premium p-5 flex flex-col justify-between">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] mb-2 font-heading">
               Currently Active
             </p>
-            <p className="text-3xl font-black text-green-500">{totalActive.toLocaleString()}</p>
+            <p className="text-3xl font-black text-emerald-500 font-mono tracking-tighter">
+              {totalActive.toLocaleString()}
+            </p>
           </div>
         </div>
 
         {/* Filters */}
-        <div className="card-premium p-4 flex flex-wrap gap-4 items-center">
-          <div className="relative flex-1 min-w-[200px]">
+        <div className="card-premium p-3 flex flex-wrap gap-4 items-center">
+          <div className="relative flex-1 min-w-[240px]">
             <Search
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-              size={18}
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/40"
+              size={16}
             />
             <input
               type="text"
-              placeholder="Search queues..."
+              aria-label="Filter pipelines"
+              placeholder="Filter pipelines..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-muted/40 border border-border/50 rounded-xl py-2.5 pl-10 pr-4 text-sm font-medium placeholder:text-muted-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/20"
+              className="w-full bg-black/20 border border-white/5 rounded-lg py-2 pl-10 pr-4 text-xs font-bold placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/30 transition-all font-mono"
             />
           </div>
           <div className="flex items-center gap-2">
-            <Filter size={16} className="text-muted-foreground" />
+            <Filter size={14} className="text-muted-foreground/40" />
             {(['all', 'active', 'idle', 'critical'] as const).map((status) => (
               <button
                 type="button"
                 key={status}
                 onClick={() => setStatusFilter(status)}
                 className={cn(
-                  'px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all',
+                  'px-3 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest transition-all border',
                   statusFilter === status
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                    ? 'bg-primary text-primary-foreground border-primary shadow-lg shadow-primary/20'
+                    : 'bg-muted/40 text-muted-foreground border-transparent hover:bg-muted/60'
                 )}
               >
                 {status}
@@ -193,69 +201,67 @@ export function QueuesPage() {
         {/* Queue List */}
         <div className="card-premium overflow-hidden">
           <div className="overflow-x-auto">
-            <table className="w-full text-left">
-              <thead className="bg-muted/10 text-muted-foreground uppercase text-[10px] font-black tracking-[0.2em]">
+            <table className="w-full text-left border-collapse">
+              <thead className="bg-black/20 text-muted-foreground/60 uppercase text-[9px] font-black tracking-widest border-b border-white/5">
                 <tr>
-                  <th className="px-6 py-5">Queue Name</th>
-                  <th className="px-6 py-5 text-center">Waiting</th>
-                  <th className="px-6 py-5 text-center">Delayed</th>
-                  <th className="px-6 py-5 text-center">Active</th>
-                  <th className="px-6 py-5 text-center">Failed</th>
-                  <th className="px-6 py-5 text-center">Status</th>
-                  <th className="px-6 py-5 text-right">Actions</th>
+                  <th className="px-6 py-4">Pipeline Architecture</th>
+                  <th className="px-6 py-4 text-center">Waiting</th>
+                  <th className="px-6 py-4 text-center">Delayed</th>
+                  <th className="px-6 py-4 text-center">Active</th>
+                  <th className="px-6 py-4 text-center">Failed</th>
+                  <th className="px-6 py-4 text-center">Status</th>
+                  <th className="px-6 py-4 text-right">Operations</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-border/30 text-sm">
+              <tbody className="divide-y divide-white/5 text-xs font-mono">
                 {filteredQueues.map((queue) => {
                   const status =
                     queue.failed > 0 ? 'critical' : queue.active > 0 ? 'active' : 'idle'
                   return (
-                    <tr key={queue.name} className="hover:bg-muted/5 transition-colors group">
-                      <td className="px-6 py-5">
-                        <div className="flex items-center gap-3">
-                          <div className="w-10 h-10 bg-primary/5 rounded-xl flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
-                            <ListTree size={20} />
+                    <tr key={queue.name} className="hover:bg-white/[0.02] transition-colors group">
+                      <td className="px-6 py-4">
+                        <div className="flex items-center gap-4">
+                          <div className="w-10 h-10 bg-zinc-800/50 border border-white/5 rounded-xl flex items-center justify-center text-primary group-hover:scale-110 group-hover:shadow-[0_0_15px_rgba(0,240,255,0.2)] transition-all">
+                            <ListTree size={18} />
                           </div>
-                          <span className="font-black tracking-tight">{queue.name}</span>
+                          <span className="font-black tracking-tight text-sm font-heading">
+                            {queue.name}
+                          </span>
                         </div>
                       </td>
-                      <td className="px-6 py-5 text-center font-mono font-bold">
+                      <td className="px-6 py-4 text-center font-bold text-foreground/80">
                         {queue.waiting.toLocaleString()}
                       </td>
-                      <td className="px-6 py-5 text-center font-mono text-amber-500">
-                        {queue.delayed}
-                      </td>
-                      <td className="px-6 py-5 text-center font-mono text-green-500">
-                        {queue.active}
-                      </td>
-                      <td className="px-6 py-5 text-center">
+                      <td className="px-6 py-4 text-center text-amber-500/80">{queue.delayed}</td>
+                      <td className="px-6 py-4 text-center text-emerald-500/80">{queue.active}</td>
+                      <td className="px-6 py-4 text-center">
                         <span
                           className={cn(
-                            'font-mono font-black',
-                            queue.failed > 0 ? 'text-red-500' : 'text-muted-foreground/40'
+                            'font-black',
+                            queue.failed > 0 ? 'text-red-500' : 'text-muted-foreground/20'
                           )}
                         >
                           {queue.failed}
                         </span>
                       </td>
-                      <td className="px-6 py-5 text-center">
+                      <td className="px-6 py-4 text-center">
                         <span
                           className={cn(
-                            'px-3 py-1.5 rounded-full text-[9px] font-black uppercase tracking-widest border',
+                            'px-2.5 py-1 rounded-md text-[8px] font-black uppercase tracking-widest border transition-all',
                             queue.paused
-                              ? 'bg-amber-500/20 text-amber-500 border-amber-500/30'
+                              ? 'bg-amber-500/10 text-amber-500 border-amber-500/20'
                               : status === 'critical'
-                                ? 'bg-red-500 text-white border-red-600'
+                                ? 'bg-red-500 text-white border-red-600 shadow-[0_0_10px_rgba(239,68,68,0.3)] animate-pulse'
                                 : status === 'active'
-                                  ? 'bg-green-500/10 text-green-500 border-green-500/20'
-                                  : 'bg-muted/40 text-muted-foreground border-transparent'
+                                  ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20 shadow-[0_0_10px_rgba(16,185,129,0.1)]'
+                                  : 'bg-zinc-800/50 text-muted-foreground/40 border-transparent'
                           )}
                         >
                           {queue.paused ? 'paused' : status}
                         </span>
                       </td>
-                      <td className="px-6 py-5">
-                        <div className="flex justify-end gap-2 items-center">
+                      <td className="px-6 py-4 text-right">
+                        <div className="flex justify-end gap-1.5 items-center">
                           {/* Pause/Resume button */}
                           <button
                             type="button"
@@ -265,15 +271,21 @@ export function QueuesPage() {
                               queryClient.invalidateQueries({ queryKey: ['queues'] })
                             }}
                             className={cn(
-                              'p-2 rounded-lg transition-all',
+                              'p-2 rounded-lg transition-all border border-transparent hover:border-white/10',
                               queue.paused
-                                ? 'text-green-500 hover:bg-green-500/10'
+                                ? 'text-emerald-500 bg-emerald-500/5 hover:bg-emerald-500/10'
                                 : 'text-muted-foreground hover:bg-amber-500/10 hover:text-amber-500'
                             )}
                             title={queue.paused ? 'Resume Queue' : 'Pause Queue'}
+                            aria-label={
+                              queue.paused ? `Resume ${queue.name}` : `Pause ${queue.name}`
+                            }
                           >
-                            {queue.paused ? <Play size={16} /> : <Pause size={16} />}
+                            {queue.paused ? <Play size={14} /> : <Pause size={14} />}
                           </button>
+
+                          <div className="w-px h-4 bg-white/5 mx-1" />
+
                           {queue.delayed > 0 && (
                             <button
                               type="button"
@@ -286,8 +298,9 @@ export function QueuesPage() {
                               }
                               className="p-2 text-amber-500 hover:bg-amber-500/10 rounded-lg transition-all"
                               title="Retry All Delayed"
+                              aria-label={`Retry all delayed jobs in ${queue.name}`}
                             >
-                              <RefreshCcw size={16} />
+                              <RefreshCcw size={14} />
                             </button>
                           )}
                           {queue.failed > 0 && (
@@ -301,10 +314,11 @@ export function QueuesPage() {
                                     queryClient.invalidateQueries({ queryKey: ['queues'] })
                                   )
                                 }
-                                className="p-2 text-blue-500 hover:bg-blue-500/10 rounded-lg transition-all"
+                                className="p-2 text-primary hover:bg-primary/10 rounded-lg transition-all"
                                 title="Retry All Failed"
+                                aria-label={`Retry all failed jobs in ${queue.name}`}
                               >
-                                <RefreshCcw size={16} />
+                                <RefreshCcw size={14} />
                               </button>
                               <button
                                 type="button"
@@ -323,34 +337,19 @@ export function QueuesPage() {
                                 }}
                                 className="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
                                 title="Clear Failed Jobs"
+                                aria-label={`Clear all failed jobs in ${queue.name}`}
                               >
-                                <XCircle size={16} />
+                                <XCircle size={14} />
                               </button>
                             </>
                           )}
-                          <button
-                            type="button"
-                            onClick={async () => {
-                              if (
-                                confirm(
-                                  `Are you sure you want to purge all jobs in queue "${queue.name}"?`
-                                )
-                              ) {
-                                await fetch(`/api/queues/${queue.name}/purge`, { method: 'POST' })
-                                queryClient.invalidateQueries({ queryKey: ['queues'] })
-                              }
-                            }}
-                            className="p-2 text-muted-foreground hover:bg-red-500/10 hover:text-red-500 rounded-lg transition-all"
-                            title="Purge Queue"
-                          >
-                            <Trash2 size={16} />
-                          </button>
+
                           <button
                             type="button"
                             onClick={() => setSelectedQueue(queue.name)}
-                            className="px-4 py-1.5 bg-muted text-foreground rounded-lg transition-all flex items-center gap-2 text-[10px] font-black uppercase tracking-widest border border-border/50 hover:border-primary/50 hover:bg-background"
+                            className="ml-2 px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 text-foreground/80 rounded-lg transition-all flex items-center gap-2 text-[9px] font-black uppercase tracking-widest border border-white/5 hover:border-primary/40"
                           >
-                            Inspect <ArrowRight size={12} />
+                            Inspect <ArrowRight size={10} />
                           </button>
                         </div>
                       </td>

package/src/client/pages/SchedulesPage.tsx

@@ -3,7 +3,6 @@ import { format } from 'date-fns'
 import { AnimatePresence, motion } from 'framer-motion'
 import {
   Activity,
-  AlertCircle,
   ArrowRight,
   Calendar,
   CheckCircle2,
@@ -176,57 +175,59 @@ export function SchedulesPage() {
 
       {/* Stats Overview */}
       <div className="grid grid-cols-3 gap-6">
-        <div className="card-premium p-6 flex items-center gap-4">
-          <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
+        <div className="card-premium p-5 flex items-center gap-5 border-l-4 border-primary">
+          <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-[0_0_15px_rgba(0,240,255,0.1)]">
             <Activity size={24} />
           </div>
           <div>
-            <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] font-heading mb-0.5">
               Active Schedules
             </p>
-            <p className="text-2xl font-black">{isLoading ? '...' : schedules.length}</p>
+            <p className="text-2xl font-black font-mono tracking-tighter">
+              {isLoading ? '...' : schedules.length}
+            </p>
           </div>
         </div>
-        <div className="card-premium p-6 flex items-center gap-4">
-          <div className="w-12 h-12 rounded-2xl bg-indigo-500/10 flex items-center justify-center text-indigo-500">
+        <div className="card-premium p-5 flex items-center gap-5 border-l-4 border-indigo-500/40">
+          <div className="w-12 h-12 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20 shadow-[0_0_15px_rgba(99,102,241,0.1)]">
             <Calendar size={24} />
           </div>
           <div>
-            <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] font-heading mb-0.5">
               Total Executions
             </p>
-            <p className="text-2xl font-black">---</p>
+            <p className="text-2xl font-black font-mono tracking-tighter">---</p>
           </div>
         </div>
-        <div className="card-premium p-6 flex items-center gap-4">
-          <div className="w-12 h-12 rounded-2xl bg-green-500/10 flex items-center justify-center text-green-500">
+        <div className="card-premium p-5 flex items-center gap-5 border-l-4 border-emerald-500/40">
+          <div className="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 border border-emerald-500/20 shadow-[0_0_15px_rgba(16,185,129,0.1)]">
             <CheckCircle2 size={24} />
           </div>
           <div>
-            <p className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">
+            <p className="text-[9px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] font-heading mb-0.5">
               Health Score
             </p>
-            <p className="text-2xl font-black text-green-500">99.8%</p>
+            <p className="text-2xl font-black text-emerald-500 font-mono tracking-tighter">99.8%</p>
           </div>
         </div>
       </div>
 
       {/* Toolbar */}
-      <div className="flex gap-4 items-center">
+      <div className="card-premium p-3 flex gap-4 items-center">
         <div className="relative flex-1">
           <Search
-            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground/50"
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground/30"
             size={18}
           />
           <input
             type="text"
             placeholder="Search schedules by name, cron or ID..."
-            className="w-full bg-muted/40 border-border/50 rounded-xl pl-12 pr-4 py-3 text-sm focus:ring-1 focus:ring-primary/30 outline-none transition-all"
+            className="w-full bg-black/20 border border-white/5 rounded-xl pl-12 pr-4 py-3 text-xs font-bold font-mono placeholder:text-white/10 focus:ring-1 focus:ring-primary/30 outline-none transition-all"
           />
         </div>
         <button
           type="button"
-          className="p-3 bg-muted/40 border border-border/50 rounded-xl hover:bg-muted/60 transition-all"
+          className="p-3 bg-zinc-900/40 border border-white/5 rounded-xl hover:bg-zinc-800 transition-all text-muted-foreground/60"
         >
           <Filter size={18} />
         </button>
@@ -259,30 +260,30 @@ export function SchedulesPage() {
         {schedules.map((schedule: ScheduleInfo) => (
           <div
             key={schedule.id}
-            className="card-premium p-6 group hover:border-primary/30 transition-all"
+            className="card-premium p-6 group hover:border-primary/20 transition-all border-l-4 border-l-zinc-800 hover:border-l-primary"
           >
             <div className="flex items-start justify-between">
-              <div className="flex gap-5">
-                <div className="w-14 h-14 rounded-2xl bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-all">
-                  <Clock size={28} />
+              <div className="flex gap-6">
+                <div className="w-16 h-16 rounded-2xl bg-zinc-900 border border-white/5 flex items-center justify-center text-muted-foreground/40 group-hover:text-primary group-hover:border-primary/20 group-hover:shadow-[0_0_20px_rgba(0,240,255,0.1)] transition-all">
+                  <Clock size={32} />
                 </div>
-                <div className="space-y-1">
+                <div className="space-y-2">
                   <div className="flex items-center gap-3">
-                    <h3 className="text-lg font-bold">{schedule.id}</h3>
-                    <span className="px-2 py-0.5 bg-green-500/10 text-green-500 text-[10px] font-black uppercase tracking-widest rounded">
-                      Enabled
+                    <h3 className="text-xl font-black font-heading tracking-tight text-white/90">
+                      {schedule.id}
+                    </h3>
+                    <span className="px-2 py-0.5 bg-emerald-500/10 text-emerald-500 text-[9px] font-black uppercase tracking-widest rounded border border-emerald-500/20">
+                      Active
                     </span>
                   </div>
-                  <div className="flex items-center gap-4 text-xs font-bold text-muted-foreground">
-                    <span className="flex items-center gap-1.5">
-                      <Clock size={12} /> {schedule.cron}
+                  <div className="flex items-center gap-5 text-[11px] font-bold text-muted-foreground/60 font-mono uppercase tracking-tighter">
+                    <span className="flex items-center gap-2 bg-black/40 px-2 py-0.5 rounded border border-white/5">
+                      <Clock size={12} className="text-primary/60" /> {schedule.cron}
                     </span>
-                    <span className="flex items-center gap-1.5">
-                      <ArrowRight size={12} /> {schedule.queue}
-                    </span>
-                    <span className="px-2 py-0.5 bg-muted rounded font-mono text-[10px] uppercase font-black">
-                      {schedule.job.className}
+                    <span className="flex items-center gap-2 bg-black/40 px-2 py-0.5 rounded border border-white/5">
+                      <ArrowRight size={12} className="text-primary/60" /> {schedule.queue}
                     </span>
+                    <span className="text-primary/40">{schedule.job.className}</span>
                   </div>
                 </div>
               </div>
@@ -292,61 +293,55 @@ export function SchedulesPage() {
                   type="button"
                   disabled={runMutation.isPending}
                   onClick={() => setConfirmRunId(schedule.id)}
-                  className="px-4 py-2 bg-muted hover:bg-primary hover:text-primary-foreground rounded-lg text-[10px] font-black uppercase tracking-widest transition-all active:scale-95 flex items-center gap-2 disabled:opacity-50"
+                  className="px-5 py-2.5 bg-primary/10 hover:bg-primary text-primary hover:text-black rounded-xl text-[10px] font-black uppercase tracking-[0.2em] transition-all active:scale-95 flex items-center gap-2 disabled:opacity-50 border border-primary/20 font-heading shadow-lg shadow-transparent hover:shadow-primary/20"
                 >
                   {runMutation.isPending && runMutation.variables === schedule.id ? (
                     <>
-                      <RefreshCcw size={12} className="animate-spin" />
-                      Running...
+                      <RefreshCcw size={14} className="animate-spin" />
+                      Triggering...
                     </>
                   ) : (
-                    'Run Now'
+                    'Execute Now'
                   )}
                 </button>
-                <button
-                  type="button"
-                  className="p-2 hover:bg-muted rounded-lg transition-all text-muted-foreground"
-                >
-                  <AlertCircle size={18} />
-                </button>
                 <button
                   type="button"
                   onClick={() => setConfirmDeleteId(schedule.id)}
-                  className="p-2 hover:bg-red-500/10 hover:text-red-500 rounded-lg transition-all text-muted-foreground"
+                  className="p-2.5 bg-red-500/5 hover:bg-red-500 hover:text-white rounded-xl transition-all text-red-500/60 border border-transparent hover:border-red-500/20"
                 >
                   <Trash2 size={18} />
                 </button>
               </div>
             </div>
 
-            <div className="mt-6 grid grid-cols-2 gap-4 pt-6 border-t border-border/30">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center text-muted-foreground/60">
-                  <Calendar size={14} />
+            <div className="mt-8 grid grid-cols-2 gap-6 pt-6 border-t border-white/5">
+              <div className="flex items-center gap-4 group/stat">
+                <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-white/5 flex items-center justify-center text-muted-foreground/20 group-hover/stat:text-primary transition-colors">
+                  <Calendar size={16} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-muted-foreground/40 uppercase tracking-widest leading-none mb-1">
-                    Last Run
+                  <p className="text-[9px] font-black text-muted-foreground/40 uppercase tracking-[0.2em] mb-1 font-heading">
+                    Previous Burst
                   </p>
-                  <p className="text-xs font-bold">
+                  <p className="text-xs font-black font-mono text-white/60 tabular-nums">
                     {schedule.lastRun
-                      ? format(new Date(schedule.lastRun), 'HH:mm:ss MMM dd')
-                      : 'Never'}
+                      ? format(new Date(schedule.lastRun), 'HH:mm:ss / MMM dd')
+                      : 'N/A'}
                   </p>
                 </div>
               </div>
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
-                  <Play size={14} />
+              <div className="flex items-center gap-4 group/stat">
+                <div className="w-10 h-10 rounded-xl bg-primary/5 border border-primary/10 flex items-center justify-center text-primary/40 group-hover/stat:text-primary transition-colors">
+                  <Play size={16} />
                 </div>
                 <div>
-                  <p className="text-[10px] font-black text-muted-foreground/40 uppercase tracking-widest leading-none mb-1">
-                    Next Run
+                  <p className="text-[9px] font-black text-primary/40 uppercase tracking-[0.2em] mb-1 font-heading">
+                    Next Sequence
                   </p>
-                  <p className="text-xs font-bold">
+                  <p className="text-xs font-black font-mono text-primary/80 tabular-nums uppercase">
                     {schedule.nextRun
-                      ? format(new Date(schedule.nextRun), 'HH:mm:ss MMM dd')
-                      : 'Scheduled'}
+                      ? format(new Date(schedule.nextRun), 'HH:mm:ss / MMM dd')
+                      : 'Pending'}
                   </p>
                 </div>
               </div>