@gravito/zenith 0.1.0-beta.1 → 1.0.0-beta.1

package/package.json

@@ -1,50 +1,54 @@
 {
-    "name": "@gravito/zenith",
-    "version": "0.1.0-beta.1",
-    "description": "Gravito Zenith: Zero-config control plane for Gravito Flux & Stream",
-    "type": "module",
-    "bin": {
-        "zenith": "./dist/bin.js",
-        "flux-console": "./dist/bin.js"
-    },
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "scripts": {
-        "dev:server": "bun run --watch src/server/index.ts",
-        "dev:client": "vite",
-        "build": "vite build && bun build ./src/server/index.ts ./src/bin.ts --outdir ./dist --target bun",
-        "start": "bun ./dist/bin.js",
-        "test": "bun test",
-        "seed": "bun scripts/seed.ts",
-        "worker": "bun scripts/worker.ts"
-    },
-    "dependencies": {
-        "@gravito/atlas": "workspace:*",
-        "@gravito/photon": "workspace:*",
-        "@gravito/stream": "workspace:*",
-        "@tanstack/react-query": "^5.0.0",
-        "clsx": "^2.1.1",
-        "date-fns": "^4.1.0",
-        "framer-motion": "^12.23.26",
-        "ioredis": "^5.0.0",
-        "lucide-react": "^0.562.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "react-router-dom": "^7.11.0",
-        "recharts": "^3.6.0",
-        "tailwind-merge": "^3.4.0"
-    },
-    "devDependencies": {
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
-        "@vitejs/plugin-react": "^5.1.2",
-        "autoprefixer": "^10.4.0",
-        "postcss": "^8.4.0",
-        "tailwindcss": "^3.4.0",
-        "typescript": "^5.0.0",
-        "vite": "^6.0.0"
-    },
-    "publishConfig": {
-        "access": "public"
-    }
+  "name": "@gravito/zenith",
+  "version": "1.0.0-beta.1",
+  "description": "Gravito Zenith: Zero-config control plane for Gravito Flux & Stream",
+  "type": "module",
+  "bin": {
+    "zenith": "dist/bin.js",
+    "flux-console": "dist/bin.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev:server": "bun run --watch src/server/index.ts",
+    "dev:client": "vite",
+    "build": "vite build && bun build ./src/server/index.ts ./src/bin.ts --outdir ./dist --target bun",
+    "start": "bun ./dist/bin.js",
+    "test": "bun test",
+    "typecheck": "bun tsc -p tsconfig.json --noEmit --skipLibCheck",
+    "seed": "bun scripts/seed.ts",
+    "worker": "bun scripts/worker.ts"
+  },
+  "dependencies": {
+    "@gravito/atlas": "workspace:*",
+    "@gravito/photon": "workspace:*",
+    "@gravito/quasar": "workspace:*",
+    "@gravito/stream": "workspace:*",
+    "@tanstack/react-query": "^5.0.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.23.26",
+    "ioredis": "^5.0.0",
+    "lucide-react": "^0.562.0",
+    "nodemailer": "^7.0.12",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.11.0",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/nodemailer": "^7.0.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/specs/PULSE_SPEC.md

@@ -0,0 +1,86 @@
+# Gravito Pulse Implementation Spec
+
+## Overview
+Gravito Pulse is a lightweight APM (Application Performance Monitoring) system integrated into Zenith. It follows the philosophy: *"If you can connect to Redis, you are monitored."*
+
+## 1. Gravito Pulse Protocol (GPP)
+
+### Data Structure
+Pulse uses Redis keys with specific TTLs to represent live services.
+
+- **Key Pattern**: `gravito:quasar:node:{service}:{node_id}`
+- **TTL**: 30 seconds (Agents should heartbeat every 10-15s).
+- **Data Type**: String (JSON)
+
+### Payload Schema
+```json
+{
+  "id": "string",          // Unique Instance ID (e.g., UUID or Hostname-PID)
+  "service": "string",     // Group name (e.g., "worker-billing", "api-gateway")
+  "language": "string",    // "node" | "bun" | "deno" | "php" | "go" | "python" | "other"
+  "version": "string",     // Language/Runtime Version
+  "pid": "number",         // Process ID
+  "hostname": "string",    // Machine Hostname or Custom Name
+  "platform": "string",    // OS Platform (linux, darwin, win32)
+  "cpu": {
+     "system": "number",   // System Load % (0-100)
+     "process": "number",  // Process Usage % (0-100)
+     "cores": "number"     // Core count
+  },
+  "memory": {
+    "system": {
+        "total": "number", // System Total Memory (bytes)
+        "free": "number",  // System Free Memory (bytes)
+        "used": "number"   // System Used Memory (bytes)
+    },
+    "process": {
+        "rss": "number",      // Resident Set Size (bytes)
+        "heapTotal": "number",// Heap Total (bytes)
+        "heapUsed": "number"  // Heap Used (bytes)
+    }
+  },
+  "runtime": {
+    "uptime": "number",    // Process uptime in seconds
+    "framework": "string"  // Optional framework info
+  },
+  "timestamp": "number"    // Unix Ms Timestamp
+}
+```
+
+## 2. Implementation Modules
+
+### A. Client SDK (`@gravito/pulse-node`)
+A lightweight agent to collect metrics and publish to Redis.
+- **Dependencies**: `ioredis`, `pidusage` (optional, or use native `os`/`process`).
+- **Functionality**:
+    - `startPulse({ service: string })`: Starts the heartbeat loop.
+    - Collects CPU/RAM usage.
+    - Publishes to Redis.
+
+### B. Server Collector (Zenith Console)
+- **Service**: `PulseService`
+- **Method**: `getNodes()`
+    - Performs `SCAN 0 MATCH pulse:* COUNT 100`.
+    - Returns grouped nodes by `service`.
+- **API**: `GET /api/pulse/nodes`
+
+### C. Frontend Dashboard (Zenith UI)
+- **Route**: `/pulse`
+- **Components**:
+    - `ServiceGroup`: A container for nodes of a specific service.
+    - `NodeCard`: Displays CPU/RAM sparklines (optional) and current health.
+    - `HealthBadge`: Green (Fresh), Yellow (>15s ago), Red (Dead/Gone - though Redis TTL handles removal, frontend can handle stale UI).
+
+## 3. Alerts (Phase 2)
+- Server-side checker that monitors values from `PulseService`.
+- Triggers `AlertService` if:
+    - CPU > 90% for 2 mins.
+    - Memory > 90% for 5 mins.
+    - Disk < 10% free.
+
+## 4. Work Plan
+1. **Define Types**: Add `PulseNode` interface to `@gravito/custom-types` or `flux-console` shared types.
+2. **Implement Server Collector**: Create `PulseService` in `packages/flux-console/server/services`.
+3. **Implement API**: Add route in `packages/flux-console/server/routes.ts`.
+4. **Implement UI**: Create `PulsePage` and components.
+5. **Implement Node Client**: Add `startPulse` to `packages/stream` (or separate package) to verify "dogfooding" by having the server monitor itself.

package/src/client/App.tsx

@@ -12,6 +12,7 @@ import {
   SchedulesPage,
   SettingsPage,
   WorkersPage,
+  PulsePage,
 } from './pages'
 
 const queryClient = new QueryClient()
@@ -48,6 +49,7 @@ function AuthenticatedRoutes() {
           <Route path="/schedules" element={<SchedulesPage />} />
           <Route path="/workers" element={<WorkersPage />} />
           <Route path="/metrics" element={<MetricsPage />} />
+          <Route path="/pulse" element={<PulsePage />} />
           <Route path="/settings" element={<SettingsPage />} />
         </Routes>
       </Layout>

package/src/client/Layout.tsx

@@ -64,7 +64,7 @@ export function Layout({ children }: LayoutProps) {
     fetch('/api/system/status')
       .then((res) => res.json())
       .then(setSystemStatus)
-      .catch(() => {})
+      .catch(() => { })
   }, [])
 
   // Global SSE Stream Manager
@@ -90,6 +90,15 @@ export function Layout({ children }: LayoutProps) {
       }
     })
 
+    ev.addEventListener('pulse', (e) => {
+      try {
+        const data = JSON.parse(e.data)
+        window.dispatchEvent(new CustomEvent('flux-pulse-update', { detail: data }))
+      } catch (err) {
+        console.error('SSE Pulse Error', err)
+      }
+    })
+
     ev.onerror = (err) => {
       console.error('[Zenith] SSE Connection Error', err)
       ev.close()
@@ -107,7 +116,7 @@ export function Layout({ children }: LayoutProps) {
     fetch('/api/queues')
       .then((res) => res.json())
       .then(setQueueData)
-      .catch(() => {})
+      .catch(() => { })
 
     // Optional: Listen to global stats if available (from OverviewPage) to keep queue stats fresh in command palette
     const handler = (e: Event) => {
@@ -246,15 +255,15 @@ export function Layout({ children }: LayoutProps) {
     },
     ...(isAuthEnabled
       ? [
-          {
-            id: 'sys-logout',
-            title: 'Logout',
-            description: 'Sign out from the console',
-            icon: <LogOut size={18} />,
-            category: 'System' as const,
-            action: logout,
-          },
-        ]
+        {
+          id: 'sys-logout',
+          title: 'Logout',
+          description: 'Sign out from the console',
+          icon: <LogOut size={18} />,
+          category: 'System' as const,
+          action: logout,
+        },
+      ]
       : []),
   ]
 
@@ -339,6 +348,14 @@ export function Layout({ children }: LayoutProps) {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
+  // Auto-scroll to selected item
+  useEffect(() => {
+    const el = document.getElementById(`command-item-${selectedIndex}`)
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  }, [selectedIndex])
+
   const handleSelect = (cmd: CommandItem) => {
     cmd.action()
     setIsCommandPaletteOpen(false)
@@ -520,6 +537,7 @@ export function Layout({ children }: LayoutProps) {
               <div className="p-6 border-b flex items-center gap-4 bg-muted/5">
                 <Command className="text-primary animate-pulse" size={24} />
                 <input
+                  autoFocus
                   type="text"
                   placeholder="Execute command or navigate..."
                   className="flex-1 bg-transparent border-none outline-none text-lg font-bold placeholder:text-muted-foreground/30"
@@ -559,6 +577,7 @@ export function Layout({ children }: LayoutProps) {
                     {filteredCommands.map((cmd, i) => (
                       <button
                         type="button"
+                        id={`command-item-${i}`}
                         key={cmd.id}
                         className={cn(
                           'w-full flex items-center justify-between p-4 rounded-2xl transition-all cursor-pointer group/cmd outline-none',

package/src/client/Sidebar.tsx

@@ -23,10 +23,11 @@ export function Sidebar({ className, collapsed, toggleCollapse }: SidebarProps)
 
   const navItems = [
     { icon: LayoutDashboard, label: 'Overview', path: '/' },
+    { icon: Activity, label: 'Pulse', path: '/pulse' },
     { icon: ListTree, label: 'Queues', path: '/queues' },
     { icon: Clock, label: 'Schedules', path: '/schedules' },
     { icon: HardDrive, label: 'Workers', path: '/workers' },
-    { icon: Activity, label: 'Metrics', path: '/metrics' },
+    // { icon: Activity, label: 'Metrics', path: '/metrics' },
     { icon: Settings, label: 'Settings', path: '/settings' },
   ]
 

package/src/client/WorkerStatus.tsx

@@ -36,23 +36,25 @@ export function WorkerStatus({
   const onlineCount = workers.filter((w) => w.status === 'online').length
 
   return (
-    <div className="card-premium p-6 h-full">
-      <div className="flex justify-between items-center mb-8">
-        <div>
-          <h3 className="text-lg font-black flex items-center gap-2 tracking-tight">
-            <Cpu size={20} className="text-primary" />
-            Cluster Nodes
-          </h3>
-          <p className="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
-            Real-time load
-          </p>
+    <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>
+            <h3 className="text-lg font-black flex items-center gap-2 tracking-tight">
+              <Cpu size={20} className="text-primary" />
+              Cluster Nodes
+            </h3>
+            <p className="text-[10px] text-muted-foreground uppercase font-black tracking-widest opacity-60">
+              Real-time load
+            </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">
+            {onlineCount} ACTIVE
+          </span>
         </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">
-          {onlineCount} ACTIVE
-        </span>
       </div>
 
-      <div className="space-y-3">
+      <div className="flex-1 overflow-y-auto min-h-0 px-6 space-y-3 scrollbar-thin pb-6">
         {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" />
@@ -64,7 +66,7 @@ export function WorkerStatus({
           <div
             key={worker.id}
             className={cn(
-              'flex items-center justify-between p-4 rounded-2xl bg-muted/10 border transition-all group overflow-hidden relative',
+              'flex items-center justify-between p-4 rounded-2xl bg-muted/10 border transition-all group overflow-hidden relative shrink-0',
               worker.id === highlightedWorkerId
                 ? 'border-primary/50 bg-primary/5 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
                 : 'border-transparent hover:border-primary/20 hover:bg-muted/20'
@@ -159,12 +161,14 @@ export function WorkerStatus({
         ))}
       </div>
 
-      <button
-        type="button"
-        className="w-full mt-8 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"
-      >
-        Manage Nodes
-      </button>
+      <div className="p-6 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"
+        >
+          Manage Nodes
+        </button>
+      </div>
     </div>
   )
 }

package/src/client/components/BrandIcons.tsx

@@ -0,0 +1,63 @@
+import { SVGProps } from 'react'
+
+export function NodeIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M16 2L2.1 9.9v12.2L16 30l13.9-7.9V9.9L16 2zm11.9 19.1L16 27.8l-11.9-6.7V11.1L16 4.2l11.9 6.9v10z" fill="#339933" />
+            <path d="M16 22.5l-6-3.4v-6.8l6-3.4 6 3.4v6.8l-6 3.4z" fill="#339933" />
+        </svg>
+    )
+}
+
+export function BunIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            {/* Outer Outline/Shadow for contrast on light bg */}
+            <path d="M30 17.045a9.8 9.8 0 0 0-.32-2.306l-.004.034a11.2 11.2 0 0 0-5.762-6.786c-3.495-1.89-5.243-3.326-6.8-3.811h.003c-1.95-.695-3.949.82-5.825 1.927-4.52 2.481-9.573 5.45-9.28 11.417.008-.029.017-.052.026-.08a9.97 9.97 0 0 0 3.934 7.257l-.01-.006C13.747 31.473 30.05 27.292 30 17.045" fill="#fbf0df" stroke="#4a4a4a" strokeWidth="1.5" />
+
+            <path fill="#37474f" d="M19.855 20.236A.8.8 0 0 0 19.26 20h-6.514a.8.8 0 0 0-.596.236.51.51 0 0 0-.137.463 4.37 4.37 0 0 0 1.641 2.339 4.2 4.2 0 0 0 2.349.926 4.2 4.2 0 0 0 2.343-.926 4.37 4.37 0 0 0 1.642-2.339.5.5 0 0 0-.132-.463Z" />
+            <ellipse cx="22.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
+            <ellipse cx="9.5" cy="18.5" fill="#f8bbd0" rx="2.5" ry="1.5" />
+            <circle cx="10" cy="16" r="2" fill="#37474f" />
+            <circle cx="22" cy="16" r="2" fill="#37474f" />
+        </svg>
+    )
+}
+
+export function DenoIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <circle cx="16" cy="16" r="14" fill="currentColor" />
+            <path d="M16 6C16 6 24 10 24 18C24 23.5228 19.5228 28 14 28C8.47715 28 4 23.5228 4 18C4 10 16 6 16 6Z" fill="white" />
+            <circle cx="12" cy="18" r="2" fill="black" />
+        </svg>
+    )
+}
+
+export function PhpIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <ellipse cx="16" cy="16" rx="14" ry="10" fill="#777BB4" />
+            <text x="50%" y="54%" dominantBaseline="middle" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold">PHP</text>
+        </svg>
+    )
+}
+
+export function GoIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M5 16C5 10 10 5 16 5H24V13H16C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19H27V27H16C10 27 5 22 5 16Z" fill="#00ADD8" />
+            <circle cx="9" cy="16" r="2" fill="white" />
+            <circle cx="23" cy="9" r="2" fill="white" />
+        </svg>
+    )
+}
+
+export function PythonIcon(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M16 2C10 2 10 5 10 5L10 9L18 9L18 11L8 11L8 20L12 20L12 14L22 14C22 14 22 12 16 2Z" fill="#3776AB" />
+            <path d="M16 30C22 30 22 27 22 27L22 23L14 23L14 21L24 21L24 12L20 12L20 18L10 18C10 18 10 20 16 30Z" fill="#FFD43B" />
+        </svg>
+    )
+}

package/src/client/components/PageHeader.tsx

@@ -0,0 +1,34 @@
+import { LucideIcon } from 'lucide-react'
+import { ReactNode } from 'react'
+import { cn } from '../utils'
+
+interface PageHeaderProps {
+    icon: LucideIcon
+    title: string
+    description?: string
+    children?: ReactNode
+    className?: string
+}
+
+export function PageHeader({ icon: Icon, title, description, children, className }: PageHeaderProps) {
+    return (
+        <div className={cn("flex justify-between items-end", className)}>
+            <div>
+                <h1 className="text-4xl font-black tracking-tighter flex items-center gap-3">
+                    <div className="p-2 bg-primary/10 rounded-xl text-primary">
+                        <Icon size={32} />
+                    </div>
+                    {title}
+                </h1>
+                {description && (
+                    <p className="text-muted-foreground mt-2 text-sm font-bold opacity-60 uppercase tracking-widest pl-[3.75rem]">
+                        {description}
+                    </p>
+                )}
+            </div>
+            <div>
+                {children}
+            </div>
+        </div>
+    )
+}

package/src/client/pages/OverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { AnimatePresence, animate, motion } from 'framer-motion'
 import {
   Activity,
@@ -9,13 +9,10 @@ import {
   Cpu,
   Hourglass,
   ListTree,
-  RefreshCcw,
   Search,
   Terminal,
-  Trash2,
 } from 'lucide-react'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 import { JobInspector } from '../components/JobInspector'
 import { LogArchiveModal } from '../components/LogArchiveModal'
 import { ThroughputChart } from '../ThroughputChart'
@@ -57,7 +54,7 @@ function LiveLogs({
   onSearchArchive: () => void
   onWorkerHover?: (id: string | null) => void
 }) {
-  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const scrollRef = React.useRef<HTMLUListElement>(null)
 
   React.useEffect(() => {
     // Access logs to satisfy dependency check (and trigger on update)
@@ -67,7 +64,7 @@ function LiveLogs({
   }, [logs])
 
   return (
-    <div className="card-premium h-full flex flex-col overflow-hidden group">
+    <div className="absolute inset-0 card-premium flex flex-col overflow-hidden group">
       <div className="p-4 border-b bg-muted/5 flex justify-between items-center">
         <div className="flex items-center gap-2">
           <Terminal size={14} className="text-primary" />
@@ -92,7 +89,7 @@ function LiveLogs({
       </div>
       <ul
         ref={scrollRef}
-        className="flex-1 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-[11px] space-y-2.5 scrollbar-thin scroll-smooth"
       >
         {logs.length === 0 ? (
           <div className="h-full flex flex-col items-center justify-center text-muted-foreground/30 gap-2 opacity-50">
@@ -290,8 +287,6 @@ function QueueList({
   queues: QueueStats[]
   setSelectedQueue: (name: string | null) => void
 }) {
-  const queryClient = useQueryClient()
-
   return (
     <div className="card-premium h-full flex flex-col overflow-hidden">
       <div className="p-4 border-b bg-muted/5 flex justify-between items-center">
@@ -353,10 +348,8 @@ function QueueList({
 }
 
 export function OverviewPage() {
-  const navigate = useNavigate()
   const [selectedQueue, setSelectedQueue] = React.useState<string | null>(null)
   const [hoveredWorkerId, setHoveredWorkerId] = React.useState<string | null>(null)
-  const queryClient = useQueryClient()
 
   const [logs, setLogs] = React.useState<SystemLog[]>([])
   const [stats, setStats] = React.useState<FluxStats>(DEFAULT_STATS)
@@ -493,19 +486,24 @@ export function OverviewPage() {
 
       <QueueHeatmap queues={queues} />
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 h-[600px]">
-        <div className="lg:col-span-1 h-full">
+      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-8 lg:h-[600px]">
+        <div className="lg:col-span-1 h-[400px] lg:h-full">
           <WorkerStatus highlightedWorkerId={hoveredWorkerId} workers={workers} />
         </div>
-        <div className="lg:col-span-2 grid grid-rows-2 gap-6 h-full">
-          <LiveLogs
-            logs={logs}
-            onSearchArchive={() => setIsLogArchiveOpen(true)}
-            onWorkerHover={setHoveredWorkerId}
-          />
-          <QueueList queues={queues} setSelectedQueue={setSelectedQueue} />
+        <div className="lg:col-span-2 flex flex-col lg:grid lg:grid-rows-2 gap-6 lg:h-full">
+          <div className="relative h-[300px] lg:h-full min-h-0 overflow-hidden bg-card rounded-xl border border-border/50">
+            <LiveLogs
+              logs={logs}
+              onSearchArchive={() => setIsLogArchiveOpen(true)}
+              onWorkerHover={setHoveredWorkerId}
+            />
+          </div>
+          <div className="h-[300px] lg:h-full min-h-0 overflow-hidden bg-card rounded-xl border border-border/50">
+            <QueueList queues={queues} setSelectedQueue={setSelectedQueue} />
+          </div>
         </div>
       </div>
     </div>
   )
 }
+