@gravito/zenith 0.1.0-beta.1 → 1.0.0

package/src/client/WorkerStatus.tsx

@@ -1,13 +1,38 @@
 import { type ClassValue, clsx } from 'clsx'
-import { Activity, Cpu } from 'lucide-react'
+import { Activity, Cpu, Terminal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / k ** i).toFixed(1)) + ' ' + sizes[i]
+}
+
+function getWorkerName(id: string, pid: number) {
+  // If ID contains Hostname+PID, try to simplify it
+  // Example: CarldeMacBook-Air.local-99401
+  const complexIdMatch = id.match(/^(.*)-(\d+)$/)
+  if (complexIdMatch && parseInt(complexIdMatch[2]) === pid) {
+    // Return just the hostname part, and maybe truncate if too long
+    let hostname = complexIdMatch[1]
+    if (hostname.endsWith('.local')) {
+      hostname = hostname.replace('.local', '')
+    }
+    return hostname
+  }
+  // Fallback
+  return id.replace('.local', '')
+}
+
 interface WorkerInfo {
   id: string
+  service?: string
   status: 'online' | 'offline'
   pid: number
   uptime: number
@@ -18,6 +43,12 @@ interface WorkerInfo {
       rss: number
     }
   }
+  meta?: {
+    laravel?: {
+      workerCount: number
+      roots: string[]
+    }
+  }
 }
 
 export function WorkerStatus({
@@ -27,32 +58,28 @@ export function WorkerStatus({
   highlightedWorkerId?: string | null
   workers?: WorkerInfo[]
 }) {
-  // Legacy polling removed, now using passed props
-  // const { data: workerData } = useQuery<{ workers: any[] }>({ ... })
-
-  // Fallback if not passed (though it should be)
-  // const workers = workerData?.workers || []
-
   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,10 +91,10 @@ 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',
+              'relative flex items-center gap-4 p-4 rounded-2xl border transition-all group overflow-hidden 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'
+                ? 'bg-primary/5 border-primary/50 shadow-[0_0_20px_rgba(var(--primary-rgb),0.1)] -translate-y-1 scale-[1.02] z-10'
+                : 'bg-card hover:bg-muted/10 border-border/50 hover:border-primary/20'
             )}
           >
             {/* Status bar */}
@@ -78,80 +105,96 @@ export function WorkerStatus({
               )}
             />
 
-            <div className="flex items-center gap-4">
-              <div className="relative">
-                <div
-                  className={cn(
-                    'w-3 h-3 rounded-full',
-                    worker.status === 'online'
-                      ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
-                      : 'bg-muted-foreground/40'
-                  )}
-                ></div>
-              </div>
-              <div>
-                <p className="text-sm font-black tracking-tight group-hover:text-primary transition-colors">
-                  {worker.id}
-                </p>
-                <div className="flex items-center gap-2">
-                  <span className="text-[9px] font-black uppercase tracking-tighter opacity-50">
-                    {worker.status}
+            {/* Icon/Dot */}
+            <div className="relative shrink-0 ml-1">
+              <div
+                className={cn(
+                  'w-3 h-3 rounded-full',
+                  worker.status === 'online'
+                    ? 'bg-green-500 animate-pulse shadow-[0_0_12px_rgba(34,197,94,0.6)]'
+                    : 'bg-muted-foreground/40'
+                )}
+              />
+            </div>
+
+            {/* Main Info */}
+            <div className="flex-1 min-w-0 flex flex-col justify-center mr-2">
+              {worker.service && (
+                <span className="text-[10px] font-black text-primary/80 uppercase tracking-widest mb-0.5 whitespace-nowrap">
+                  {worker.service}
+                </span>
+              )}
+              <h4
+                className="text-sm font-black tracking-tight text-foreground truncate"
+                title={worker.id}
+              >
+                {getWorkerName(worker.id, worker.pid) || worker.id}
+              </h4>
+              <div className="flex items-center gap-2 mt-1">
+                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-wider whitespace-nowrap">
+                  PID {worker.pid}
+                </span>
+                {worker.meta?.laravel && worker.meta.laravel.workerCount > 0 && (
+                  <span className="inline-flex items-center gap-1 text-[9px] font-black text-white bg-red-500 px-1.5 py-0.5 rounded shadow-sm uppercase tracking-widest leading-none whitespace-nowrap">
+                    <Terminal size={8} />
+                    {worker.meta.laravel.workerCount} PHP
                   </span>
-                  <span className="text-[9px] font-black text-primary/60">PID {worker.pid}</span>
-                </div>
+                )}
               </div>
             </div>
 
-            <div className="flex items-center gap-6">
+            {/* Metrics (Right Side) */}
+            <div className="flex items-center gap-3 text-right shrink-0">
               {worker.metrics && (
-                <div className="flex gap-4">
-                  <div className="space-y-1.5 w-20">
+                <>
+                  <div className="hidden sm:block space-y-1 w-12">
                     <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
-                      <span>LOAD ({worker.metrics.cores || '-'})</span>
+                      <span>CPU</span>
                       <span
                         className={cn(
-                          worker.metrics.cpu > (worker.metrics.cores || 4) && 'text-red-500'
+                          worker.metrics.cpu > (worker.metrics.cores || 1) * 100 && 'text-red-500'
                         )}
                       >
-                        {worker.metrics.cpu.toFixed(2)}
+                        {worker.metrics.cpu.toFixed(0)}%
                       </span>
                     </div>
                     <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
                       <div
-                        className={cn(
-                          'h-full transition-all duration-700',
-                          worker.metrics.cpu > (worker.metrics.cores || 4)
-                            ? 'bg-red-500'
-                            : worker.metrics.cpu > (worker.metrics.cores || 4) * 0.7
-                              ? 'bg-amber-500'
-                              : 'bg-green-500'
-                        )}
-                        style={{
-                          width: `${Math.min(100, (worker.metrics.cpu / (worker.metrics.cores || 1)) * 100)}%`,
-                        }}
-                      />
+                        className="h-full bg-foreground transition-all duration-700"
+                        style={{ width: `${Math.min(100, worker.metrics.cpu)}%` }}
+                      ></div>
                     </div>
                   </div>
-                  <div className="space-y-1.5 w-16">
+
+                  <div className="hidden sm:block space-y-1 w-12">
                     <div className="flex justify-between text-[8px] font-black text-muted-foreground uppercase tracking-tighter">
                       <span>RAM</span>
-                      <span>{Math.round(worker.metrics.ram.rss / 1024)}G</span>
+                      <span className="truncate ml-1">
+                        {formatBytes(worker.metrics.ram.rss).split(' ')[0]}
+                      </span>
                     </div>
                     <div className="h-1 w-full bg-muted rounded-full overflow-hidden">
                       <div
                         className="h-full bg-indigo-500 transition-all duration-700"
                         style={{
-                          width: `${Math.min(100, (worker.metrics.ram.rss / 2048) * 100)}%`,
+                          width: `${Math.min(100, (worker.metrics.ram.rss / 2000000000) * 100)}%`,
                         }}
-                      />
+                      ></div>
                     </div>
                   </div>
-                </div>
+                </>
               )}
-              <div className="text-right whitespace-nowrap hidden sm:block">
-                <p className="text-sm font-black tracking-tighter">{worker.uptime}s</p>
+
+              <div className="w-12">
+                <p className="text-xs font-black tracking-tighter tabular-nums text-foreground">
+                  {worker.uptime > 3600
+                    ? `${(worker.uptime / 3600).toFixed(1)}h`
+                    : worker.uptime > 60
+                      ? `${(worker.uptime / 60).toFixed(0)}m`
+                      : `${worker.uptime.toFixed(0)}s`}
+                </p>
                 <p className="text-[8px] text-muted-foreground uppercase font-black tracking-widest opacity-50">
-                  UPTIME
+                  UP
                 </p>
               </div>
             </div>
@@ -159,12 +202,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,138 @@
+import type { 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"
+      role="img"
+      aria-label="Node.js"
+      {...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"
+      role="img"
+      aria-label="Bun"
+      {...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"
+      role="img"
+      aria-label="Deno"
+      {...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"
+      role="img"
+      aria-label="PHP"
+      {...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"
+      role="img"
+      aria-label="Go"
+      {...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"
+      role="img"
+      aria-label="Python"
+      {...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/ConfirmDialog.tsx

@@ -35,7 +35,6 @@ export function ConfirmDialog({
           onClick={(e) => e.stopPropagation()}
           onKeyDown={(e) => e.stopPropagation()}
         >
-          {/* biome-ignore lint/a11y/noStaticElementInteractions: Modal content needs to stop propagation */}
           <motion.div
             initial={{ scale: 0.9, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}

package/src/client/components/JobInspector.tsx

@@ -83,14 +83,18 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
   }
 
   const toggleSelectAll = React.useCallback(() => {
-    if (!data?.jobs) return
+    if (!data?.jobs) {
+      return
+    }
     const availableCount = data.jobs.filter((j) => j._raw && !j._archived).length
     if (selectedIndices.size === availableCount && availableCount > 0) {
       setSelectedIndices(new Set())
     } else {
       const indices = new Set<number>()
       data.jobs.forEach((j, i) => {
-        if (j._raw && !j._archived) indices.add(i)
+        if (j._raw && !j._archived) {
+          indices.add(i)
+        }
       })
       setSelectedIndices(indices)
     }
@@ -134,10 +138,14 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
   }, [])
 
   const handleAction = async (action: 'delete' | 'retry', job: Job) => {
-    if (!job._raw) return
+    if (!job._raw) {
+      return
+    }
     const endpoint = action === 'delete' ? 'delete' : 'retry'
     const body: any = { raw: job._raw }
-    if (action === 'delete') body.type = view
+    if (action === 'delete') {
+      body.type = view
+    }
 
     await fetch(`/api/queues/${queueName}/jobs/${endpoint}`, {
       method: 'POST',
@@ -150,7 +158,9 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
   }
 
   const handleBulkAction = async (action: 'delete' | 'retry') => {
-    if (selectedIndices.size === 0 || !data?.jobs) return
+    if (selectedIndices.size === 0 || !data?.jobs) {
+      return
+    }
 
     const count = selectedIndices.size
     setConfirmDialog({
@@ -186,7 +196,9 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
   }
 
   const handleBulkActionAll = async (action: 'delete' | 'retry') => {
-    if (view === 'archive') return
+    if (view === 'archive') {
+      return
+    }
 
     setConfirmDialog({
       open: true,

package/src/client/components/PageHeader.tsx

@@ -0,0 +1,38 @@
+import type { LucideIcon } from 'lucide-react'
+import type { 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,17 +486,21 @@ 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>