@nextclaw/ui 0.15.26 → 0.15.27

package/src/app/hooks/__tests__/use-app-event-consumers.test.ts

@@ -0,0 +1,20 @@
+import type { QueryClient } from '@tanstack/react-query';
+import { describe, expect, it, vi } from 'vitest';
+import { invalidateChangedServerPath } from '@/app/hooks/use-app-event-consumers';
+
+describe('server path realtime invalidation', () => {
+  it('invalidates only the browse query for the changed directory', () => {
+    const invalidateQueries = vi.fn();
+    invalidateChangedServerPath(
+      { invalidateQueries } as unknown as QueryClient,
+      '/Users/peiwang/Projects/nextbot/src',
+    );
+
+    const request = invalidateQueries.mock.calls[0]?.[0] as {
+      predicate: (query: { queryKey: readonly unknown[] }) => boolean;
+    };
+    expect(request.predicate({ queryKey: ['server-path-browse', '/Users/peiwang/Projects/nextbot/src', '', true] })).toBe(true);
+    expect(request.predicate({ queryKey: ['server-path-browse', '/Users/peiwang/Projects/nextbot', '', true] })).toBe(false);
+    expect(request.predicate({ queryKey: ['server-path-read', '/Users/peiwang/Projects/nextbot/src', ''] })).toBe(false);
+  });
+});

package/src/app/hooks/use-app-event-consumers.ts

@@ -30,6 +30,22 @@ function handleConfigUpdatedEvent(queryClient: QueryClient | undefined, path: st
   invalidateMarketplaceQueries(queryClient, path);
 }
 
+function normalizeServerPath(path: string): string {
+  const normalized = path.trim().replace(/\\/g, '/').replace(/\/+$/g, '');
+  return /^[a-z]:/i.test(normalized) ? normalized.toLowerCase() : normalized;
+}
+
+export function invalidateChangedServerPath(queryClient: QueryClient | undefined, directoryPath: string): void {
+  if (!queryClient) return;
+  const changedDirectory = normalizeServerPath(directoryPath);
+  void queryClient.invalidateQueries({
+    predicate: (query) =>
+      query.queryKey[0] === 'server-path-browse' &&
+      typeof query.queryKey[1] === 'string' &&
+      normalizeServerPath(query.queryKey[1]) === changedDirectory,
+  });
+}
+
 export function useAppEventConsumers(queryClient?: QueryClient) {
   const shouldResyncSessionsRef = useRef(false);
 
@@ -53,6 +69,10 @@ export function useAppEventConsumers(queryClient?: QueryClient) {
     const unsubscribeConfigUpdated = nextclawClient.eventBus.on(eventKeys.configUpdated, ({ path }) => {
       handleConfigUpdatedEvent(queryClient, path);
     });
+    const unsubscribeServerPathChanged = nextclawClient.eventBus.on(
+      eventKeys.serverPathChanged,
+      ({ directoryPath }) => invalidateChangedServerPath(queryClient, directoryPath),
+    );
     const unsubscribeRuntimeUpdate = nextclawClient.eventBus.on(eventKeys.runtimeUpdateSnapshot, (snapshot) => {
       runtimeUpdateManager.reportSnapshot(snapshot);
     });
@@ -74,6 +94,7 @@ export function useAppEventConsumers(queryClient?: QueryClient) {
       unsubscribeConnectionClose();
       unsubscribeConnectionError();
       unsubscribeConfigUpdated();
+      unsubscribeServerPathChanged();
       unsubscribeRuntimeUpdate();
       unsubscribeSessionRunStatus();
       unsubscribeSessionSummaryUpsert();

package/src/app/presenters/app.presenter.ts

@@ -2,12 +2,14 @@ import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
   ChatCompletionNotificationManager,
+  ChatComposerIntentManager,
   ChatDraftIntentManager,
   useChatThreadStore,
 } from '@/features/chat';
 import { AppNotificationManager } from '@/features/notifications';
 import { PanelAppBridgeManager } from '@/features/panel-apps';
 import { InboxManager } from '@/features/inbox';
+import { AppPackageOperationSettlementManager } from '@/features/apps';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { RemoteAccessManager } from '@/features/remote';
 import { ServiceActionAuthorizationManager } from '@/features/service-apps';
@@ -42,7 +44,11 @@ export class AppPresenter {
     this.rightPanelResourceRouteResolver,
     this.notifyRightPanelOpened,
   );
+  appPackageOperationSettlementManager = new AppPackageOperationSettlementManager(
+    this.docBrowserManager,
+  );
   sideDockManager = new SideDockManager(this.docBrowserManager);
+  chatComposerIntentManager = new ChatComposerIntentManager();
   chatDraftIntentManager = new ChatDraftIntentManager();
   serviceActionAuthorizationManager = new ServiceActionAuthorizationManager();
   panelAppBridgeManager = new PanelAppBridgeManager(this.serviceActionAuthorizationManager);

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

@@ -9,7 +9,19 @@ const mocks = vi.hoisted(() => ({
   lifecycleMutate: vi.fn(),
   lifecycleReset: vi.fn(),
   onOpen: vi.fn(),
+  operations: [] as Array<{
+    id: string;
+    action: 'install';
+    appId: string;
+    source: string;
+    status: 'downloading';
+    completedSteps: number;
+    totalSteps: number;
+    createdAt: string;
+    updatedAt: string;
+  }>,
   recordOpened: vi.fn(),
+  refetchOperations: vi.fn(),
   refetchPackages: vi.fn(),
   refetchPanels: vi.fn(),
   requestAuthorization: vi.fn(async () => true),
@@ -17,6 +29,7 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock('@/app/components/app-presenter-provider', () => ({
   useAppPresenter: () => ({
+    appPackageOperationSettlementManager: { settle: vi.fn() },
     serviceActionAuthorizationManager: {
       requestAuthorization: mocks.requestAuthorization,
     },
@@ -24,6 +37,14 @@ vi.mock('@/app/components/app-presenter-provider', () => ({
 }));
 
 vi.mock('@/features/apps/hooks/use-app-packages', () => ({
+  isAppPackageOperationActive: (status: string) => [
+    'queued',
+    'resolving',
+    'downloading',
+    'verifying',
+    'installing',
+    'finalizing',
+  ].includes(status),
   useAppPackageMutation: () => ({
     error: null,
     isError: false,
@@ -32,6 +53,11 @@ vi.mock('@/features/apps/hooks/use-app-packages', () => ({
     reset: mocks.lifecycleReset,
     variables: undefined,
   }),
+  useAppPackageOperationSettlement: () => undefined,
+  useAppPackageOperations: () => ({
+    data: { entries: mocks.operations },
+    refetch: mocks.refetchOperations,
+  }),
   useAppPackages: () => ({
     data: {
       entries: [{
@@ -101,22 +127,22 @@ vi.mock('@/features/apps/hooks/use-app-marketplace', () => ({
           webUrl: 'https://apps.nextclaw.io/apps/personal-organizer',
         },
         {
-          id: 'app-starter-card',
-          slug: 'starter-card',
-          appId: 'nextclaw.starter-card',
-          name: 'Starter Card',
-          summary: 'A tiny starter app.',
-          summaryI18n: { en: 'A tiny starter app.' },
-          tags: ['starter'],
+          id: 'app-workspace-glance',
+          slug: 'workspace-glance',
+          appId: 'nextclaw.workspace-glance',
+          name: 'Workspace Glance',
+          summary: 'A local workspace overview.',
+          summaryI18n: { en: 'A local workspace overview.' },
+          tags: ['workspace', 'local'],
           latestVersion: '0.1.0',
           featured: false,
           publisher: { id: 'nextclaw', name: 'NextClaw' },
           install: {
             kind: 'registry',
-            spec: 'nextclaw.starter-card',
+            spec: 'nextclaw.workspace-glance',
             registry: 'https://apps-registry.nextclaw.io/api/v1/apps/registry/',
           },
-          webUrl: 'https://apps.nextclaw.io/apps/starter-card',
+          webUrl: 'https://apps.nextclaw.io/apps/workspace-glance',
         },
       ],
     },
@@ -124,6 +150,11 @@ vi.mock('@/features/apps/hooks/use-app-marketplace', () => ({
     isError: false,
     isLoading: false,
   }),
+  useAppMarketplaceDetail: () => ({
+    data: undefined,
+    error: null,
+    isLoading: false,
+  }),
 }));
 
 vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
@@ -164,8 +195,10 @@ describe('AppPackagesPanel', () => {
     mocks.lifecycleMutate.mockReset();
     mocks.lifecycleReset.mockReset();
     mocks.onOpen.mockReset();
+    mocks.operations = [];
     mocks.recordOpened.mockReset();
     mocks.refetchPackages.mockReset();
+    mocks.refetchOperations.mockReset();
     mocks.refetchPanels.mockReset();
     mocks.requestAuthorization.mockReset();
     mocks.requestAuthorization.mockResolvedValue(true);
@@ -211,10 +244,10 @@ describe('AppPackagesPanel', () => {
 
     render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
 
-    await user.click(screen.getByRole('button', { name: 'Browse apps' }));
+    await user.click(screen.getByRole('button', { name: 'Add apps' }));
 
-    expect(screen.getByRole('heading', { name: 'Browse Mini APPs' })).toBeTruthy();
-    expect(screen.getByText('Starter Card')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: 'Add apps' })).toBeTruthy();
+    expect(screen.getByText('Workspace Glance')).toBeTruthy();
     expect(
       (screen.getByRole('button', { name: 'Installed' }) as HTMLButtonElement).disabled,
     ).toBe(true);
@@ -225,10 +258,55 @@ describe('AppPackagesPanel', () => {
     expect(mocks.lifecycleMutate).toHaveBeenCalledWith(
       {
         action: 'install',
-        source: 'nextclaw.starter-card',
+        source: 'nextclaw.workspace-glance',
         registryUrl: 'https://apps-registry.nextclaw.io/api/v1/apps/registry/',
       },
-      { onSuccess: expect.any(Function) },
+      { onSuccess: undefined },
     );
   });
+
+  it('allows a built-in app to be uninstalled while keeping its data by default', async () => {
+    const user = userEvent.setup();
+
+    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+
+    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();
+    expect(screen.getByRole('button', { name: /Keep personal data/ }).getAttribute('aria-pressed'))
+      .toBe('true');
+
+    await user.click(screen.getByRole('button', { name: 'Uninstall' }));
+    expect(mocks.lifecycleMutate).toHaveBeenCalledWith(
+      { action: 'uninstall', appId: 'nextclaw.personal-organizer', purgeData: false },
+      { onSuccess: undefined },
+    );
+  });
+
+  it('keeps an accepted install visible in the library and marketplace while it runs', async () => {
+    const user = userEvent.setup();
+    mocks.operations = [{
+      id: 'operation-1',
+      action: 'install',
+      appId: 'nextclaw.workspace-glance',
+      source: 'nextclaw.workspace-glance',
+      status: 'downloading',
+      completedSteps: 2,
+      totalSteps: 5,
+      createdAt: '2026-08-12T00:00:00.000Z',
+      updatedAt: '2026-08-12T00:00:01.000Z',
+    }];
+
+    render(<AppPackagesPanel onOpenPanelApp={mocks.onOpen} />);
+
+    expect(screen.getByRole('status').textContent).toContain('Downloading');
+    expect(screen.getByText('nextclaw.workspace-glance')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Add apps' }));
+
+    expect(screen.getByRole('heading', { name: 'Add apps' })).toBeTruthy();
+    expect(screen.getAllByText('Downloading')).not.toHaveLength(0);
+    expect((screen.getByRole('button', { name: 'Downloading' }) as HTMLButtonElement).disabled)
+      .toBe(true);
+  });
 });

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

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { AppsPanel, type AppsPanelTab } from '@/features/apps/components/apps-panel';
+
+vi.mock('@/shared/lib/i18n', () => ({ t: (key: string) => key }));
+vi.mock('@/features/apps/components/app-packages-panel', () => ({
+  AppPackagesPanel: () => <div>packages-content</div>,
+}));
+vi.mock('@/features/panel-apps', () => ({
+  PanelAppsList: () => <div>panel-apps-content</div>,
+}));
+vi.mock('@/features/service-apps', () => ({
+  ServiceAppsPanel: () => <div>service-apps-content</div>,
+}));
+
+function AppsPanelHarness() {
+  const [activeTab, setActiveTab] = useState<AppsPanelTab>('apps');
+  return (
+    <AppsPanel
+      activeTab={activeTab}
+      onActiveTabChange={setActiveTab}
+      onOpenPanelApp={vi.fn()}
+    />
+  );
+}
+
+describe('AppsPanel', () => {
+  it('keeps one fixed-width navigation instance while switching app types', async () => {
+    const user = userEvent.setup();
+    render(<AppsPanelHarness />);
+
+    const navigation = screen.getByRole('tablist');
+    expect(navigation.className).toContain('w-full');
+    expect(navigation.className).toContain('max-w-[390px]');
+
+    await user.click(screen.getByRole('tab', { name: 'panelAppsTitle' }));
+    expect(screen.getByText('panel-apps-content')).toBeTruthy();
+    expect(screen.getByRole('tablist')).toBe(navigation);
+
+    await user.click(screen.getByRole('tab', { name: 'serviceAppsTitle' }));
+    expect(screen.getByText('service-apps-content')).toBeTruthy();
+    expect(screen.getByRole('tablist')).toBe(navigation);
+  });
+
+  it('supports arrow-key navigation through the shared tab primitive', async () => {
+    const user = userEvent.setup();
+    render(<AppsPanelHarness />);
+
+    const firstTab = screen.getByRole('tab', { name: 'appsTitle' });
+    firstTab.focus();
+    await user.keyboard('{ArrowRight}');
+
+    expect(document.activeElement).toBe(screen.getByRole('tab', { name: 'panelAppsTitle' }));
+    expect(screen.getByText('panel-apps-content')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { cn } from '@/shared/lib/utils';
+
+export function AppArtwork({
+  className,
+  icon,
+  name,
+}: {
+  className?: string;
+  icon?: string;
+  name: string;
+}) {
+  const [failedIcon, setFailedIcon] = useState<string>();
+  const imageIcon = isImageIcon(icon);
+  const imageFailed = failedIcon === icon;
+
+  return (
+    <span className={cn(
+      'relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-[13px] bg-gradient-to-br from-violet-500/15 via-primary/10 to-emerald-500/15 text-sm font-semibold text-foreground ring-1 ring-black/[0.04] dark:ring-white/[0.06]',
+      className,
+    )}>
+      {imageIcon && !imageFailed ? (
+        <img
+          src={icon}
+          alt=""
+          className="h-full w-full object-cover"
+          onError={() => setFailedIcon(icon)}
+        />
+      ) : icon && !imageIcon ? (
+        <span className="text-base leading-none" aria-hidden="true">{icon}</span>
+      ) : (
+        <span aria-hidden="true">{readInitial(name)}</span>
+      )}
+    </span>
+  );
+}
+
+function isImageIcon(icon: string | undefined): icon is string {
+  return Boolean(icon) && (
+    icon!.startsWith('data:') ||
+    icon!.startsWith('/') ||
+    icon!.startsWith('http://') ||
+    icon!.startsWith('https://')
+  );
+}
+
+function readInitial(name: string): string {
+  return [...name.trim()][0]?.toLocaleUpperCase() ?? 'A';
+}