feat(devtools): add EmptyState component for table/list empty states

Create reusable EmptyState component with icon, title, and message
props. Replace inline empty state divs across 6 pages (batches,
groups, index, jobs, queues) with the component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: glennmichael123

packages/devtools/pages/batches.stx

@@ -102,8 +102,8 @@
     </div>
 
     <!-- Empty state -->
-    <div @show='!loading() && !errorMessage() && batches().length === 0' class='text-center py-12 text-zinc-500 text-[0.8125rem] bg-[#141419] border border-zinc-800 rounded-lg'>
-      No batches found. Create a batch to see it here.
+    <div @show='!loading() && !errorMessage() && batches().length === 0'>
+      <EmptyState icon="layers" title="No batches found" message="Create a batch to see it here." />
     </div>
 
     <!-- Batch cards grid -->

packages/devtools/pages/components/empty-state.stx

@@ -0,0 +1,44 @@
+<script>
+const icon: string = 'inbox'
+const title: string = 'No data found'
+const message: string = ''
+</script>
+
+<div class="flex flex-col items-center justify-center py-16 px-6 text-center">
+  @if(icon === 'inbox')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
+      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
+    </svg>
+  @elseif(icon === 'search')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+    </svg>
+  @elseif(icon === 'layers')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>
+    </svg>
+  @elseif(icon === 'users')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+    </svg>
+  @elseif(icon === 'activity')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+    </svg>
+  @elseif(icon === 'git-branch')
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>
+    </svg>
+  @else
+    <svg class="w-12 h-12 text-zinc-700 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
+      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
+    </svg>
+  @endif
+
+  <h3 class="text-sm font-medium text-zinc-400 mb-1">{{ title }}</h3>
+  @if(message)
+    <p class="text-xs text-zinc-600 max-w-[280px]">{{ message }}</p>
+  @endif
+</div>

packages/devtools/pages/groups.stx

@@ -89,8 +89,8 @@
     </div>
 
     <!-- Empty state -->
-    <div @show='!loading() && !errorMessage() && filteredGroups().length === 0' class='text-center py-12 text-zinc-500 text-[0.8125rem]'>
-      No groups found. Jobs assigned to groups will appear here.
+    <div @show='!loading() && !errorMessage() && filteredGroups().length === 0'>
+      <EmptyState icon="users" title="No groups found" message="Jobs assigned to groups will appear here." />
     </div>
 
     <!-- Group cards grid -->

packages/devtools/pages/index.stx

@@ -269,7 +269,9 @@
       <div @show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading recent jobs...</div>
 
       <!-- Empty state -->
-      <div @show='!loading() && recentJobs().length === 0' class='text-center py-8 text-zinc-500 text-sm'>No recent jobs to display.</div>
+      <div @show='!loading() && recentJobs().length === 0'>
+        <EmptyState icon="inbox" title="No recent jobs" message="Jobs will appear here once dispatched." />
+      </div>
 
       <!-- Jobs table -->
       <table @show='!loading() && recentJobs().length > 0' class='w-full border-collapse'>
@@ -307,7 +309,9 @@
       <div @show='loading()' class='text-center py-8 text-zinc-500 text-sm'>Loading queues...</div>
 
       <!-- Empty state -->
-      <div @show='!loading() && queues().length === 0' class='text-center py-8 text-zinc-500 text-sm'>No queues found.</div>
+      <div @show='!loading() && queues().length === 0'>
+        <EmptyState icon="layers" title="No queues found" message="Start a queue worker to see queues here." />
+      </div>
 
       <!-- Queue cards -->
       <div @show='!loading() && queues().length > 0' class='flex flex-col gap-3'>

packages/devtools/pages/jobs.stx

@@ -187,7 +187,9 @@
     <div :if='loading()' class='text-center py-12 text-zinc-500 text-sm'>Loading jobs...</div>
 
     <!-- Empty state -->
-    <div :if='!loading() && filteredJobs().length === 0' class='text-center py-12 text-zinc-500 text-sm'>No jobs found matching the current filters.</div>
+    <div :if='!loading() && filteredJobs().length === 0'>
+      <EmptyState icon="search" title="No jobs found" message="Try adjusting your search or filters." />
+    </div>
 
     <!-- Table -->
     <table :if='!loading() && filteredJobs().length > 0' class='w-full border-collapse'>

packages/devtools/pages/queues.stx

@@ -90,8 +90,8 @@
     </div>
 
     <!-- Empty state -->
-    <div @show='!loading() && !errorMessage() && filteredQueues().length === 0' class='text-center py-12 text-zinc-500 text-sm bg-[#141419] border border-zinc-800 rounded-lg'>
-      No queues found matching your search.
+    <div @show='!loading() && !errorMessage() && filteredQueues().length === 0'>
+      <EmptyState icon="search" title="No queues found" message="Try adjusting your search criteria." />
     </div>
 
     <!-- Queue cards grid -->