@nextclaw/ui 0.17.0 → 0.17.1

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

@@ -1,5 +1,5 @@
-import { useMemo, useRef, 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';
@@ -34,8 +34,10 @@ 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();
@@ -56,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,
   });
 
@@ -167,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 ?? {})
@@ -249,7 +263,11 @@ export function AppPackagesPanel({
 }
 
 function AppPackageLibrary({
+  appDataEntries,
+  appDataLoading,
+  appDataUnavailable,
   error,
+  focusedPackageId,
   isLoading,
   isPending,
   mutationAppId,
@@ -260,7 +278,11 @@ function AppPackageLibrary({
   panelApps,
   operations,
 }: {
+  appDataEntries: AppDataEntry[];
+  appDataLoading: boolean;
+  appDataUnavailable: boolean;
   error?: string;
+  focusedPackageId?: string;
   isLoading: boolean;
   isPending: boolean;
   mutationAppId?: string;
@@ -327,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

@@ -31,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,
   });
 }
@@ -57,6 +57,7 @@ export function useAppPackageOperationSettlement({
   operations,
   refetchPackages,
   refetchPanels,
+  refetchAppData,
   settlementManager,
 }: {
   isLoaded: boolean;
@@ -65,6 +66,7 @@ export function useAppPackageOperationSettlement({
   refetchPanels: () => Promise<{
     data?: { entries: Array<{ id: string; packageId?: string }> };
   }>;
+  refetchAppData: () => Promise<unknown>;
   settlementManager: AppPackageOperationSettlementManager;
 }) {
   useEffect(() => {
@@ -73,8 +75,9 @@ export function useAppPackageOperationSettlement({
       operations,
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
-  }, [isLoaded, operations, refetchPackages, refetchPanels, settlementManager]);
+  }, [isLoaded, operations, refetchPackages, refetchPanels, refetchAppData, settlementManager]);
 }
 
 export function useAppPackageMutation() {

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

@@ -95,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',
     },
@@ -111,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(() => {
@@ -125,7 +142,7 @@ 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' }));
     await waitFor(() => {
@@ -143,4 +160,15 @@ describe('ServiceAppsPanel', () => {
       { 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(onManagePackage).toHaveBeenCalledWith('nextclaw.personal-organizer');
+  });
 });

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

@@ -7,6 +7,7 @@ import type {
 } from "@nextclaw/client-sdk";
 import {
   AlertTriangle,
+  Boxes,
   CheckCircle2,
   ChevronDown,
   CircleDashed,
@@ -51,6 +52,7 @@ export function ServiceAppListItem({
   isDiscovering,
   onActionsOpenChange,
   onDiscover,
+  onManagePackage,
   onDelete,
   onResetDelete,
   onRestart,
@@ -67,6 +69,7 @@ export function ServiceAppListItem({
   isDiscovering: boolean;
   onActionsOpenChange: (open: boolean) => void;
   onDiscover: (appId: string) => void;
+  onManagePackage: (packageId: string) => void;
   onDelete: (appId: string, purgeData: boolean, onSuccess: () => void) => void;
   onResetDelete: () => void;
   onRestart: (appId: string) => void;
@@ -76,10 +79,9 @@ export function ServiceAppListItem({
   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 =
-    app.status === "running" || app.status === "failed";
+  const canConnectAndDiscover = app.status !== "starting" && app.status !== "stopped";
+  const canDisconnectRuntime = app.status === "running" || app.status === "failed";
+  const managedPackageId = app.sourceKind === "package" ? app.packageId : undefined;
   const diagnostics = getServiceAppDiagnostics(app);
   const openDeleteDialog = () => {
     setIsMenuOpen(false);
@@ -87,7 +89,6 @@ export function ServiceAppListItem({
     onResetDelete();
     setIsDeleteDialogOpen(true);
   };
-
   return (
     <TooltipProvider delayDuration={250}>
       <section className="group bg-card transition-colors hover:bg-muted/25">
@@ -168,13 +169,24 @@ export function ServiceAppListItem({
                     onRestart(app.id);
                   }}
                 />
-                <ServiceAppMenuItem
-                  destructive
-                  disabled={deletePending}
-                  icon={Trash2}
-                  label={t("serviceAppsDelete")}
-                  onClick={openDeleteDialog}
-                />
+                {managedPackageId ? (
+                  <ServiceAppMenuItem
+                    icon={Boxes}
+                    label={t("serviceAppsManagePackage")}
+                    onClick={() => {
+                      setIsMenuOpen(false);
+                      onManagePackage(managedPackageId);
+                    }}
+                  />
+                ) : (
+                  <ServiceAppMenuItem
+                    destructive
+                    disabled={deletePending}
+                    icon={Trash2}
+                    label={t("serviceAppsDelete")}
+                    onClick={openDeleteDialog}
+                  />
+                )}
               </PopoverContent>
             </Popover>
           </div>
@@ -245,6 +257,7 @@ export function ServiceAppListItem({
           ) : null}
         </div>
 
+      {app.sourceKind !== "package" ? (
         <ServiceAppDeleteDialog
           appId={app.id}
           appTitle={app.title}
@@ -258,6 +271,7 @@ export function ServiceAppListItem({
           onOpenChange={setIsDeleteDialogOpen}
           onPurgeDataChange={setPurgeData}
         />
+      ) : null}
       </section>
     </TooltipProvider>
   );

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

@@ -27,7 +27,11 @@ import { t } from "@/shared/lib/i18n";
 
 type ServiceActionView = ServiceActionListView["actions"][number];
 
-export function ServiceAppsPanel() {
+export function ServiceAppsPanel({
+  onManagePackage,
+}: {
+  onManagePackage: (packageId: string) => void;
+}) {
   const serviceApps = useServiceApps();
   const appData = useAppData();
   const serviceActions = useServiceActions();
@@ -77,6 +81,7 @@ export function ServiceAppsPanel() {
   }
 
   const apps: ServiceAppRecordView[] = serviceApps.data?.entries ?? [];
+  const diagnostics = serviceApps.data?.diagnostics ?? [];
   const actions: ServiceActionView[] = serviceActions.data?.actions ?? [];
   const grants: ServiceActionGrantView[] =
     serviceActionGrants.data?.grants ?? [];
@@ -115,6 +120,22 @@ export function ServiceAppsPanel() {
         </TooltipProvider>
       </div>
 
+      {diagnostics.length > 0 ? (
+        <div
+          role="alert"
+          className="mx-3 mt-3 rounded-xl border border-destructive/20 bg-destructive/5 px-3 py-2.5 text-xs text-destructive sm:mx-4"
+        >
+          <div className="font-medium">{t("serviceAppsLoadFailed")}</div>
+          <ul className="mt-1 space-y-1">
+            {diagnostics.map((diagnostic) => (
+              <li key={diagnostic.stagedPath} className="break-words">
+                {diagnostic.appId}: {diagnostic.message}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
       {apps.length === 0 ? (
         <div className="flex flex-1 items-center justify-center px-6 py-8 text-center">
           <div className="w-full max-w-xs">
@@ -154,6 +175,7 @@ export function ServiceAppsPanel() {
                   }))
                 }
                 onDiscover={discover}
+                onManagePackage={onManagePackage}
                 onDelete={(appId, purgeData, onSuccess) => void deleteServiceApp.mutate(
                   { appId, purgeData },
                   { onSuccess },

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

@@ -34,6 +34,8 @@
   "appPackagesLibraryTitle": "Your apps",
   "appPackagesLibraryDescription": "Open and manage the apps in NextClaw. Installs continue in the background, and personal data stays local.",
   "appPackagesLoading": "Loading apps…",
+  "appPackagesDataUsageUnavailable": "Size unavailable",
+  "appPackagesNoDataYet": "No data yet",
   "appPackagesLoadFailed": "Failed to load apps",
   "appPackagesRefresh": "Refresh apps",
   "appPackagesBrowse": "Add apps",
@@ -182,6 +184,7 @@
   "serviceAppsDisconnectRuntimeHint": "Close the current runtime connection and return the service app to not connected.",
   "serviceAppsMoreActions": "More actions",
   "serviceAppsDelete": "Delete service app",
+  "serviceAppsManagePackage": "Manage in Apps",
   "serviceAppsDeleteConfirmTitle": "Delete service app?",
   "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.",

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

@@ -34,6 +34,8 @@
   "appPackagesLibraryTitle": "你的应用",
   "appPackagesLibraryDescription": "打开和管理装进 NextClaw 的应用。安装会在后台继续，个人数据保存在本机。",
   "appPackagesLoading": "加载应用中…",
+  "appPackagesDataUsageUnavailable": "大小不可用",
+  "appPackagesNoDataYet": "尚无数据",
   "appPackagesLoadFailed": "应用加载失败",
   "appPackagesRefresh": "刷新应用",
   "appPackagesBrowse": "添加应用",
@@ -182,6 +184,7 @@
   "serviceAppsDisconnectRuntimeHint": "断开当前运行时连接，并将服务应用恢复为未连接状态。",
   "serviceAppsMoreActions": "更多操作",
   "serviceAppsDelete": "删除服务应用",
+  "serviceAppsManagePackage": "在应用中管理",
   "serviceAppsDeleteConfirmTitle": "删除服务应用？",
   "serviceAppsDeleteConfirmDescription": "服务源码会被删除，私有数据默认保留。",
   "serviceAppsKeepDataDescription": "删除服务源码，但保留私有数据，之后放回同一服务仍可继续使用。",

package/dist/assets/doc-browser-z7vdH3Ez.js

@@ -1 +0,0 @@
-import{t as e}from"./doc-browser-CiLvybSC.js";export{e as DocBrowser};