@nextclaw/ui 0.16.0 → 0.17.1

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,11 +1,13 @@
-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';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
 
 const mocks = vi.hoisted(() => ({
+  appDataError: false,
   enabled: false,
+  includePackageStorageUsage: true,
   grantClient: vi.fn(),
   lifecycleMutate: vi.fn(),
   lifecycleReset: vi.fn(),
@@ -15,9 +17,30 @@ 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: mocks.appDataError ? new Error('App data unavailable') : null,
+    isError: mocks.appDataError,
+    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() },
@@ -97,15 +120,7 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
         primaryPanelId: 'nextclaw-personal-organizer-todos',
         runtimeProfile: 'native-process',
         storage: createStorageFixture(),
-        storageUsage: {
-          dataBytes: 128,
-          configBytes: 0,
-          stateBytes: 0,
-          cacheBytes: 0,
-          temporaryBytes: 0,
-          logsBytes: 0,
-          totalBytes: 128,
-        },
+        storageUsage: mocks.includePackageStorageUsage ? createUsageFixture() : undefined,
       }],
     },
     error: null,
@@ -130,6 +145,18 @@ function createStorageFixture() {
   };
 }
 
+function createUsageFixture() {
+  return {
+    dataBytes: 128,
+    configBytes: 3,
+    stateBytes: 2,
+    cacheBytes: 1,
+    temporaryBytes: 0,
+    logsBytes: 4,
+    totalBytes: 138,
+  };
+}
+
 vi.mock('@/features/apps/hooks/use-app-marketplace', () => ({
   useAppMarketplace: () => ({
     data: {
@@ -217,7 +244,9 @@ vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
 
 describe('AppPackagesPanel', () => {
   beforeEach(() => {
+    mocks.appDataError = false;
     mocks.enabled = false;
+    mocks.includePackageStorageUsage = true;
     mocks.grantClient.mockReset();
     mocks.lifecycleMutate.mockReset();
     mocks.lifecycleReset.mockReset();
@@ -227,6 +256,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);
   });
@@ -248,6 +281,30 @@ describe('AppPackagesPanel', () => {
     );
   });
 
+  it('scrolls and transfers focus to a package selected from Service Apps', async () => {
+    render(
+      <AppPackagesPanel
+        focusedPackageId="nextclaw.personal-organizer"
+        onOpenPanelApp={mocks.onOpen}
+      />,
+    );
+
+    const packageCard = screen.getByRole('region', { name: 'Personal Space' });
+    await waitFor(() => expect(document.activeElement).toBe(packageCard));
+    expect(packageCard.className).toContain('ring-2');
+  });
+
+  it('distinguishes an untouched app from an App Data query failure', () => {
+    mocks.includePackageStorageUsage = false;
+    const view = render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+    expect(screen.getByTitle('/tmp/data').textContent).toContain('No data yet');
+
+    mocks.appDataError = true;
+    view.rerender(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+
+    expect(screen.getByTitle('/tmp/data').textContent).toContain('Size unavailable');
+  });
+
   it('opens an enabled package panel through the existing panel app chain', async () => {
     const user = userEvent.setup();
     mocks.enabled = true;
@@ -300,8 +357,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 +372,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/__tests__/apps-panel.test.tsx

@@ -6,13 +6,19 @@ import { AppsPanel, type AppsPanelTab } from '@/features/apps/components/apps-pa
 
 vi.mock('@/shared/lib/i18n', () => ({ t: (key: string) => key }));
 vi.mock('@/features/apps/components/app-packages-panel', () => ({
-  AppPackagesPanel: () => <div>packages-content</div>,
+  AppPackagesPanel: ({ focusedPackageId }: { focusedPackageId?: string }) => (
+    <div>packages-content:{focusedPackageId ?? 'none'}</div>
+  ),
 }));
 vi.mock('@/features/panel-apps', () => ({
   PanelAppsList: () => <div>panel-apps-content</div>,
 }));
 vi.mock('@/features/service-apps', () => ({
-  ServiceAppsPanel: () => <div>service-apps-content</div>,
+  ServiceAppsPanel: ({ onManagePackage }: { onManagePackage: (packageId: string) => void }) => (
+    <button type="button" onClick={() => onManagePackage('nextclaw.personal-organizer')}>
+      service-apps-content
+    </button>
+  ),
 }));
 
 function AppsPanelHarness() {
@@ -55,4 +61,14 @@ describe('AppsPanel', () => {
     expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'panelAppsTitle' }));
     expect(screen.getByText('panel-apps-content')).toBeTruthy();
   });
+
+  it('focuses the owning package when routing from a package-managed service', async () => {
+    const user = userEvent.setup();
+    render(<AppsPanelHarness />);
+
+    await user.click(screen.getByRole('tab', { name: 'serviceAppsTitle' }));
+    await user.click(screen.getByRole('button', { name: 'service-apps-content' }));
+
+    expect(screen.getByText('packages-content:nextclaw.personal-organizer')).toBeTruthy();
+  });
 });

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

@@ -1,11 +1,14 @@
-import { useState } from 'react';
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import { useRef, useState } from 'react';
+import type {
+  AppDataEntry,
+  AppPackageOperationView,
+  AppPackageView,
+} from '@nextclaw/client-sdk';
 import {
   AlertCircle,
   AppWindow,
   Bookmark,
   CalendarDays,
-  Check,
   CheckSquare2,
   ChevronRight,
   MoreHorizontal,
@@ -21,6 +24,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';
@@ -48,6 +56,9 @@ export function AppPackageCard({
   onUninstall,
   onUpdate,
   panelApps,
+  storageUsage,
+  storageUsageLoading,
+  storageUsageUnavailable,
 }: {
   appPackage: AppPackageView;
   isPending: boolean;
@@ -59,10 +70,15 @@ export function AppPackageCard({
   onUninstall: (purgeData: boolean) => void;
   onUpdate: () => void;
   panelApps: PanelAppEntryView[];
+  storageUsage?: AppDataEntry['usage'];
+  storageUsageLoading: boolean;
+  storageUsageUnavailable: boolean;
 }) {
   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(
@@ -75,6 +91,11 @@ export function AppPackageCard({
   );
   const operationActive = operation ? isAppPackageOperationActive(operation.status) : false;
   const pending = isPending || operationActive;
+  const storageUsageLabel = resolveStorageUsageLabel(
+    storageUsage,
+    storageUsageLoading,
+    storageUsageUnavailable,
+  );
 
   return (
     <Card surface="flat" hover={false} className="overflow-hidden border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.025)]">
@@ -126,7 +147,8 @@ export function AppPackageCard({
           >
             <HardDrive className="h-3 w-3 shrink-0" />
             <span className="shrink-0">
-              {t('appPackagesDataUsage')} {formatBytes(appPackage.storageUsage.totalBytes)}
+              {t('appPackagesDataUsage')}{' '}
+              {storageUsageLabel}
             </span>
             <code className="min-w-0 truncate font-mono text-[10px]">
               {appPackage.storage.dataDirectory}
@@ -160,7 +182,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 +216,9 @@ export function AppPackageCard({
                   icon={Trash2}
                   label={t('appPackagesUninstall')}
                   onClick={() => {
+                    skipMenuFocusRestoreRef.current = true;
                     setMenuOpen(false);
+                    setPurgeData(false);
                     setUninstallOpen(true);
                   }}
                 />
@@ -239,19 +272,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 +298,22 @@ export function AppPackageCard({
               onClick={() => setPurgeData(true)}
             />
           </div>
+          <div className="mt-3">
+            <AppPackageStorageUsage
+              loading={storageUsageLoading}
+              storage={appPackage.storage}
+              usage={storageUsage}
+              unavailable={storageUsageUnavailable}
+            />
+          </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
@@ -280,6 +333,42 @@ export function AppPackageCard({
   );
 }
 
+function AppPackageStorageUsage({
+  loading,
+  storage,
+  unavailable,
+  usage,
+}: {
+  loading: boolean;
+  storage: AppPackageView['storage'];
+  unavailable: boolean;
+  usage?: AppDataEntry['usage'];
+}) {
+  if (usage) {
+    return <AppStorageUsageDetails storage={storage} usage={usage} />;
+  }
+  return (
+    <div className="rounded-xl bg-muted/45 px-3 py-3 text-xs text-muted-foreground">
+      {loading ? (
+        <LoaderCircle className="mr-1.5 inline h-3.5 w-3.5 animate-spin" />
+      ) : null}
+      {t(loading
+        ? 'appPackagesLoading'
+        : unavailable ? 'appPackagesDataUsageUnavailable' : 'appPackagesNoDataYet')}
+    </div>
+  );
+}
+
+function resolveStorageUsageLabel(
+  usage: AppDataEntry['usage'] | undefined,
+  loading: boolean,
+  unavailable: boolean,
+): string {
+  if (usage) return formatBytes(usage.totalBytes);
+  if (loading) return t('appPackagesLoading');
+  return t(unavailable ? 'appPackagesDataUsageUnavailable' : 'appPackagesNoDataYet');
+}
+
 function renderPrimaryActionLabel({
   enabled,
   isPending,
@@ -303,50 +392,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,