@svadmin/ui 0.34.0 → 0.34.2

package/dist/components/AdminApp.svelte

@@ -7,7 +7,7 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
-  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+  import { QueryClient, QueryClientProvider, type DefaultOptions } from '@tanstack/svelte-query';
   import { setComponentRegistry, getComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
   import Layout from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
@@ -51,6 +51,10 @@
     siteUrl?: string;
     /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
     routeMode?: 'hash' | 'path' | 'auto';
+    /** Optional TanStack Query client override. */
+    queryClient?: QueryClient;
+    /** Optional TanStack Query default options override when QueryClient is not supplied. */
+    queryClientDefaultOptions?: DefaultOptions;
   }
 
   let {
@@ -69,6 +73,8 @@
     menu,
     siteUrl,
     routeMode,
+    queryClient: providedQueryClient,
+    queryClientDefaultOptions,
   }: Props = $props();
 
   // Default component registry
@@ -113,11 +119,12 @@
     if (defaultTheme) setTheme(defaultTheme);
   });
 
-  const queryClient = new QueryClient({
+  const queryClient = $derived(providedQueryClient ?? new QueryClient({
     defaultOptions: {
       queries: { staleTime: 30_000, retry: 1 },
+      ...queryClientDefaultOptions,
     },
-  });
+  }));
 
   // Initialize router with provider synchronously
   initRouter(resolvedRouter);

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

@@ -1,6 +1,7 @@
 import '../app.css';
 import type { Snippet } from 'svelte';
 import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
+import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 interface Props {
     dataProvider: DataProvider;
@@ -23,6 +24,10 @@ interface Props {
     siteUrl?: string;
     /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
     routeMode?: 'hash' | 'path' | 'auto';
+    /** Optional TanStack Query client override. */
+    queryClient?: QueryClient;
+    /** Optional TanStack Query default options override when QueryClient is not supplied. */
+    queryClientDefaultOptions?: DefaultOptions;
 }
 declare const AdminApp: import("svelte").Component<Props, {}, "">;
 type AdminApp = ReturnType<typeof AdminApp>;

package/dist/components/TaskDetails.svelte

@@ -9,6 +9,17 @@
   import TaskProgressBar from './TaskProgressBar.svelte';
   import RetryTaskButton from './RetryTaskButton.svelte';
   import CancelTaskButton from './CancelTaskButton.svelte';
+  import {
+    canCancelTask,
+    canRetryTask,
+    resolveTaskCreatedAt,
+    resolveTaskError,
+    resolveTaskMessage,
+    resolveTaskProgress,
+    resolveTaskResult,
+    resolveTaskTitle,
+    resolveTaskUpdatedAt,
+  } from './task-utils.js';
 
   let {
     task,
@@ -50,7 +61,9 @@
 
   function formatDate(value: unknown) {
     if (!value) return '—';
-    return new Date(value as string | Date).toLocaleString();
+    const date = new Date(value as string | Date);
+    if (Number.isNaN(date.getTime())) return String(value);
+    return date.toLocaleString();
   }
 
   function toPrettyJson(value: unknown) {
@@ -67,7 +80,7 @@
     <Card.Title class="text-base">{resolvedTitle}</Card.Title>
     <Card.Description>
       {#if resolvedTask}
-        {String(resolvedTask.title ?? resolvedTask.name ?? resolvedTask.id)}
+        {resolveTaskTitle(resolvedTask)}
       {:else}
         {t('task.detailsSummary')}
       {/if}
@@ -85,46 +98,53 @@
         <Badge variant="outline" class="font-mono text-xs">{resolvedTask.id}</Badge>
       </div>
 
-      {#if typeof resolvedTask.progress === 'number'}
-        <TaskProgressBar value={Number(resolvedTask.progress)} />
+      {#if typeof resolveTaskProgress(resolvedTask) === 'number'}
+        <TaskProgressBar value={resolveTaskProgress(resolvedTask)} />
       {/if}
 
       <div class="grid gap-4 md:grid-cols-2">
         <div class="space-y-1">
           <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.createdLabel')}</div>
-          <div class="text-sm">{formatDate(resolvedTask.createdAt)}</div>
+          <div class="text-sm">{formatDate(resolveTaskCreatedAt(resolvedTask))}</div>
         </div>
         <div class="space-y-1">
           <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.updatedLabel')}</div>
-          <div class="text-sm">{formatDate(resolvedTask.updatedAt)}</div>
+          <div class="text-sm">{formatDate(resolveTaskUpdatedAt(resolvedTask))}</div>
         </div>
       </div>
 
-      {#if resolvedTask.message}
+      {#if resolveTaskMessage(resolvedTask)}
         <div class="space-y-1">
           <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.messageLabel')}</div>
-          <div class="rounded-md border border-border/60 bg-muted/30 p-3 text-sm">{String(resolvedTask.message)}</div>
+          <div class="rounded-md border border-border/60 bg-muted/30 p-3 text-sm">{resolveTaskMessage(resolvedTask)}</div>
         </div>
       {/if}
 
-      {#if resolvedTask.error}
+      {#if resolveTaskError(resolvedTask)}
         <div class="space-y-1">
           <div class="text-xs uppercase tracking-wide text-destructive">{t('task.errorLabel')}</div>
-          <pre class="overflow-auto rounded-md border border-destructive/20 bg-destructive/5 p-3 text-xs text-destructive">{toPrettyJson(resolvedTask.error)}</pre>
+          <pre class="overflow-auto rounded-md border border-destructive/20 bg-destructive/5 p-3 text-xs text-destructive">{toPrettyJson(resolveTaskError(resolvedTask))}</pre>
+        </div>
+      {/if}
+
+      {#if resolveTaskResult(resolvedTask) !== undefined}
+        <div class="space-y-1">
+          <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.resultLabel')}</div>
+          <pre class="overflow-auto rounded-md border border-border/60 bg-muted/20 p-3 text-xs">{toPrettyJson(resolveTaskResult(resolvedTask))}</pre>
         </div>
       {/if}
 
       <div class="space-y-1">
         <div class="text-xs uppercase tracking-wide text-muted-foreground">{t('task.payloadLabel')}</div>
-        <pre class="overflow-auto rounded-md border border-border/60 bg-muted/20 p-3 text-xs">{toPrettyJson(resolvedTask)}</pre>
+        <pre class="overflow-auto rounded-md border border-border/60 bg-muted/20 p-3 text-xs">{toPrettyJson(resolvedTask.payload ?? resolvedTask)}</pre>
       </div>
 
       {#if taskProvider?.retry || taskProvider?.cancel}
         <div class="flex flex-wrap gap-2 pt-2">
-          {#if taskProvider?.retry && ['failed', 'error'].includes(String(resolvedTask.status).toLowerCase())}
+          {#if taskProvider?.retry && canRetryTask(resolvedTask)}
             <RetryTaskButton taskId={resolvedTask.id} {taskProvider} />
           {/if}
-          {#if taskProvider?.cancel && ['pending', 'queued', 'running', 'processing'].includes(String(resolvedTask.status).toLowerCase())}
+          {#if taskProvider?.cancel && canCancelTask(resolvedTask)}
             <CancelTaskButton taskId={resolvedTask.id} {taskProvider} />
           {/if}
         </div>

package/dist/components/TaskList.svelte

@@ -10,6 +10,14 @@
   import TaskProgressBar from './TaskProgressBar.svelte';
   import RetryTaskButton from './RetryTaskButton.svelte';
   import CancelTaskButton from './CancelTaskButton.svelte';
+  import {
+    canCancelTask,
+    canRetryTask,
+    resolveTaskMessage,
+    resolveTaskProgress,
+    resolveTaskTitle,
+    resolveTaskUpdatedAt,
+  } from './task-utils.js';
 
   let {
     tasks,
@@ -65,7 +73,9 @@
 
   function formatDate(value: unknown) {
     if (!value) return '—';
-    return new Date(value as string | Date).toLocaleString();
+    const date = new Date(value as string | Date);
+    if (Number.isNaN(date.getTime())) return String(value);
+    return date.toLocaleString();
   }
 </script>
 
@@ -104,12 +114,12 @@
               <Table.Row class="cursor-pointer hover:bg-muted/40" onclick={() => onSelect?.(task)}>
                 <Table.Cell class="min-w-[240px]">
                   <div class="space-y-1">
-                    <div class="font-medium text-foreground">{String(task.title ?? task.name ?? task.id)}</div>
-                    {#if task.message}
-                      <div class="text-xs text-muted-foreground">{String(task.message)}</div>
+                    <div class="font-medium text-foreground">{resolveTaskTitle(task)}</div>
+                    {#if resolveTaskMessage(task)}
+                      <div class="text-xs text-muted-foreground">{resolveTaskMessage(task)}</div>
                     {/if}
-                    {#if showProgress && typeof task.progress === 'number' && String(task.status).toLowerCase() === 'running'}
-                      <TaskProgressBar value={Number(task.progress)} />
+                    {#if showProgress && typeof resolveTaskProgress(task) === 'number'}
+                      <TaskProgressBar value={resolveTaskProgress(task)} />
                     {/if}
                   </div>
                 </Table.Cell>
@@ -117,15 +127,15 @@
                   <TaskStatusBadge status={String(task.status ?? 'pending')} />
                 </Table.Cell>
                 <Table.Cell class="text-xs text-muted-foreground">
-                  {formatDate(task.updatedAt ?? task.createdAt)}
+                  {formatDate(resolveTaskUpdatedAt(task))}
                 </Table.Cell>
                 {#if showActions}
                   <Table.Cell class="text-right">
                     <div class="flex justify-end gap-2">
-                      {#if taskProvider?.retry && ['failed', 'error'].includes(String(task.status).toLowerCase())}
+                      {#if taskProvider?.retry && canRetryTask(task)}
                         <RetryTaskButton taskId={task.id} {taskProvider} />
                       {/if}
-                      {#if taskProvider?.cancel && ['pending', 'queued', 'running', 'processing'].includes(String(task.status).toLowerCase())}
+                      {#if taskProvider?.cancel && canCancelTask(task)}
                         <CancelTaskButton taskId={task.id} {taskProvider} />
                       {/if}
                       <Button variant="ghost" size="sm" onclick={(e) => { e.stopPropagation(); onSelect?.(task); }}>

package/dist/components/TaskQueueDrawer.svelte

@@ -14,6 +14,12 @@
   import * as Card from './ui/card/index.js';
   import TaskList from './TaskList.svelte';
   import TaskDetails from './TaskDetails.svelte';
+  import {
+    isTaskActive,
+    resolveTaskCreatedAt,
+    resolveTaskMessage,
+    resolveTaskTitle,
+  } from './task-utils.js';
 
   type AutoRefreshValue = '0' | '5000' | '15000' | '30000';
   type TaskTab = 'tasks' | 'dlq';
@@ -41,7 +47,9 @@
   let submitError = $state<string | null>(null);
   let submitOpen = $state(false);
 
-  const refreshInterval = $derived(autoRefresh === '0' ? false : Number(autoRefresh));
+  const refreshInterval = $derived.by<number | false>(() =>
+    autoRefresh === '0' ? false : Number(autoRefresh),
+  );
   const resolvedTitle = $derived(title ?? t('task.drawerTitle'));
 
   const taskQuery = useTaskList({
@@ -88,10 +96,9 @@
     if (!query) return true;
     const haystack = [
       task.id,
-      task.title,
-      task.name,
+      resolveTaskTitle(task),
       task.status,
-      task.message,
+      resolveTaskMessage(task),
     ]
       .filter(Boolean)
       .join(' ')
@@ -110,7 +117,7 @@
   });
 
   const runningCount = $derived(
-    allTasks.filter((task) => ['pending', 'queued', 'running', 'processing'].includes(String(task.status ?? '').toLowerCase())).length,
+    allTasks.filter(isTaskActive).length,
   );
 
   $effect(() => {
@@ -142,7 +149,9 @@
 
   function formatTime(value: unknown) {
     if (!value) return '—';
-    return new Date(value as string | Date).toLocaleString();
+    const date = new Date(value as string | Date);
+    if (Number.isNaN(date.getTime())) return String(value);
+    return date.toLocaleString();
   }
 
   function resetSubmitForm() {
@@ -223,8 +232,8 @@
           <ListTodo class="h-5 w-5 text-muted-foreground" />
           <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 allTasks[0] && resolveTaskCreatedAt(allTasks[0])}
+            <span class="text-xs text-muted-foreground">{t('task.lastQueuedAt', { time: formatTime(resolveTaskCreatedAt(allTasks[0])) })}</span>
           {/if}
         </div>
       </div>

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

@@ -4,31 +4,31 @@ import TaskQueueDrawer from './TaskQueueDrawer.svelte';
 const taskFixtures = [
     {
         id: 'task-1',
-        title: 'Generate poster',
-        status: 'running',
+        name: 'Generate poster',
+        status: 'processing',
         message: 'Rendering hero artwork',
-        createdAt: '2026-04-19T10:00:00.000Z',
-        updatedAt: '2026-04-19T10:05:00.000Z',
+        created_at: '2026-04-19T10:00:00.000Z',
+        updated_at: '2026-04-19T10:05:00.000Z',
         progress: 42,
     },
     {
         id: 'task-2',
-        title: 'Send email batch',
+        name: 'Send email batch',
         status: 'queued',
         message: 'Waiting for worker',
-        createdAt: '2026-04-19T10:10:00.000Z',
-        updatedAt: '2026-04-19T10:12:00.000Z',
+        created_at: '2026-04-19T10:10:00.000Z',
+        updated_at: '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' },
+        name: 'Nightly sync',
+        status: 'dead_lettered',
+        error_message: 'Remote API timeout',
+        created_at: '2026-04-18T23:00:00.000Z',
+        updated_at: '2026-04-18T23:05:00.000Z',
+        result_data: { reason: 'Remote API timeout' },
     },
 ];
 const mockTaskProvider = {
@@ -36,10 +36,10 @@ const mockTaskProvider = {
         id: 'submitted-image.generate',
         wait: async () => ({
             id: 'submitted-image.generate',
-            title: 'image.generate',
+            name: 'image.generate',
             status: 'queued',
-            createdAt: '2026-04-19T11:00:00.000Z',
-            updatedAt: '2026-04-19T11:00:00.000Z',
+            created_at: '2026-04-19T11:00:00.000Z',
+            updated_at: '2026-04-19T11:00:00.000Z',
         }),
     })),
     get: vi.fn(async (taskId) => {
@@ -56,7 +56,7 @@ const mutateAsync = vi.fn(async (params) => ({
     id: `submitted-${params.taskName}`,
     wait: async () => ({
         id: `submitted-${params.taskName}`,
-        title: params.taskName,
+        name: params.taskName,
         status: 'queued',
     }),
 }));

package/dist/components/TaskStatusBadge.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { t } from '@svadmin/core/i18n';
-  import { Clock3, Loader2, CheckCircle2, AlertTriangle, CircleDashed } from '@lucide/svelte';
+  import { Ban, Clock3, Loader2, CheckCircle2, AlertTriangle, CircleDashed } from '@lucide/svelte';
   import { Badge } from './ui/badge/index.js';
+  import { normalizeTaskStatus } from './task-utils.js';
 
   let {
     status = 'pending',
@@ -14,6 +15,7 @@
   }>();
 
   const normalizedStatus = $derived(String(status || 'pending').toLowerCase());
+  const lifecycle = $derived(normalizeTaskStatus(normalizedStatus));
 
   function translateStatus(value: string) {
     const key = `task.status.${value}`;
@@ -23,8 +25,7 @@
   }
 
   const config = $derived.by(() => {
-    switch (normalizedStatus) {
-      case 'running':
+    switch (lifecycle) {
       case 'processing':
         return {
           label: translateStatus(normalizedStatus),
@@ -33,8 +34,6 @@
           iconClass: 'animate-spin',
         };
       case 'completed':
-      case 'success':
-      case 'done':
         return {
           label: translateStatus(normalizedStatus),
           variant: 'secondary' as const,
@@ -42,21 +41,26 @@
           iconClass: 'text-green-600 dark:text-green-400',
         };
       case 'failed':
-      case 'error':
         return {
           label: translateStatus(normalizedStatus),
           variant: 'destructive' as const,
           icon: AlertTriangle,
           iconClass: '',
         };
+      case 'cancelled':
+        return {
+          label: translateStatus(normalizedStatus),
+          variant: 'outline' as const,
+          icon: Ban,
+          iconClass: 'text-muted-foreground',
+        };
       case 'queued':
         return {
-          label: t('task.status.queued'),
+          label: translateStatus(normalizedStatus),
           variant: 'outline' as const,
           icon: CircleDashed,
           iconClass: '',
         };
-      case 'pending':
       default:
         return {
           label: translateStatus(normalizedStatus),

package/dist/components/task-utils.d.ts

@@ -0,0 +1,14 @@
+import type { TaskRecord } from '@svadmin/core';
+export type TaskLifecycle = 'queued' | 'processing' | 'completed' | 'failed' | 'cancelled' | 'unknown';
+export declare function normalizeTaskStatus(status: unknown): TaskLifecycle;
+export declare function isTaskActive(task: TaskRecord): boolean;
+export declare function canCancelTask(task: TaskRecord): boolean;
+export declare function canRetryTask(task: TaskRecord): boolean;
+export declare function resolveTaskTitle(task: TaskRecord): string;
+export declare function resolveTaskMessage(task: TaskRecord): string;
+export declare function resolveTaskUpdatedAt(task: TaskRecord): unknown;
+export declare function resolveTaskCreatedAt(task: TaskRecord): unknown;
+export declare function resolveTaskQueueName(task: TaskRecord): string;
+export declare function resolveTaskResult(task: TaskRecord): unknown;
+export declare function resolveTaskError(task: TaskRecord): unknown;
+export declare function resolveTaskProgress(task: TaskRecord): number | undefined;

package/dist/components/task-utils.js

@@ -0,0 +1,69 @@
+const STATUS_ALIASES = {
+    pending: 'queued',
+    queued: 'queued',
+    retry_scheduled: 'queued',
+    scheduled: 'queued',
+    leased: 'processing',
+    running: 'processing',
+    processing: 'processing',
+    active: 'processing',
+    completed: 'completed',
+    complete: 'completed',
+    success: 'completed',
+    succeeded: 'completed',
+    done: 'completed',
+    failed: 'failed',
+    error: 'failed',
+    dead_lettered: 'failed',
+    cancelled: 'cancelled',
+    canceled: 'cancelled',
+    aborted: 'cancelled',
+};
+export function normalizeTaskStatus(status) {
+    const value = String(status ?? '').trim().toLowerCase();
+    return STATUS_ALIASES[value] ?? 'unknown';
+}
+export function isTaskActive(task) {
+    const lifecycle = normalizeTaskStatus(task.status);
+    return lifecycle === 'queued' || lifecycle === 'processing';
+}
+export function canCancelTask(task) {
+    return isTaskActive(task);
+}
+export function canRetryTask(task) {
+    return normalizeTaskStatus(task.status) === 'failed';
+}
+export function resolveTaskTitle(task) {
+    return String(task.title ?? task.name ?? task.id);
+}
+export function resolveTaskMessage(task) {
+    return String(task.message ?? task.errorMessage ?? task.error_message ?? '');
+}
+export function resolveTaskUpdatedAt(task) {
+    return (task.updatedAt ??
+        task.updated_at ??
+        task.finishedAt ??
+        task.finished_at ??
+        task.startedAt ??
+        task.started_at ??
+        task.createdAt ??
+        task.created_at);
+}
+export function resolveTaskCreatedAt(task) {
+    return task.createdAt ?? task.created_at;
+}
+export function resolveTaskQueueName(task) {
+    return String(task.queueName ?? task.queue_name ?? '');
+}
+export function resolveTaskResult(task) {
+    return task.result ?? task.result_data;
+}
+export function resolveTaskError(task) {
+    return task.error ?? task.errorMessage ?? task.error_message;
+}
+export function resolveTaskProgress(task) {
+    if (typeof task.progress !== 'number' || !Number.isFinite(task.progress)) {
+        return normalizeTaskStatus(task.status) === 'completed' ? 100 : undefined;
+    }
+    return Math.max(0, Math.min(100, Math.round(task.progress)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -26,7 +26,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.25.0",
+    "@svadmin/core": "^0.25.1",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@lucide/svelte": "^1.7.0",
-    "@tanstack/svelte-table": "^9.0.0-alpha.32",
+    "@tanstack/svelte-table": "9.0.0-alpha.32",
     "bits-ui": "^2.17.1",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.19",