@svadmin/ui 0.33.1 → 0.34.0

package/dist/components/TaskQueueDrawer.svelte

@@ -1,56 +1,211 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from '@lucide/svelte';
+  import { ListTodo, Loader2, Plus, Search, RefreshCw } from '@lucide/svelte';
+  import { getTaskProvider, useSubmitTask, useTaskList } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import type { TaskProvider, TaskRecord } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
-  import type { BackgroundTask, TaskStatus } from '../types.js';
+  import { Input } from './ui/input/index.js';
+  import { Select } from './ui/select/index.js';
+  import { Textarea } from './ui/textarea/index.js';
+  import { Label } from './ui/label/index.js';
+  import * as Sheet from './ui/sheet/index.js';
+  import * as Tabs from './ui/tabs/index.js';
+  import * as Card from './ui/card/index.js';
+  import TaskList from './TaskList.svelte';
+  import TaskDetails from './TaskDetails.svelte';
+
+  type AutoRefreshValue = '0' | '5000' | '15000' | '30000';
+  type TaskTab = 'tasks' | 'dlq';
 
   let {
     open = $bindable(false),
-    tasks = $bindable<BackgroundTask[]>([]),
-    onDismiss,
-    onRetry,
-    onDownload,
+    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    title,
+    initialTab = 'tasks',
   }: {
     open?: boolean;
-    tasks?: BackgroundTask[];
-    onDismiss?: (taskId: string) => void;
-    onRetry?: (taskId: string) => void;
-    onDownload?: (taskId: string, url: string) => void;
+    taskProvider?: TaskProvider<TaskRecord>;
+    title?: string;
+    initialTab?: TaskTab;
   } = $props();
 
-  let runningCount = $derived(tasks.filter(t => t.status === 'running' || t.status === 'pending').length);
+  let activeTab = $state<TaskTab>('tasks');
+  let selectedTaskId = $state<string | null>(null);
+  let searchQuery = $state('');
+  let statusFilter = $state('all');
+  let autoRefresh = $state<AutoRefreshValue>('15000');
+  let submitTaskName = $state('');
+  let submitIdempotencyKey = $state('');
+  let submitBodyText = $state(t('task.bodyPlaceholder'));
+  let submitError = $state<string | null>(null);
+  let submitOpen = $state(false);
+
+  const refreshInterval = $derived(autoRefresh === '0' ? false : Number(autoRefresh));
+  const resolvedTitle = $derived(title ?? t('task.drawerTitle'));
+
+  const taskQuery = useTaskList({
+    get taskProvider() {
+      return taskProvider;
+    },
+    get queryOptions() {
+      return {
+        enabled: !!taskProvider,
+        refetchInterval: refreshInterval,
+        refetchIntervalInBackground: true,
+      };
+    },
+  });
+
+  const dlqQuery = useTaskList({
+    get dlq() {
+      return true;
+    },
+    get taskProvider() {
+      return taskProvider;
+    },
+    get queryOptions() {
+      return {
+        enabled: !!taskProvider && !!taskProvider?.listDlq,
+        refetchInterval: refreshInterval,
+        refetchIntervalInBackground: true,
+      };
+    },
+  });
+
+  const submitTask = useSubmitTask();
+
+  const allTasks = $derived(taskQuery.data?.data ?? []);
+  const dlqTasks = $derived(dlqQuery.data?.data ?? []);
+
+  const availableStatuses = $derived.by(() => {
+    const source = activeTab === 'dlq' ? dlqTasks : allTasks;
+    const unique = Array.from(new Set(source.map((task) => String(task.status ?? 'pending').toLowerCase()).filter(Boolean)));
+    return unique.sort();
+  });
+
+  function matchesSearch(task: TaskRecord, query: string) {
+    if (!query) return true;
+    const haystack = [
+      task.id,
+      task.title,
+      task.name,
+      task.status,
+      task.message,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase();
+    return haystack.includes(query.toLowerCase());
+  }
+
+  function matchesStatus(task: TaskRecord, status: string) {
+    if (status === 'all') return true;
+    return String(task.status ?? 'pending').toLowerCase() === status;
+  }
+
+  const filteredTasks = $derived.by(() => {
+    const source = activeTab === 'dlq' ? dlqTasks : allTasks;
+    return source.filter((task) => matchesSearch(task, searchQuery) && matchesStatus(task, statusFilter));
+  });
+
+  const runningCount = $derived(
+    allTasks.filter((task) => ['pending', 'queued', 'running', 'processing'].includes(String(task.status ?? '').toLowerCase())).length,
+  );
+
+  $effect(() => {
+    activeTab = initialTab;
+  });
+
+  $effect(() => {
+    if (statusFilter !== 'all' && !availableStatuses.includes(statusFilter)) {
+      statusFilter = 'all';
+    }
+  });
+
+  $effect(() => {
+    const current = filteredTasks;
+    if (current.length === 0) {
+      selectedTaskId = null;
+      return;
+    }
+
+    if (!selectedTaskId) {
+      selectedTaskId = current[0].id;
+      return;
+    }
 
-  const statusIcon: Record<TaskStatus, typeof Loader2> = {
-    pending: Clock,
-    running: Loader2,
-    completed: CheckCircle2,
-    failed: XCircle,
-  };
+    if (!current.some((task) => task.id === selectedTaskId)) {
+      selectedTaskId = current[0].id;
+    }
+  });
 
-  const statusColor: Record<TaskStatus, string> = {
-    pending: 'text-muted-foreground',
-    running: 'text-primary',
-    completed: 'text-green-500',
-    failed: 'text-destructive',
-  };
+  function formatTime(value: unknown) {
+    if (!value) return '—';
+    return new Date(value as string | Date).toLocaleString();
+  }
+
+  function resetSubmitForm() {
+    submitTaskName = '';
+    submitIdempotencyKey = '';
+    submitBodyText = t('task.bodyPlaceholder');
+    submitError = null;
+  }
+
+  async function handleSubmitTask() {
+    submitError = null;
+    if (!submitTaskName.trim()) {
+      submitError = t('validation.required');
+      return;
+    }
+
+    let body: Record<string, unknown> | undefined;
+    if (submitBodyText.trim()) {
+      try {
+        body = JSON.parse(submitBodyText) as Record<string, unknown>;
+      } catch {
+        submitError = t('task.invalidJson');
+        return;
+      }
+    }
 
-  function formatTime(d: string | Date) {
-    return new Date(d).toLocaleTimeString();
+    try {
+      const handle = await submitTask.mutation.mutateAsync({
+        taskName: submitTaskName.trim(),
+        taskProvider,
+        options: {
+          body,
+          idempotencyKey: submitIdempotencyKey.trim() || undefined,
+        },
+      });
+      activeTab = 'tasks';
+      selectedTaskId = handle.id ?? null;
+      submitOpen = false;
+      resetSubmitForm();
+      await Promise.all([
+        taskQuery.refetch?.(),
+        dlqQuery.refetch?.(),
+      ]);
+    } catch (error) {
+      submitError = error instanceof Error ? error.message : t('task.submitFailed');
+    }
   }
 
-  function dismissTask(id: string) {
-    tasks = tasks.filter(t => t.id !== id);
-    onDismiss?.(id);
+  async function refreshCurrentTab() {
+    if (activeTab === 'dlq') {
+      await dlqQuery.refetch?.();
+      return;
+    }
+    await taskQuery.refetch?.();
   }
 </script>
 
-<!-- Trigger Button (to be placed in Header) -->
 <Button
   variant="ghost"
   size="icon"
   class="relative"
   onclick={() => open = !open}
+  aria-label={resolvedTitle}
 >
   <ListTodo class="h-4 w-4" />
   {#if runningCount > 0}
@@ -60,99 +215,149 @@
   {/if}
 </Button>
 
-<!-- Task Queue Drawer -->
-{#if open}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="fixed inset-0 z-[90] flex justify-end" onclick={() => open = false}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div
-      class="bg-card shadow-2xl w-full max-w-sm h-full flex flex-col border-l border-border animate-in slide-in-from-right duration-200"
-      onclick={(e) => e.stopPropagation()}
-    >
-      <!-- Header -->
-      <div class="p-4 border-b border-border flex items-center justify-between bg-muted/30">
-        <div class="flex items-center gap-2">
+<Sheet.Root bind:open side="right" class="w-full max-w-6xl border-l border-border bg-card p-0" onClose={() => open = false}>
+  <Sheet.Content class="h-full gap-0 p-0">
+    <div class="flex h-full flex-col">
+      <div class="border-b border-border bg-muted/30 px-4 py-3">
+        <div class="flex flex-wrap items-center gap-2">
           <ListTodo class="h-5 w-5 text-muted-foreground" />
-          <h2 class="text-sm font-semibold">Background Tasks</h2>
-          {#if runningCount > 0}
-            <Badge variant="secondary" class="text-xs">{runningCount} active</Badge>
+          <h2 class="text-sm font-semibold">{resolvedTitle}</h2>
+          <Badge variant="secondary" class="text-xs">{t('task.activeCount', { count: runningCount })}</Badge>
+          {#if allTasks[0]?.createdAt}
+            <span class="text-xs text-muted-foreground">{t('task.lastQueuedAt', { time: formatTime(allTasks[0].createdAt) })}</span>
           {/if}
         </div>
-        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => open = false}>
-          <X class="h-4 w-4" />
-        </Button>
       </div>
 
-      <!-- Task List -->
-      <div class="flex-1 overflow-y-auto">
-        {#each tasks as task}
-          {@const Icon = statusIcon[task.status]}
-          <div class="p-4 border-b border-border hover:bg-muted/30 transition-colors">
-            <div class="flex items-start justify-between gap-2">
-              <div class="flex items-start gap-3 flex-1 min-w-0">
-                <div class="{statusColor[task.status]} mt-0.5 shrink-0">
-                  <Icon class="h-4 w-4 {task.status === 'running' ? 'animate-spin' : ''}" />
+      {#if !taskProvider}
+        <div class="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
+          {t('common.configRequired')}
+        </div>
+      {:else}
+        <div class="grid min-h-0 flex-1 gap-0 lg:grid-cols-[minmax(0,1.2fr)_minmax(340px,0.8fr)]">
+          <div class="min-h-0 overflow-auto border-b border-border lg:border-b-0 lg:border-r">
+            <div class="space-y-4 p-4">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-wrap items-center gap-2">
+                  <Tabs.Root value={activeTab} class="w-full">
+                    <Tabs.List class="inline-flex rounded-lg border border-border bg-muted/40 p-1">
+                      <Tabs.Trigger value="tasks" active={activeTab === 'tasks'} onclick={() => activeTab = 'tasks'}>
+                        {t('task.tabTasks')}
+                        <Badge variant="outline" class="ml-1 text-[10px]">{taskQuery.data?.total ?? allTasks.length}</Badge>
+                      </Tabs.Trigger>
+                      <Tabs.Trigger value="dlq" active={activeTab === 'dlq'} onclick={() => activeTab = 'dlq'}>
+                        {t('task.tabDlq')}
+                        <Badge variant="outline" class="ml-1 text-[10px]">{dlqQuery.data?.total ?? dlqTasks.length}</Badge>
+                      </Tabs.Trigger>
+                    </Tabs.List>
+                  </Tabs.Root>
+                  <div class="ml-auto flex items-center gap-2">
+                    <Button variant="outline" size="sm" onclick={() => void refreshCurrentTab()}>
+                      <RefreshCw class="mr-1.5 h-3.5 w-3.5" />
+                      {t('common.refresh')}
+                    </Button>
+                    <Button size="sm" onclick={() => submitOpen = !submitOpen}>
+                      <Plus class="mr-1.5 h-3.5 w-3.5" />
+                      {t('task.submitAction')}
+                    </Button>
+                  </div>
                 </div>
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium truncate text-foreground">{task.title}</p>
-                  {#if task.message}
-                    <p class="text-xs text-muted-foreground mt-0.5">{task.message}</p>
-                  {/if}
-                  <p class="text-[10px] text-muted-foreground/60 mt-1 font-mono">{formatTime(task.createdAt)}</p>
+
+                <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_180px_160px]">
+                  <div class="relative">
+                    <Search class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      class="pl-9"
+                      placeholder={t('task.searchPlaceholder')}
+                      bind:value={searchQuery}
+                    />
+                  </div>
+                  <Select bind:value={statusFilter} aria-label={t('task.statusFilterLabel')}>
+                    <option value="all">{t('task.statusAll')}</option>
+                    {#each availableStatuses as status}
+                      <option value={status}>{status}</option>
+                    {/each}
+                  </Select>
+                  <Select bind:value={autoRefresh} aria-label={t('task.autoRefreshLabel')}>
+                    <option value="0">{t('task.refreshOff')}</option>
+                    <option value="5000">{t('task.refresh5s')}</option>
+                    <option value="15000">{t('task.refresh15s')}</option>
+                    <option value="30000">{t('task.refresh30s')}</option>
+                  </Select>
                 </div>
               </div>
-              <button
-                class="text-muted-foreground/40 hover:text-muted-foreground transition shrink-0"
-                onclick={() => dismissTask(task.id)}
-              >
-                <X class="h-3.5 w-3.5" />
-              </button>
+
+              {#if submitOpen}
+                <Card.Root class="border-border/60 shadow-none">
+                  <Card.Header class="pb-3">
+                    <Card.Title class="text-base">{t('task.submitTitle')}</Card.Title>
+                    <Card.Description>{t('task.submitDescription')}</Card.Description>
+                  </Card.Header>
+                  <Card.Content class="space-y-4 pt-0">
+                    <div class="space-y-2">
+                      <Label for="task-name">{t('task.taskNameLabel')}</Label>
+                      <Input id="task-name" bind:value={submitTaskName} placeholder="image.generate" />
+                    </div>
+                    <div class="space-y-2">
+                      <Label for="task-idempotency-key">{t('task.idempotencyKeyLabel')}</Label>
+                      <Input id="task-idempotency-key" bind:value={submitIdempotencyKey} placeholder="poster-2026-04-19" />
+                    </div>
+                    <div class="space-y-2">
+                      <Label for="task-body">{t('task.bodyLabel')}</Label>
+                      <Textarea id="task-body" bind:value={submitBodyText} class="min-h-[140px] font-mono text-xs" />
+                    </div>
+                    {#if submitError}
+                      <p class="text-sm text-destructive">{submitError}</p>
+                    {/if}
+                    <div class="flex flex-wrap justify-end gap-2">
+                      <Button variant="ghost" onclick={() => { submitOpen = false; submitError = null; }}>
+                        {t('common.cancel')}
+                      </Button>
+                      <Button onclick={() => void handleSubmitTask()} disabled={submitTask.mutation.isPending}>
+                        {#if submitTask.mutation.isPending}
+                          <Loader2 class="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                        {/if}
+                        {t('task.submitAction')}
+                      </Button>
+                    </div>
+                  </Card.Content>
+                </Card.Root>
+              {/if}
+
+              <TaskList
+                tasks={filteredTasks}
+                {taskProvider}
+                dlq={activeTab === 'dlq'}
+                title={activeTab === 'dlq' ? t('task.dlqTitle') : t('task.listTitle')}
+                emptyText={activeTab === 'dlq' ? t('task.noDlq') : t('task.noTasks')}
+                onSelect={(task) => {
+                  selectedTaskId = task.id;
+                }}
+              />
             </div>
+          </div>
 
-            <!-- Progress bar -->
-            {#if task.status === 'running' && task.progress != null}
-              <div class="mt-3 ml-7">
-                <div class="h-1.5 w-full bg-muted rounded-full overflow-hidden">
-                  <div
-                    class="h-full bg-primary rounded-full transition-all duration-500 ease-out"
-                    style="width: {task.progress}%"
-                  ></div>
+          <div class="min-h-0 overflow-auto bg-muted/10">
+            <div class="p-4">
+              {#if selectedTaskId}
+                <TaskDetails
+                  taskId={selectedTaskId}
+                  {taskProvider}
+                  useProviderData
+                  queryOptions={{
+                    refetchInterval: refreshInterval,
+                    refetchIntervalInBackground: true,
+                  }}
+                />
+              {:else}
+                <div class="flex h-full min-h-[280px] items-center justify-center rounded-lg border border-dashed border-border/60 bg-background/70 text-center text-sm text-muted-foreground">
+                  {t('task.selectHint')}
                 </div>
-                <p class="text-[10px] text-muted-foreground mt-1">{task.progress}%</p>
-              </div>
-            {/if}
-
-            <!-- Actions -->
-            {#if task.status === 'completed' && task.downloadUrl}
-              <div class="mt-2 ml-7">
-                <Button
-                  variant="outline" size="sm" class="h-7 text-xs"
-                  onclick={() => onDownload?.(task.id, task.downloadUrl!)}
-                >
-                  <Download class="h-3 w-3 mr-1" />
-                  Download
-                </Button>
-              </div>
-            {:else if task.status === 'failed' && onRetry}
-              <div class="mt-2 ml-7">
-                <Button
-                  variant="outline" size="sm" class="h-7 text-xs text-destructive"
-                  onclick={() => onRetry?.(task.id)}
-                >
-                  Retry
-                </Button>
-              </div>
-            {/if}
-          </div>
-        {:else}
-          <div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
-            <ListTodo class="h-8 w-8 mb-2 opacity-30" />
-            <p class="text-sm">No background tasks</p>
+              {/if}
+            </div>
           </div>
-        {/each}
-      </div>
+        </div>
+      {/if}
     </div>
-  </div>
-{/if}
+  </Sheet.Content>
+</Sheet.Root>

package/dist/components/TaskQueueDrawer.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { BackgroundTask } from '../types.js';
+import type { TaskProvider, TaskRecord } from '@svadmin/core';
+type TaskTab = 'tasks' | 'dlq';
 type $$ComponentProps = {
     open?: boolean;
-    tasks?: BackgroundTask[];
-    onDismiss?: (taskId: string) => void;
-    onRetry?: (taskId: string) => void;
-    onDownload?: (taskId: string, url: string) => void;
+    taskProvider?: TaskProvider<TaskRecord>;
+    title?: string;
+    initialTab?: TaskTab;
 };
-declare const TaskQueueDrawer: import("svelte").Component<$$ComponentProps, {}, "open" | "tasks">;
+declare const TaskQueueDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type TaskQueueDrawer = ReturnType<typeof TaskQueueDrawer>;
 export default TaskQueueDrawer;

package/dist/components/TaskQueueDrawer.test.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TaskQueueDrawer.test.svelte.js

@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import TaskQueueDrawer from './TaskQueueDrawer.svelte';
+const taskFixtures = [
+    {
+        id: 'task-1',
+        title: 'Generate poster',
+        status: 'running',
+        message: 'Rendering hero artwork',
+        createdAt: '2026-04-19T10:00:00.000Z',
+        updatedAt: '2026-04-19T10:05:00.000Z',
+        progress: 42,
+    },
+    {
+        id: 'task-2',
+        title: 'Send email batch',
+        status: 'queued',
+        message: 'Waiting for worker',
+        createdAt: '2026-04-19T10:10:00.000Z',
+        updatedAt: '2026-04-19T10:12:00.000Z',
+    },
+];
+const dlqFixtures = [
+    {
+        id: 'task-dlq-1',
+        title: 'Nightly sync',
+        status: 'failed',
+        message: 'Remote API timeout',
+        createdAt: '2026-04-18T23:00:00.000Z',
+        updatedAt: '2026-04-18T23:05:00.000Z',
+        error: { message: 'Remote API timeout' },
+    },
+];
+const mockTaskProvider = {
+    submit: vi.fn(async () => ({
+        id: 'submitted-image.generate',
+        wait: async () => ({
+            id: 'submitted-image.generate',
+            title: 'image.generate',
+            status: 'queued',
+            createdAt: '2026-04-19T11:00:00.000Z',
+            updatedAt: '2026-04-19T11:00:00.000Z',
+        }),
+    })),
+    get: vi.fn(async (taskId) => {
+        return [...taskFixtures, ...dlqFixtures].find((task) => task.id === taskId) ?? taskFixtures[0];
+    }),
+    list: vi.fn(async () => ({ data: taskFixtures, total: taskFixtures.length })),
+    listDlq: vi.fn(async () => ({ data: dlqFixtures, total: dlqFixtures.length })),
+    retry: vi.fn(async () => undefined),
+    cancel: vi.fn(async () => undefined),
+};
+const refetchTasks = vi.fn(async () => ({ data: { data: taskFixtures, total: taskFixtures.length } }));
+const refetchDlq = vi.fn(async () => ({ data: { data: dlqFixtures, total: dlqFixtures.length } }));
+const mutateAsync = vi.fn(async (params) => ({
+    id: `submitted-${params.taskName}`,
+    wait: async () => ({
+        id: `submitted-${params.taskName}`,
+        title: params.taskName,
+        status: 'queued',
+    }),
+}));
+vi.mock('@svadmin/core', () => ({
+    getTaskProvider: () => mockTaskProvider,
+    useTaskList: ({ dlq }) => ({
+        data: dlq
+            ? { data: dlqFixtures, total: dlqFixtures.length }
+            : { data: taskFixtures, total: taskFixtures.length },
+        isLoading: false,
+        refetch: dlq ? refetchDlq : refetchTasks,
+    }),
+    useTask: ({ taskId }) => ({
+        data: [...taskFixtures, ...dlqFixtures].find((task) => task.id === taskId) ?? taskFixtures[0],
+        isLoading: false,
+    }),
+    useSubmitTask: () => ({
+        mutation: {
+            mutateAsync,
+            isPending: false,
+        },
+    }),
+}));
+vi.mock('@tanstack/svelte-query', () => ({
+    useQueryClient: () => ({
+        invalidateQueries: vi.fn(async () => undefined),
+    }),
+}));
+describe('TaskQueueDrawer', () => {
+    beforeEach(() => {
+        refetchTasks.mockClear();
+        refetchDlq.mockClear();
+        mutateAsync.mockClear();
+        mockTaskProvider.submit.mockClear();
+        mockTaskProvider.get.mockClear();
+        mockTaskProvider.list.mockClear();
+        mockTaskProvider.listDlq.mockClear();
+        mockTaskProvider.retry.mockClear();
+        mockTaskProvider.cancel.mockClear();
+    });
+    it('supports tab switching, filtering, and detail selection', async () => {
+        render(TaskQueueDrawer, { open: true, taskProvider: mockTaskProvider });
+        expect(screen.getByText('Task Center')).toBeTruthy();
+        expect(screen.getAllByText('Generate poster').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('Rendering hero artwork').length).toBeGreaterThan(0);
+        const searchInput = screen.getByPlaceholderText('Filter tasks by name, ID, status, or message...');
+        await fireEvent.input(searchInput, { target: { value: 'email' } });
+        await waitFor(() => {
+            expect(screen.queryAllByText('Generate poster').length).toBeLessThan(2);
+        });
+        expect(screen.getByText('Send email batch')).toBeTruthy();
+        await fireEvent.input(searchInput, { target: { value: '' } });
+        await fireEvent.click(screen.getByRole('tab', { name: /DLQ/i }));
+        expect(screen.getByText('Nightly sync')).toBeTruthy();
+        const dlqRow = screen.getByText('Nightly sync').closest('tr');
+        expect(dlqRow).toBeTruthy();
+        await fireEvent.click(dlqRow);
+        await waitFor(() => {
+            expect(screen.getAllByText('Remote API timeout').length).toBeGreaterThan(0);
+        });
+    });
+    it('submits a task from the inline form', async () => {
+        render(TaskQueueDrawer, { open: true, taskProvider: mockTaskProvider });
+        await fireEvent.click(screen.getAllByRole('button', { name: 'Submit Task' })[0]);
+        await fireEvent.input(screen.getByLabelText('Task name'), {
+            target: { value: 'image.generate' },
+        });
+        await fireEvent.input(screen.getByLabelText('Task payload (JSON)'), {
+            target: { value: '{"prompt":"poster"}' },
+        });
+        const submitButtons = screen.getAllByRole('button', { name: 'Submit Task' });
+        await fireEvent.click(submitButtons[submitButtons.length - 1]);
+        await waitFor(() => {
+            expect(mutateAsync).toHaveBeenCalledWith({
+                taskName: 'image.generate',
+                taskProvider: mockTaskProvider,
+                options: {
+                    body: { prompt: 'poster' },
+                    idempotencyKey: undefined,
+                },
+            });
+        });
+    });
+});