@nextclaw/ui 0.16.0 → 0.17.1

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

@@ -1,11 +1,12 @@
-import { useMemo, useState, type FormEvent } from 'react';
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
+import type { AppDataEntry, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
 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,
@@ -33,17 +34,21 @@ import { Skeleton } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppPackagesPanel({
+  focusedPackageId,
   onOpenPanelApp,
 }: {
+  focusedPackageId?: string;
   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);
@@ -53,11 +58,19 @@ export function AppPackagesPanel({
     [appPackageOperations.data?.entries],
   );
 
+  useEffect(() => {
+    if (!focusedPackageId || appPackages.isLoading) return;
+    const target = document.getElementById(`app-package-${focusedPackageId}`);
+    target?.scrollIntoView({ block: 'nearest' });
+    target?.focus({ preventScroll: true });
+  }, [appPackages.data, appPackages.isLoading, focusedPackageId]);
+
   useAppPackageOperationSettlement({
     isLoaded: Boolean(appPackageOperations.data),
     operations,
     refetchPackages: appPackages.refetch,
     refetchPanels: panelApps.refetch,
+    refetchAppData: appData.refetch,
     settlementManager: presenter.appPackageOperationSettlementManager,
   });
 
@@ -101,6 +114,7 @@ export function AppPackagesPanel({
     void appPackages.refetch();
     void appPackageOperations.refetch();
     void panelApps.refetch();
+    void appData.refetch();
   };
 
   return (
@@ -144,7 +158,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>
@@ -157,7 +177,11 @@ export function AppPackagesPanel({
           ) : null}
 
           <AppPackageLibrary
+            appDataEntries={appData.data?.entries ?? []}
+            appDataLoading={appData.isLoading}
+            appDataUnavailable={appData.isError}
             error={getPackageLoadError(appPackages.error, panelApps.error)}
+            focusedPackageId={focusedPackageId}
             isLoading={appPackages.isLoading || panelApps.isLoading}
             isPending={lifecycle.isPending}
             mutationAppId={'appId' in (lifecycle.variables ?? {})
@@ -170,6 +194,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>
 
@@ -232,7 +263,11 @@ export function AppPackagesPanel({
 }
 
 function AppPackageLibrary({
+  appDataEntries,
+  appDataLoading,
+  appDataUnavailable,
   error,
+  focusedPackageId,
   isLoading,
   isPending,
   mutationAppId,
@@ -243,7 +278,11 @@ function AppPackageLibrary({
   panelApps,
   operations,
 }: {
+  appDataEntries: AppDataEntry[];
+  appDataLoading: boolean;
+  appDataUnavailable: boolean;
   error?: string;
+  focusedPackageId?: string;
   isLoading: boolean;
   isPending: boolean;
   mutationAppId?: string;
@@ -310,27 +349,43 @@ function AppPackageLibrary({
           : undefined;
 
         return (
-          <AppPackageCard
+          <section
             key={appPackage.id}
-            appPackage={appPackage}
-            panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
-            isPending={isPending && mutationAppId === appPackage.id}
-            operation={visibleOperation}
-            onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
-            onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
-            onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
-            onRollback={(version) => onMutate({
-              action: 'rollback',
-              appId: appPackage.id,
-              version,
-            })}
-            onUninstall={(purgeData) => onMutate({
-              action: 'uninstall',
-              appId: appPackage.id,
-              purgeData,
-            })}
-            onOpenPanelApp={onOpenPanelApp}
-          />
+            id={`app-package-${appPackage.id}`}
+            aria-label={appPackage.name}
+            tabIndex={-1}
+            className={focusedPackageId === appPackage.id
+              ? 'rounded-xl outline-none ring-2 ring-primary/35 ring-offset-2 ring-offset-background'
+              : 'rounded-xl outline-none'}
+          >
+            <AppPackageCard
+              appPackage={appPackage}
+              storageUsage={appDataEntries.find((entry) =>
+                entry.source === 'package' &&
+                entry.lifecycle === 'active' &&
+                entry.appId === appPackage.id &&
+                entry.instanceId === appPackage.instanceId)?.usage ?? appPackage.storageUsage}
+              storageUsageLoading={appDataLoading}
+              storageUsageUnavailable={appDataUnavailable}
+              panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
+              isPending={isPending && mutationAppId === appPackage.id}
+              operation={visibleOperation}
+              onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
+              onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
+              onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
+              onRollback={(version) => onMutate({
+                action: 'rollback',
+                appId: appPackage.id,
+                version,
+              })}
+              onUninstall={(purgeData) => onMutate({
+                action: 'uninstall',
+                appId: appPackage.id,
+                purgeData,
+              })}
+              onOpenPanelApp={onOpenPanelApp}
+            />
+          </section>
         );
       })}
     </div>

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { AppWindow, Boxes, Server } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
@@ -17,10 +18,20 @@ export function AppsPanel({
   onActiveTabChange: (tab: AppsPanelTab) => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
+  const [focusedPackageId, setFocusedPackageId] = useState<string>();
+  const changeTab = (tab: AppsPanelTab) => {
+    setFocusedPackageId(undefined);
+    onActiveTabChange(tab);
+  };
+  const managePackage = (packageId: string) => {
+    setFocusedPackageId(packageId);
+    onActiveTabChange('apps');
+  };
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
       <nav className="shrink-0 border-b border-border/70 px-4 py-3" aria-label={t('appsTitle')}>
-        <Tabs value={activeTab} onValueChange={(value) => onActiveTabChange(value as AppsPanelTab)}>
+        <Tabs value={activeTab} onValueChange={(value) => changeTab(value as AppsPanelTab)}>
           <TabsList className="grid h-auto w-full max-w-[390px] grid-cols-3 rounded-lg bg-muted/70 p-0.5">
             <TabsTrigger value="apps" className="min-w-0 gap-1.5 px-2 py-1.5 text-xs">
               <Boxes className="h-3.5 w-3.5 shrink-0" />
@@ -39,11 +50,11 @@ export function AppsPanel({
       </nav>
       <div className="min-h-0 flex-1">
         {activeTab === 'apps' ? (
-          <AppPackagesPanel onOpenPanelApp={onOpenPanelApp} />
+          <AppPackagesPanel focusedPackageId={focusedPackageId} onOpenPanelApp={onOpenPanelApp} />
         ) : activeTab === 'panel-apps' ? (
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
         ) : (
-          <ServiceAppsPanel />
+          <ServiceAppsPanel onManagePackage={managePackage} />
         )}
       </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;
@@ -30,7 +31,7 @@ export type AppPackageMutationInput =
 export function useAppPackages() {
   return useQuery({
     queryKey: APP_PACKAGES_QUERY_KEY,
-    queryFn: () => nextclawClient.appPackages.list(),
+    queryFn: () => nextclawClient.appPackages.list({ includeStorageUsage: false }),
     staleTime: 0,
   });
 }
@@ -56,6 +57,7 @@ export function useAppPackageOperationSettlement({
   operations,
   refetchPackages,
   refetchPanels,
+  refetchAppData,
   settlementManager,
 }: {
   isLoaded: boolean;
@@ -64,6 +66,7 @@ export function useAppPackageOperationSettlement({
   refetchPanels: () => Promise<{
     data?: { entries: Array<{ id: string; packageId?: string }> };
   }>;
+  refetchAppData: () => Promise<unknown>;
   settlementManager: AppPackageOperationSettlementManager;
 }) {
   useEffect(() => {
@@ -72,8 +75,9 @@ export function useAppPackageOperationSettlement({
       operations,
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
-  }, [isLoaded, operations, refetchPackages, refetchPanels, settlementManager]);
+  }, [isLoaded, operations, refetchPackages, refetchPanels, refetchAppData, settlementManager]);
 }
 
 export function useAppPackageMutation() {
@@ -108,6 +112,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/apps/managers/__tests__/app-package-operation-settlement.manager.test.ts

@@ -36,6 +36,7 @@ describe('AppPackageOperationSettlementManager', () => {
   it('ignores historical terminal operations and settles each new operation once', async () => {
     const reloadByDedupeKeys = vi.fn();
     const refetchPackages = vi.fn(async () => undefined);
+    const refetchAppData = vi.fn(async () => undefined);
     const refetchPanels = vi.fn(async () => ({
       data: {
         entries: [
@@ -54,6 +55,7 @@ describe('AppPackageOperationSettlementManager', () => {
       operations: [historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
     expect(mocks.success).not.toHaveBeenCalled();
 
@@ -63,17 +65,20 @@ describe('AppPackageOperationSettlementManager', () => {
       operations: [completed, historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
     manager.settle({
       isLoaded: true,
       operations: [completed, historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
 
     await vi.waitFor(() => {
       expect(refetchPackages).toHaveBeenCalledTimes(1);
       expect(refetchPanels).toHaveBeenCalledTimes(1);
+      expect(refetchAppData).toHaveBeenCalledTimes(1);
       expect(reloadByDedupeKeys).toHaveBeenCalledWith(['panel-app:todos']);
     });
     expect(mocks.success).toHaveBeenCalledTimes(1);

package/src/features/apps/managers/app-package-operation-settlement.manager.ts

@@ -19,11 +19,13 @@ export class AppPackageOperationSettlementManager {
     operations,
     refetchPackages,
     refetchPanels,
+    refetchAppData,
   }: {
     isLoaded: boolean;
     operations: AppPackageOperationView[];
     refetchPackages: () => Promise<unknown>;
     refetchPanels: RefetchPanels;
+    refetchAppData: () => Promise<unknown>;
   }): void => {
     if (!isLoaded) return;
     const terminal = operations.filter(
@@ -37,7 +39,7 @@ export class AppPackageOperationSettlementManager {
     terminal.forEach((operation) => {
       if (this.knownTerminalOperationIds.has(operation.id)) return;
       this.knownTerminalOperationIds.add(operation.id);
-      this.settleOperation(operation, refetchPackages, refetchPanels);
+      this.settleOperation(operation, refetchPackages, refetchPanels, refetchAppData);
     });
   };
 
@@ -45,10 +47,13 @@ export class AppPackageOperationSettlementManager {
     operation: AppPackageOperationView,
     refetchPackages: () => Promise<unknown>,
     refetchPanels: RefetchPanels,
+    refetchAppData: () => Promise<unknown>,
   ): void => {
     if (operation.status === 'succeeded') {
       toast.success(operationSuccessLabel(operation));
-      void Promise.all([refetchPackages(), refetchPanels()]).then(([, panelsResult]) => {
+      void refetchPackages();
+      void refetchAppData();
+      void refetchPanels().then((panelsResult) => {
         if (operation.action !== 'rollback' && operation.action !== 'update') return;
         this.docBrowserManager.reloadByDedupeKeys(
           panelsResult.data?.entries
@@ -61,6 +66,7 @@ export class AppPackageOperationSettlementManager {
     if (operation.status === 'failed' || operation.status === 'interrupted') {
       void refetchPackages();
       void refetchPanels();
+      void refetchAppData();
       toast.error(operation.error ?? t('appPackagesActionFailed'));
     }
   };

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,
@@ -49,9 +95,24 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
         id: 'notes',
         manifestPath: '/workspace/service-apps/notes/service-app.json',
         protocol: 'mcp',
+        sourceKind: 'workspace',
         status: 'idle',
         title: 'Notes',
+      }, {
+        args: ['server.mjs'],
+        command: 'node',
+        cwd: '/apps/personal-organizer/service',
+        dirPath: '/apps/personal-organizer/service',
+        enabled: true,
+        id: 'organizer-service',
+        manifestPath: '/apps/personal-organizer/service/service-app.json',
+        packageId: 'nextclaw.personal-organizer',
+        protocol: 'mcp',
+        sourceKind: 'package',
+        status: 'idle',
+        title: 'Organizer Service',
       }],
+      diagnostics: [],
       serviceAppsPath: '/workspace/service-apps',
       workspacePath: '/workspace',
     },
@@ -65,11 +126,13 @@ describe('ServiceAppsPanel', () => {
   it('keeps service actions progressive and deletes through a confirm dialog', async () => {
     const user = userEvent.setup();
 
-    render(<ServiceAppsPanel />);
+    render(<ServiceAppsPanel onManagePackage={vi.fn()} />);
 
-    expect(screen.getByText('Not connected')).toBeTruthy();
+    expect(screen.getAllByText('Not connected')).toHaveLength(2);
     expect(screen.queryByText('idle')).toBeNull();
-    const discoverButton = screen.getByRole('button', { name: 'Connect and discover actions' });
+    const discoverButton = screen.getAllByRole('button', {
+      name: 'Connect and discover actions',
+    })[0]!;
     expect(discoverButton).toBeTruthy();
     await user.hover(discoverButton);
     await waitFor(() => {
@@ -79,11 +142,33 @@ describe('ServiceAppsPanel', () => {
     await user.click(discoverButton);
     expect(discoverServiceAppActionsMutateAsync).toHaveBeenCalledWith('notes');
 
-    fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    fireEvent.click(screen.getAllByRole('button', { name: 'More actions' })[0]!);
     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(
+      { appId: 'notes', purgeData: false },
+      { onSuccess: expect.any(Function) },
+    );
+  });
+
+  it('routes package-managed services back to Apps without offering standalone deletion', () => {
+    const onManagePackage = vi.fn();
+    render(<ServiceAppsPanel onManagePackage={onManagePackage} />);
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'More actions' })[1]!);
+    expect(screen.queryByRole('button', { name: 'Delete service app' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Manage in Apps' }));
 
-    expect(deleteServiceAppMutate).toHaveBeenCalledWith('notes');
+    expect(onManagePackage).toHaveBeenCalledWith('nextclaw.personal-organizer');
   });
 });

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>
+  );
+}