@nextclaw/ui 0.15.29 → 0.17.0

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

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type {
   ServiceActionGrantView,
   ServiceActionListView,
+  AppDataEntry,
   ServiceAppRecordView,
 } from "@nextclaw/client-sdk";
 import {
@@ -20,7 +21,7 @@ import {
   type LucideIcon,
   Wrench,
 } from "lucide-react";
-import { ConfirmDialog } from "@/shared/components/ui/confirm-dialog";
+import { ServiceAppDeleteDialog } from "@/features/service-apps/components/service-app-delete-dialog";
 import {
   Popover,
   PopoverContent,
@@ -44,10 +45,14 @@ export function ServiceAppListItem({
   actionsOpen,
   grants,
   deletePending,
+  deleteError,
+  dataEntry,
+  dataLoading,
   isDiscovering,
   onActionsOpenChange,
   onDiscover,
   onDelete,
+  onResetDelete,
   onRestart,
   onRevoke,
 }: {
@@ -56,16 +61,21 @@ export function ServiceAppListItem({
   actionsOpen: boolean;
   grants: ServiceActionGrantView[];
   deletePending: boolean;
+  deleteError: unknown;
+  dataEntry?: AppDataEntry;
+  dataLoading: boolean;
   isDiscovering: boolean;
   onActionsOpenChange: (open: boolean) => void;
   onDiscover: (appId: string) => void;
-  onDelete: (appId: string) => void;
+  onDelete: (appId: string, purgeData: boolean, onSuccess: () => void) => void;
+  onResetDelete: () => void;
   onRestart: (appId: string) => void;
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDiagnosticsOpen, setIsDiagnosticsOpen] = useState(false);
+  const [purgeData, setPurgeData] = useState(false);
   const canConnectAndDiscover =
     app.status !== "starting" && app.status !== "stopped";
   const canDisconnectRuntime =
@@ -73,6 +83,8 @@ export function ServiceAppListItem({
   const diagnostics = getServiceAppDiagnostics(app);
   const openDeleteDialog = () => {
     setIsMenuOpen(false);
+    setPurgeData(false);
+    onResetDelete();
     setIsDeleteDialogOpen(true);
   };
 
@@ -233,15 +245,18 @@ export function ServiceAppListItem({
           ) : null}
         </div>
 
-        <ConfirmDialog
+        <ServiceAppDeleteDialog
+          appId={app.id}
+          appTitle={app.title}
+          dataEntry={dataEntry}
+          dataLoading={dataLoading}
+          deleteError={deleteError}
+          deletePending={deletePending}
           open={isDeleteDialogOpen}
+          purgeData={purgeData}
+          onDelete={onDelete}
           onOpenChange={setIsDeleteDialogOpen}
-          title={t("serviceAppsDeleteConfirmTitle")}
-          description={`${t("serviceAppsDeleteConfirmDescription")} ${app.title}`}
-          confirmLabel={t("delete")}
-          variant="destructive"
-          onConfirm={() => onDelete(app.id)}
-          onCancel={() => undefined}
+          onPurgeDataChange={setPurgeData}
         />
       </section>
     </TooltipProvider>

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

@@ -2,9 +2,11 @@ import { useState } from "react";
 import type {
   ServiceActionGrantView,
   ServiceActionListView,
+  AppDataEntry,
   ServiceAppRecordView,
 } from "@nextclaw/client-sdk";
 import { RefreshCw, Server } from "lucide-react";
+import { useAppData } from "@/features/app-data";
 import { ServiceAppListItem } from "@/features/service-apps/components/service-app-list-item";
 import {
   useDeleteServiceApp,
@@ -27,6 +29,7 @@ type ServiceActionView = ServiceActionListView["actions"][number];
 
 export function ServiceAppsPanel() {
   const serviceApps = useServiceApps();
+  const appData = useAppData();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
   const deleteServiceApp = useDeleteServiceApp();
@@ -44,6 +47,7 @@ export function ServiceAppsPanel() {
     void serviceApps.refetch();
     void serviceActions.refetch();
     void serviceActionGrants.refetch();
+    void appData.refetch();
   };
 
   if (
@@ -85,6 +89,9 @@ export function ServiceAppsPanel() {
       setExpandedActionsByApp((current) => ({ ...current, [appId]: true }));
     });
   };
+  const workspaceDataEntries = (appData.data?.entries ?? [])
+    .filter((entry): entry is AppDataEntry =>
+      entry.source === "workspace-service" && entry.lifecycle === "active");
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
@@ -136,6 +143,9 @@ export function ServiceAppsPanel() {
                 actionsOpen={Boolean(expandedActionsByApp[app.id])}
                 grants={grants}
                 deletePending={deleteServiceApp.isPending}
+                deleteError={deleteServiceApp.error}
+                dataEntry={workspaceDataEntries.find((entry) => entry.appId === app.id)}
+                dataLoading={appData.isLoading}
                 isDiscovering={discoverServiceAppActions.isPending}
                 onActionsOpenChange={(open) =>
                   setExpandedActionsByApp((current) => ({
@@ -144,7 +154,11 @@ export function ServiceAppsPanel() {
                   }))
                 }
                 onDiscover={discover}
-                onDelete={(appId) => void deleteServiceApp.mutate(appId)}
+                onDelete={(appId, purgeData, onSuccess) => void deleteServiceApp.mutate(
+                  { appId, purgeData },
+                  { onSuccess },
+                )}
+                onResetDelete={deleteServiceApp.reset}
                 onRestart={(appId) => void restartServiceApp.mutate(appId)}
                 onRevoke={(grant) =>
                   void revokeServiceActionGrant.mutate({

package/src/features/service-apps/hooks/use-service-apps.ts

@@ -4,6 +4,7 @@ import { nextclawClient } from '@/shared/lib/api';
 const SERVICE_APPS_QUERY_KEY = ['service-apps'] as const;
 const SERVICE_ACTIONS_QUERY_KEY = ['service-actions'] as const;
 const SERVICE_ACTION_GRANTS_QUERY_KEY = ['service-action-grants'] as const;
+const APP_DATA_QUERY_KEY = ['app-data'] as const;
 
 export function useServiceApps() {
   return useQuery({
@@ -42,12 +43,14 @@ export function useRestartServiceApp() {
 export function useDeleteServiceApp() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (appId: string) => nextclawClient.serviceApps.deleteServiceApp(appId),
+    mutationFn: (input: { appId: string; purgeData: boolean }) =>
+      nextclawClient.serviceApps.deleteServiceApp(input.appId, input.purgeData),
     onSuccess: async () => {
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
         queryClient.invalidateQueries({ queryKey: SERVICE_ACTION_GRANTS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: APP_DATA_QUERY_KEY }),
       ]);
     },
   });

package/src/shared/lib/i18n/locales/en-US/doc-browser.json

@@ -63,6 +63,11 @@
   "appPackagesAvailable": "Available",
   "appPackagesBuiltIn": "Built into NextClaw",
   "appPackagesLocalService": "Local data service",
+  "appPackagesIsolationLabel": "Runtime isolation",
+  "appPackagesIsolationPanel": "Isolated interface",
+  "appPackagesIsolationMediated": "Host-mediated runtime",
+  "appPackagesIsolationFullUser": "Runs with your user permissions",
+  "appPackagesDataUsage": "App data",
   "appPackagesEnable": "Enable",
   "appPackagesDisable": "Disable",
   "appPackagesWorking": "Working…",
@@ -92,6 +97,7 @@
   "appPackagesDocumentAccess": "Needs access to {count} file folder(s) you approve",
   "appPackagesNetworkAccess": "Needs to connect to {count} network domain(s)",
   "appPackagesHostBridgeAccess": "Uses local capabilities provided by NextClaw",
+  "appPackagesNativeProcessAccess": "Starts a local process with the file and network access available to your user account",
   "appPackagesLocalStorageAccess": "Stores its own app data on this device",
   "appPackagesNoExtraAccess": "No additional file or network access declared",
   "appPackagesPreparing": "Preparing",
@@ -111,6 +117,25 @@
   "appPackagesRollbackCompleted": "App version switched",
   "appPackagesUninstallCompleted": "App uninstalled",
   "appPackagesNextClawRequirement": "Requires NextClaw",
+  "appDataRetainedTitle": "Saved app data",
+  "appDataRetainedDescription": "Data kept after an app was removed stays here until you reinstall the app or delete the data.",
+  "appDataLoadFailed": "Failed to load saved app data",
+  "appDataDiagnosticsTitle": "Some app data needs attention",
+  "appDataDeleteAction": "Delete data",
+  "appDataDeleteTitle": "Permanently delete this app data?",
+  "appDataDeleteDescription": "This removes the app's private data from this device. Files you exported or saved outside the app remain untouched.",
+  "appDataDeletePermanently": "Permanently delete data",
+  "appDataDeleting": "Deleting data…",
+  "appDataDeleteCompleted": "App data deleted",
+  "appDataDeleteFailed": "Failed to delete app data",
+  "appDataStorageTotal": "Total app data",
+  "appDataStoragePath": "Managed instance path",
+  "appDataClassData": "Personal data",
+  "appDataClassConfig": "Settings",
+  "appDataClassState": "State",
+  "appDataClassCache": "Cache",
+  "appDataClassTemporary": "Temporary",
+  "appDataClassLogs": "Logs",
   "panelAppsTitle": "Panel Apps",
   "panelAppsLoading": "Loading panel apps...",
   "panelAppsLoadFailed": "Failed to load panel apps",
@@ -158,7 +183,10 @@
   "serviceAppsMoreActions": "More actions",
   "serviceAppsDelete": "Delete service app",
   "serviceAppsDeleteConfirmTitle": "Delete service app?",
-  "serviceAppsDeleteConfirmDescription": "This will delete the service app directory and cannot be undone.",
+  "serviceAppsDeleteConfirmDescription": "The service source will be deleted. Its private data is kept by default.",
+  "serviceAppsKeepDataDescription": "Delete the service source but keep its private data for a future copy of the same service.",
+  "serviceAppsDeleteDataDescription": "Permanently delete the service source and its managed private data.",
+  "serviceAppsDataUnavailable": "Storage details are unavailable. Keep data selected or refresh before deleting.",
   "serviceAppsStatus_idle": "Not connected",
   "serviceAppsStatus_starting": "Connecting",
   "serviceAppsStatus_running": "Connected",

package/src/shared/lib/i18n/locales/zh-CN/doc-browser.json

@@ -63,6 +63,11 @@
   "appPackagesAvailable": "可用",
   "appPackagesBuiltIn": "NextClaw 内置",
   "appPackagesLocalService": "本地数据服务",
+  "appPackagesIsolationLabel": "运行隔离",
+  "appPackagesIsolationPanel": "隔离界面",
+  "appPackagesIsolationMediated": "受限运行",
+  "appPackagesIsolationFullUser": "以当前用户权限运行",
+  "appPackagesDataUsage": "应用数据",
   "appPackagesEnable": "启用",
   "appPackagesDisable": "停用",
   "appPackagesWorking": "处理中…",
@@ -92,6 +97,7 @@
   "appPackagesDocumentAccess": "需要访问 {count} 个由你授权的文件目录",
   "appPackagesNetworkAccess": "需要连接 {count} 个网络域名",
   "appPackagesHostBridgeAccess": "需要调用 NextClaw 提供的本机能力",
+  "appPackagesNativeProcessAccess": "会启动本机进程；该进程拥有当前用户可访问的文件和网络权限",
   "appPackagesLocalStorageAccess": "会在本机保存自己的应用数据",
   "appPackagesNoExtraAccess": "没有声明额外的文件或网络访问",
   "appPackagesPreparing": "准备中",
@@ -111,6 +117,25 @@
   "appPackagesRollbackCompleted": "应用版本已切换",
   "appPackagesUninstallCompleted": "应用已卸载",
   "appPackagesNextClawRequirement": "需要 NextClaw",
+  "appDataRetainedTitle": "已保留的应用数据",
+  "appDataRetainedDescription": "卸载应用时保留的数据会留在这里。重新安装可以继续使用，也可以单独永久删除。",
+  "appDataLoadFailed": "已保留的应用数据加载失败",
+  "appDataDiagnosticsTitle": "部分应用数据需要处理",
+  "appDataDeleteAction": "删除数据",
+  "appDataDeleteTitle": "永久删除这些应用数据？",
+  "appDataDeleteDescription": "这会从本机移除该应用的私有数据。已导出或保存在应用目录之外的文件不会被删除。",
+  "appDataDeletePermanently": "永久删除数据",
+  "appDataDeleting": "正在删除数据…",
+  "appDataDeleteCompleted": "应用数据已删除",
+  "appDataDeleteFailed": "应用数据删除失败",
+  "appDataStorageTotal": "应用数据总量",
+  "appDataStoragePath": "受管实例路径",
+  "appDataClassData": "个人数据",
+  "appDataClassConfig": "设置",
+  "appDataClassState": "状态",
+  "appDataClassCache": "缓存",
+  "appDataClassTemporary": "临时文件",
+  "appDataClassLogs": "日志",
   "panelAppsTitle": "面板应用",
   "panelAppsLoading": "加载面板应用中...",
   "panelAppsLoadFailed": "面板应用加载失败",
@@ -158,7 +183,10 @@
   "serviceAppsMoreActions": "更多操作",
   "serviceAppsDelete": "删除服务应用",
   "serviceAppsDeleteConfirmTitle": "删除服务应用？",
-  "serviceAppsDeleteConfirmDescription": "这会删除服务应用目录，且无法撤销。",
+  "serviceAppsDeleteConfirmDescription": "服务源码会被删除，私有数据默认保留。",
+  "serviceAppsKeepDataDescription": "删除服务源码，但保留私有数据，之后放回同一服务仍可继续使用。",
+  "serviceAppsDeleteDataDescription": "永久删除服务源码及其受管私有数据。",
+  "serviceAppsDataUnavailable": "暂时无法读取存储详情。请保留数据，或刷新后再删除。",
   "serviceAppsStatus_idle": "未连接",
   "serviceAppsStatus_starting": "连接中",
   "serviceAppsStatus_running": "已连接",