@svadmin/ui 0.33.1 → 0.34.1

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,12 +2,12 @@
   // 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';
-  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';
@@ -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;
@@ -49,11 +51,16 @@
     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 {
     dataProvider,
     authProvider,
+    taskProvider,
     routerProvider,
     resources,
     locale,
@@ -66,12 +73,15 @@
     menu,
     siteUrl,
     routeMode,
+    queryClient: providedQueryClient,
+    queryClientDefaultOptions,
   }: Props = $props();
 
   // Default component registry
   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 +100,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 +111,7 @@
   $effect.pre(() => {
     setDataProvider(dataProvider);
     if (authProvider) setAuthProvider(authProvider);
+    if (taskProvider) setTaskProvider(taskProvider);
     setResources(resources);
     setRouterProvider(resolvedRouter);
     if (locale) setLocale(locale);
@@ -107,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,10 +1,12 @@
 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 { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
 interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    taskProvider?: TaskProvider;
     routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;
@@ -22,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/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;

package/dist/components/TaskList.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import { useTaskList, 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 * as Table from './ui/table/index.js';
+  import { Button } from './ui/button/index.js';
+  import TaskStatusBadge from './TaskStatusBadge.svelte';
+  import TaskProgressBar from './TaskProgressBar.svelte';
+  import RetryTaskButton from './RetryTaskButton.svelte';
+  import CancelTaskButton from './CancelTaskButton.svelte';
+
+  let {
+    tasks,
+    taskProvider = getTaskProvider({ optional: true }) as TaskProvider<TaskRecord> | undefined,
+    params,
+    dlq = false,
+    title,
+    emptyText,
+    showActions = true,
+    showProgress = true,
+    useProviderData = !tasks,
+    queryOptions,
+    onSelect,
+  } = $props<{
+    tasks?: TaskRecord[];
+    taskProvider?: TaskProvider<TaskRecord>;
+    params?: Record<string, unknown>;
+    dlq?: boolean;
+    title?: string;
+    emptyText?: string;
+    showActions?: boolean;
+    showProgress?: boolean;
+    useProviderData?: boolean;
+    queryOptions?: {
+      enabled?: boolean;
+      staleTime?: number;
+      gcTime?: number;
+      refetchOnWindowFocus?: boolean;
+      refetchInterval?: number | false;
+      refetchIntervalInBackground?: boolean;
+    };
+    onSelect?: (task: TaskRecord) => void;
+  }>();
+
+  const query = useTaskList({
+    get params() {
+      return params;
+    },
+    get dlq() {
+      return dlq;
+    },
+    get taskProvider() {
+      return taskProvider;
+    },
+    get queryOptions() {
+      return { enabled: useProviderData && !!taskProvider, ...queryOptions };
+    },
+  });
+
+  const resolvedTasks = $derived(tasks ?? query.data?.data ?? []);
+  const resolvedTitle = $derived(title ?? (dlq ? t('task.dlqTitle') : t('task.listTitle')));
+  const resolvedEmptyText = $derived(emptyText ?? (dlq ? t('task.noDlq') : t('task.noTasks')));
+
+  function formatDate(value: unknown) {
+    if (!value) return '—';
+    return new Date(value as string | Date).toLocaleString();
+  }
+</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 useProviderData && taskProvider}
+        {t('task.count', { count: (query.data?.total ?? resolvedTasks.length) || 0 })}
+      {:else}
+        {t('task.count', { count: resolvedTasks.length })}
+      {/if}
+    </Card.Description>
+  </Card.Header>
+  <Card.Content class="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.loadingList')}
+      </div>
+    {:else}
+      <div class="overflow-auto">
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>{t('task.taskColumn')}</Table.Head>
+              <Table.Head>{t('task.statusColumn')}</Table.Head>
+              <Table.Head>{t('task.updatedColumn')}</Table.Head>
+              {#if showActions}
+                <Table.Head class="text-right">{t('task.actionsColumn')}</Table.Head>
+              {/if}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {#each resolvedTasks as task}
+              <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>
+                    {/if}
+                    {#if showProgress && typeof task.progress === 'number' && String(task.status).toLowerCase() === 'running'}
+                      <TaskProgressBar value={Number(task.progress)} />
+                    {/if}
+                  </div>
+                </Table.Cell>
+                <Table.Cell>
+                  <TaskStatusBadge status={String(task.status ?? 'pending')} />
+                </Table.Cell>
+                <Table.Cell class="text-xs text-muted-foreground">
+                  {formatDate(task.updatedAt ?? task.createdAt)}
+                </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())}
+                        <RetryTaskButton taskId={task.id} {taskProvider} />
+                      {/if}
+                      {#if taskProvider?.cancel && ['pending', 'queued', 'running', 'processing'].includes(String(task.status).toLowerCase())}
+                        <CancelTaskButton taskId={task.id} {taskProvider} />
+                      {/if}
+                      <Button variant="ghost" size="sm" onclick={(e) => { e.stopPropagation(); onSelect?.(task); }}>
+                        {t('task.detailsAction')}
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                {/if}
+              </Table.Row>
+            {:else}
+              <Table.Row>
+                <Table.Cell colspan={showActions ? 4 : 3} class="h-24 text-center text-muted-foreground">
+                  {resolvedEmptyText}
+                </Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </div>
+    {/if}
+  </Card.Content>
+</Card.Root>

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

@@ -0,0 +1,24 @@
+import type { TaskProvider, TaskRecord } from '@svadmin/core';
+type $$ComponentProps = {
+    tasks?: TaskRecord[];
+    taskProvider?: TaskProvider<TaskRecord>;
+    params?: Record<string, unknown>;
+    dlq?: boolean;
+    title?: string;
+    emptyText?: string;
+    showActions?: boolean;
+    showProgress?: boolean;
+    useProviderData?: boolean;
+    queryOptions?: {
+        enabled?: boolean;
+        staleTime?: number;
+        gcTime?: number;
+        refetchOnWindowFocus?: boolean;
+        refetchInterval?: number | false;
+        refetchIntervalInBackground?: boolean;
+    };
+    onSelect?: (task: TaskRecord) => void;
+};
+declare const TaskList: import("svelte").Component<$$ComponentProps, {}, "">;
+type TaskList = ReturnType<typeof TaskList>;
+export default TaskList;