fix: use derived override pattern for selectedQueue to avoid captured state warning

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/backend/src/graphql/resolvers/queues.ts

@@ -76,9 +76,7 @@ builder.queryField("adminQueueJobs", (t) =>
 
       const limit = args.limit ?? 25;
       const offset = args.offset ?? 0;
-      const statuses: JobStatus[] = args.status
-        ? [args.status as JobStatus]
-        : [...JOB_STATUSES];
+      const statuses: JobStatus[] = args.status ? [args.status as JobStatus] : [...JOB_STATUSES];
 
       const jobs = await queue.getJobs(statuses, offset, offset + limit - 1);
       return Promise.all(jobs.map((job) => toJobData(job, args.queue)));

packages/frontend/src/routes/admin/queues/+page.svelte

@@ -11,12 +11,15 @@
   } from "$lib/services";
   import { Button } from "$lib/components/ui/button";
   import { Badge } from "$lib/components/ui/badge";
-  import type { Job, QueueInfo } from "$lib/services";
+  import type { Job } from "$lib/services";
 
   const { data } = $props();
 
   const queues = $derived(data.queues);
-  let selectedQueue = $state<string | null>(data.queues[0]?.name ?? null);
+
+  // null means "user hasn't picked yet" — fall back to first queue
+  let selectedQueueOverride = $state<string | null>(null);
+  const selectedQueue = $derived(selectedQueueOverride ?? queues[0]?.name ?? null);
   let selectedStatus = $state<string | null>(null);
   let jobs = $state<Job[]>([]);
   let loadingJobs = $state(false);
@@ -42,7 +45,7 @@
   }
 
   async function selectQueue(name: string) {
-    selectedQueue = name;
+    selectedQueueOverride = name;
     selectedStatus = null;
     await loadJobs();
   }
@@ -130,13 +133,16 @@
   <div class="flex flex-wrap gap-3 mb-6 px-3 sm:px-0">
     {#each queues as queue (queue.name)}
       {@const isSelected = selectedQueue === queue.name}
-      <button
+      <div
+        role="button"
+        tabindex="0"
         class={`flex-1 min-w-48 rounded-lg border p-4 text-left transition-colors cursor-pointer ${
           isSelected
             ? "border-primary/50 bg-primary/5"
             : "border-border/40 bg-card hover:border-border/70"
         }`}
         onclick={() => selectQueue(queue.name)}
+        onkeydown={(e) => e.key === "Enter" && selectQueue(queue.name)}
         aria-pressed={isSelected}
       >
         <div class="flex items-center justify-between mb-3">
@@ -181,7 +187,7 @@
             <span class="text-muted-foreground">empty</span>
           {/if}
         </div>
-      </button>
+      </div>
     {/each}
   </div>
 
@@ -213,14 +219,10 @@
             <th class="px-4 py-3 text-left font-medium text-muted-foreground"
               >{$_("admin.queues.col_status")}</th
             >
-            <th
-              class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
-            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">
               {$_("admin.queues.col_attempts")}
             </th>
-            <th
-              class="px-4 py-3 text-left font-medium text-muted-foreground hidden lg:table-cell"
-            >
+            <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden lg:table-cell">
               {$_("admin.queues.col_created")}
             </th>
             <th class="px-4 py-3 text-right font-medium text-muted-foreground"