@svadmin/ui 0.88.1 → 0.91.0

package/dist/components/AutoTable.svelte

@@ -20,6 +20,7 @@
   } from '@tanstack/svelte-table';
   import type { Column, Header, Row, TableFeatures } from '@tanstack/table-core';
   import { createAtom, useSelector } from '@tanstack/svelte-store';
+  import { useQueryClient } from '@tanstack/svelte-query';
   import {
     column_getCanSort,
     column_getSize,
@@ -37,7 +38,7 @@
     cell_getValue,
   } from '@tanstack/table-core/static-functions';
 
-  import { captureAdminContext, captureAuthSession, useGetIdentity, getContractFormFields, useNavigation, useParsed, useResourceContract, useList, useDeleteMany, downloadData, type ExportFormat, type TaskProvider } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useGetIdentity, getContractFormFields, useNavigation, useParsed, useResourceContract, useList, useDeleteMany, downloadData, type ExportFormat, type TaskProvider, parseQueryKey } from '@svadmin/core';
   import { snapshotPlainData, parseContractRouteId, formatContractRouteId } from '@svadmin/core/schema';
   import {
     checkedTableRows,
@@ -56,7 +57,9 @@
   import { readURLState, writeURLState } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { createSavedListViews } from './saved-list-views.svelte.js';
-  import { createListState } from './list-state.svelte.js';
+  import {
+    captureSavedListViewState, cloneListStateSnapshot, createListState, type ListStateSnapshot,
+  } from './list-state.svelte.js';
   import { createListSelection } from './list-selection.svelte.js';
   import { createListColumnPreferences } from './list-column-preferences.svelte.js';
   import { createListDeletion } from './list-deletion.svelte.js';
@@ -87,7 +90,10 @@
     Eye, Copy, RefreshCw, Rows, X, Bookmark, Check
   } from '@lucide/svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
+  import BatchActionBar from './BatchActionBar.svelte';
   import RecordDetailDrawer from './RecordDetailDrawer.svelte';
+  import DetailWorkspaceSections from './DetailWorkspaceSections.svelte';
+  import type { DetailWorkspaceSectionsConfig } from './detail-workspace.js';
   import QuickEditDrawer from './QuickEditDrawer.svelte';
   import RecordRowActions from './RecordRowActions.svelte';
   import CanAccess from './CanAccess.svelte';
@@ -136,6 +142,10 @@
     pagination?: { current: number; pageSize: number };
     /** Externally controlled sorters */
     sorters?: Sort[];
+    /** 初次挂载时恢复的查询快照；优先级低于受控分页/排序和已启用的 URL 状态。 */
+    initialListState?: ListStateSnapshot | undefined;
+    /** 查询快照变化回调；搜索在 debounce 应用后才触发。 */
+    onListStateChange?: ((state: ListStateSnapshot) => void) | undefined;
     /** 批量操作必须按 selection.scope 区分明确 ID 与全部查询结果。 */
     batchActions?: Snippet<[{ selectedIds: (string | number)[]; selection: BatchSelection }]>;
     /** Summary row rendered at table footer */
@@ -151,6 +161,8 @@
     exportTaskIdempotencyKey?: string;
     exportFormat?: ExportFormat;
     exportMaxItemCount?: number;
+    /** Optional record-scoped detail workspace sections. Audit uses the existing AuditLogProvider. */
+    detailWorkspace?: DetailWorkspaceSectionsConfig;
   }
 
   let {
@@ -176,6 +188,8 @@
     summary,
     pagination: externalPagination,
     sorters: externalSorters,
+    initialListState,
+    onListStateChange,
     deleteVariables,
     savedViewProvider,
     applyRemoteDefaultView = false,
@@ -184,11 +198,13 @@
     exportTaskIdempotencyKey,
     exportFormat = 'csv',
     exportMaxItemCount,
+    detailWorkspace,
   }: Props = $props();
 
   let densityOverride = $state<'compact' | 'comfortable' | undefined>(undefined);
   const currentDensity = $derived(densityOverride ?? density);
   const adminContext = captureAdminContext();
+  const queryClient = useQueryClient();
   const parsed = useParsed();
   const navigation = useNavigation();
 
@@ -251,6 +267,26 @@
     || urlState.search !== undefined
     || urlState.filters !== undefined
   ));
+  const initialListStateSnapshot = untrack(() => initialListState
+    ? cloneListStateSnapshot(initialListState)
+    : undefined);
+  const initialPreferenceScope: ListPreferenceScope = untrack(() => listPreferenceScope);
+  const initialPreferenceSessionKey = untrack(() => preferenceSession.cacheKey);
+  let initialListStateRetired = !initialListStateSnapshot;
+  let initialIdentityHydrationPending = !!initialListStateSnapshot
+    && initialPreferenceScope.identityKey?.startsWith('unresolved:') === true;
+
+  function sameScopeExceptIdentity(left: ListPreferenceScope, right: ListPreferenceScope): boolean {
+    return left.resourceName === right.resourceName
+      && left.providerName === right.providerName
+      && left.tenantIdentity === right.tenantIdentity;
+  }
+
+  function initialListStateApplies(scope: ListPreferenceScope): boolean {
+    return !!initialListStateSnapshot && !initialListStateRetired
+      && sameScopeExceptIdentity(scope, initialPreferenceScope);
+  }
+
   const savedViewModel = createSavedListViews({
     scope: () => listPreferenceScope,
     columns: () => savedViewColumnIds,
@@ -258,7 +294,9 @@
     isScopeLoaded: preferenceScopeIsLoaded,
     readPreference: readScopedPreference,
     hasExplicitURLState,
-    canApplyRemoteDefault: () => applyRemoteDefaultView && !externalPagination && !externalSorters,
+    initialStateOverridesSavedView: !!initialListStateSnapshot,
+    canApplyRemoteDefault: () => applyRemoteDefaultView && !externalPagination && !externalSorters
+      && !initialListStateApplies(listPreferenceScope),
     captureState: () => {
       listState.flushSearch();
       return getCurrentSavedViewState();
@@ -275,6 +313,7 @@
   // The table can stay mounted while the surrounding tenant/provider changes.
   // Keep persistence effects paused until the new scope has been loaded.
   let loadedPreferenceScopeId = $state(untrack(() => listPreferenceScopeId(listPreferenceScope)));
+  const queryScopeReady = $derived(loadedPreferenceScopeId === listPreferenceScopeId(listPreferenceScope));
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
   const storedPageSize = parseInt(readLocalPreference('svadmin-default-page-size') ?? '', 10);
@@ -286,10 +325,12 @@
     externalPagination: () => externalPagination,
     externalSorters: () => externalSorters,
     initialURLState: urlState,
+    initialListState: initialListStateSnapshot,
     initialViewState,
     syncWithLocation: () => syncWithLocation,
     writeURLState: (state) => writeURLState(state, adminContext),
     onDirty: markSavedViewDirty,
+    onStateChange: (state) => onListStateChange?.(state),
   });
   const pagination = $derived(listState.pagination);
   const sorters = $derived(listState.sorters);
@@ -325,7 +366,9 @@
   const listResult = useList({
     get resource() { void activeRendering; return binding.resource; },
     get dataProviderName() { return binding.dataProviderName; },
-    get queryOptions() { return { enabled: canRead }; },
+    errorNotification: false,
+    // 作用域恢复完成前不发送查询，避免把旧作用域快照作为新作用域的首帧请求。
+    get queryOptions() { return { enabled: canRead && queryScopeReady }; },
     get pagination() { return queryPagination; },
     get sorters() { return querySorters; },
     get filters() { return queryFilters; },
@@ -500,15 +543,14 @@
   });
 
   function getCurrentSavedViewState(): SavedListViewState {
-    return {
-      ...listState.captureState(),
-      ...columnPreferences.captureState(),
-    };
+    return captureSavedListViewState(
+      listState.captureState(), columnPreferences.captureState(), initPageSize,
+    );
   }
 
   function applySavedViewState(state: SavedListViewState): void {
     listState.applyState(state);
-    sortingAtom.set(state.sorters.map((sorter) => ({ id: sorter.field, desc: sorter.order === 'desc' })));
+    sortingAtom.set(listState.sorters.map((sorter) => ({ id: sorter.field, desc: sorter.order === 'desc' })));
     columnPreferences.applyState(state);
     selectionModel.reset();
   }
@@ -525,10 +567,30 @@
     const scopeId = listPreferenceScopeId(scope);
     if (scopeId === loadedPreferenceScopeId) return;
 
+    if (initialListStateSnapshot) {
+      const identityHydration = initialIdentityHydrationPending
+        && sameScopeExceptIdentity(scope, initialPreferenceScope)
+        && preferenceSession.cacheKey === initialPreferenceSessionKey
+        && scope.identityKey !== undefined
+        && !scope.identityKey.startsWith('unresolved:');
+      if (identityHydration) {
+        initialIdentityHydrationPending = false;
+      } else {
+        initialListStateRetired = true;
+        initialIdentityHydrationPending = false;
+      }
+    }
+
     const activeSavedView = savedViewModel.restoreScope(scope);
     const restoredColumns = columnPreferences.readScope(scope);
 
-    if (!hasExplicitURLState && activeSavedView) {
+    if (!hasExplicitURLState && initialListStateApplies(scope)) {
+      // 挂载快照已由 createListState 应用；首次身份 hydrate 只保留用户编辑，不重放快照。
+      // 初始快照优先于旧活动视图时取消活动标记，但不删除保存视图或写入其他作用域。
+      savedViewModel.clearActiveSavedView();
+      columnPreferences.applyState(restoredColumns);
+      selectionModel.reset();
+    } else if (!hasExplicitURLState && activeSavedView) {
       applySavedView(activeSavedView);
     } else {
       if (!hasExplicitURLState) resetToDefaultListState();
@@ -749,6 +811,8 @@
   // ─── Confirm dialog ───────────────────────────────────────────
   let operationError = $state<string | null>(null);
   let detailOpenedInHistory = $state(false);
+  let detailOpenedId = $state<string | number | undefined>();
+  let detailRouteChangedInHistory = $state(false);
   let quickEditId = $state<string | number | undefined>();
   const tableScope = $derived({
     contract: binding.resource, resourceName, provider: adminContext.providers?.[binding.dataProviderName],
@@ -788,6 +852,8 @@
       selectionModel.reset();
       expandedAtom.set({});
       detailOpenedInHistory = false;
+      detailOpenedId = undefined;
+      detailRouteChangedInHistory = false;
       localDetailId = undefined;
       quickEditId = undefined;
       const queryScopeChanged = previousTableScope.contract !== scope.contract
@@ -809,16 +875,35 @@
     if (!canRead || !canShow) return;
     if (!syncWithLocation) { localDetailId = id; return; }
     detailOpenedInHistory = true;
+    detailOpenedId = id;
+    detailRouteChangedInHistory = false;
     writeURLState({ detailId: formatContractRouteId(binding.resource, id) }, adminContext, 'push');
   }
+  $effect.pre(() => {
+    if (!detailOpenedInHistory || detailOpenedId == null || detailRecordId == null) return;
+    if (String(detailRecordId) !== String(detailOpenedId)) detailRouteChangedInHistory = true;
+  });
   function closeDetail(): void {
     if (!syncWithLocation) { localDetailId = undefined; return; }
     if (detailOpenedInHistory && adminContext.routerProvider) {
+      const routeChanged = detailRouteChangedInHistory;
       detailOpenedInHistory = false;
+      detailOpenedId = undefined;
+      detailRouteChangedInHistory = false;
+      // The drawer can move to another record without unmounting (next/previous).
+      // Once that happened, the top history entry may be a detail route even if
+      // the current record is the originally opened one (A -> B -> A), so a single
+      // back() could reopen another record instead of closing.
+      if (routeChanged) {
+        writeURLState({ detailId: undefined }, adminContext);
+        return;
+      }
       adminContext.routerProvider.back();
       return;
     }
     detailOpenedInHistory = false;
+    detailOpenedId = undefined;
+    detailRouteChangedInHistory = false;
     writeURLState({ detailId: undefined }, adminContext);
   }
   // ─── CSV Export ───────────────────────────────────────────────
@@ -843,6 +928,15 @@
   function refreshList() {
     if (canRead && !query.isFetching) void listResult.refetch();
   }
+  function refreshPermission() {
+    const resource = resourceName;
+    void queryClient.invalidateQueries({
+      predicate: query => {
+        const parsed = parseQueryKey(query.queryKey);
+        return parsed?.kind === 'access' && parsed.resource === resource;
+      },
+    }).catch(() => {});
+  }
   const gridRowIndex = $derived(new Map(tableView.rows.map(row => [rowIdValue(row), row])));
   const gridColumns = $derived.by(() => {
     void tableColumnOrder.current; void tableColumnVisibility.current;
@@ -1108,20 +1202,16 @@
     </div>
   {/if}
 
-  <!-- Selection Banner (Enterprise Batch Actions) -->
-  {#if selectedCount > 0 || allMatchingSelected}
-<div
-      class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-ca6bcd4b6f3f svadmin-u-a6afccfc915b svadmin-u-375dc44df6e9 svadmin-u-e0d9cc7f0647 svadmin-u-03b4dd7f172b svadmin-u-5f22e64f2282 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359 svadmin-u-40137e897961 fade-in svadmin-u-625a4c3fbeb2 svadmin-u-259ce51fc8f3 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"
-      aria-label={selectionLabel}
-      data-svadmin-batch-toolbar
-    >
-      <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb">
-        <span class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-3032cae0badb">{selectionLabel}</span>
-        {#if deleteManyMutation.isPending}
-          <span class="svadmin-u-bfa603190748" role="status">{i18n.t("common.processing")}</span>
-        {/if}
-      </div>
-      <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+  {#if selectedCount > 0 || allMatchingSelected || (deleteRequest?.batch && deleteManyMutation.isPending)}
+    <div data-svadmin-batch-toolbar>
+      <BatchActionBar
+        {selectedCount}
+        selectedLabel={selectionLabel}
+        ariaLabel={selectionLabel}
+        forceVisible={allMatchingSelected}
+        pending={deleteManyMutation.isPending}
+        onclear={clearSelection}
+      >
         {#if batchActions && selectionReady && selectedCount > 0}
           {@render batchActions({ selectedIds: [...selectedIds], selection: batchSelectionSnapshot() })}
         {/if}
@@ -1142,16 +1232,7 @@
             <Trash2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" data-icon="inline-start" aria-hidden="true" /> {i18n.t("common.batchDelete", { count: selectedCount })}
           </Button>
         {/if}
-        <Button
-          variant="ghost"
-          size="sm"
-          class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e"
-          disabled={deleteManyMutation.isPending}
-          onclick={clearSelection}
-        >
-          {i18n.t("common.clearSelection")}
-        </Button>
-      </div>
+      </BatchActionBar>
     </div>
   {/if}
 
@@ -1305,6 +1386,9 @@
             <div>
               <h4 class="svadmin-u-2689f3958069 svadmin-u-fc7473ca09eb">{i18n.t("common.savedViews")}</h4>
               <p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t("common.savedViewsHint")}</p>
+              {#if savedViewModel.staleSavedViewColumns.length > 0}
+                <p role="status">{i18n.t('common.savedViewStaleFields', { count: savedViewModel.staleSavedViewColumns.length })}</p>
+              {/if}
             </div>
             {#if savedViewModel.remoteViewsLoading}
               <p role="status">{i18n.t('common.loading')}</p>
@@ -1610,8 +1694,13 @@
           </div>
         {/each}
       </div>
+    {:else if listPermission.isError}
+      <p role="alert">{i18n.t('common.permissionUnavailable')}</p>
+      <Button type="button" variant="outline" onclick={refreshPermission}>
+        {i18n.t('common.retry')}
+      </Button>
     {:else if !canRead}
-      <p role="alert">{i18n.t('common.operationFailed')}</p>
+      <p role="alert">{i18n.t('common.permissionDenied')}</p>
     {:else if query.error || query.isError || !pageRecords.ok}
       <DataState
         state="error"
@@ -1958,6 +2047,16 @@
   oncancel={deletionModel.cancel}
 />
 
+{#snippet workspaceSections()}
+  {#if detailRecordId != null && detailWorkspace}
+    <DetailWorkspaceSections
+      {resourceName}
+      recordId={detailRecordId}
+      sections={detailWorkspace}
+    />
+  {/if}
+{/snippet}
+
 {#if detailRecordId != null}
   <RecordDetailDrawer
     rendering={activeRendering}
@@ -1965,6 +2064,7 @@
     open={detailOpen}
     recordId={detailRecordId}
     onClose={closeDetail}
+    {...definedOptions({ extraSections: detailWorkspace ? workspaceSections : undefined })}
   />
 {/if}
 

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

@@ -3,7 +3,9 @@ import type { AutoTableGridState } from './auto-table-grid.js';
 import { type ExportFormat, type TaskProvider } from '@svadmin/core';
 import { type BatchSelection } from './table-contract';
 import type { BaseRecord, FieldDefinition, Sort } from '@svadmin/core';
+import { type ListStateSnapshot } from './list-state.svelte.js';
 import { type SavedListViewProvider } from './saved-list-views.js';
+import type { DetailWorkspaceSectionsConfig } from './detail-workspace.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
@@ -54,6 +56,10 @@ interface Props {
     };
     /** Externally controlled sorters */
     sorters?: Sort[];
+    /** 初次挂载时恢复的查询快照；优先级低于受控分页/排序和已启用的 URL 状态。 */
+    initialListState?: ListStateSnapshot | undefined;
+    /** 查询快照变化回调；搜索在 debounce 应用后才触发。 */
+    onListStateChange?: ((state: ListStateSnapshot) => void) | undefined;
     /** 批量操作必须按 selection.scope 区分明确 ID 与全部查询结果。 */
     batchActions?: Snippet<[{
         selectedIds: (string | number)[];
@@ -76,6 +82,8 @@ interface Props {
     exportTaskIdempotencyKey?: string;
     exportFormat?: ExportFormat;
     exportMaxItemCount?: number;
+    /** Optional record-scoped detail workspace sections. Audit uses the existing AuditLogProvider. */
+    detailWorkspace?: DetailWorkspaceSectionsConfig;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;
 type AutoTable = ReturnType<typeof AutoTable>;

package/dist/components/BatchActionBar.svelte

@@ -4,12 +4,20 @@
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
 
   interface Props {
     selectedCount?: number;
     totalCount?: number;
     selectedLabel?: string;
     clearLabel?: string;
+    ariaLabel?: string;
+    pending?: boolean;
+    pendingLabel?: string;
+    /** 全量匹配等选择模式可在零计数时保留清除入口。 */
+    forceVisible?: boolean;
     variant?: 'default' | 'floating' | 'subtle';
     onclear?: () => void;
     actions?: Snippet;
@@ -21,7 +29,11 @@
     selectedCount = 0,
     totalCount,
     selectedLabel,
-    clearLabel = 'Clear',
+    clearLabel,
+    ariaLabel,
+    pending = false,
+    pendingLabel,
+    forceVisible = false,
     variant = 'default',
     onclear,
     actions,
@@ -29,17 +41,26 @@
     class: className = '',
   }: Props = $props();
 
-  const isVisible = $derived(selectedCount > 0);
+  const isVisible = $derived(selectedCount > 0 || pending || forceVisible);
+  const clearText = $derived(clearLabel ?? i18n.t('common.clearSelection'));
+  const regionLabel = $derived(ariaLabel ?? i18n.t('common.batchActions'));
+  const busyText = $derived(pendingLabel ?? i18n.t('common.processing'));
   const displayText = $derived.by(() => {
     if (selectedLabel) {
       return selectedLabel.replace('{count}', String(selectedCount));
     }
     return totalCount !== undefined
-      ? `${selectedCount} of ${totalCount} selected`
-      : `${selectedCount} selected`;
+      ? i18n.t('common.selectedOfTotal', { count: selectedCount, total: totalCount })
+      : i18n.t('common.selectedCount', { count: selectedCount });
   });
+
+  function handleClear() {
+    if (!pending) onclear?.();
+  }
 </script>
 
+<span class="svadmin-sr-only" role="status" aria-live="polite" aria-atomic="true">{pending ? busyText : ''}</span>
+
 {#if isVisible}
   {#if variant === 'floating'}
     <div
@@ -48,35 +69,39 @@
         className
       )}
       role="region"
-      aria-label="Batch Actions"
+      aria-label={regionLabel}
+      aria-busy={pending || undefined}
     >
       <div class="svadmin-batch-action-bar__selection">
         <CheckCircle2 class="svadmin-batch-action-bar__icon" aria-hidden="true" />
         <span class="svadmin-batch-action-bar__label">{displayText}</span>
+        {#if pending}<span aria-hidden="true">{busyText}</span>{/if}
       </div>
 
       {#if actions}
-        <div class="svadmin-batch-action-bar__actions">
+        <div class="svadmin-batch-action-bar__actions" inert={pending}>
           {@render actions()}
         </div>
       {/if}
 
       {#if children}
-        <div class="svadmin-batch-action-bar__actions">
+        <div class="svadmin-batch-action-bar__actions" inert={pending}>
           {@render children()}
         </div>
       {/if}
 
       {#if onclear}
         <Button
+          type="button"
           variant="ghost"
           size="sm"
           class="svadmin-batch-action-bar__clear"
-          onclick={onclear}
-          aria-label={clearLabel}
+          onclick={handleClear}
+          aria-label={clearText}
+          disabled={pending}
         >
           <X class="svadmin-batch-action-bar__clear-icon" aria-hidden="true" />
-          {clearLabel}
+          {clearText}
         </Button>
       {/if}
     </div>
@@ -88,25 +113,28 @@
         className
       )}
       role="region"
-      aria-label="Batch Actions"
+      aria-label={regionLabel}
+      aria-busy={pending || undefined}
     >
       <div class="svadmin-batch-action-bar__selection">
         <Badge variant="secondary" class="svadmin-batch-action-bar__count">
           {selectedCount}
         </Badge>
         <span class="svadmin-batch-action-bar__label">{displayText}</span>
+        {#if pending}<span aria-hidden="true">{busyText}</span>{/if}
         {#if onclear}
           <button
             type="button"
             class="svadmin-batch-action-bar__clear"
-            onclick={onclear}
+            onclick={handleClear}
+            disabled={pending}
           >
-            {clearLabel}
+            {clearText}
           </button>
         {/if}
       </div>
 
-      <div class="svadmin-batch-action-bar__actions">
+      <div class="svadmin-batch-action-bar__actions" inert={pending}>
         {#if actions}
           {@render actions()}
         {/if}

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

@@ -4,6 +4,11 @@ interface Props {
     totalCount?: number;
     selectedLabel?: string;
     clearLabel?: string;
+    ariaLabel?: string;
+    pending?: boolean;
+    pendingLabel?: string;
+    /** 全量匹配等选择模式可在零计数时保留清除入口。 */
+    forceVisible?: boolean;
     variant?: 'default' | 'floating' | 'subtle';
     onclear?: () => void;
     actions?: Snippet;

package/dist/components/BoundRecordDetailDrawer.svelte

@@ -153,9 +153,11 @@
   {/if}
 
   {#if extraSections && canReadRecord && query.isSuccess}
-    <section data-svadmin-detail-extensions aria-label={i18n.t('common.additionalDetails')}>
-      {@render extraSections()}
-    </section>
+    {#key `${resourceName}:${recordId}`}
+      <section data-svadmin-detail-extensions aria-label={i18n.t('common.additionalDetails')}>
+        {@render extraSections()}
+      </section>
+    {/key}
   {/if}
 
   {#snippet footer()}

package/dist/components/CancelTaskButton.svelte

@@ -6,6 +6,8 @@
   import { createTaskAction } from './task-action.svelte.js';
 
   const i18n = useTranslation();
+  const instanceId = $props.id();
+  const errorId = `${instanceId}-error`;
 
   let {
     taskId,
@@ -37,7 +39,9 @@
   });
 </script>
 
-<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}>
+<span class="task-action-feedback">
+<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}
+  aria-describedby={action.failed && !onError ? errorId : undefined}>
   {#if action.pending}
     <Loader2 class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
   {:else}
@@ -49,3 +53,12 @@
     {i18n.t('common.cancel')}
   {/if}
 </Button>
+{#if action.failed && !onError}
+  <span id={errorId} role="alert">{i18n.t('task.actionFailed')}</span>
+{/if}
+</span>
+
+<style>
+  .task-action-feedback { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 16rem; }
+  .task-action-feedback [role="alert"] { color: var(--destructive); font-size: 12px; line-height: 16px; white-space: normal; overflow-wrap: anywhere; }
+</style>