@nextclaw/ui 0.15.29 → 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() },
@@ -65,6 +85,10 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
             packageId: 'nextclaw.personal-organizer',
             packageVersion: '0.1.0',
             sourcePath: '/tmp/app/todos.panel',
+            instanceId: 'default',
+            isolation: 'full-user',
+            runtimeProfile: 'native-process',
+            storage: createStorageFixture(),
             title: 'Todos',
           },
           {
@@ -75,6 +99,10 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
             packageId: 'nextclaw.personal-organizer',
             packageVersion: '0.1.0',
             sourcePath: '/tmp/app/data',
+            instanceId: 'default',
+            isolation: 'full-user',
+            runtimeProfile: 'native-process',
+            storage: createStorageFixture(),
             title: 'Personal data',
           },
         ],
@@ -83,8 +111,21 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
         enabled: mocks.enabled,
         id: 'nextclaw.personal-organizer',
         installedVersions: ['0.1.0'],
+        instanceId: 'default',
+        isolation: 'full-user',
         name: 'Personal Space',
         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,
+        },
       }],
     },
     error: null,
@@ -94,6 +135,21 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
   }),
 }));
 
+function createStorageFixture() {
+  return {
+    layout: 'instance-v1' as const,
+    layoutVersion: 1 as const,
+    instanceId: 'default',
+    instanceDirectory: '/tmp/instance',
+    dataDirectory: '/tmp/data',
+    configDirectory: '/tmp/config',
+    stateDirectory: '/tmp/state',
+    cacheDirectory: '/tmp/cache',
+    temporaryDirectory: '/tmp/tmp',
+    logsDirectory: '/tmp/logs',
+  };
+}
+
 vi.mock('@/features/apps/hooks/use-app-marketplace', () => ({
   useAppMarketplace: () => ({
     data: {
@@ -191,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);
   });
@@ -264,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(
@@ -274,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-marketplace-detail.tsx

@@ -1,5 +1,5 @@
 import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
-import { ExternalLink, FileText, Server, ShieldCheck, type LucideIcon } from 'lucide-react';
+import { ExternalLink, FileText, Server, ShieldAlert, ShieldCheck, type LucideIcon } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
 import { AppMarketplaceCover } from '@/features/apps/components/app-marketplace-cover';
 import {
@@ -46,6 +46,8 @@ export function MarketplaceDetail({
   const components = detail.manifest.components ?? [];
   const panelCount = components.filter((entry) => entry.kind === 'panel').length;
   const serviceCount = components.filter((entry) => entry.kind === 'service').length;
+  const runtimeProfile = detail.manifest.runtime?.profile
+    ?? (serviceCount > 0 ? 'native-process' : 'panel-only');
   const canUpdate = Boolean(
     installedPackage && installedPackage.activeVersion !== detail.latestVersion,
   );
@@ -97,6 +99,15 @@ export function MarketplaceDetail({
             value={detail.manifest.engines.nextclaw}
           />
         ) : null}
+        <DetailFact
+          icon={runtimeProfile === 'native-process' ? ShieldAlert : ShieldCheck}
+          label={t('appPackagesIsolationLabel')}
+          value={runtimeProfile === 'native-process'
+            ? t('appPackagesIsolationFullUser')
+            : runtimeProfile === 'wasi'
+              ? t('appPackagesIsolationMediated')
+              : t('appPackagesIsolationPanel')}
+        />
       </div>
 
       <section className="mt-7 border-t border-border/60 pt-6">
@@ -154,7 +165,13 @@ function readPermissionRows(detail: AppMarketplaceDetailView): string[] {
   if (detail.permissions.capabilities?.hostBridge) {
     rows.push(t('appPackagesHostBridgeAccess'));
   }
-  if (detail.permissions.storage?.namespace) {
+  if (detail.permissions.capabilities?.nativeProcess) {
+    rows.push(t('appPackagesNativeProcessAccess'));
+  }
+  if (detail.permissions.storage === true || (
+    typeof detail.permissions.storage === 'object' &&
+    detail.permissions.storage?.namespace
+  )) {
     rows.push(t('appPackagesLocalStorageAccess'));
   }
   return rows.length > 0 ? rows : [t('appPackagesNoExtraAccess')];

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,
@@ -15,9 +14,17 @@ import {
   Server,
   Trash2,
   LoaderCircle,
+  HardDrive,
+  ShieldAlert,
+  ShieldCheck,
   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';
@@ -60,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(
@@ -103,6 +112,31 @@ export function AppPackageCard({
                 {t('appPackagesLocalService')}
               </span>
             ) : null}
+            <span className={cn(
+              'inline-flex items-center gap-1',
+              appPackage.isolation === 'full-user' && 'text-amber-700 dark:text-amber-300',
+            )}>
+              {appPackage.isolation === 'full-user'
+                ? <ShieldAlert className="h-3 w-3" />
+                : <ShieldCheck className="h-3 w-3" />}
+              {appPackage.isolation === 'full-user'
+                ? t('appPackagesIsolationFullUser')
+                : appPackage.isolation === 'host-mediated'
+                  ? t('appPackagesIsolationMediated')
+                  : t('appPackagesIsolationPanel')}
+            </span>
+          </div>
+          <div
+            className="mt-2 flex min-w-0 items-center gap-1.5 rounded-md bg-muted/35 px-2 py-1 text-[10px] text-muted-foreground"
+            title={appPackage.storage.dataDirectory}
+          >
+            <HardDrive className="h-3 w-3 shrink-0" />
+            <span className="shrink-0">
+              {t('appPackagesDataUsage')} {formatBytes(appPackage.storageUsage.totalBytes)}
+            </span>
+            <code className="min-w-0 truncate font-mono text-[10px]">
+              {appPackage.storage.dataDirectory}
+            </code>
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-1">
@@ -132,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')}
@@ -157,7 +200,9 @@ export function AppPackageCard({
                   icon={Trash2}
                   label={t('appPackagesUninstall')}
                   onClick={() => {
+                    skipMenuFocusRestoreRef.current = true;
                     setMenuOpen(false);
+                    setPurgeData(false);
                     setUninstallOpen(true);
                   }}
                 />
@@ -211,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')}
@@ -231,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
@@ -275,43 +338,6 @@ function renderPrimaryActionLabel({
   return enabled ? t('appPackagesDisable') : t('appPackagesEnable');
 }
 
-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/apps/types/app-marketplace.types.ts

@@ -48,6 +48,7 @@ export type AppMarketplaceDetailView = AppMarketplaceItemView & {
     schemaVersion: 1 | 2;
     icon?: string;
     engines?: { nextclaw?: string };
+    runtime?: { profile: 'panel-only' | 'wasi' | 'native-process' };
     components?: Array<{
       kind: 'panel' | 'service';
       path: string;
@@ -60,8 +61,8 @@ export type AppMarketplaceDetailView = AppMarketplaceItemView & {
       description?: string;
     }>;
     allowedDomains?: string[];
-    storage?: { namespace?: string };
-    capabilities?: { hostBridge?: boolean };
+    storage?: boolean | { namespace?: string };
+    capabilities?: { hostBridge?: boolean; nativeProcess?: boolean };
   };
 };