@nextclaw/ui 0.12.35-beta.5 → 0.12.35-beta.7

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

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { PanelAppListItem } from './panel-app-list-item';
+
+const baseEntry = {
+  id: 'demo',
+  fileName: 'demo.panel.html',
+  title: 'Demo Panel',
+  description: 'A compact panel app with a longer description that should stay on one line.',
+  contentPath: '/api/panel-apps/demo/content',
+  createdAt: '2026-05-28T08:00:00.000Z',
+  updatedAt: '2026-05-28T09:00:00.000Z',
+  sizeBytes: 12,
+  favorite: false,
+  openCount: 0,
+};
+
+describe('PanelAppListItem', () => {
+  it('keeps panel app metadata compact below the icon-title row', () => {
+    const { container } = render(
+      <PanelAppListItem
+        deletePending={false}
+        entry={baseEntry}
+        favoritePending={false}
+        onDelete={vi.fn()}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText(baseEntry.description).className).toContain('truncate');
+    expect(container.querySelector('.line-clamp-2')).toBeNull();
+  });
+
+  it('opens delete from the more-actions menu only after confirmation', async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+    render(
+      <PanelAppListItem
+        deletePending={false}
+        entry={baseEntry}
+        favoritePending={false}
+        onDelete={onDelete}
+        onOpen={vi.fn()}
+        onToggleFavorite={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    await user.click(screen.getByRole('button', { name: 'Delete panel app' }));
+
+    expect(onDelete).not.toHaveBeenCalled();
+    expect(screen.getByText('Delete panel app?')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
+
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,60 +1,150 @@
-import type { MouseEvent } from 'react';
-import { AppWindow, Star } from 'lucide-react';
+import { useState, type MouseEvent } from 'react';
+import { AppWindow, MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
-import { formatDateTime, t } from '@/shared/lib/i18n';
+import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { getLanguage, getLocale, t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
 export function PanelAppListItem({
+  deletePending,
   entry,
   favoritePending,
+  onDelete,
   onOpen,
   onToggleFavorite,
 }: {
+  deletePending: boolean;
   entry: PanelAppEntryView;
   favoritePending: boolean;
+  onDelete: () => void;
   onOpen: () => void;
   onToggleFavorite: () => void;
 }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const favoriteLabel = entry.favorite ? t('panelAppsUnfavorite') : t('panelAppsFavorite');
   const secondary = entry.lastOpenedAt
-    ? `${t('panelAppsLastOpened')} ${formatDateTime(entry.lastOpenedAt)}`
-    : `${t('panelAppsUpdated')} ${formatDateTime(entry.updatedAt)}`;
+    ? `${t('panelAppsLastOpened')} ${formatPanelAppTime(entry.lastOpenedAt)}`
+    : `${t('panelAppsUpdated')} ${formatPanelAppTime(entry.updatedAt)}`;
+
   const handleFavorite = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     onToggleFavorite();
   };
+  const openDeleteDialog = () => {
+    setIsMenuOpen(false);
+    setIsDeleteDialogOpen(true);
+  };
 
   return (
-    <div className="group flex w-full min-w-0 items-start gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-2.5 transition-colors hover:border-amber-200 hover:bg-amber-50/50">
-      <button
-        type="button"
-        onClick={onOpen}
-        className="flex min-w-0 flex-1 items-start gap-3 text-left"
-      >
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-amber-50 text-base text-amber-700">
-          <PanelAppIcon icon={entry.icon} title={entry.title} />
-        </span>
-        <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium text-gray-900">{entry.title}</span>
+    <div className="group w-full min-w-0 rounded-lg border border-gray-200 bg-white px-2.5 py-2.5 transition-colors hover:border-amber-200 hover:bg-amber-50/50">
+      <div className="flex min-w-0 items-start gap-2">
+        <button type="button" onClick={onOpen} className="min-w-0 flex-1 text-left">
+          <span className="flex min-w-0 items-center gap-2">
+            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-amber-50 text-base text-amber-700">
+              <PanelAppIcon icon={entry.icon} title={entry.title} />
+            </span>
+            <span className="block min-w-0 flex-1 truncate text-sm font-medium text-gray-900">{entry.title}</span>
+          </span>
           {entry.description ? (
-            <span className="mt-0.5 block line-clamp-2 text-xs leading-5 text-gray-600">{entry.description}</span>
+            <span className="mt-1.5 block truncate text-xs leading-5 text-gray-600">{entry.description}</span>
           ) : null}
-          <span className="mt-1 block truncate text-xs text-gray-400">{secondary}</span>
-        </span>
-      </button>
-      <button
-        type="button"
-        onClick={handleFavorite}
-        disabled={favoritePending}
-        className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-amber-500 disabled:opacity-50"
-        title={favoriteLabel}
-        aria-label={favoriteLabel}
-      >
-        <Star className={entry.favorite ? 'h-4 w-4 fill-amber-400 text-amber-500' : 'h-4 w-4'} />
-      </button>
+          <span className="mt-0.5 block truncate text-[11px] leading-4 text-gray-400">{secondary}</span>
+        </button>
+        <div className="flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            onClick={handleFavorite}
+            disabled={favoritePending}
+            className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-amber-500 disabled:opacity-50"
+            title={favoriteLabel}
+            aria-label={favoriteLabel}
+          >
+            <Star className={entry.favorite ? 'h-4 w-4 fill-amber-400 text-amber-500' : 'h-4 w-4'} />
+          </button>
+          <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                className="rounded-md p-1.5 text-gray-400 transition-colors hover:bg-white hover:text-gray-700"
+                aria-label={t('panelAppsMoreActions')}
+                disabled={deletePending}
+              >
+                <MoreVertical className="h-4 w-4" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+              <PanelAppMenuItem
+                destructive
+                disabled={deletePending}
+                icon={Trash2}
+                label={t('panelAppsDelete')}
+                onClick={openDeleteDialog}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <ConfirmDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        title={t('panelAppsDeleteConfirmTitle')}
+        description={`${t('panelAppsDeleteConfirmDescription')} ${entry.fileName}`}
+        confirmLabel={t('delete')}
+        variant="destructive"
+        onConfirm={onDelete}
+        onCancel={() => undefined}
+      />
     </div>
   );
 }
 
+function PanelAppMenuItem({
+  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>
+  );
+}
+
+function formatPanelAppTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  const locale = getLocale(getLanguage());
+  const now = new Date();
+  if (date.toDateString() === now.toDateString()) {
+    return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' }).format(date);
+  }
+  if (date.getFullYear() === now.getFullYear()) {
+    return new Intl.DateTimeFormat(locale, { month: 'numeric', day: 'numeric' }).format(date);
+  }
+  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: 'numeric', day: 'numeric' }).format(date);
+}
+
 function PanelAppIcon({ icon, title }: { icon?: string; title: string }) {
   if (!icon) {
     return <AppWindow className="h-4 w-4" />;

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

@@ -1,7 +1,7 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { HelpCircle, RefreshCw } from 'lucide-react';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
-import { usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import { useDeletePanelApp, usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
 import { getPanelAppViewEntries } from '@/features/panel-apps/utils/panel-app-view.utils';
 import type { PanelAppViewMode } from '@/features/panel-apps/utils/panel-app-view.utils';
 import type { PanelAppEntryView } from '@/shared/lib/api';
@@ -17,6 +17,7 @@ export function PanelAppsList({
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const panelApps = usePanelApps();
+  const deletePanelApp = useDeletePanelApp();
   const updatePreferences = useUpdatePanelAppPreferences();
   const recordOpened = useRecordPanelAppOpened();
   const [viewMode, setViewMode] = useState<PanelAppViewMode>('smart');
@@ -40,6 +41,10 @@ export function PanelAppsList({
     });
   };
 
+  const deleteEntry = (entry: PanelAppEntryView) => {
+    deletePanelApp.mutate(entry.id);
+  };
+
   if (panelApps.isLoading) {
     return (
       <div className="flex h-full items-center justify-center text-sm text-gray-500">{t('panelAppsLoading')}</div>
@@ -100,7 +105,9 @@ export function PanelAppsList({
               <PanelAppListItem
                 key={entry.id}
                 entry={entry}
+                deletePending={deletePanelApp.isPending}
                 favoritePending={updatePreferences.isPending}
+                onDelete={() => deleteEntry(entry)}
                 onOpen={() => void openPanelApp(entry)}
                 onToggleFavorite={() => toggleFavorite(entry)}
               />

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

@@ -37,3 +37,13 @@ export function useRecordPanelAppOpened() {
     },
   });
 }
+
+export function useDeletePanelApp() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => nextclawClient.panelApps.deletePanelApp(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+    },
+  });
+}

package/src/features/panel-apps/managers/panel-app-bridge.manager.test.ts

@@ -1,14 +1,17 @@
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import { waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { PanelAppBridgeManager } from '@/features/panel-apps/managers/panel-app-bridge.manager';
 import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
 
 const mocks = vi.hoisted(() => ({
   createBridgeSession: vi.fn(),
+  generateAgentObject: vi.fn(),
+  grantAgentCapability: vi.fn(),
   grantServiceAction: vi.fn(),
   invokeServiceAction: vi.fn(),
   listServiceActions: vi.fn(),
+  sendAgentMessage: vi.fn(),
   requestAuthorization: vi.fn(),
 }));
 
@@ -16,6 +19,9 @@ vi.mock('@/shared/lib/api', () => ({
   nextclawClient: {
     panelApps: {
       createBridgeSession: mocks.createBridgeSession,
+      generateAgentObject: mocks.generateAgentObject,
+      grantAgentCapability: mocks.grantAgentCapability,
+      sendAgentMessage: mocks.sendAgentMessage,
     },
     serviceApps: {
       grantServiceAction: mocks.grantServiceAction,
@@ -26,6 +32,10 @@ vi.mock('@/shared/lib/api', () => ({
   },
 }));
 
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
 describe('PanelAppBridgeManager', () => {
   it('opens the authorization flow before retrying a protected service action', async () => {
     const manager = new PanelAppBridgeManager({
@@ -108,4 +118,78 @@ describe('PanelAppBridgeManager', () => {
       type: 'nextclaw:panel-app-service-actions:response',
     }, '*');
   });
+
+  it('opens the authorization flow before retrying a protected generateObject call', async () => {
+    const manager = new PanelAppBridgeManager({
+      requestAuthorization: mocks.requestAuthorization,
+    } as unknown as ServiceActionAuthorizationManager);
+    const postMessage = vi.fn();
+    const contentWindow = { postMessage } as unknown as Window;
+    const iframe = { contentWindow } as HTMLIFrameElement;
+    mocks.createBridgeSession.mockResolvedValue({
+      expiresAt: '2026-05-28T00:00:00.000Z',
+      id: 'session-1',
+      panelAppId: 'mood-calendar',
+      tabId: 'tab-1',
+      token: 'token-1',
+    });
+    mocks.generateAgentObject
+      .mockRejectedValueOnce(new NextClawClientError({
+        code: 'AUTHORIZATION_REQUIRED',
+        message: 'authorization required',
+      }))
+      .mockResolvedValueOnce({ result: { summary: 'sunny' } });
+    mocks.requestAuthorization.mockResolvedValue(true);
+    mocks.grantAgentCapability.mockResolvedValue({
+      caller: { surface: 'panel-app', appId: 'mood-calendar' },
+      capability: 'agent:generateObject',
+      grantedAt: '2026-05-28T00:00:00.000Z',
+    });
+
+    manager.handleIframeMessage({
+      event: {
+        data: {
+          method: 'agent.generateObject',
+          payload: {
+            input: {
+              peerId: 'mood-summary',
+              prompt: 'summarize',
+              schema: { type: 'object' },
+            },
+          },
+          requestId: 'request-2',
+          type: 'nextclaw:panel-app-service-actions:request',
+        },
+        source: contentWindow,
+      } as MessageEvent,
+      iframe,
+      tab: {
+        currentUrl: '/api/panel-apps/mood-calendar/content',
+        history: [],
+        historyIndex: 0,
+        id: 'tab-1',
+        kind: 'content',
+        navVersion: 0,
+        title: 'Mood Calendar',
+      },
+    });
+
+    await waitFor(() => expect(postMessage).toHaveBeenCalled());
+
+    expect(mocks.requestAuthorization).toHaveBeenCalledWith(expect.objectContaining({
+      actionId: 'agent:generateObject',
+      panelAppId: 'mood-calendar',
+      risk: 'write',
+    }));
+    expect(mocks.grantAgentCapability).toHaveBeenCalledWith('agent:generateObject', {
+      bridgeSessionToken: 'token-1',
+    });
+    expect(mocks.generateAgentObject).toHaveBeenCalledTimes(2);
+    expect(postMessage).toHaveBeenCalledWith({
+      data: { result: { summary: 'sunny' } },
+      ok: true,
+      requestId: 'request-2',
+      type: 'nextclaw:panel-app-service-actions:response',
+    }, '*');
+  });
 });

package/src/features/panel-apps/managers/panel-app-bridge.manager.ts

@@ -1,6 +1,12 @@
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import type {
+  PanelAppAgentCapabilityView,
+  PanelAppAgentGenerateObjectRequestView,
+  PanelAppAgentGenerateObjectResultView,
+  PanelAppAgentSendRequestView,
+  PanelAppAgentSendResultView,
   PanelAppBridgeSessionView,
+  PanelAppCapabilityGrantView,
   ServiceActionGrantView,
   ServiceActionInvokeResultView,
   ServiceActionListView,
@@ -12,10 +18,17 @@ import { nextclawClient } from '@/shared/lib/api';
 type PanelAppBridgeRequest = {
   type: 'nextclaw:panel-app-service-actions:request';
   requestId: string;
-  method: 'invoke' | 'list' | 'requestGrant' | 'revokeGrant';
+  method:
+    | 'agent.generateObject'
+    | 'agent.send'
+    | 'invoke'
+    | 'list'
+    | 'requestGrant'
+    | 'revokeGrant';
   payload?: {
     actionId?: string;
-    input?: Record<string, unknown>;
+    input?: unknown;
+    request?: unknown;
   };
 };
 
@@ -79,6 +92,9 @@ export class PanelAppBridgeManager {
     session: PanelAppBridgeSessionView,
     request: PanelAppBridgeRequest,
   ): Promise<
+    | PanelAppAgentGenerateObjectResultView
+    | PanelAppAgentSendResultView
+    | PanelAppCapabilityGrantView
     | ServiceActionGrantView
     | ServiceActionInvokeResultView
     | ServiceActionListView
@@ -98,6 +114,10 @@ export class PanelAppBridgeManager {
         );
       case 'invoke':
         return await this.invokeWithAuthorization(session, request);
+      case 'agent.send':
+        return await this.sendAgentMessageWithAuthorization(session, request);
+      case 'agent.generateObject':
+        return await this.generateAgentObjectWithAuthorization(session, request);
       default:
         throw new Error(`Unsupported panel bridge method: ${String(request.method)}`);
     }
@@ -111,22 +131,89 @@ export class PanelAppBridgeManager {
     try {
       return await nextclawClient.serviceApps.invokeServiceAction(
         actionId,
-        request.payload?.input,
+        this.readOptionalRecord(request.payload?.input),
         { bridgeSessionToken: session.token },
       );
     } catch (error) {
       if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
         throw error;
       }
-      await this.confirmAndGrant(session, actionId, request.payload?.input);
+      await this.confirmAndGrant(session, actionId, this.readOptionalRecord(request.payload?.input));
       return await nextclawClient.serviceApps.invokeServiceAction(
         actionId,
-        request.payload?.input,
+        this.readOptionalRecord(request.payload?.input),
         { bridgeSessionToken: session.token },
       );
     }
   };
 
+  private sendAgentMessageWithAuthorization = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<PanelAppAgentSendResultView> => {
+    try {
+      return await nextclawClient.panelApps.sendAgentMessage(
+        this.readAgentSendRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    } catch (error) {
+      if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
+        throw error;
+      }
+      await this.confirmAndGrantAgentCapability(session, 'agent:send');
+      return await nextclawClient.panelApps.sendAgentMessage(
+        this.readAgentSendRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    }
+  };
+
+  private generateAgentObjectWithAuthorization = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<PanelAppAgentGenerateObjectResultView> => {
+    try {
+      return await nextclawClient.panelApps.generateAgentObject(
+        this.readGenerateObjectRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    } catch (error) {
+      if (!(error instanceof NextClawClientError) || error.code !== 'AUTHORIZATION_REQUIRED') {
+        throw error;
+      }
+      await this.confirmAndGrantAgentCapability(session, 'agent:generateObject');
+      return await nextclawClient.panelApps.generateAgentObject(
+        this.readGenerateObjectRequest(request),
+        { bridgeSessionToken: session.token },
+      );
+    }
+  };
+
+  private confirmAndGrantAgentCapability = async (
+    session: PanelAppBridgeSessionView,
+    capability: PanelAppAgentCapabilityView,
+  ): Promise<PanelAppCapabilityGrantView> => {
+    const allowed = await this.authorizationManager.requestAuthorization({
+      panelAppId: session.panelAppId,
+      actionId: capability,
+      actionTitle: capability === 'agent:send' ? 'Send agent message' : 'Generate object',
+      actionDescription: capability === 'agent:send'
+        ? 'Send a message to a NextClaw Agent session.'
+        : 'Send context to a NextClaw Agent session and receive a structured object.',
+      risk: 'write',
+    });
+    if (!allowed) {
+      throw new NextClawClientError({
+        code: 'AUTHORIZATION_REJECTED',
+        message: `Permission rejected for ${capability}.`,
+      });
+    }
+    return await nextclawClient.panelApps.grantAgentCapability(
+      capability,
+      { bridgeSessionToken: session.token },
+    );
+  };
+
   private confirmAndGrant = async (
     session: PanelAppBridgeSessionView,
     actionId: string,
@@ -160,7 +247,9 @@ export class PanelAppBridgeManager {
     const actions = await nextclawClient.serviceApps.listServiceActions({
       bridgeSessionToken: session.token,
     });
-    return actions.actions.find((action) => action.id === actionId);
+    return actions.actions.find(
+      (action: ServiceActionListView['actions'][number]) => action.id === actionId,
+    );
   };
 
   private createInputPreview = (input: Record<string, unknown> | undefined): string | undefined => {
@@ -208,6 +297,32 @@ export class PanelAppBridgeManager {
     return actionId;
   };
 
+  private readOptionalRecord = (value: unknown): Record<string, unknown> | undefined => {
+    if (value === undefined) {
+      return undefined;
+    }
+    return this.requireRecord(value, 'input');
+  };
+
+  private readAgentSendRequest = (
+    request: PanelAppBridgeRequest,
+  ): PanelAppAgentSendRequestView => ({
+    payload: this.requireRecord(request.payload?.request, 'agent.send request') as PanelAppAgentSendRequestView['payload'],
+  });
+
+  private readGenerateObjectRequest = (
+    request: PanelAppBridgeRequest,
+  ): PanelAppAgentGenerateObjectRequestView => ({
+    input: this.requireRecord(request.payload?.input, 'generateObject input') as PanelAppAgentGenerateObjectRequestView['input'],
+  });
+
+  private requireRecord = (value: unknown, label: string): Record<string, unknown> => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+      throw new Error(`${label} is required.`);
+    }
+    return value as Record<string, unknown>;
+  };
+
   private postResponse = (
     params: DocBrowserIframeMessageParams,
     response: PanelAppBridgeResponse,
@@ -239,6 +354,8 @@ export class PanelAppBridgeManager {
       candidate.type === 'nextclaw:panel-app-service-actions:request' &&
       typeof candidate.requestId === 'string' &&
       (candidate.method === 'invoke' ||
+        candidate.method === 'agent.send' ||
+        candidate.method === 'agent.generateObject' ||
         candidate.method === 'list' ||
         candidate.method === 'requestGrant' ||
         candidate.method === 'revokeGrant')

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -4,11 +4,15 @@ import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-brows
 import { getPresenter } from '@/app/presenters/app.presenter';
 import { AppsPanel, type AppsPanelTab } from '@/features/apps';
 import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
+import {
+  DOC_BROWSER_APPS_TAB_KIND,
+  DOC_BROWSER_APPS_URL,
+  DOC_BROWSER_SERVICE_APPS_URL,
+} from '@/shared/components/doc-browser/utils/doc-browser-route-registry.utils';
 import { t } from '@/shared/lib/i18n';
 
-export const APPS_TAB_KIND = 'apps';
+export const APPS_TAB_KIND = DOC_BROWSER_APPS_TAB_KIND;
 export const PANEL_APP_TAB_KIND = 'panel-app';
-const APPS_URL = 'nextclaw://apps';
 const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
 const PANEL_APP_IFRAME_SANDBOX = [
   'allow-scripts',
@@ -26,7 +30,7 @@ function isAppsPanelTab(value: unknown): value is AppsPanelTab {
 }
 
 export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
-  return tab === DEFAULT_APPS_PANEL_TAB ? APPS_URL : `${APPS_URL}?tab=${tab}`;
+  return tab === DEFAULT_APPS_PANEL_TAB ? DOC_BROWSER_APPS_URL : DOC_BROWSER_SERVICE_APPS_URL;
 }
 
 export function getAppsPanelTabFromUrl(url: string): AppsPanelTab {