@svadmin/ui 0.33.0 → 0.34.0

package/dist/component-registry.svelte.d.ts

@@ -27,6 +27,8 @@ export interface ComponentRegistry {
     UserMenu?: Component<any>;
     /** Custom notification panel / bell icon in the header */
     NotificationPanel?: Component<any>;
+    /** Custom task queue drawer / task center trigger in the header */
+    TaskQueueDrawer?: Component<any>;
 }
 /** Set the component registry in context (called by AdminApp). */
 export declare function setComponentRegistry(registry: ComponentRegistry): void;

package/dist/components/AdminApp.svelte

@@ -2,8 +2,8 @@
   // Auto-inject design tokens so consumers don't need to manually import
   import '../app.css';
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
+  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, setTaskProvider, getAuthProvider, createHashRouterProvider, configureTheme } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
@@ -22,6 +22,7 @@
   import DevTools from './DevTools.svelte';
   import Sidebar from './Sidebar.svelte';
   import Header from './Header.svelte';
+  import TaskQueueDrawer from './TaskQueueDrawer.svelte';
   import SettingsPage from './SettingsPage.svelte';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
@@ -32,6 +33,7 @@
   interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;
@@ -54,6 +56,7 @@
   let {
     dataProvider,
     authProvider,
+    taskProvider,
     routerProvider,
     resources,
     locale,
@@ -72,6 +75,7 @@
   const defaultComponents: ComponentRegistry = {
     Layout, Sidebar, Header,
     LoginPage, AutoTable, AutoForm, ShowPage,
+    TaskQueueDrawer,
     Button: Button as unknown as ComponentRegistry['Button'],
     Input: Input as unknown as ComponentRegistry['Input'],
     Badge: Badge as unknown as ComponentRegistry['Badge'],
@@ -90,6 +94,7 @@
   // Set up initial context synchronously so children can access resources immediately during first render
   setDataProvider(dataProvider);
   if (authProvider) setAuthProvider(authProvider);
+  if (taskProvider) setTaskProvider(taskProvider);
   setResources(resources);
   setRouterProvider(resolvedRouter);
   if (locale) setLocale(locale);
@@ -100,6 +105,7 @@
   $effect.pre(() => {
     setDataProvider(dataProvider);
     if (authProvider) setAuthProvider(authProvider);
+    if (taskProvider) setTaskProvider(taskProvider);
     setResources(resources);
     setRouterProvider(resolvedRouter);
     if (locale) setLocale(locale);

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

@@ -1,10 +1,11 @@
 import '../app.css';
 import type { Snippet } from 'svelte';
-import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem } from '@svadmin/core';
+import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider, ThemeConfig, MenuItem, TaskProvider } from '@svadmin/core';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;

package/dist/components/AutoTable.svelte

@@ -3,19 +3,30 @@
   import { cn } from '../utils.js';
   import {
     createTable,
+    createCoreRowModel,
+    column_getCanSort,
+    column_getIsSorted,
+    column_toggleSorting,
+    column_getIsVisible,
+    column_toggleVisibility,
+    header_getSize,
+    table_getRowModel,
+    table_getHeaderGroups,
+    table_getAllLeafColumns,
+    table_getIsAllRowsSelected,
+    table_toggleAllRowsSelected,
+    row_getIsSelected,
+    row_toggleSelected,
+    row_getAllVisibleCells,
+    row_getIsExpanded,
+    row_toggleExpanded,
+    cell_getValue,
     type ColumnDef,
     type SortingState,
     type RowSelectionState,
     type ColumnVisibilityState,
     type ExpandedState,
   } from '@tanstack/svelte-table';
-  import { 
-    createCoreRowModel, 
-    column_getCanSort, 
-    column_getIsSorted, 
-    column_toggleSorting, 
-    header_getSize 
-  } from '@tanstack/table-core';
 
   import { useList, useDelete, useDeleteMany, getResource, notify } from '@svadmin/core';
   import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
@@ -356,7 +367,7 @@
     confirmMessage = t('common.batchDeleteConfirm', { count: ids.length });
     confirmAction = async () => {
       try {
-        await deleteManyMutation.mutateAsync({ ids, resource: resourceName, successNotification: false });
+        await deleteManyMutation.mutateAsync({ ids, resource: resourceName });
         notify({ type: 'success', message: t('common.batchDeleteSuccess', { count: ids.length }) });
       } catch {
         notify({ type: 'error', message: t('common.batchDeletePartialFail', { failed: 1, total: ids.length }) });
@@ -429,10 +440,10 @@
           {/snippet}
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end" class="w-48">
-          {#each tbl.getAllLeafColumns().filter((c: any) => !c.id.startsWith('_')) as column}
+          {#each table_getAllLeafColumns(tbl).filter((c: any) => !c.id.startsWith('_')) as column}
             <DropdownMenu.CheckboxItem
-              checked={column.getIsVisible()}
-              onCheckedChange={(v) => column.toggleVisibility(!!v)}
+              checked={column_getIsVisible(column)}
+              onCheckedChange={(v) => column_toggleVisibility(column, !!v)}
             >
               {visibleFields.find(f => f.key === column.id)?.label ?? column.id}
             </DropdownMenu.CheckboxItem>
@@ -552,7 +563,7 @@
         <div class="hidden md:block">
         <Table.Root>
           <Table.Header>
-            {#each tbl.getHeaderGroups() as headerGroup}
+            {#each table_getHeaderGroups(tbl) as headerGroup}
               <DraggableHeader
                 columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
                 resourceName={resourceName}
@@ -567,8 +578,8 @@
                   >
                     {#if header.id === '_select'}
                       <Checkbox
-                        checked={tbl.getIsAllRowsSelected()}
-                        onCheckedChange={() => tbl.toggleAllRowsSelected()}
+                        checked={table_getIsAllRowsSelected(tbl)}
+                        onCheckedChange={() => table_toggleAllRowsSelected(tbl)}
                       />
                     {:else if header.id === '_expand'}
                       <!-- empty -->
@@ -598,23 +609,23 @@
             {/each}
           </Table.Header>
           <Table.Body>
-            {#each tbl.getRowModel().rows as row}
+            {#each table_getRowModel(tbl).rows as row}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row.getIsSelected() ? 'bg-primary/5' : 'hover:bg-muted/20'}">
-                      {#each row.getVisibleCells() as cell}
+                    <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
+                      {#each row_getAllVisibleCells(row) as cell}
                         <Table.Cell>
                           {#if cell.column.id === '_select'}
                             <Checkbox
-                              checked={row.getIsSelected()}
-                              onCheckedChange={() => row.toggleSelected()}
+                              checked={row_getIsSelected(row)}
+                              onCheckedChange={() => row_toggleSelected(row)}
                             />
                           {:else if cell.column.id === '_expand'}
-                            <TooltipButton tooltip={row.getIsExpanded() ? t('common.collapse') : t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row.toggleExpanded()}>
-                              {#if row.getIsExpanded()}
+                            <TooltipButton tooltip={row_getIsExpanded(row) ? t('common.collapse') : t('common.expand')} variant="ghost" size="icon" class="h-7 w-7" onclick={() => row_toggleExpanded(row)}>
+                              {#if row_getIsExpanded(row)}
                                 <ChevronUp class="h-4 w-4" />
                               {:else}
                                 <ChevronDown class="h-4 w-4" />
@@ -640,34 +651,34 @@
                           {:else}
                             {@const field = visibleFields.find(f => f.key === cell.column.id)}
                             {#if customColumns && field && customColumns[field.key]}
-                              {@render customColumns[field.key]({ value: cell.getValue(), record })}
+                              {@render customColumns[field.key]({ value: cell_getValue(cell), record })}
                             {:else if defaultCellRenderer && field}
-                              {@render defaultCellRenderer({ field, value: cell.getValue(), record })}
+                              {@render defaultCellRenderer({ field, value: cell_getValue(cell), record })}
                             {:else if field?.type === 'boolean'}
-                              <span class="inline-block h-2 w-2 rounded-full {cell.getValue() ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
-                            {:else if field?.type === 'date' && cell.getValue()}
-                              {new Date(cell.getValue() as string).toLocaleDateString()}
-                            {:else if field?.type === 'tags' && Array.isArray(cell.getValue())}
+                              <span class="inline-block h-2 w-2 rounded-full {cell_getValue(cell) ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
+                            {:else if field?.type === 'date' && cell_getValue(cell)}
+                              {new Date(cell_getValue(cell) as string).toLocaleDateString()}
+                            {:else if field?.type === 'tags' && Array.isArray(cell_getValue(cell))}
                               <div class="flex flex-wrap gap-1">
-                                {#each (cell.getValue() as string[]).slice(0, 3) as tag}
+                                {#each (cell_getValue(cell) as string[]).slice(0, 3) as tag}
                                   <Badge variant="secondary">{tag}</Badge>
                                 {/each}
                               </div>
                             {:else if field?.type === 'select' && field.options}
-                              {@const opt = field.options.find(o => o.value === cell.getValue())}
-                              <Badge variant="outline">{opt?.label ?? cell.getValue() ?? '—'}</Badge>
+                              {@const opt = field.options.find(o => o.value === cell_getValue(cell))}
+                              <Badge variant="outline">{opt?.label ?? cell_getValue(cell) ?? '—'}</Badge>
                             {:else if canEdit && field && ['text', 'number', 'email', 'url'].includes(field.type)}
                               <InlineEdit
                                 {resourceName}
                                 recordId={id}
                                 {field}
-                                value={cell.getValue()}
+                                value={cell_getValue(cell)}
                                 onSave={() => listResult.refetch()}
                               />
                             {:else if field?.key === primaryKey}
-                              <span class="font-mono text-xs">{cell.getValue() ?? '—'}</span>
+                              <span class="font-mono text-xs">{cell_getValue(cell) ?? '—'}</span>
                             {:else}
-                              {cell.getValue() ?? '—'}
+                              {cell_getValue(cell) ?? '—'}
                             {/if}
                           {/if}
                         </Table.Cell>
@@ -695,9 +706,9 @@
                   {/if}
                 </ContextMenu.Content>
               </ContextMenu.Root>
-              {#if expandedRowRender && row.getIsExpanded()}
+              {#if expandedRowRender && row_getIsExpanded(row)}
                 <Table.Row class="bg-muted/10 border-b border-border/10 transition-all">
-                  <Table.Cell colspan={row.getVisibleCells().length}>
+                  <Table.Cell colspan={row_getAllVisibleCells(row).length}>
                     {@render expandedRowRender({ record })}
                   </Table.Cell>
                 </Table.Row>
@@ -731,19 +742,19 @@
 
         <!-- Mobile Card View (visible only on small screens) -->
         <div class="md:hidden space-y-3 p-2">
-          {#each tbl.getRowModel().rows as row}
+          {#each table_getRowModel(tbl).rows as row}
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row.getIsSelected() ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
+              class="rounded-[20px] shadow-[0_4px_20px_rgb(0,0,0,0.03)] ring-1 ring-border/20 bg-card p-5 transition-all {row_getIsSelected(row) ? 'ring-2 ring-primary/50 bg-primary/5' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">
                 <div class="flex items-center gap-2">
                   {#if selectable && (canDelete || batchActions)}
                     <Checkbox
-                      checked={row.getIsSelected()}
-                      onCheckedChange={() => row.toggleSelected()}
+                      checked={row_getIsSelected(row)}
+                      onCheckedChange={() => row_toggleSelected(row)}
                     />
                   {/if}
                   <span class="text-xs font-mono text-muted-foreground">#{id}</span>

package/dist/components/CancelTaskButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { getTaskProvider } from '@svadmin/core';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Loader2, Ban } from '@lucide/svelte';
+
+  let {
+    taskId,
+    taskProvider = getTaskProvider({ optional: true }),
+    onSuccess,
+    onError,
+    disabled = false,
+    variant = 'outline',
+    size = 'sm',
+    children,
+  } = $props<{
+    taskId: string;
+    taskProvider?: import('@svadmin/core').TaskProvider;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    disabled?: boolean;
+    variant?: import('./ui/button/index.js').ButtonVariant;
+    size?: import('./ui/button/index.js').ButtonSize;
+    children?: import('svelte').Snippet;
+  }>();
+
+  const queryClient = useQueryClient();
+  let pending = $state(false);
+
+  async function handleCancel() {
+    if (!taskProvider?.cancel || pending) return;
+    pending = true;
+    try {
+      await taskProvider.cancel(taskId);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['taskList'] }),
+        queryClient.invalidateQueries({ queryKey: ['task', taskId] }),
+      ]);
+      onSuccess?.();
+    } catch (error) {
+      onError?.(error);
+    } finally {
+      pending = false;
+    }
+  }
+</script>
+
+<Button {variant} {size} onclick={handleCancel} disabled={disabled || pending || !taskProvider?.cancel}>
+  {#if pending}
+    <Loader2 class="mr-1.5 h-3.5 w-3.5 animate-spin" />
+  {:else}
+    <Ban class="mr-1.5 h-3.5 w-3.5" />
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    {t('common.cancel')}
+  {/if}
+</Button>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    taskId: string;
+    taskProvider?: import('@svadmin/core').TaskProvider;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    disabled?: boolean;
+    variant?: import('./ui/button/index.js').ButtonVariant;
+    size?: import('./ui/button/index.js').ButtonSize;
+    children?: import('svelte').Snippet;
+};
+declare const CancelTaskButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CancelTaskButton = ReturnType<typeof CancelTaskButton>;
+export default CancelTaskButton;

package/dist/components/Layout.svelte

@@ -8,14 +8,15 @@
   import ChatDialog from './ChatDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
-  import { getAuthProvider } from '@svadmin/core';
-  import type { Identity, MenuItem } from '@svadmin/core';
+  import { getAuthProvider, getTaskProvider } from '@svadmin/core';
+  import type { Identity, MenuItem, TaskProvider, TaskRecord } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { getPath } from '../router-state.svelte.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import { Button } from './ui/button/index.js';
   import * as Sheet from './ui/sheet/index.js';
   import { Menu } from '@lucide/svelte';
+  import { getComponentRegistry } from '../component-registry.svelte.js';
 
   let commandOpen = $state(false);
   let shortcutsOpen = $state(false);
@@ -32,6 +33,9 @@
   }
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
+  const taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined;
+  const registry = getComponentRegistry() || {} as any;
+  const TaskQueueComponent = registry.TaskQueueDrawer;
 
   $effect(() => {
     let cancelled = false;
@@ -149,6 +153,13 @@
             <Menu class="h-5 w-5" />
           </TooltipButton>
         {/snippet}
+        {#snippet rightActions()}
+          {#if taskProvider}
+            {#if TaskQueueComponent}
+              <TaskQueueComponent {taskProvider} />
+            {/if}
+          {/if}
+        {/snippet}
       </Header>
 
       <!-- Content area -->

package/dist/components/RetryTaskButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { getTaskProvider } from '@svadmin/core';
+  import { useQueryClient } from '@tanstack/svelte-query';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Loader2, RotateCcw } from '@lucide/svelte';
+
+  let {
+    taskId,
+    taskProvider = getTaskProvider({ optional: true }),
+    onSuccess,
+    onError,
+    disabled = false,
+    variant = 'outline',
+    size = 'sm',
+    children,
+  } = $props<{
+    taskId: string;
+    taskProvider?: import('@svadmin/core').TaskProvider;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    disabled?: boolean;
+    variant?: import('./ui/button/index.js').ButtonVariant;
+    size?: import('./ui/button/index.js').ButtonSize;
+    children?: import('svelte').Snippet;
+  }>();
+
+  const queryClient = useQueryClient();
+  let pending = $state(false);
+
+  async function handleRetry() {
+    if (!taskProvider?.retry || pending) return;
+    pending = true;
+    try {
+      await taskProvider.retry(taskId);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['taskList'] }),
+        queryClient.invalidateQueries({ queryKey: ['task', taskId] }),
+      ]);
+      onSuccess?.();
+    } catch (error) {
+      onError?.(error);
+    } finally {
+      pending = false;
+    }
+  }
+</script>
+
+<Button {variant} {size} onclick={handleRetry} disabled={disabled || pending || !taskProvider?.retry}>
+  {#if pending}
+    <Loader2 class="mr-1.5 h-3.5 w-3.5 animate-spin" />
+  {:else}
+    <RotateCcw class="mr-1.5 h-3.5 w-3.5" />
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    {t('common.retry')}
+  {/if}
+</Button>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    taskId: string;
+    taskProvider?: import('@svadmin/core').TaskProvider;
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+    disabled?: boolean;
+    variant?: import('./ui/button/index.js').ButtonVariant;
+    size?: import('./ui/button/index.js').ButtonSize;
+    children?: import('svelte').Snippet;
+};
+declare const RetryTaskButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RetryTaskButton = ReturnType<typeof RetryTaskButton>;
+export default RetryTaskButton;

package/dist/components/TaskDetails.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { useTask, getTaskProvider } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import type { TaskProvider, TaskRecord } from '@svadmin/core';
+  import { Loader2 } from '@lucide/svelte';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import TaskStatusBadge from './TaskStatusBadge.svelte';
+  import TaskProgressBar from './TaskProgressBar.svelte';
+  import RetryTaskButton from './RetryTaskButton.svelte';
+  import CancelTaskButton from './CancelTaskButton.svelte';
+
+  let {
+    task,
+    taskId,
+    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    title,
+    useProviderData = !task && !!taskId,
+    queryOptions,
+  } = $props<{
+    task?: TaskRecord;
+    taskId?: string;
+    taskProvider?: TaskProvider<TaskRecord>;
+    title?: string;
+    useProviderData?: boolean;
+    queryOptions?: {
+      enabled?: boolean;
+      staleTime?: number;
+      gcTime?: number;
+      refetchOnWindowFocus?: boolean;
+      refetchInterval?: number | false;
+      refetchIntervalInBackground?: boolean;
+    };
+  }>();
+
+  const query = useTask({
+    get taskId() {
+      return taskId;
+    },
+    get taskProvider() {
+      return taskProvider;
+    },
+    get queryOptions() {
+      return { enabled: useProviderData && !!taskId && !!taskProvider, ...queryOptions };
+    },
+  });
+
+  const resolvedTask = $derived(task ?? query.data);
+  const resolvedTitle = $derived(title ?? t('task.detailsTitle'));
+
+  function formatDate(value: unknown) {
+    if (!value) return '—';
+    return new Date(value as string | Date).toLocaleString();
+  }
+
+  function toPrettyJson(value: unknown) {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+</script>
+
+<Card.Root class="border-border/40 shadow-sm">
+  <Card.Header class="pb-3">
+    <Card.Title class="text-base">{resolvedTitle}</Card.Title>
+    <Card.Description>
+      {#if resolvedTask}
+        {String(resolvedTask.title ?? resolvedTask.name ?? resolvedTask.id)}
+      {:else}
+        {t('task.detailsSummary')}
+      {/if}
+    </Card.Description>
+  </Card.Header>
+  <Card.Content class="space-y-5 pt-0">
+    {#if useProviderData && taskProvider && query.isLoading}
+      <div class="flex h-40 items-center justify-center text-muted-foreground">
+        <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+        {t('task.loadingDetail')}
+      </div>
+    {:else if resolvedTask}
+      <div class="flex flex-wrap items-center gap-2">
+        <TaskStatusBadge status={String(resolvedTask.status ?? 'pending')} />
+        <Badge variant="outline" class="font-mono text-xs">{resolvedTask.id}</Badge>
+      </div>
+
+      {#if typeof resolvedTask.progress === 'number'}
+        <TaskProgressBar value={Number(resolvedTask.progress)} />
+      {/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>
+        <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>
+      </div>
+
+      {#if resolvedTask.message}
+        <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>
+      {/if}
+
+      {#if resolvedTask.error}
+        <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>
+        </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>
+      </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())}
+            <RetryTaskButton taskId={resolvedTask.id} {taskProvider} />
+          {/if}
+          {#if taskProvider?.cancel && ['pending', 'queued', 'running', 'processing'].includes(String(resolvedTask.status).toLowerCase())}
+            <CancelTaskButton taskId={resolvedTask.id} {taskProvider} />
+          {/if}
+        </div>
+      {/if}
+    {:else}
+      <div class="flex h-32 items-center justify-center text-sm text-muted-foreground">
+        {t('task.noSelection')}
+      </div>
+    {/if}
+  </Card.Content>
+</Card.Root>

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

@@ -0,0 +1,19 @@
+import type { TaskProvider, TaskRecord } from '@svadmin/core';
+type $$ComponentProps = {
+    task?: TaskRecord;
+    taskId?: string;
+    taskProvider?: TaskProvider<TaskRecord>;
+    title?: string;
+    useProviderData?: boolean;
+    queryOptions?: {
+        enabled?: boolean;
+        staleTime?: number;
+        gcTime?: number;
+        refetchOnWindowFocus?: boolean;
+        refetchInterval?: number | false;
+        refetchIntervalInBackground?: boolean;
+    };
+};
+declare const TaskDetails: import("svelte").Component<$$ComponentProps, {}, "">;
+type TaskDetails = ReturnType<typeof TaskDetails>;
+export default TaskDetails;