@svadmin/ui 0.88.0 → 0.91.0

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

@@ -4,11 +4,13 @@ interface StepDef {
 }
 interface Props {
     resourceName: string;
-    id?: string | number;
+    id?: string | number | undefined;
     mode?: 'create' | 'edit';
     steps: StepDef[];
     onSuccess?: () => void;
 }
-declare const StepsForm: import("svelte").Component<Props, {}, "">;
+declare const StepsForm: import("svelte").Component<Props, {
+    reset: () => void;
+}, "">;
 type StepsForm = ReturnType<typeof StepsForm>;
 export default StepsForm;

package/dist/components/SvadminLogo.svelte

@@ -9,6 +9,7 @@
 </script>
 
 <span
+  data-svadmin-logo
   aria-hidden="true"
   class="svadmin-u-bb0c4bfc52bd svadmin-u-012fbd121f37 svadmin-u-5f22e64f2282 svadmin-u-75b1bec3ea0e svadmin-u-438b2237b8d6 {onDark ? 'svadmin-u-3daca9af0861 svadmin-u-8b434b651a9e' : ''}"
   style:width={`${size}px`}

package/dist/components/SvarDataGrid.svelte

@@ -30,7 +30,7 @@
     filters?: readonly SvarTextFilter[];
     onSortChange?: (sorters: SvarSort[]) => void;
     onFilterChange?: (filters: SvarTextFilter[]) => void;
-    onCellEdit?: (edit: SvarCellEdit) => Promise<void>;
+    onCellEdit?: ((edit: SvarCellEdit) => Promise<void>) | undefined;
     selectable?: boolean;
     selectedIds?: readonly SvarRecordId[];
     onSelectionChange?: (ids: SvarRecordId[]) => void;
@@ -38,29 +38,35 @@
     cellContent?: Snippet<[SvarCellContent]>;
     /** 已加载记录的独立快照，含已加载后代，不包含尚未请求的行。 */
     onRecordsChange?: (records: readonly Record<string, unknown>[]) => void;
-    windowSource?: SvarWindowSource;
+    windowSource?: SvarWindowSource | undefined;
     loadChildren?: SvarChildrenLoader;
     hasChildrenKey?: string;
     onLoadMore?: (request: { signal: AbortSignal }) => Promise<void>;
     hasMore?: boolean;
     /** 查询、租户或会话切换必须改变此宿主版本；追加同一数据集则无需改变。 */
     scopeKey?: string | number;
-    loading?: boolean;
-    error?: string;
-    disabled?: boolean;
+    loading?: boolean | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
     locale?: string;
-    label?: string;
-    emptyLabel?: string;
-    loadingLabel?: string;
-    disabledLabel?: string;
-    fallbackLabel?: string;
+    label?: string | undefined;
+    emptyLabel?: string | undefined;
+    loadingLabel?: string | undefined;
+    disabledLabel?: string | undefined;
+    fallbackLabel?: string | undefined;
   }
   let { Grid, Theme, items = [], columns, primaryKey = 'id', childrenKey, height = 420, density = 'comfortable', rowHeight: rowHeightProp, headerHeight: headerHeightProp, freezeLeft = 0, freezeRight = 0, queryMode = 'local',
     sorters = [], filters = [], onSortChange, onFilterChange, onCellEdit, selectable = false, selectedIds = [], onSelectionChange, onRecordsChange, cellContent,
     windowSource, loadChildren, hasChildrenKey = 'hasChildren', onLoadMore, hasMore = false, scopeKey = 0,
-    loading = false, error, disabled = false, locale = 'en-US', label = 'Data grid', emptyLabel = 'No records', loadingLabel = 'Loading',
-    disabledLabel = 'Grid is disabled', fallbackLabel = 'Static preview (up to 20 rows)',
+    loading = false, error, disabled = false, locale = 'en-US', label, emptyLabel, loadingLabel,
+    disabledLabel, fallbackLabel,
   }: SvarDataGridProps = $props();
+  const isZh = $derived(locale.startsWith('zh'));
+  const resolvedLabel = $derived(label ?? (isZh ? '数据表格' : 'Data grid'));
+  const resolvedEmptyLabel = $derived(emptyLabel ?? (isZh ? '暂无记录' : 'No records'));
+  const resolvedLoadingLabel = $derived(loadingLabel ?? (isZh ? '加载中...' : 'Loading'));
+  const resolvedDisabledLabel = $derived(disabledLabel ?? (isZh ? '表格已禁用' : 'Grid is disabled'));
+  const resolvedFallbackLabel = $derived(fallbackLabel ?? (isZh ? '静态预览（最多 20 行）' : 'Static preview (up to 20 rows)'));
   const treeKey = $derived(loadChildren ? childrenKey ?? 'children' : childrenKey);
   const rowHeight = $derived(rowHeightProp ?? (density === 'compact' ? 32 : 44));
   const headerHeight = $derived(headerHeightProp ?? (density === 'compact' ? 32 : 36));
@@ -117,7 +123,12 @@
         center: engineColumns.map(column => ({ ...column, hidden: freezeRight > 0 && rightIds.has(column.id) })),
         right: engineColumns.map(column => ({ ...column, hidden: !rightIds.has(column.id), width: column.width ?? 160, flexgrow: 0, resize: false })),
         rightWidth: engineColumns.slice(engineColumns.length - freezeRight).reduce((sum, column) => sum + (column.width ?? 160), 0) + 2 };
-    } catch (failure) { return { ok: false as const, message: failure instanceof Error ? failure.message : 'Invalid grid configuration' }; }
+    } catch {
+      return {
+        ok: false as const,
+        message: locale.startsWith('zh') ? '表格配置无效，请检查后重试' : 'The grid configuration is invalid; check it and retry',
+      };
+    }
   });
   const records = $derived.by(() => {
     if (!model.ok) return { ok: false as const, message: model.message };
@@ -126,7 +137,12 @@
       const rows = loadChildren && treeKey ? projectSvarLazyRows(value, model.columns, primaryKey, treeKey, hasChildrenKey, branches, opened)
         : projectSvarRows(value, model.columns, primaryKey, treeKey);
       return { ok: true as const, value, rows };
-    } catch (failure) { return { ok: false as const, message: failure instanceof Error ? failure.message : 'Invalid grid data' }; }
+    } catch {
+      return {
+        ok: false as const,
+        message: locale.startsWith('zh') ? '表格数据无效，请刷新后重试' : 'The grid data is invalid; refresh and retry',
+      };
+    }
   });
   const cellRecords = $derived.by(() => cellContent && records.ok
     ? svarRecordIndex(snapshotSvarRecords(records.value, primaryKey, treeKey), primaryKey, treeKey) : new Map<string, Record<string, unknown>>());
@@ -169,7 +185,7 @@
     if (!source || !current(owner)) return;
     let range: SvarRange;
     try { range = checkedSvarRange(event, windowTotal ?? source.total); }
-    catch { windowError = 'Invalid grid window'; return; }
+    catch { windowError = isZh ? '表格窗口无效' : 'Invalid grid window'; return; }
     // 布局测量也会发出新窗口，不能因此自动重试失败或移除用户的重试按钮。
     if (windowError && !force) { lastRange = range; return; }
     const key = `${range.start}:${range.end}`;
@@ -186,7 +202,7 @@
       if (!alive || dataOwner !== owner || desiredWindow !== key || failure instanceof SvarLoadCancelled) return;
       windowRows = []; windowLoading = false;
       if (!current(owner)) { desiredWindow = ''; return; }
-      windowError = locale.startsWith('zh') ? '窗口加载失败，请重试' : 'Window load failed; retry';
+      windowError = isZh ? '窗口加载失败，请重试' : 'Window load failed; retry';
     });
   }
   $effect(() => {
@@ -244,7 +260,9 @@
       server: () => queryMode === 'server', sorters: () => sorters, filters: () => filters,
       sort: next => onSortChange?.(next), filter: next => onFilterChange?.(next),
       editable: () => onCellEdit !== undefined && !pending, selectable: () => selectable && !pending,
-      selection: next => onSelectionChange?.(next), error: message => { if (active()) editFailure = message; },
+      selection: next => onSelectionChange?.(next), error: () => {
+        if (active()) editFailure = locale.startsWith('zh') ? '保存失败，请刷新确认后重试' : 'Save failed; refresh before retrying';
+      },
       edit(edit) {
         const write = onCellEdit;
         if (!write || pending || !active()) return;
@@ -292,13 +310,13 @@
 </script>
 
 <Theme fonts={false}>
-  <div class="svadmin-svar-grid" data-svadmin-svar-grid data-density={density} role="group" aria-label={label} aria-busy={isLoading || pending || morePending} aria-disabled={disabled}>
+  <div class="svadmin-svar-grid" data-svadmin-svar-grid data-density={density} role="group" aria-label={resolvedLabel} aria-busy={isLoading || pending || morePending} aria-disabled={disabled}>
     {#if !model.ok || !records.ok}<p role="alert">{!model.ok ? model.message : !records.ok ? records.message : ''}</p>
     {:else}
       {#if activeError}<p role="alert">{activeError}</p>
-      {:else if isLoading}<p role="status">{loadingLabel}</p>
-      {:else if disabled}<p role="status">{disabledLabel}</p>
-      {:else if records.rows.length === 0 && (!windowSource || (windowTotal ?? windowSource.total) === 0)}<p role="status">{emptyLabel}</p>{/if}
+      {:else if isLoading}<p role="status">{resolvedLoadingLabel}</p>
+      {:else if disabled}<p role="status">{resolvedDisabledLabel}</p>
+      {:else if records.rows.length === 0 && (!windowSource || (windowTotal ?? windowSource.total) === 0)}<p role="status">{resolvedEmptyLabel}</p>{/if}
       {#if windowError}<button type="button" disabled={disabled} onclick={retryWindow}>{locale.startsWith('zh') ? '重试窗口' : 'Retry window'}</button>{/if}
       {#if editFailure}<p role="alert">{editFailure}</p>{/if}
       {#if pending}<p role="status">{locale.startsWith('zh') ? '正在保存' : 'Saving'}</p>{/if}
@@ -306,19 +324,19 @@
       {#each [...branchErrors] as [key, failure] (key)}<p role="alert">{failure.message}: {failure.id} <button type="button" disabled={disabled} onclick={() => openBranch(key, true)}>{locale.startsWith('zh') ? '重试' : 'Retry children'}</button></p>{/each}
       {#if mounted}
         {#key dataOwner}<div class="grid-panes" inert={disabled}>
-          <div class="grid-viewport center-pane" data-svar-pane="center" style:height="{height}px" role="region" aria-label="Scrollable columns" onkeydowncapture={event => navigatePane(event, 0)}>
+          <div class="grid-viewport center-pane" data-svar-pane="center" style:height="{height}px" role="region" aria-label={isZh ? '可滚动列' : 'Scrollable columns'} onkeydowncapture={event => navigatePane(event, 0)}>
             <Grid columns={model.center} data={activeError || isLoading ? [] : records.rows} tree={treeKey !== undefined}
               split={{ left: freezeLeft }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 0)} />
           </div>
-          {#if freezeRight > 0}<div class="grid-viewport right-pane" data-svar-pane="right" style:height="{height}px" style:width="{model.rightWidth}px" role="region" aria-label="Frozen right columns" onkeydowncapture={event => navigatePane(event, 1)}>
+          {#if freezeRight > 0}<div class="grid-viewport right-pane" data-svar-pane="right" style:height="{height}px" style:width="{model.rightWidth}px" role="region" aria-label={isZh ? '右侧冻结列' : 'Frozen right columns'} onkeydowncapture={event => navigatePane(event, 1)}>
             <Grid columns={model.right} data={activeError || isLoading ? [] : rightRows} tree={treeKey !== undefined}
               split={{ left: 0 }} sizes={{ rowHeight, headerHeight, columnWidth: 160 }} select={selectable} multiselect={selectable} {selectedRows}
               reorder={false} draggableRows={false} undo={false} {...queryProps} {...dynamicProps} init={api => init(api, 1)} />
           </div>{/if}
         </div>{/key}
       {:else if !loading && !error}
-        <div class="static-preview"><table><caption>{fallbackLabel}</caption>
+        <div class="static-preview"><table><caption>{resolvedFallbackLabel}</caption>
           <thead><tr>{#each model.engineColumns as column, index (column.id)}<th scope="col">{model.columns[index]?.label}</th>{/each}</tr></thead>
           <tbody>{#each records.rows.slice(0, 20) as row (row.id)}<tr>{#each model.engineColumns as column (column.id)}<td>{row[column.id] ?? ''}</td>{/each}</tr>{/each}</tbody>
         </table></div>

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

@@ -28,7 +28,7 @@ export interface SvarDataGridProps {
     filters?: readonly SvarTextFilter[];
     onSortChange?: (sorters: SvarSort[]) => void;
     onFilterChange?: (filters: SvarTextFilter[]) => void;
-    onCellEdit?: (edit: SvarCellEdit) => Promise<void>;
+    onCellEdit?: ((edit: SvarCellEdit) => Promise<void>) | undefined;
     selectable?: boolean;
     selectedIds?: readonly SvarRecordId[];
     onSelectionChange?: (ids: SvarRecordId[]) => void;
@@ -36,7 +36,7 @@ export interface SvarDataGridProps {
     cellContent?: Snippet<[SvarCellContent]>;
     /** 已加载记录的独立快照，含已加载后代，不包含尚未请求的行。 */
     onRecordsChange?: (records: readonly Record<string, unknown>[]) => void;
-    windowSource?: SvarWindowSource;
+    windowSource?: SvarWindowSource | undefined;
     loadChildren?: SvarChildrenLoader;
     hasChildrenKey?: string;
     onLoadMore?: (request: {
@@ -45,15 +45,15 @@ export interface SvarDataGridProps {
     hasMore?: boolean;
     /** 查询、租户或会话切换必须改变此宿主版本；追加同一数据集则无需改变。 */
     scopeKey?: string | number;
-    loading?: boolean;
-    error?: string;
-    disabled?: boolean;
+    loading?: boolean | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
     locale?: string;
-    label?: string;
-    emptyLabel?: string;
-    loadingLabel?: string;
-    disabledLabel?: string;
-    fallbackLabel?: string;
+    label?: string | undefined;
+    emptyLabel?: string | undefined;
+    loadingLabel?: string | undefined;
+    disabledLabel?: string | undefined;
+    fallbackLabel?: string | undefined;
 }
 declare const SvarDataGrid: Component<SvarDataGridProps, {}, "">;
 type SvarDataGrid = ReturnType<typeof SvarDataGrid>;

package/dist/components/SvarResourceRead.svelte

@@ -20,6 +20,8 @@
   const binding = useResourceContract(() => request.resourceName);
   const query = useList({
     get resource() { return binding.resource; },
+    // 读取失败由 SVAR 窗口、追加加载或树节点的局部错误态承接。
+    errorNotification: false,
     get dataProviderName() { return binding.dataProviderName; },
     get pagination() { return request.pagination; },
     get sorters() { return request.sorters; },

package/dist/components/SvarResourceTableView.svelte

@@ -69,6 +69,8 @@
   const queryPagination = $derived({ current, pageSize: effectivePageSize });
   const query = useList({
     get resource() { return binding.resource; }, get dataProviderName() { return binding.dataProviderName; },
+    // 表格提供刷新和局部加载错误反馈，避免与默认查询 Toast 重复。
+    errorNotification: false,
     get meta() { return { svadminSvarScope: dataScopeKey }; },
     get queryOptions() { return { enabled: permission.allowed && validPageSize && validLoading && !disabled }; },
     get pagination() { return queryPagination; }, get sorters() { return sorters; }, get filters() { return rootFilters; },
@@ -85,7 +87,7 @@
   const total = $derived(permission.allowed ? query.data?.total ?? 0 : 0);
   const pageCount = $derived(validPageSize ? Math.max(1, Math.ceil(total / effectivePageSize)) : 1);
   const queryIdentity = $derived(JSON.stringify([resourceName, dataScopeKey, queryPagination, rootFilters, sorters, loadingMode, lazyTree]));
-  const error = $derived(query.isError ? (query.error instanceof Error ? query.error.message : zh ? '数据加载失败' : 'Data request failed') : undefined);
+  const error = $derived(query.isError ? (zh ? '数据加载失败' : 'Data request failed') : undefined);
   let selectedIds = $state<SvarRecordId[]>([]);
   let busy = $state(false);
   let feedback = $state('');
@@ -296,7 +298,7 @@
   {#if !validLoading}<p role="alert">{zh ? '高级加载配置无效；窗口和无限加载仅支持平面资源，异步树必须声明父字段' : 'Invalid loading configuration: window/infinite modes require flat resources; lazy trees require a declared parent field'}</p>
   {:else if !validPageSize}<p role="alert">{zh ? '每页数量必须为 1–1000 的整数' : 'Page size must be an integer between 1 and 1000'}</p>
   {:else if permission.isLoading}<p role="status">{zh ? '正在检查权限' : 'Checking access'}</p>
-  {:else if !permission.allowed}<p role="alert">{permission.reason ?? (zh ? '没有读取权限' : 'Read access denied')}</p>
+  {:else if !permission.allowed}<p role="alert">{permission.isError ? i18n.t('common.permissionUnavailable') : i18n.t('common.permissionDenied')}</p>
   {:else}
     {#each [...reads.requests] as [id, request] (id)}<SvarResourceRead {request} />{/each}
     {#if savedViews}

package/dist/components/TagsInput.svelte

@@ -4,14 +4,14 @@
 
   interface Props {
     value?: string[];
-    name?: string;
+    name?: string | undefined;
     placeholder?: string;
     separator?: string;
     maxItems?: number;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     ariaLabel?: string;
     class?: string;
     onchange?: (value: string[]) => void;
@@ -78,7 +78,7 @@
 >
   {#if name}
     {#each value as tag (tag)}
-      <input type="hidden" {name} value={tag} />
+      <input type="hidden" {name} value={tag} {disabled} />
     {/each}
   {/if}
   {#each value as tag, index (tag)}

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

@@ -1,13 +1,13 @@
 interface Props {
     value?: string[];
-    name?: string;
+    name?: string | undefined;
     placeholder?: string;
     separator?: string;
     maxItems?: number;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     ariaLabel?: string;
     class?: string;
     onchange?: (value: string[]) => void;

package/dist/components/TaskDetails.svelte

@@ -6,16 +6,17 @@
   import { useTranslation } 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';
+  import DataState from './content/DataState.svelte';
   import {
     canCancelTask,
     canRetryTask,
+    formatTaskDate,
     resolveTaskCreatedAt,
     resolveTaskError,
     resolveTaskMessage,
@@ -35,7 +36,7 @@
     useProviderData = !task && !!taskId,
     queryOptions,
   } = $props<{
-    task?: TaskRecord;
+    task?: TaskRecord | undefined;
     taskId?: string;
     taskProvider?: TaskProvider<TaskRecord>;
     title?: string;
@@ -50,7 +51,9 @@
     };
   }>();
 
+  const canRead = $derived(useProviderData && !!taskId && !!taskProvider && queryOptions?.enabled !== false);
   const query = useTask({
+    errorNotification: false,
     get taskId() {
       return taskId;
     },
@@ -58,7 +61,7 @@
       return taskProvider;
     },
     get queryOptions() {
-      return { enabled: useProviderData && !!taskId && !!taskProvider, ...queryOptions };
+      return { ...queryOptions, enabled: canRead };
     },
   });
 
@@ -70,16 +73,15 @@
       return { data: undefined, invalid: true };
     }
   });
-  const resolvedTask = $derived(view.data);
+  const resolvedTask = $derived(useProviderData && (query.isError || query.isLoading) ? undefined : view.data);
   const resolvedTitle = $derived(title ?? i18n.t('task.detailsTitle'));
 
-  function formatDate(value: unknown) {
-    if (typeof value !== 'string' || !value) return '—';
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return '—';
-    return date.toLocaleString();
+  function retryRead(): void {
+    if (!canRead || query.isFetching) return;
+    void query.refetch({ cancelRefetch: false });
   }
 
+
   function toPrettyJson(value: unknown) {
     try {
       return JSON.stringify(value, null, 2);
@@ -101,13 +103,17 @@
     </Card.Description>
   </Card.Header>
   <Card.Content class="svadmin-u-b43b4c086d9a svadmin-u-9335c39f6eff">
-    {#if view.invalid || (useProviderData && query.isError)}
+    {#if view.invalid}
       <p role="alert">{i18n.t('validation.invalidFormat')}</p>
+    {:else if useProviderData && query.isError}
+      <DataState
+        state="error"
+        title={i18n.t('common.error')}
+        description={i18n.t('task.fetchFailed')}
+        {...definedOptions({ retry: !canRead || query.isFetching ? undefined : retryRead })}
+      />
     {:else if useProviderData && taskProvider && query.isLoading}
-      <div class="svadmin-u-60fbb7713999 svadmin-u-aadad6871af8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748">
-        <Loader2 class="svadmin-u-d2347e8497a9 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
-        {i18n.t('task.loadingDetail')}
-      </div>
+      <DataState state="loading" loadingLabel={i18n.t('task.loadingDetail')} />
     {:else if resolvedTask}
       <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
         <TaskStatusBadge status={String(resolvedTask.status ?? 'pending')} />
@@ -121,11 +127,11 @@
       <div class="svadmin-u-f3c543ad5fe9 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff">
         <div class="svadmin-u-da7c36cd8867">
           <div class="svadmin-u-359090c2d529 uppercase svadmin-u-8baf13a3e9d7 svadmin-u-bfa603190748">{i18n.t('task.createdLabel')}</div>
-          <div class="svadmin-u-fc7473ca09eb">{formatDate(resolveTaskCreatedAt(resolvedTask))}</div>
+          <div class="svadmin-u-fc7473ca09eb">{formatTaskDate(resolveTaskCreatedAt(resolvedTask), i18n.locale)}</div>
         </div>
         <div class="svadmin-u-da7c36cd8867">
           <div class="svadmin-u-359090c2d529 uppercase svadmin-u-8baf13a3e9d7 svadmin-u-bfa603190748">{i18n.t('task.updatedLabel')}</div>
-          <div class="svadmin-u-fc7473ca09eb">{formatDate(resolveTaskUpdatedAt(resolvedTask))}</div>
+          <div class="svadmin-u-fc7473ca09eb">{formatTaskDate(resolveTaskUpdatedAt(resolvedTask), i18n.locale)}</div>
         </div>
       </div>
 

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

@@ -1,6 +1,6 @@
 import type { TaskProvider, TaskRecord } from '@svadmin/core';
 type $$ComponentProps = {
-    task?: TaskRecord;
+    task?: TaskRecord | undefined;
     taskId?: string;
     taskProvider?: TaskProvider<TaskRecord>;
     title?: string;

package/dist/components/TaskList.svelte

@@ -14,9 +14,11 @@
   import TaskProgressBar from './TaskProgressBar.svelte';
   import RetryTaskButton from './RetryTaskButton.svelte';
   import CancelTaskButton from './CancelTaskButton.svelte';
+  import DataState from './content/DataState.svelte';
   import {
     canCancelTask,
     canRetryTask,
+    formatTaskDate,
     resolveTaskMessage,
     resolveTaskProgress,
     resolveTaskTitle,
@@ -58,7 +60,11 @@
     onSelect?: (task: TaskRecord) => void;
   }>();
 
+  const hasReadCapability = $derived(typeof (dlq ? taskProvider?.listDlq : taskProvider?.list) === 'function');
+  const readUnavailable = $derived(useProviderData && !hasReadCapability);
+  const canRead = $derived(useProviderData && hasReadCapability && queryOptions?.enabled !== false);
   const query = useTaskList({
+    errorNotification: false,
     get params() {
       return params;
     },
@@ -69,7 +75,7 @@
       return taskProvider;
     },
     get queryOptions() {
-      return { enabled: useProviderData && !!taskProvider, ...queryOptions };
+      return { ...queryOptions, enabled: canRead };
     },
   });
 
@@ -81,31 +87,59 @@
     }
   });
   const resolvedTasks = $derived(view.data);
+  const keyedTasks = $derived.by(() => {
+    const occurrences = new Map<string, number>();
+    return resolvedTasks.map(task => {
+      const occurrence = occurrences.get(task.id) ?? 0;
+      occurrences.set(task.id, occurrence + 1);
+      return { task, key: JSON.stringify([task.id, occurrence]) };
+    });
+  });
   const resolvedTitle = $derived(title ?? (dlq ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')));
   const resolvedEmptyText = $derived(emptyText ?? (dlq ? i18n.t('task.noDlq') : i18n.t('task.noTasks')));
 
-  function formatDate(value: unknown) {
-    if (typeof value !== 'string' || !value) return '—';
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return '—';
-    return date.toLocaleString();
+  function retryRead(): void {
+    if (!canRead || query.isFetching) return;
+    void query.refetch({ cancelRefetch: false });
+  }
+
+  function selectRow(event: MouseEvent, task: TaskRecord): void {
+    if (event.target instanceof Element
+      && event.target.closest('button, a, input, select, textarea, [role="button"]')) return;
+    onSelect?.(task);
   }
+
 </script>
 
 <Card.Root class="svadmin-u-6ee2d41e2d2d svadmin-u-438b2237b8d6">
   <Card.Header class="svadmin-u-7fcf9124b5df">
     <Card.Title class="svadmin-u-4ee734926ff6">{resolvedTitle}</Card.Title>
+    {#if !readUnavailable}
       <Card.Description>
       {#if useProviderData && taskProvider}
         {i18n.t('task.count', { count: (query.data?.total ?? resolvedTasks.length) || 0 })}
       {:else}
         {i18n.t('task.count', { count: resolvedTasks.length })}
       {/if}
-    </Card.Description>
+      </Card.Description>
+    {/if}
   </Card.Header>
   <Card.Content class="svadmin-u-9335c39f6eff">
-    {#if view.invalid || (useProviderData && query.isError)}
+    {#if view.invalid}
       <p role="alert">{i18n.t('validation.invalidFormat')}</p>
+    {:else if readUnavailable}
+      <DataState
+        state="error"
+        title={i18n.t('common.configRequired')}
+        description={i18n.t(dlq ? 'task.dlqUnavailable' : 'task.listUnavailable')}
+      />
+    {:else if useProviderData && query.isError}
+      <DataState
+        state="error"
+        title={i18n.t('common.error')}
+        description={i18n.t('task.fetchListFailed')}
+        {...definedOptions({ retry: !canRead || query.isFetching ? undefined : retryRead })}
+      />
     {:else if useProviderData && taskProvider && query.isLoading}
       <div class="svadmin-u-60fbb7713999 svadmin-u-aadad6871af8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748">
         <Loader2 class="svadmin-u-d2347e8497a9 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
@@ -125,11 +159,17 @@
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {#each resolvedTasks as task, _i (_i)}
-              <Table.Row class="svadmin-u-34516836730d svadmin-u-f6e31b39b8e4" onclick={() => onSelect?.(task)}>
+            {#each keyedTasks as { task, key } (key)}
+              <Table.Row class="svadmin-u-34516836730d svadmin-u-f6e31b39b8e4" onclick={(event) => selectRow(event, task)}>
                 <Table.Cell class="svadmin-u-00cde2e9f1cf">
                   <div class="svadmin-u-da7c36cd8867">
-                    <div class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{resolveTaskTitle(task)}</div>
+                    {#if onSelect && !showActions}
+                      <Button type="button" variant="ghost" size="sm" onclick={() => onSelect?.(task)}>
+                        {resolveTaskTitle(task)}
+                      </Button>
+                    {:else}
+                      <div class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{resolveTaskTitle(task)}</div>
+                    {/if}
                     {#if resolveTaskMessage(task)}
                       <div class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{resolveTaskMessage(task)}</div>
                     {/if}
@@ -142,7 +182,7 @@
                   <TaskStatusBadge status={String(task.status ?? 'pending')} />
                 </Table.Cell>
                 <Table.Cell class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-                  {formatDate(resolveTaskUpdatedAt(task))}
+                  {formatTaskDate(resolveTaskUpdatedAt(task), i18n.locale)}
                 </Table.Cell>
                 {#if showActions}
                   <Table.Cell class="svadmin-u-308fc069e46e">
@@ -153,9 +193,11 @@
                       {#if taskProvider?.cancel && canCancelTask(task)}
                         <CancelTaskButton taskId={task.id} {taskProvider} />
                       {/if}
-                      <Button variant="ghost" size="sm" onclick={(e) => { e.stopPropagation(); onSelect?.(task); }}>
-                        {i18n.t('task.detailsAction')}
-                      </Button>
+                      {#if onSelect}
+                        <Button type="button" variant="ghost" size="sm" onclick={() => onSelect?.(task)}>
+                          {i18n.t('task.detailsAction')}
+                        </Button>
+                      {/if}
                     </div>
                   </Table.Cell>
                 {/if}