@nextclaw/ui 0.16.0 → 0.17.0

package/src/features/app-data/components/app-storage-usage.tsx

@@ -0,0 +1,59 @@
+import type { AppDataEntry } from '@nextclaw/client-sdk';
+import { HardDrive } from 'lucide-react';
+import { t } from '@/shared/lib/i18n';
+
+type Storage = AppDataEntry['storage'];
+type Usage = AppDataEntry['usage'];
+
+export function AppStorageUsageDetails({
+  storage,
+  usage,
+}: {
+  storage: Storage;
+  usage: Usage;
+}) {
+  const rows = [
+    [t('appDataClassData'), usage.dataBytes],
+    [t('appDataClassConfig'), usage.configBytes],
+    [t('appDataClassState'), usage.stateBytes],
+    [t('appDataClassCache'), usage.cacheBytes],
+    [t('appDataClassTemporary'), usage.temporaryBytes],
+    [t('appDataClassLogs'), usage.logsBytes],
+  ] as const;
+  return (
+    <div className="rounded-xl bg-muted/45 px-3 py-2.5">
+      <div className="flex items-center justify-between gap-3 text-xs">
+        <span className="inline-flex items-center gap-1.5 font-medium text-foreground">
+          <HardDrive className="h-3.5 w-3.5" />
+          {t('appDataStorageTotal')}
+        </span>
+        <span className="tabular-nums text-foreground">{formatBytes(usage.totalBytes)}</span>
+      </div>
+      <dl className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-[11px] sm:grid-cols-3">
+        {rows.map(([label, bytes]) => (
+          <div key={label} className="flex min-w-0 items-center justify-between gap-2">
+            <dt className="truncate text-muted-foreground">{label}</dt>
+            <dd className="shrink-0 tabular-nums text-foreground/80">{formatBytes(bytes)}</dd>
+          </div>
+        ))}
+      </dl>
+      <div className="mt-2 border-t border-border/50 pt-2">
+        <div className="text-[10px] text-muted-foreground">{t('appDataStoragePath')}</div>
+        <code
+          aria-label={t('appDataStoragePath')}
+          className="mt-0.5 block select-all break-all font-mono text-[10px] leading-4 text-foreground/75"
+          tabIndex={0}
+        >
+          {storage.instanceDirectory}
+        </code>
+      </div>
+    </div>
+  );
+}
+
+export function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}

package/src/features/app-data/hooks/use-app-data.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { nextclawClient } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+
+export const APP_DATA_QUERY_KEY = ['app-data'] as const;
+
+export function useAppData() {
+  return useQuery({
+    queryKey: APP_DATA_QUERY_KEY,
+    queryFn: () => nextclawClient.appData.list(),
+    staleTime: 0,
+  });
+}
+
+export function useDeleteRetainedAppData() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ dataId, confirmAppId }: { dataId: string; confirmAppId: string }) =>
+      nextclawClient.appData.deleteRetained(dataId, confirmAppId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: APP_DATA_QUERY_KEY });
+      toast.success(t('appDataDeleteCompleted'));
+    },
+  });
+}

package/src/features/app-data/index.ts

@@ -0,0 +1,8 @@
+export { AppDataRemovalChoice } from './components/app-data-removal-choice';
+export { AppRetainedDataSection } from './components/app-retained-data-section';
+export { AppStorageUsageDetails, formatBytes } from './components/app-storage-usage';
+export {
+  APP_DATA_QUERY_KEY,
+  useAppData,
+  useDeleteRetainedAppData,
+} from './hooks/use-app-data';

package/src/features/apps/components/__tests__/app-packages-panel.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { AppPackageOperationView } from '@nextclaw/client-sdk';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -15,9 +15,29 @@ const mocks = vi.hoisted(() => ({
   refetchOperations: vi.fn(),
   refetchPackages: vi.fn(),
   refetchPanels: vi.fn(),
+  refetchAppData: vi.fn(),
+  deleteRetained: vi.fn(),
+  deleteRetainedReset: vi.fn(),
+  retainedEntries: [] as Array<Record<string, unknown>>,
   requestAuthorization: vi.fn(async () => true),
 }));
 
+vi.mock('@/features/app-data/hooks/use-app-data', () => ({
+  useAppData: () => ({
+    data: { entries: mocks.retainedEntries, diagnostics: [] },
+    error: null,
+    isLoading: false,
+    refetch: mocks.refetchAppData,
+  }),
+  useDeleteRetainedAppData: () => ({
+    error: null,
+    isError: false,
+    isPending: false,
+    mutate: mocks.deleteRetained,
+    reset: mocks.deleteRetainedReset,
+  }),
+}));
+
 vi.mock('@/app/components/app-presenter-provider', () => ({
   useAppPresenter: () => ({
     appPackageOperationSettlementManager: { settle: vi.fn() },
@@ -227,6 +247,10 @@ describe('AppPackagesPanel', () => {
     mocks.refetchPackages.mockReset();
     mocks.refetchOperations.mockReset();
     mocks.refetchPanels.mockReset();
+    mocks.refetchAppData.mockReset();
+    mocks.deleteRetained.mockReset();
+    mocks.deleteRetainedReset.mockReset();
+    mocks.retainedEntries = [];
     mocks.requestAuthorization.mockReset();
     mocks.requestAuthorization.mockResolvedValue(true);
   });
@@ -300,8 +324,13 @@ describe('AppPackagesPanel', () => {
     await user.click(screen.getByRole('button', { name: 'More app actions' }));
     await user.click(screen.getByRole('button', { name: 'Uninstall' }));
     expect(screen.getByRole('heading', { name: 'Uninstall this app?' })).toBeTruthy();
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Cancel' }));
+    });
     expect(screen.getByRole('button', { name: /Keep personal data/ }).getAttribute('aria-pressed'))
       .toBe('true');
+    expect(screen.getByText('Total app data')).toBeTruthy();
+    expect(screen.getByText('Managed instance path')).toBeTruthy();
 
     await user.click(screen.getByRole('button', { name: 'Uninstall' }));
     expect(mocks.lifecycleMutate).toHaveBeenCalledWith(
@@ -310,6 +339,48 @@ describe('AppPackagesPanel', () => {
     );
   });
 
+  it('shows retained data and requires a dedicated permanent-delete confirmation', async () => {
+    const user = userEvent.setup();
+    mocks.retainedEntries = [{
+      id: 'ad1.encoded',
+      appId: 'example.notes',
+      instanceId: 'default',
+      displayName: 'Notes',
+      source: 'package',
+      lifecycle: 'retained',
+      storage: createStorageFixture(),
+      usage: {
+        dataBytes: 128,
+        configBytes: 3,
+        stateBytes: 2,
+        cacheBytes: 1,
+        temporaryBytes: 0,
+        logsBytes: 4,
+        totalBytes: 138,
+      },
+      createdAt: '2026-08-14T00:00:00.000Z',
+      actions: { deleteRetainedData: true },
+    }];
+    const view = render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+
+    expect(screen.getByRole('heading', { name: 'Saved app data' })).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Delete data' }));
+    expect(screen.getByRole('heading', { name: 'Permanently delete this app data?' })).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Permanently delete data' }));
+    expect(mocks.deleteRetained).toHaveBeenCalledWith(
+      { dataId: 'ad1.encoded', confirmAppId: 'example.notes' },
+      { onSuccess: expect.any(Function) },
+    );
+    const onSuccess = mocks.deleteRetained.mock.calls[0]?.[1].onSuccess as () => void;
+    mocks.retainedEntries = [];
+    view.rerender(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    await act(async () => onSuccess());
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole('heading', { name: 'Your apps' }));
+    });
+  });
+
   it('keeps an accepted install visible in the library and marketplace while it runs', async () => {
     const user = userEvent.setup();
     mocks.operations = [{

package/src/features/apps/components/app-package-card.tsx

@@ -1,11 +1,10 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import {
   AlertCircle,
   AppWindow,
   Bookmark,
   CalendarDays,
-  Check,
   CheckSquare2,
   ChevronRight,
   MoreHorizontal,
@@ -21,6 +20,11 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
+import {
+  AppDataRemovalChoice,
+  AppStorageUsageDetails,
+  formatBytes,
+} from '@/features/app-data';
 import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { Button } from '@/shared/components/ui/button';
@@ -63,6 +67,8 @@ export function AppPackageCard({
   const [menuOpen, setMenuOpen] = useState(false);
   const [uninstallOpen, setUninstallOpen] = useState(false);
   const [purgeData, setPurgeData] = useState(false);
+  const skipMenuFocusRestoreRef = useRef(false);
+  const uninstallCancelRef = useRef<HTMLButtonElement>(null);
   const panelComponents = appPackage.components.filter((component) => component.kind === 'panel');
   const serviceCount = appPackage.components.length - panelComponents.length;
   const rollbackVersions = appPackage.installedVersions.filter(
@@ -160,7 +166,16 @@ export function AppPackageCard({
                   <MoreHorizontal className="h-4 w-4" />
                 </button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-52 rounded-xl p-1.5">
+              <PopoverContent
+                align="end"
+                className="w-52 rounded-xl p-1.5"
+                onCloseAutoFocus={(event) => {
+                  if (skipMenuFocusRestoreRef.current) {
+                    event.preventDefault();
+                    skipMenuFocusRestoreRef.current = false;
+                  }
+                }}
+              >
                 <AppPackageMenuItem
                   icon={RefreshCw}
                   label={t('appPackagesCheckUpdate')}
@@ -185,7 +200,9 @@ export function AppPackageCard({
                   icon={Trash2}
                   label={t('appPackagesUninstall')}
                   onClick={() => {
+                    skipMenuFocusRestoreRef.current = true;
                     setMenuOpen(false);
+                    setPurgeData(false);
                     setUninstallOpen(true);
                   }}
                 />
@@ -239,19 +256,25 @@ export function AppPackageCard({
       ) : null}
 
       <Dialog open={uninstallOpen} onOpenChange={setUninstallOpen}>
-        <DialogContent className="max-w-md [&>:last-child]:hidden">
+        <DialogContent
+          className="max-w-md [&>:last-child]:hidden"
+          onOpenAutoFocus={(event) => {
+            event.preventDefault();
+            uninstallCancelRef.current?.focus();
+          }}
+        >
           <DialogHeader>
             <DialogTitle>{t('appPackagesUninstallTitle')}</DialogTitle>
             <DialogDescription>{t('appPackagesUninstallDescription')}</DialogDescription>
           </DialogHeader>
           <div className="mt-4 grid gap-2">
-            <DataChoice
+            <AppDataRemovalChoice
               checked={!purgeData}
               description={t('appPackagesKeepDataDescription')}
               label={t('appPackagesKeepData')}
               onClick={() => setPurgeData(false)}
             />
-            <DataChoice
+            <AppDataRemovalChoice
               checked={purgeData}
               destructive
               description={t('appPackagesDeleteDataDescription')}
@@ -259,8 +282,20 @@ export function AppPackageCard({
               onClick={() => setPurgeData(true)}
             />
           </div>
+          <div className="mt-3">
+            <AppStorageUsageDetails
+              storage={appPackage.storage}
+              usage={appPackage.storageUsage}
+            />
+          </div>
           <DialogFooter className="mt-5 gap-2 sm:gap-0">
-            <Button type="button" variant="outline" onClick={() => setUninstallOpen(false)}>
+            <Button
+              ref={uninstallCancelRef}
+              autoFocus
+              type="button"
+              variant="outline"
+              onClick={() => setUninstallOpen(false)}
+            >
               {t('cancel')}
             </Button>
             <Button
@@ -303,50 +338,6 @@ function renderPrimaryActionLabel({
   return enabled ? t('appPackagesDisable') : t('appPackagesEnable');
 }
 
-function formatBytes(value: number): string {
-  if (value < 1024) return `${value} B`;
-  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
-  if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
-  return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-}
-
-function DataChoice({
-  checked,
-  description,
-  destructive = false,
-  label,
-  onClick,
-}: {
-  checked: boolean;
-  description: string;
-  destructive?: boolean;
-  label: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-pressed={checked}
-      onClick={onClick}
-      className={cn(
-        'flex items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-        checked ? 'border-foreground/25 bg-muted/55' : 'border-border/60 hover:bg-muted/35',
-      )}
-    >
-      <span className={cn(
-        'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border',
-        checked ? 'border-foreground bg-foreground text-background' : 'border-border',
-      )}>
-        {checked ? <Check className="h-2.5 w-2.5" /> : null}
-      </span>
-      <span>
-        <span className={cn('block text-sm font-medium', destructive ? 'text-destructive' : 'text-foreground')}>{label}</span>
-        <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">{description}</span>
-      </span>
-    </button>
-  );
-}
-
 function AppPackageMenuItem({
   destructive = false,
   icon: Icon,

package/src/features/apps/components/app-packages-panel.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, type FormEvent } from 'react';
+import { useMemo, useRef, useState, type FormEvent } from 'react';
 import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
@@ -6,6 +6,7 @@ import type { PanelAppEntryView } from '@/shared/lib/api';
 import { useAppPresenter } from '@/app/components/app-presenter-provider';
 import { AppMarketplaceDialog } from '@/features/apps/components/app-marketplace-dialog';
 import { AppPackageCard } from '@/features/apps/components/app-package-card';
+import { AppRetainedDataSection, useAppData } from '@/features/app-data';
 import {
   useAppPackageMutation,
   useAppPackageOperationSettlement,
@@ -38,12 +39,14 @@ export function AppPackagesPanel({
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const appPackages = useAppPackages();
+  const appData = useAppData();
   const appPackageOperations = useAppPackageOperations();
   const panelApps = usePanelApps();
   const lifecycle = useAppPackageMutation();
   const recordOpened = useRecordPanelAppOpened();
   const grantClient = useGrantPanelAppClient();
   const presenter = useAppPresenter();
+  const libraryTitleRef = useRef<HTMLHeadingElement>(null);
   const [installOpen, setInstallOpen] = useState(false);
   const [installSource, setInstallSource] = useState('');
   const [marketplaceOpen, setMarketplaceOpen] = useState(false);
@@ -101,6 +104,7 @@ export function AppPackagesPanel({
     void appPackages.refetch();
     void appPackageOperations.refetch();
     void panelApps.refetch();
+    void appData.refetch();
   };
 
   return (
@@ -144,7 +148,13 @@ export function AppPackagesPanel({
       <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto">
         <div className="mx-auto w-full max-w-3xl p-3 sm:p-5">
           <div className="mb-4 px-1">
-            <h1 className="text-base font-semibold tracking-tight text-foreground">{t('appPackagesLibraryTitle')}</h1>
+            <h1
+              ref={libraryTitleRef}
+              tabIndex={-1}
+              className="text-base font-semibold tracking-tight text-foreground"
+            >
+              {t('appPackagesLibraryTitle')}
+            </h1>
             <p className="mt-1 text-xs leading-5 text-muted-foreground">
               {t('appPackagesLibraryDescription')}
             </p>
@@ -170,6 +180,13 @@ export function AppPackagesPanel({
             onMutate={runMutation}
             onOpenPanelApp={(entry) => void openPanelApp(entry)}
           />
+          <AppRetainedDataSection
+            diagnostics={appData.data?.diagnostics ?? []}
+            entries={appData.data?.entries ?? []}
+            error={appData.error}
+            isLoading={appData.isLoading}
+            onDeletionFocusReturn={() => libraryTitleRef.current?.focus()}
+          />
         </div>
       </div>
 

package/src/features/apps/hooks/use-app-packages.ts

@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import type { AppPackageOperationStatus, AppPackageOperationView } from '@nextclaw/client-sdk';
 import { nextclawClient } from '@/shared/lib/api';
 import type { AppPackageOperationSettlementManager } from '@/features/apps/managers/app-package-operation-settlement.manager';
+import { APP_DATA_QUERY_KEY } from '@/features/app-data';
 
 const APP_PACKAGES_QUERY_KEY = ['app-packages'] as const;
 const PANEL_APPS_QUERY_KEY = ['panel-apps'] as const;
@@ -108,6 +109,7 @@ export function useAppPackageMutation() {
         queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: APP_PACKAGE_OPERATIONS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: APP_DATA_QUERY_KEY }),
       ]);
     },
   });

package/src/features/service-apps/components/__tests__/service-apps-panel.test.tsx

@@ -8,13 +8,59 @@ const discoverServiceAppActionsMutateAsync = vi.fn(async () => ({ actions: [] })
 const refetchServiceActions = vi.fn();
 const refetchServiceActionGrants = vi.fn();
 const refetchServiceApps = vi.fn();
+const refetchAppData = vi.fn();
 const restartServiceAppMutate = vi.fn();
 const revokeServiceActionGrantMutate = vi.fn();
+const resetDeleteServiceApp = vi.fn();
+
+vi.mock('@/features/app-data/hooks/use-app-data', () => ({
+  useAppData: () => ({
+    data: {
+      entries: [{
+        id: 'ad1.workspace-notes',
+        appId: 'notes',
+        instanceId: 'default',
+        displayName: 'Notes',
+        source: 'workspace-service',
+        lifecycle: 'active',
+        storage: {
+          layout: 'instance-v1',
+          layoutVersion: 1,
+          instanceId: 'default',
+          instanceDirectory: '/workspace/.nextclaw/app-instances/notes/default',
+          dataDirectory: '/workspace/.nextclaw/app-instances/notes/default/data',
+          configDirectory: '/workspace/.nextclaw/app-instances/notes/default/config',
+          stateDirectory: '/workspace/.nextclaw/app-instances/notes/default/state',
+          cacheDirectory: '/workspace/.nextclaw/app-instances/notes/default/cache',
+          temporaryDirectory: '/workspace/.nextclaw/app-instances/notes/default/tmp',
+          logsDirectory: '/workspace/.nextclaw/app-instances/notes/default/logs',
+        },
+        usage: {
+          dataBytes: 12,
+          configBytes: 0,
+          stateBytes: 0,
+          cacheBytes: 0,
+          temporaryBytes: 0,
+          logsBytes: 0,
+          totalBytes: 12,
+        },
+        createdAt: '2026-08-14T00:00:00.000Z',
+        actions: { deleteRetainedData: false },
+      }],
+      diagnostics: [],
+    },
+    error: null,
+    isLoading: false,
+    refetch: refetchAppData,
+  }),
+}));
 
 vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
   useDeleteServiceApp: () => ({
+    error: null,
     isPending: false,
     mutate: deleteServiceAppMutate,
+    reset: resetDeleteServiceApp,
   }),
   useDiscoverServiceAppActions: () => ({
     isPending: false,
@@ -82,8 +128,19 @@ describe('ServiceAppsPanel', () => {
     fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
     expect((screen.getByRole('button', { name: 'Disconnect runtime' }) as HTMLButtonElement).disabled).toBe(true);
     fireEvent.click(screen.getByRole('button', { name: 'Delete service app' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await waitFor(() => {
+      expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Cancel' }));
+    });
+    expect(resetDeleteServiceApp).toHaveBeenCalled();
+    expect(screen.getByText('Total app data')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Keep personal data/ }).getAttribute('aria-pressed'))
+      .toBe('true');
+    const deleteButtons = screen.getAllByRole('button', { name: 'Delete service app' });
+    fireEvent.click(deleteButtons.at(-1)!);
 
-    expect(deleteServiceAppMutate).toHaveBeenCalledWith('notes');
+    expect(deleteServiceAppMutate).toHaveBeenCalledWith(
+      { appId: 'notes', purgeData: false },
+      { onSuccess: expect.any(Function) },
+    );
   });
 });

package/src/features/service-apps/components/service-app-delete-dialog.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef } from "react";
+import type { AppDataEntry } from "@nextclaw/client-sdk";
+import { LoaderCircle } from "lucide-react";
+import { AppDataRemovalChoice, AppStorageUsageDetails } from "@/features/app-data";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { t } from "@/shared/lib/i18n";
+
+export function ServiceAppDeleteDialog({
+  appId,
+  appTitle,
+  dataEntry,
+  dataLoading,
+  deleteError,
+  deletePending,
+  open,
+  purgeData,
+  onDelete,
+  onOpenChange,
+  onPurgeDataChange,
+}: {
+  appId: string;
+  appTitle: string;
+  dataEntry?: AppDataEntry;
+  dataLoading: boolean;
+  deleteError: unknown;
+  deletePending: boolean;
+  open: boolean;
+  purgeData: boolean;
+  onDelete: (appId: string, purgeData: boolean, onSuccess: () => void) => void;
+  onOpenChange: (open: boolean) => void;
+  onPurgeDataChange: (purgeData: boolean) => void;
+}) {
+  const errorRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (deleteError) errorRef.current?.focus();
+  }, [deleteError]);
+
+  const close = () => onOpenChange(false);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => !deletePending && onOpenChange(nextOpen)}
+    >
+      <DialogContent
+        className="max-w-md [&>:last-child]:hidden"
+        onEscapeKeyDown={(event) => deletePending && event.preventDefault()}
+        onInteractOutside={(event) => deletePending && event.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>{t("serviceAppsDeleteConfirmTitle")}</DialogTitle>
+          <DialogDescription>
+            {t("serviceAppsDeleteConfirmDescription")} {appTitle}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4 grid gap-2">
+          <AppDataRemovalChoice
+            checked={!purgeData}
+            description={t("serviceAppsKeepDataDescription")}
+            label={t("appPackagesKeepData")}
+            onClick={() => onPurgeDataChange(false)}
+          />
+          <AppDataRemovalChoice
+            checked={purgeData}
+            destructive
+            disabled={!dataEntry || dataLoading}
+            description={t("serviceAppsDeleteDataDescription")}
+            label={t("appPackagesDeleteData")}
+            onClick={() => onPurgeDataChange(true)}
+          />
+        </div>
+        {dataEntry ? (
+          <div className="mt-3">
+            <AppStorageUsageDetails storage={dataEntry.storage} usage={dataEntry.usage} />
+          </div>
+        ) : (
+          <p role="status" className="mt-3 text-xs text-muted-foreground">
+            {dataLoading ? t("appPackagesLoading") : t("serviceAppsDataUnavailable")}
+          </p>
+        )}
+        {deleteError ? (
+          <p
+            ref={errorRef}
+            role="alert"
+            tabIndex={-1}
+            className="mt-3 text-xs text-destructive"
+          >
+            {deleteError instanceof Error ? deleteError.message : t("appPackagesActionFailed")}
+          </p>
+        ) : null}
+        <DialogFooter className="mt-5 gap-2 sm:gap-0">
+          <Button
+            autoFocus
+            type="button"
+            variant="outline"
+            disabled={deletePending}
+            onClick={close}
+          >
+            {t("cancel")}
+          </Button>
+          <Button
+            type="button"
+            variant={purgeData ? "destructive" : "default"}
+            disabled={deletePending || (purgeData && !dataEntry)}
+            onClick={() => onDelete(appId, purgeData, close)}
+          >
+            {deletePending ? <LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
+            {purgeData ? t("appDataDeletePermanently") : t("serviceAppsDelete")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}