@gravito/zenith 1.0.0-beta.1 → 1.0.0

package/src/client/pages/SettingsPage.tsx

@@ -291,7 +291,9 @@ export function SettingsPage() {
                   defaultValue={alertConfig?.config?.channels?.slack?.webhookUrl || ''}
                   onBlur={async (e) => {
                     const val = e.target.value
-                    if (val === alertConfig?.config?.channels?.slack?.webhookUrl) return
+                    if (val === alertConfig?.config?.channels?.slack?.webhookUrl) {
+                      return
+                    }
                     await fetch('/api/alerts/config', {
                       method: 'POST',
                       headers: { 'Content-Type': 'application/json' },
@@ -362,7 +364,9 @@ export function SettingsPage() {
                   defaultValue={alertConfig?.config?.channels?.discord?.webhookUrl || ''}
                   onBlur={async (e) => {
                     const val = e.target.value
-                    if (val === alertConfig?.config?.channels?.discord?.webhookUrl) return
+                    if (val === alertConfig?.config?.channels?.discord?.webhookUrl) {
+                      return
+                    }
                     await fetch('/api/alerts/config', {
                       method: 'POST',
                       headers: { 'Content-Type': 'application/json' },
@@ -430,10 +434,14 @@ export function SettingsPage() {
               {alertConfig?.config?.channels?.email?.enabled && (
                 <div className="grid grid-cols-2 gap-3 mt-4 animate-in fade-in slide-in-from-top-2">
                   <div className="col-span-2 space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="email-to"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       Destination Address
                     </label>
                     <input
+                      id="email-to"
                       placeholder="admin@example.com"
                       defaultValue={alertConfig?.config?.channels?.email?.to || ''}
                       onBlur={async (e) => {
@@ -457,10 +465,14 @@ export function SettingsPage() {
                     />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="smtp-host"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       SMTP Host
                     </label>
                     <input
+                      id="smtp-host"
                       placeholder="smtp.gmail.com"
                       defaultValue={alertConfig?.config?.channels?.email?.smtpHost || ''}
                       onBlur={async (e) => {
@@ -483,10 +495,14 @@ export function SettingsPage() {
                     />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="smtp-port"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       Port
                     </label>
                     <input
+                      id="smtp-port"
                       type="number"
                       placeholder="465"
                       defaultValue={alertConfig?.config?.channels?.email?.smtpPort || 465}
@@ -510,10 +526,14 @@ export function SettingsPage() {
                     />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="smtp-user"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       Username
                     </label>
                     <input
+                      id="smtp-user"
                       placeholder="user@example.com"
                       defaultValue={alertConfig?.config?.channels?.email?.smtpUser || ''}
                       onBlur={async (e) => {
@@ -536,10 +556,14 @@ export function SettingsPage() {
                     />
                   </div>
                   <div className="space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="smtp-pass"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       Password
                     </label>
                     <input
+                      id="smtp-pass"
                       type="password"
                       placeholder="••••••••"
                       defaultValue={alertConfig?.config?.channels?.email?.smtpPass || ''}
@@ -563,10 +587,14 @@ export function SettingsPage() {
                     />
                   </div>
                   <div className="col-span-2 space-y-1">
-                    <label className="text-[9px] font-black uppercase text-muted-foreground/60">
+                    <label
+                      htmlFor="email-from"
+                      className="text-[9px] font-black uppercase text-muted-foreground/60"
+                    >
                       From Address
                     </label>
                     <input
+                      id="email-from"
                       placeholder="Zenith Monitor <noreply@example.com>"
                       defaultValue={alertConfig?.config?.channels?.email?.from || ''}
                       onBlur={async (e) => {
@@ -598,6 +626,7 @@ export function SettingsPage() {
               Active Rules
             </h3>
             <button
+              type="button"
               onClick={() => setShowAddRule(!showAddRule)}
               className="text-[10px] font-black uppercase tracking-widest text-primary hover:underline border-none bg-transparent cursor-pointer"
             >
@@ -630,10 +659,14 @@ export function SettingsPage() {
             >
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-1">
-                  <label className="text-[10px] font-black uppercase text-muted-foreground">
+                  <label
+                    htmlFor="rule-name"
+                    className="text-[10px] font-black uppercase text-muted-foreground"
+                  >
                     Rule Name
                   </label>
                   <input
+                    id="rule-name"
                     name="name"
                     required
                     placeholder="High CPU"
@@ -641,10 +674,14 @@ export function SettingsPage() {
                   />
                 </div>
                 <div className="space-y-1">
-                  <label className="text-[10px] font-black uppercase text-muted-foreground">
+                  <label
+                    htmlFor="rule-type"
+                    className="text-[10px] font-black uppercase text-muted-foreground"
+                  >
                     Type
                   </label>
                   <select
+                    id="rule-type"
                     name="type"
                     className="w-full bg-background border border-border/50 rounded-lg px-3 py-2 text-sm outline-none cursor-pointer"
                   >
@@ -658,10 +695,14 @@ export function SettingsPage() {
               </div>
               <div className="grid grid-cols-3 gap-4">
                 <div className="space-y-1">
-                  <label className="text-[10px] font-black uppercase text-muted-foreground">
+                  <label
+                    htmlFor="rule-threshold"
+                    className="text-[10px] font-black uppercase text-muted-foreground"
+                  >
                     Threshold
                   </label>
                   <input
+                    id="rule-threshold"
                     name="threshold"
                     type="number"
                     required
@@ -670,10 +711,14 @@ export function SettingsPage() {
                   />
                 </div>
                 <div className="space-y-1">
-                  <label className="text-[10px] font-black uppercase text-muted-foreground">
+                  <label
+                    htmlFor="rule-cooldown"
+                    className="text-[10px] font-black uppercase text-muted-foreground"
+                  >
                     Cooldown (Min)
                   </label>
                   <input
+                    id="rule-cooldown"
                     name="cooldown"
                     type="number"
                     required
@@ -682,10 +727,14 @@ export function SettingsPage() {
                   />
                 </div>
                 <div className="space-y-1">
-                  <label className="text-[10px] font-black uppercase text-muted-foreground">
+                  <label
+                    htmlFor="rule-queue"
+                    className="text-[10px] font-black uppercase text-muted-foreground"
+                  >
                     Queue (Optional)
                   </label>
                   <input
+                    id="rule-queue"
                     name="queue"
                     placeholder="default"
                     className="w-full bg-background border border-border/50 rounded-lg px-3 py-2 text-sm outline-none"
@@ -733,6 +782,7 @@ export function SettingsPage() {
                     {rule.cooldownMinutes}m
                   </div>
                   <button
+                    type="button"
                     onClick={async () => {
                       if (confirm('Delete this alert rule?')) {
                         await fetch(`/api/alerts/rules/${rule.id}`, { method: 'DELETE' })
@@ -799,6 +849,7 @@ export function SettingsPage() {
                     Auto-Cleanup
                   </span>
                   <button
+                    type="button"
                     onClick={async () => {
                       const enabled = !alertConfig?.maintenance?.autoCleanup
                       await fetch('/api/maintenance/config', {
@@ -813,7 +864,9 @@ export function SettingsPage() {
                     }}
                     className={cn(
                       'w-10 h-5 rounded-full p-1 transition-all flex items-center',
-                      alertConfig?.maintenance?.autoCleanup ? 'bg-green-500 justify-end' : 'bg-muted justify-start'
+                      alertConfig?.maintenance?.autoCleanup
+                        ? 'bg-green-500 justify-end'
+                        : 'bg-muted justify-start'
                     )}
                   >
                     <div className="w-3 h-3 bg-white rounded-full shadow-sm" />
@@ -859,7 +912,8 @@ export function SettingsPage() {
                   </span>
                   {alertConfig?.maintenance?.lastRun && (
                     <span className="text-[10px] text-muted-foreground/60">
-                      Last auto-cleanup run: {new Date(alertConfig.maintenance.lastRun).toLocaleString()}
+                      Last auto-cleanup run:{' '}
+                      {new Date(alertConfig.maintenance.lastRun).toLocaleString()}
                     </span>
                   )}
                 </div>

package/src/client/pages/WorkersPage.tsx

@@ -18,7 +18,21 @@ interface Worker {
       total?: number
     }
   }
-  queues?: string[]
+  queues?: {
+    name: string
+    size: {
+      waiting: number
+      active: number
+      failed: number
+      delayed: number
+    }
+  }[]
+  meta?: {
+    laravel?: {
+      workerCount: number
+      roots: string[]
+    }
+  }
 }
 
 export function WorkersPage() {
@@ -288,8 +302,62 @@ export function WorkersPage() {
               </div>
             )}
 
+            {/* Laravel & Queue Info (New) */}
+            <div className="mt-6 space-y-3">
+              {/* Monitored Queues */}
+              {worker.queues && worker.queues.length > 0 && (
+                <div className="bg-muted/10 p-3 rounded-xl border border-border/50">
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="w-1.5 h-1.5 bg-orange-500 rounded-full" />
+                    <span className="text-[9px] font-black uppercase tracking-widest text-muted-foreground">
+                      Monitored Queues
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {worker.queues.map((q, i) => (
+                      <div
+                        key={i}
+                        className="flex items-center gap-1.5 text-xs font-bold text-foreground/80 bg-background/80 px-2 py-1 rounded-md shadow-sm border border-border/50"
+                      >
+                        <span className="opacity-70">{q.name}</span>
+                        {(q.size.waiting > 0 || q.size.failed > 0) && (
+                          <span
+                            className={cn(
+                              'px-1 rounded bg-muted text-[9px]',
+                              q.size.failed > 0
+                                ? 'text-red-500 bg-red-500/10'
+                                : 'text-amber-500 bg-amber-500/10'
+                            )}
+                          >
+                            {q.size.failed > 0
+                              ? `${q.size.failed} failed`
+                              : `${q.size.waiting} wait`}
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Laravel Workers Info */}
+              {worker.meta?.laravel && (
+                <div className="flex items-center justify-between p-3 bg-red-500/5 border border-red-500/10 rounded-xl">
+                  <div className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
+                    <span className="text-[10px] font-black uppercase tracking-widest text-red-500/80">
+                      Laravel Workers
+                    </span>
+                  </div>
+                  <span className="font-mono text-sm font-black text-red-500">
+                    {worker.meta.laravel.workerCount || 0}
+                  </span>
+                </div>
+              )}
+            </div>
+
             {/* Uptime */}
-            <div className="mt-6 pt-4 border-t border-border/30 flex items-center justify-between">
+            <div className="mt-4 pt-4 border-t border-border/30 flex items-center justify-between">
               <div className="flex items-center gap-2 text-muted-foreground">
                 <Clock size={14} />
                 <span className="text-[10px] font-bold uppercase tracking-widest">Uptime</span>

package/src/server/index.ts

@@ -82,10 +82,88 @@ queueService
 
     console.log(`[FluxConsole] Connected to Redis at ${REDIS_URL}`)
     // Start background metrics recording (Reduced from 5s to 2s for better real-time feel)
-    setInterval(async () => {
-      const nodes = await pulseService.getNodes()
-      queueService.recordStatusMetrics(nodes).catch(console.error)
-    }, 2000)
+    const updateMetrics = async () => {
+      try {
+        const [pulseNodes, legacyWorkers] = await Promise.all([
+          pulseService.getNodes(),
+          queueService.listWorkers(),
+        ])
+
+        const pulseWorkers = Object.values(pulseNodes)
+          .flat()
+          .flatMap((node) => {
+            const mainNode = {
+              id: node.id,
+              service: node.service,
+              status: node.runtime.status || 'online',
+              pid: node.pid,
+              uptime: node.runtime.uptime,
+              metrics: {
+                cpu: node.cpu.process,
+                cores: node.cpu.cores,
+                ram: {
+                  rss: node.memory.process.rss,
+                  heapUsed: node.memory.process.heapUsed,
+                  total: node.memory.system.total,
+                },
+              },
+              queues: node.queues,
+              meta: node.meta,
+            }
+
+            const subWorkers: any[] = []
+            if (node.meta?.laravel?.workers && Array.isArray(node.meta.laravel.workers)) {
+              node.meta.laravel.workers.forEach((w: any) => {
+                subWorkers.push({
+                  id: `${node.id}-php-${w.pid}`,
+                  service: `${node.service} / LARAVEL`,
+                  status: w.status === 'running' || w.status === 'sleep' ? 'online' : 'idle',
+                  pid: w.pid,
+                  uptime: node.runtime.uptime,
+                  metrics: {
+                    cpu: w.cpu,
+                    cores: 1,
+                    ram: {
+                      rss: w.memory,
+                      heapUsed: w.memory,
+                      total: node.memory.system.total,
+                    },
+                  },
+                  meta: { isVirtual: true, cmdline: w.cmdline },
+                })
+              })
+            }
+            return [mainNode, ...subWorkers]
+          })
+
+        const formattedLegacy = legacyWorkers.map((w) => ({
+          id: w.id,
+          status: 'online',
+          pid: w.pid,
+          uptime: w.uptime,
+          metrics: {
+            cpu: (w.loadAvg[0] || 0) * 100,
+            cores: 0,
+            ram: {
+              rss: parseInt(w.memory.rss || '0', 10),
+              heapUsed: parseInt(w.memory.heapUsed || '0', 10),
+              total: 0,
+            },
+          },
+          queues: w.queues.map((q) => ({
+            name: q,
+            size: { waiting: 0, active: 0, failed: 0, delayed: 0 },
+          })),
+          meta: {},
+        }))
+
+        await queueService.recordStatusMetrics(pulseNodes, [...pulseWorkers, ...formattedLegacy])
+      } catch (err) {
+        console.error('[FluxConsole] Metrics Update Error:', err)
+      }
+    }
+
+    setInterval(updateMetrics, 2000)
 
     // Start Scheduler Tick (Reduced from 10s to 5s)
     setInterval(() => {
@@ -93,10 +171,7 @@ queueService
     }, 5000)
 
     // Record initial snapshot
-    pulseService
-      .getNodes()
-      .then((nodes) => queueService.recordStatusMetrics(nodes))
-      .catch(console.error)
+    updateMetrics()
   })
   .catch((err) => {
     console.error('[FluxConsole] Failed to connect to Redis', err)
@@ -324,9 +399,91 @@ api.get('/throughput', async (c) => {
 
 api.get('/workers', async (c) => {
   try {
-    const workers = await queueService.listWorkers()
-    return c.json({ workers })
+    const [legacyWorkers, pulseNodes] = await Promise.all([
+      queueService.listWorkers(),
+      pulseService.getNodes(),
+    ])
+
+    // Transform PulseNodes to match the frontend Worker interface
+    const pulseWorkers = Object.values(pulseNodes)
+      .flat()
+      .flatMap((node) => {
+        // 1. The Main Agent Node
+        const mainNode = {
+          id: node.id,
+          service: node.service,
+          status: node.runtime.status || 'online',
+          pid: node.pid,
+          uptime: node.runtime.uptime,
+          metrics: {
+            cpu: node.cpu.process,
+            cores: node.cpu.cores,
+            ram: {
+              rss: node.memory.process.rss,
+              heapUsed: node.memory.process.heapUsed,
+              total: node.memory.system.total,
+            },
+          },
+          queues: node.queues,
+          meta: node.meta,
+        }
+
+        // 2. Virtual Child Workers (e.g. Laravel)
+        const subWorkers: any[] = []
+        if (node.meta?.laravel?.workers && Array.isArray(node.meta.laravel.workers)) {
+          node.meta.laravel.workers.forEach((w: any) => {
+            subWorkers.push({
+              id: `${node.id}-php-${w.pid}`,
+              service: `${node.service} / LARAVEL`, // Distinct service name
+              status: w.status === 'running' || w.status === 'sleep' ? 'online' : 'idle',
+              pid: w.pid,
+              uptime: node.runtime.uptime, // Inherit uptime for now, or 0
+              metrics: {
+                cpu: w.cpu, // Per-process CPU
+                cores: 1, // Single threaded PHP
+                ram: {
+                  rss: w.memory,
+                  heapUsed: w.memory,
+                  total: node.memory.system.total,
+                },
+              },
+              meta: {
+                // Tag it so UI can maybe style it differently?
+                isVirtual: true,
+                cmdline: w.cmdline,
+              },
+            })
+          })
+        }
+
+        return [mainNode, ...subWorkers]
+      })
+
+    // Transform Legacy Workers to match interface (best effort)
+    const formattedLegacy = legacyWorkers.map((w) => ({
+      id: w.id,
+      status: 'online',
+      pid: w.pid,
+      uptime: w.uptime,
+      metrics: {
+        cpu: (w.loadAvg[0] || 0) * 100, // Rough estimate
+        cores: 0,
+        ram: {
+          rss: parseInt(w.memory.rss || '0', 10),
+          heapUsed: parseInt(w.memory.heapUsed || '0', 10),
+          total: 0,
+        },
+      },
+      queues: w.queues.map((q) => ({
+        name: q,
+        size: { waiting: 0, active: 0, failed: 0, delayed: 0 },
+      })),
+      meta: {},
+    }))
+
+    return c.json({ workers: [...pulseWorkers, ...formattedLegacy] })
   } catch (_err) {
+    console.error(_err)
     return c.json({ error: 'Failed to fetch workers' }, 500)
   }
 })
@@ -403,7 +560,10 @@ api.post('/pulse/command', async (c) => {
 
     // Validate command type
     if (type !== 'RETRY_JOB' && type !== 'DELETE_JOB' && type !== 'LARAVEL_ACTION') {
-      return c.json({ error: 'Invalid command type. Allowed: RETRY_JOB, DELETE_JOB, LARAVEL_ACTION' }, 400)
+      return c.json(
+        { error: 'Invalid command type. Allowed: RETRY_JOB, DELETE_JOB, LARAVEL_ACTION' },
+        400
+      )
     }
 
     const commandId = await commandService.sendCommand(service, nodeId, type, {

package/src/server/services/QueueService.ts

@@ -344,7 +344,10 @@ export class QueueService {
   /**
    * Records a snapshot of current global statistics for sparklines.
    */
-  async recordStatusMetrics(nodes: Record<string, any> = {}): Promise<void> {
+  async recordStatusMetrics(
+    nodes: Record<string, any> = {},
+    injectedWorkers?: any[]
+  ): Promise<void> {
     const stats = await this.listQueues()
     const totals = stats.reduce(
       (acc, q) => {
@@ -365,7 +368,7 @@ export class QueueService {
     pipe.set(`flux_console:metrics:failed:${now}`, totals.failed, 'EX', 3600)
 
     // Also record worker count
-    const workers = await this.listWorkers()
+    const workers = injectedWorkers || (await this.listWorkers())
     pipe.set(`flux_console:metrics:workers:${now}`, workers.length, 'EX', 3600)
 
     await pipe.exec()
@@ -382,7 +385,7 @@ export class QueueService {
       .check({
         queues: stats,
         nodes: nodes as any,
-        workers,
+        workers: workers as any,
         totals,
       })
       .catch((err) => console.error('[AlertService] Rule Evaluation Error:', err))

package/src/shared/types.ts

@@ -20,6 +20,8 @@ export interface PulseMemory {
 export interface PulseRuntime {
   uptime: number // seconds
   framework: string // e.g. "Node 20.1", "Laravel 10.0"
+  status?: string
+  errors?: string[]
 }
 
 export interface QueueSnapshot {

package/ARCHITECTURE.md

@@ -1,88 +0,0 @@
-
-# 🏗️ Gravito Flux Console Architecture
-
-> The official, standalone visualization and management console for Gravito Flux & Stream.
-
-## 1. Project Manifesto
-
-- **Dogfooding First**: Uses `@gravito/photon` for HTTP serving and `@gravito/stream` for queue interaction.
-- **Zero-Config**: Should work out-of-the-box via `npx` with minimal arguments.
-- **Stateless**: The console itself holds no long-term state; Redis is the source of truth.
-- **Micro-Frontend Ready**: Built with React, matching the Gravito Admin ecosystem, but capable of running standalone.
-
-## 2. System Architecture
-
-```mermaid
-graph TD
-    CLI[CLI Entry (bin)] --> Boot[Bootstrapper]
-    Boot -->|Init| Server[Photon Server (Node/Bun)]
-    
-    subgraph "Backend Layer"
-        Server -->|Serve| API[Management API]
-        Server -->|Serve| Static[Frontend Assets]
-        
-        API -->|Command| QM[QueueManager (@gravito/stream)]
-        QM -->|Protocol| Redis[(Redis)]
-    end
-    
-    subgraph "Frontend Layer (React/Vite)"
-        UI[Dashboard UI] -->|Fetch| API
-    end
-```
-
-## 3. Technical Stack
-
-### Backend
-- **Runtime**: Bun / Node.js (Compat)
-- **Framework**: **`@gravito/photon`** (Hono wrapper)
-- **Data Access**: **`@gravito/stream`** (Directly uses QueueDrivers)
-- **Persistence**: **`MySQLPersistence`** / **`SQLitePersistence`** for long-term auditing.
-
-### Frontend
-- **Framework**: React 19
-- **Build Tool**: Vite
-- **Styling**: TailwindCSS (keeping consistent with `admin-shell`)
-- **State Management**: React Query (TanStack Query) for real-time polling.
-
-## 4. Key Features (Phase 1 MVP)
-
-### A. Dashboard
-- **System Overview**: Connection status, Driver type (Redis/Rabbit/Kafka).
-- **Throughput Metrics**: Jobs processed per second (calculated window).
-
-### B. Queue Management
-- **List Queues**: Show all active queues with counts (Waiting, Active, Failed).
-- **Inspect Queue**: View jobs in a paginated list.
-- **Job Detail**: View JSON payload and stack trace.
-
-### C. Actions
-- **Retry Job**: Move job from `failed` to `waiting`.
-- **Delete Job**: Remove job permanently.
-
-### D. Persistence & Auditing
-- **Job Archive**: Completed and Failed jobs move to SQL storage.
-- **Operational Log Archiving**: Persistent storage for system events and worker activities with history search.
-- **Hybrid Search**: Query both Redis (Live) and SQL (Archive) simultaneously.
-- **Retention Management**: Configurable auto-cleanup for historical data.
-
-### E. Alerting System
-- **Real-time Checks**: Monitoring for failure spikes and worker loss.
-- **Notifications**: Slack integration via Webhooks.
-- **Cool-down Logic**: Prevents duplicated alerts for the same event.
-
-## 5. Deployment Strategy
-
-The package is published as a standard NPM package. It contains a `bin` entry point.
-
-### Usage Scenarios
-1.  **Local Ad-hoc**: `npx @gravito/flux-console start --url redis://...`
-2.  **Project Integration**: Add to `package.json` scripts.
-3.  **Docker**: Official image wrapping the CLI.
-
-## 6. Development Workflow
-
-Since this is a monolithic package (Backend + Frontend):
-- `npm run dev` should start:
-    1.  Vite Dev Server (Frontend)
-    2.  Photon Watch Mode (Backend)
-- Backend should proxy `/` requests to Vite during development.