@nextclaw/ui 0.13.4 → 0.13.6

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -19,6 +19,7 @@ import { cn } from "@/shared/lib/utils";
 import {
   CheckCircle2,
   Download,
+  RefreshCw,
   Trash2,
 } from "lucide-react";
 
@@ -35,6 +36,7 @@ type MarketplaceListCardActionProps = {
   record?: MarketplaceInstalledRecord;
   isInstalling: boolean;
   isDisabled: boolean;
+  canUpdate: boolean;
   canUninstall: boolean;
   busyAction?: MarketplaceManageAction;
   busyForRecord: boolean;
@@ -96,6 +98,7 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
     record,
     isInstalling,
     isDisabled,
+    canUpdate,
     canUninstall,
     busyAction,
     busyForRecord,
@@ -103,7 +106,7 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
     onInstall,
     onManage,
   } = props;
-  const hasActions = Boolean((item && !record) || (record && canUninstall));
+  const hasActions = Boolean((item && !record) || (record && (canUpdate || canUninstall)));
 
   return (
     <div
@@ -148,6 +151,22 @@ function MarketplaceListCardActions(props: MarketplaceListCardActionProps) {
           </button>
         )}
 
+        {record && canUpdate && (
+          <button
+            disabled={busyForRecord}
+            onClick={(event) => {
+              event.stopPropagation();
+              onManage("update", record);
+            }}
+            className="inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-xl border border-blue-200/80 bg-white px-3 text-xs font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50 disabled:opacity-50"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            {busyAction === "update"
+              ? t("marketplaceUpdating")
+              : t("marketplaceUpdate")}
+          </button>
+        )}
+
         {record && canUninstall && (
           <button
             disabled={busyForRecord}
@@ -241,6 +260,7 @@ export function MarketplaceListCard(props: {
     : undefined;
   const busyForRecord = Boolean(busyAction);
   const canUninstall = record?.type === "skill" && record.source === "workspace";
+  const canUpdate = record?.type === "skill" && record.origin === "marketplace";
   const isDisabled = record
     ? record.enabled === false || record.runtimeStatus === "disabled"
     : false;
@@ -269,6 +289,7 @@ export function MarketplaceListCard(props: {
         record={record}
         isInstalling={isInstalling}
         isDisabled={isDisabled}
+        canUpdate={canUpdate}
         canUninstall={canUninstall}
         busyAction={busyAction}
         busyForRecord={busyForRecord}

package/src/features/marketplace/components/marketplace-page.tsx

@@ -282,7 +282,9 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     action: MarketplaceManageAction,
     record: MarketplaceInstalledRecord,
   ) => {
-    const targetId = record.id || record.spec;
+    const targetId = action === "update"
+      ? record.catalogSlug || record.id || record.spec
+      : record.id || record.spec;
     if (!targetId) {
       return;
     }

package/src/features/marketplace/hooks/use-marketplace.ts

@@ -178,7 +178,9 @@ export function useManageMarketplaceItem() {
         ? t('marketplaceEnableSuccess')
         : result.action === 'disable'
           ? t('marketplaceDisableSuccess')
-          : t('marketplaceUninstallSuccess');
+          : result.action === 'update'
+            ? t('marketplaceUpdateSuccess')
+            : t('marketplaceUninstallSuccess');
       toast.success(result.message || fallback);
     },
     onError: (error: Error) => {

package/src/features/marketplace/utils/marketplace-installed-cache.utils.ts

@@ -133,6 +133,14 @@ export function applyManageResultToInstalledView(params: {
       };
     }
 
+    if (params.result.action === 'update') {
+      return {
+        ...record,
+        installedAt: new Date().toISOString(),
+        origin: record.origin ?? 'marketplace'
+      };
+    }
+
     return {
       ...record,
       enabled: true,

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -1,5 +1,5 @@
 import { t } from '@/shared/lib/i18n';
-import type { ParsedResourceUri, ResourceUriRouteDefinition } from '@/shared/lib/resource-uri';
+import { parseResourceUri, type ParsedResourceUri, type ResourceUriRouteDefinition } from '@/shared/lib/resource-uri';
 import {
   getDefaultDocsUrl,
   inferTabTitle,
@@ -32,9 +32,67 @@ function resolveNextclawDocsUrl(uri: ParsedResourceUri): string {
   return normalizeUrlByKind(rawPath, 'docs');
 }
 
+function createDocsResourceUriFromSegments(pathSegments: string[]): string {
+  const path = pathSegments
+    .filter((segment) => segment.trim().length > 0)
+    .map((segment) => encodeURIComponent(decodeURIComponent(segment)))
+    .join('/');
+  return path ? `nextclaw://docs/${path}` : 'nextclaw://docs';
+}
+
+function createDocsResourceUriFromUrl(url: string): string {
+  const normalized = normalizeDocUrl(url);
+  const pathname = normalized.startsWith('/')
+    ? normalized
+    : (() => {
+        try {
+          return new URL(url).pathname;
+        } catch {
+          return '';
+        }
+      })();
+  if (!pathname) {
+    return 'nextclaw://docs';
+  }
+  return createDocsResourceUriFromSegments(pathname.split('/'));
+}
+
+function getPanelAppId(uri: ParsedResourceUri): string {
+  if (uri.scheme === 'nextclaw' && uri.authority === 'panel-app') {
+    return uri.pathSegments[0] ?? '';
+  }
+  const [apiSegment, collectionSegment, appId, contentSegment] = uri.pathSegments;
+  return apiSegment === 'api'
+    && collectionSegment === 'panel-apps'
+    && appId !== undefined
+    && appId.length > 0
+    && contentSegment === 'content'
+    ? appId
+    : '';
+}
+
+function isPanelAppContentUri(uri: ParsedResourceUri): boolean {
+  return getPanelAppId(uri).length > 0;
+}
+
 function resolvePanelAppPlaceholderUrl(uri: ParsedResourceUri): string {
-  const appId = uri.pathSegments[0] ?? '';
-  return appId ? `nextclaw://panel-app/${encodeURIComponent(appId)}` : 'nextclaw://panel-app';
+  const appId = getPanelAppId(uri);
+  return appId ? `/api/panel-apps/${encodeURIComponent(decodeURIComponent(appId))}/content` : 'nextclaw://panel-app';
+}
+
+function createPanelAppResourceUri(uri: ParsedResourceUri): string {
+  const appId = getPanelAppId(uri);
+  return appId ? `nextclaw://panel-app/${encodeURIComponent(decodeURIComponent(appId))}` : 'nextclaw://panel-app';
+}
+
+function arePanelAppUrlsEquivalent(left: string, right: string): boolean {
+  const leftUri = parseResourceUri(left);
+  const rightUri = parseResourceUri(right);
+  const leftAppId = getPanelAppId(leftUri);
+  const rightAppId = getPanelAppId(rightUri);
+  return leftAppId.length > 0 && rightAppId.length > 0
+    ? decodeURIComponent(leftAppId) === decodeURIComponent(rightAppId)
+    : left === right;
 }
 
 export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefinition[] = [
@@ -46,6 +104,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
     resolve: () => ({
       historyPolicy: 'managed',
       kind: RIGHT_PANEL_HOME_TAB_KIND,
+      resourceUri: RIGHT_PANEL_HOME_URL,
       title: t('docBrowserHomeTitle'),
       url: RIGHT_PANEL_HOME_URL,
     }),
@@ -61,6 +120,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
       return {
         historyPolicy: 'managed',
         kind: 'docs',
+        resourceUri: createDocsResourceUriFromUrl(url),
         title: t('docBrowserHelp'),
         url,
       };
@@ -77,6 +137,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
       return {
         historyPolicy: 'managed',
         kind: 'docs',
+        resourceUri: createDocsResourceUriFromSegments(uri.pathSegments),
         title: t('docBrowserHelp'),
         url,
       };
@@ -94,6 +155,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
         dedupeKey: 'apps',
         historyPolicy: 'managed',
         kind: RIGHT_PANEL_APPS_TAB_KIND,
+        resourceUri: url,
         title: url === RIGHT_PANEL_APPS_URL ? t('appsTitle') : t('serviceAppsTitle'),
         url,
       };
@@ -104,19 +166,20 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
     defaultUrl: () => 'nextclaw://panel-app',
     id: 'panel-app',
     kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
-    match: (uri) => uri.scheme === 'nextclaw' && uri.authority === 'panel-app',
+    match: (uri) => (uri.scheme === 'nextclaw' && uri.authority === 'panel-app') || isPanelAppContentUri(uri),
     resolve: (uri) => {
       const url = resolvePanelAppPlaceholderUrl(uri);
-      const appId = uri.pathSegments[0] ?? '';
+      const appId = getPanelAppId(uri);
       return {
         dedupeKey: appId ? `panel-app:${decodeURIComponent(appId)}` : undefined,
         historyPolicy: 'managed',
         kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
+        resourceUri: createPanelAppResourceUri(uri),
         title: t('panelAppsTitle'),
         url,
       };
     },
-    areEquivalent: (left, right) => left === right,
+    areEquivalent: arePanelAppUrlsEquivalent,
   },
   {
     defaultUrl: () => 'about:blank',
@@ -126,6 +189,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
     resolve: (uri) => ({
       historyPolicy: 'managed',
       kind: 'content',
+      resourceUri: uri.raw || 'about:blank',
       title: inferTabTitle(uri.raw, 'content', 'Detail'),
       url: uri.raw || 'about:blank',
     }),

package/src/features/right-panel-resources/utils/right-panel-resource-route-resolver.utils.test.ts

@@ -8,11 +8,13 @@ describe('RightPanelResourceRouteResolver', () => {
     expect(resolver.resolve('nextclaw://apps')).toMatchObject({
       dedupeKey: 'apps',
       kind: 'apps',
+      resourceUri: 'nextclaw://apps',
       url: 'nextclaw://apps',
     });
     expect(resolver.resolve('nextclaw://apps?tab=service-apps')).toMatchObject({
       dedupeKey: 'apps',
       kind: 'apps',
+      resourceUri: 'nextclaw://apps?tab=service-apps',
       url: 'nextclaw://apps?tab=service-apps',
     });
   });
@@ -22,6 +24,7 @@ describe('RightPanelResourceRouteResolver', () => {
     const target = resolver.resolve('nextclaw://docs/guide/getting-started');
 
     expect(target.kind).toBe('docs');
+    expect(target.resourceUri).toBe('nextclaw://docs/guide/getting-started');
     expect(target.title).toBe('Help Docs');
     expect(target.url).toContain('/guide/getting-started');
   });
@@ -32,7 +35,28 @@ describe('RightPanelResourceRouteResolver', () => {
     expect(resolver.resolve('nextclaw://panel-app/timer')).toMatchObject({
       dedupeKey: 'panel-app:timer',
       kind: 'panel-app',
-      url: 'nextclaw://panel-app/timer',
+      resourceUri: 'nextclaw://panel-app/timer',
+      url: '/api/panel-apps/timer/content',
     });
   });
+
+  it('keeps panel app content URLs idempotent under panel app kind', () => {
+    const resolver = new RightPanelResourceRouteResolver();
+
+    expect(resolver.resolveOpenTarget({
+      kind: 'panel-app',
+      url: '/api/panel-apps/timer/content',
+    })).toMatchObject({
+      dedupeKey: 'panel-app:timer',
+      kind: 'panel-app',
+      resourceUri: 'nextclaw://panel-app/timer',
+      url: '/api/panel-apps/timer/content',
+    });
+    expect(resolver.areUrlsEquivalent(
+      'nextclaw://panel-app/timer',
+      '/api/panel-apps/timer/content',
+      'panel-app',
+      'panel-app',
+    )).toBe(true);
+  });
 });

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

@@ -21,7 +21,7 @@ function inferFallbackKind(url?: string): DocBrowserTabKind {
 export class RightPanelResourceRouteResolver implements DocBrowserRouteResolver {
   private readonly resourceUriResolver = new ResourceUriResolver<RightPanelResourceTarget>(
     RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS_FOR_RESOURCE_URI,
-    { getNormalizedUri: (target) => target.url },
+    { getNormalizedUri: (target) => target.resourceUri ?? target.url },
   );
 
   resolve = (uri: string): RightPanelResourceTarget => this.resourceUriResolver.resolve(uri);

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources/utils/right-panel-resource-uri.utils';
+
+function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
+  return {
+    contentPath: '/api/panel-apps/demo/content',
+    createdAt: '2026-06-02T00:00:00.000Z',
+    favorite: false,
+    fileName: 'demo.html',
+    id: 'demo',
+    openCount: 0,
+    sizeBytes: 1024,
+    title: 'Demo App',
+    updatedAt: '2026-06-02T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('right-panel-resource uri utils', () => {
+  it('keeps panel app image icons as dock image icons', () => {
+    const target = createPanelAppRightPanelResourceTarget(createPanelAppEntry({
+      icon: '/api/panel-apps/demo/assets/icon.png',
+    }));
+
+    expect(target.dockIcon).toEqual({
+      type: 'url',
+      url: '/api/panel-apps/demo/assets/icon.png',
+    });
+  });
+
+  it('keeps panel app text icons as dock text icons', () => {
+    const target = createPanelAppRightPanelResourceTarget(createPanelAppEntry({
+      icon: '🧭',
+    }));
+
+    expect(target.dockIcon).toEqual({
+      type: 'text',
+      value: '🧭',
+    });
+  });
+});

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