@nextclaw/ui 0.13.4 → 0.13.5

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -1,4 +1,5 @@
 import type { PanelAppEntryView } from '@/shared/lib/api';
+import type { DocBrowserDockIcon } from '@/shared/components/doc-browser';
 import type { RightPanelResourceTarget } from '@/features/right-panel-resources/types/right-panel-resource.types';
 
 export const RIGHT_PANEL_HOME_TAB_KIND = 'home';
@@ -37,11 +38,32 @@ export function createPanelAppResourceUri(appId: string): string {
   return `nextclaw://panel-app/${encodeURIComponent(appId)}`;
 }
 
+function isPanelAppImageIcon(icon: string): boolean {
+  return (
+    icon.startsWith('data:image/') ||
+    icon.startsWith('http://') ||
+    icon.startsWith('https://') ||
+    icon.startsWith('/')
+  );
+}
+
+function createPanelAppDockIcon(entry: PanelAppEntryView): DocBrowserDockIcon | undefined {
+  const icon = entry.icon?.trim();
+  if (!icon) {
+    return undefined;
+  }
+  return isPanelAppImageIcon(icon)
+    ? { type: 'url', url: icon }
+    : { type: 'text', value: icon };
+}
+
 export function createPanelAppRightPanelResourceTarget(entry: PanelAppEntryView): RightPanelResourceTarget {
   return {
     dedupeKey: `panel-app:${entry.id}`,
+    dockIcon: createPanelAppDockIcon(entry),
     historyPolicy: 'managed',
     kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
+    resourceUri: createPanelAppResourceUri(entry.id),
     title: entry.title,
     url: entry.contentPath,
   };

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

@@ -0,0 +1,88 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ServiceAppsPanel } from '@/features/service-apps/components/service-apps-panel';
+
+const deleteServiceAppMutate = vi.fn();
+const discoverServiceAppActionsMutateAsync = vi.fn(async () => ({ actions: [] }));
+const refetchServiceActions = vi.fn();
+const refetchServiceActionGrants = vi.fn();
+const refetchServiceApps = vi.fn();
+const restartServiceAppMutate = vi.fn();
+const revokeServiceActionGrantMutate = vi.fn();
+
+vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
+  useDeleteServiceApp: () => ({
+    isPending: false,
+    mutate: deleteServiceAppMutate,
+  }),
+  useDiscoverServiceAppActions: () => ({
+    isPending: false,
+    mutateAsync: discoverServiceAppActionsMutateAsync,
+  }),
+  useRestartServiceApp: () => ({
+    mutate: restartServiceAppMutate,
+  }),
+  useRevokeServiceActionGrant: () => ({
+    mutate: revokeServiceActionGrantMutate,
+  }),
+  useServiceActionGrants: () => ({
+    data: { grants: [] },
+    isError: false,
+    isLoading: false,
+    refetch: refetchServiceActionGrants,
+  }),
+  useServiceActions: () => ({
+    data: { actions: [] },
+    isError: false,
+    isLoading: false,
+    refetch: refetchServiceActions,
+  }),
+  useServiceApps: () => ({
+    data: {
+      entries: [{
+        args: ['server.mjs'],
+        command: 'node',
+        cwd: '/workspace/service-apps/notes',
+        dirPath: '/workspace/service-apps/notes',
+        enabled: true,
+        id: 'notes',
+        manifestPath: '/workspace/service-apps/notes/service-app.json',
+        protocol: 'mcp',
+        status: 'idle',
+        title: 'Notes',
+      }],
+      serviceAppsPath: '/workspace/service-apps',
+      workspacePath: '/workspace',
+    },
+    isError: false,
+    isLoading: false,
+    refetch: refetchServiceApps,
+  }),
+}));
+
+describe('ServiceAppsPanel', () => {
+  it('labels service app icon actions and deletes through a confirm dialog', async () => {
+    const user = userEvent.setup();
+
+    render(<ServiceAppsPanel />);
+
+    expect(screen.getByText('Not connected')).toBeTruthy();
+    expect(screen.queryByText('idle')).toBeNull();
+    const discoverButton = screen.getByRole('button', { name: 'Connect and discover actions' });
+    expect(discoverButton).toBeTruthy();
+    const disconnectButton = screen.getByRole('button', { name: 'Disconnect runtime' });
+    expect(disconnectButton).toBeTruthy();
+    expect((disconnectButton as HTMLButtonElement).disabled).toBe(true);
+    await user.hover(discoverButton);
+    await waitFor(() => {
+      expect(screen.queryAllByText('Connect to the service app runtime and discover its available actions.').length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Delete service app' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+
+    expect(deleteServiceAppMutate).toHaveBeenCalledWith('notes');
+  });
+});

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

@@ -5,15 +5,26 @@ import type {
   ServiceAppRecordView,
 } from '@nextclaw/client-sdk';
 import {
+  AlertTriangle,
+  CheckCircle2,
+  CircleDashed,
+  LoaderCircle,
+  MoreVertical,
+  PauseCircle,
+  Radar,
   RefreshCw,
-  RotateCw,
-  Search,
   Server,
   ShieldCheck,
   Trash2,
+  Unplug,
+  type LucideIcon,
   Wrench,
 } from 'lucide-react';
+import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
 import {
+  useDeleteServiceApp,
   useDiscoverServiceAppActions,
   useRestartServiceApp,
   useRevokeServiceActionGrant,
@@ -22,8 +33,10 @@ import {
   useServiceApps,
 } from '@/features/service-apps/hooks/use-service-apps';
 import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
 type ServiceActionView = ServiceActionListView['actions'][number];
+type ServiceAppStatus = ServiceAppRecordView['status'];
 
 export function ServiceAppsPanel({
   headerContent,
@@ -33,6 +46,7 @@ export function ServiceAppsPanel({
   const serviceApps = useServiceApps();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
+  const deleteServiceApp = useDeleteServiceApp();
   const restartServiceApp = useRestartServiceApp();
   const discoverServiceAppActions = useDiscoverServiceAppActions();
   const revokeServiceActionGrant = useRevokeServiceActionGrant();
@@ -86,15 +100,13 @@ export function ServiceAppsPanel({
             </>
           )}
         </div>
-        <button
-          type="button"
-          onClick={refetch}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
-          title={t('serviceAppsRefresh')}
-          aria-label={t('serviceAppsRefresh')}
-        >
-          <RefreshCw className="h-3.5 w-3.5" />
-        </button>
+        <TooltipProvider delayDuration={250}>
+          <ServiceAppIconButton
+            icon={RefreshCw}
+            label={t('serviceAppsRefresh')}
+            onClick={refetch}
+          />
+        </TooltipProvider>
       </div>
 
       {apps.length === 0 ? (
@@ -110,8 +122,10 @@ export function ServiceAppsPanel({
                 app={app}
                 actions={discoveredActionsByApp[app.id] ?? actions.filter((action) => action.appId === app.id)}
                 grants={grants}
+                deletePending={deleteServiceApp.isPending}
                 isDiscovering={discoverServiceAppActions.isPending}
                 onDiscover={discover}
+                onDelete={(appId) => void deleteServiceApp.mutate(appId)}
                 onRestart={(appId) => void restartServiceApp.mutate(appId)}
                 onRevoke={(grant) => void revokeServiceActionGrant.mutate({
                   actionId: grant.actionId,
@@ -130,68 +144,244 @@ function ServiceAppCard({
   app,
   actions,
   grants,
+  deletePending,
   isDiscovering,
   onDiscover,
+  onDelete,
   onRestart,
   onRevoke,
 }: {
   app: ServiceAppRecordView;
   actions: ServiceActionView[];
   grants: ServiceActionGrantView[];
+  deletePending: boolean;
   isDiscovering: boolean;
   onDiscover: (appId: string) => void;
+  onDelete: (appId: string) => void;
   onRestart: (appId: string) => void;
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const canConnectAndDiscover = app.status !== 'starting' && app.status !== 'stopped';
+  const canDisconnectRuntime = app.status === 'running' || app.status === 'failed';
+  const openDeleteDialog = () => {
+    setIsMenuOpen(false);
+    setIsDeleteDialogOpen(true);
+  };
+
   return (
-    <section className="rounded-lg border border-gray-200 bg-white p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
-            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-600">{app.status}</span>
+    <TooltipProvider delayDuration={250}>
+      <section className="rounded-lg border border-gray-200 bg-white p-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
+              <ServiceAppStatusBadge status={app.status} />
+            </div>
+            {app.description ? (
+              <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
+            ) : null}
+            {app.lastError ? (
+              <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <ServiceAppIconButton
+              disabled={isDiscovering || !canConnectAndDiscover}
+              icon={Radar}
+              label={t('serviceAppsDiscoverActions')}
+              tooltip={t('serviceAppsDiscoverActionsHint')}
+              onClick={() => onDiscover(app.id)}
+            />
+            <ServiceAppIconButton
+              disabled={!canDisconnectRuntime}
+              icon={Unplug}
+              label={t('serviceAppsDisconnectRuntime')}
+              tooltip={t('serviceAppsDisconnectRuntimeHint')}
+              onClick={() => onRestart(app.id)}
+            />
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
+                      aria-label={t('serviceAppsMoreActions')}
+                      disabled={deletePending}
+                    >
+                      <MoreVertical className="h-3.5 w-3.5" />
+                    </button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="text-xs">{t('serviceAppsMoreActions')}</TooltipContent>
+              </Tooltip>
+              <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+                <ServiceAppMenuItem
+                  destructive
+                  disabled={deletePending}
+                  icon={Trash2}
+                  label={t('serviceAppsDelete')}
+                  onClick={openDeleteDialog}
+                />
+              </PopoverContent>
+            </Popover>
           </div>
-          {app.description ? (
-            <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
-          ) : null}
-          {app.lastError ? (
-            <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
-          ) : null}
         </div>
-        <div className="flex shrink-0 items-center gap-1">
-          <button
-            type="button"
-            onClick={() => onDiscover(app.id)}
-            disabled={isDiscovering}
-            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
-            title={t('serviceAppsDiscoverActions')}
-            aria-label={t('serviceAppsDiscoverActions')}
-          >
-            <Search className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => onRestart(app.id)}
-            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
-            title={t('serviceAppsRestart')}
-            aria-label={t('serviceAppsRestart')}
-          >
-            <RotateCw className="h-3.5 w-3.5" />
-          </button>
+        <ServiceAppDiagnostics app={app} />
+        <div className="mt-3 space-y-1">
+          {actions.map((action) => (
+            <ServiceActionRow
+              key={action.id}
+              action={action}
+              grants={grants.filter((grant) => grant.actionId === action.id)}
+              onRevoke={onRevoke}
+            />
+          ))}
         </div>
-      </div>
-      <ServiceAppDiagnostics app={app} />
-      <div className="mt-3 space-y-1">
-        {actions.map((action) => (
-          <ServiceActionRow
-            key={action.id}
-            action={action}
-            grants={grants.filter((grant) => grant.actionId === action.id)}
-            onRevoke={onRevoke}
-          />
-        ))}
-      </div>
-    </section>
+        <ConfirmDialog
+          open={isDeleteDialogOpen}
+          onOpenChange={setIsDeleteDialogOpen}
+          title={t('serviceAppsDeleteConfirmTitle')}
+          description={`${t('serviceAppsDeleteConfirmDescription')} ${app.title}`}
+          confirmLabel={t('delete')}
+          variant="destructive"
+          onConfirm={() => onDelete(app.id)}
+          onCancel={() => undefined}
+        />
+      </section>
+    </TooltipProvider>
+  );
+}
+
+function ServiceAppStatusBadge({ status }: { status: ServiceAppStatus }) {
+  const view = getServiceAppStatusView(status);
+  const Icon = view.icon;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={cn(
+            'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium',
+            view.className,
+          )}
+          aria-label={view.label}
+        >
+          <Icon className={cn('h-3 w-3', view.iconClassName)} />
+          <span>{view.label}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">{view.tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function getServiceAppStatusView(status: ServiceAppStatus): {
+  className: string;
+  icon: LucideIcon;
+  iconClassName?: string;
+  label: string;
+  tooltip: string;
+} {
+  switch (status) {
+    case 'running':
+      return {
+        className: 'bg-emerald-50 text-emerald-700',
+        icon: CheckCircle2,
+        label: t('serviceAppsStatus_running'),
+        tooltip: t('serviceAppsStatusHint_running'),
+      };
+    case 'starting':
+      return {
+        className: 'bg-blue-50 text-blue-700',
+        icon: LoaderCircle,
+        iconClassName: 'animate-spin',
+        label: t('serviceAppsStatus_starting'),
+        tooltip: t('serviceAppsStatusHint_starting'),
+      };
+    case 'failed':
+      return {
+        className: 'bg-rose-50 text-rose-700',
+        icon: AlertTriangle,
+        label: t('serviceAppsStatus_failed'),
+        tooltip: t('serviceAppsStatusHint_failed'),
+      };
+    case 'stopped':
+      return {
+        className: 'bg-gray-100 text-gray-600',
+        icon: PauseCircle,
+        label: t('serviceAppsStatus_stopped'),
+        tooltip: t('serviceAppsStatusHint_stopped'),
+      };
+    case 'idle':
+    default:
+      return {
+        className: 'bg-slate-100 text-slate-600',
+        icon: CircleDashed,
+        label: t('serviceAppsStatus_idle'),
+        tooltip: t('serviceAppsStatusHint_idle'),
+      };
+  }
+}
+
+function ServiceAppIconButton({
+  disabled = false,
+  icon: Icon,
+  label,
+  tooltip = label,
+  onClick,
+}: {
+  disabled?: boolean;
+  icon: LucideIcon;
+  label: string;
+  tooltip?: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent"
+          aria-label={label}
+        >
+          <Icon className="h-3.5 w-3.5" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="max-w-56 text-xs">{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function ServiceAppMenuItem({
+  destructive = false,
+  disabled = false,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  destructive?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-gray-700 hover:bg-gray-100',
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
   );
 }
 

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

@@ -39,6 +39,20 @@ export function useRestartServiceApp() {
   });
 }
 
+export function useDeleteServiceApp() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (appId: string) => nextclawClient.serviceApps.deleteServiceApp(appId),
+    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 }),
+      ]);
+    },
+  });
+}
+
 export function useDiscoverServiceAppActions() {
   const queryClient = useQueryClient();
   return useMutation({

package/src/features/side-dock/components/side-dock.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SIDE_DOCK_BUILT_IN_ITEMS } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { SideDock } from '@/features/side-dock/components/side-dock';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
@@ -28,7 +28,8 @@ describe('SideDock', () => {
     );
 
     expect(screen.getByTestId('side-dock')).toBeTruthy();
-    SIDE_DOCK_BUILT_IN_ITEMS.forEach((item) => {
+    const builtInItems = getSideDockBuiltInItems();
+    builtInItems.forEach((item) => {
       expect(document.querySelector(`[data-side-dock-item-id="${item.id}"]`)).toBeTruthy();
     });
 
@@ -36,7 +37,7 @@ describe('SideDock', () => {
     expect(appsButton).toBeTruthy();
     fireEvent.click(appsButton as Element);
 
-    expect(openItem).toHaveBeenCalledWith(SIDE_DOCK_BUILT_IN_ITEMS[0]);
+    expect(openItem).toHaveBeenCalledWith(builtInItems[0]);
   });
 
   it('does not highlight the default docs tab while DocBrowser is closed', () => {
@@ -55,4 +56,58 @@ describe('SideDock', () => {
     expect(docsButton?.className).toContain('bg-transparent');
     expect(docsButton?.className).not.toContain('shadow-sm');
   });
+
+  it('renders removable pinned entries and calls manager unpin by item id', () => {
+    const manager = {
+      openItem: vi.fn(),
+      unpinItem: vi.fn(),
+    } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+    useSideDockStore.getState().setPinnedItems([
+      {
+        createdAt: '2026-06-02T00:00:00.000Z',
+        icon: { type: 'builtin', name: 'docs' },
+        id: 'pinned-docs-custom',
+        label: 'Custom Docs',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://docs/custom' },
+      },
+    ]);
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    expect(document.querySelector('[data-side-dock-item-id="pinned-docs-custom"]')).toBeTruthy();
+
+    fireEvent.click(screen.getByTitle('Remove shortcut'));
+
+    expect(manager.unpinItem).toHaveBeenCalledWith('pinned-docs-custom');
+  });
+
+  it('renders text icons for pinned entries', () => {
+    const manager = {
+      openItem: vi.fn(),
+      unpinItem: vi.fn(),
+    } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+    useSideDockStore.getState().setPinnedItems([
+      {
+        createdAt: '2026-06-02T00:00:00.000Z',
+        icon: { type: 'text', value: 'D' },
+        id: 'pinned-panel-app-demo',
+        label: 'Demo App',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://panel-app/demo' },
+      },
+    ]);
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    expect(screen.getByText('D')).toBeTruthy();
+  });
 });