@nextclaw/ui 0.13.8 → 0.13.10-beta.0

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

@@ -1,7 +1,8 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { HelpCircle, RefreshCw } from 'lucide-react';
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
-import { useDeletePanelApp, usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import { useDeletePanelApp, useGrantPanelAppClient, 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';
@@ -20,6 +21,8 @@ export function PanelAppsList({
   const deletePanelApp = useDeletePanelApp();
   const updatePreferences = useUpdatePanelAppPreferences();
   const recordOpened = useRecordPanelAppOpened();
+  const grantClient = useGrantPanelAppClient();
+  const presenter = useAppPresenter();
   const [viewMode, setViewMode] = useState<PanelAppViewMode>('smart');
   const entries = useMemo(
     () => getPanelAppViewEntries(panelApps.data?.entries ?? [], viewMode),
@@ -27,6 +30,9 @@ export function PanelAppsList({
   );
 
   const openPanelApp = async (entry: PanelAppEntryView) => {
+    if (!(await ensurePanelAppClientGrant(entry))) {
+      return;
+    }
     try {
       onOpenPanelApp(await recordOpened.mutateAsync(entry.id));
     } catch {
@@ -34,6 +40,26 @@ export function PanelAppsList({
     }
   };
 
+  const ensurePanelAppClientGrant = async (entry: PanelAppEntryView): Promise<boolean> => {
+    if (!entry.clientDeclared || entry.clientGranted) {
+      return true;
+    }
+    const allowed = await presenter.serviceActionAuthorizationManager.requestAuthorization({
+      panelAppId: entry.appId,
+      actions: [{
+        actionId: 'nextclaw.client',
+        actionTitle: t('panelAppsClientGrantTitle'),
+        actionDescription: t('panelAppsClientGrantDescription'),
+        risk: 'dangerous',
+      }],
+    });
+    if (!allowed) {
+      return false;
+    }
+    await grantClient.mutateAsync(entry.appId);
+    return true;
+  };
+
   const toggleFavorite = (entry: PanelAppEntryView) => {
     updatePreferences.mutate({
       id: entry.id,

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

@@ -38,6 +38,16 @@ export function useRecordPanelAppOpened() {
   });
 }
 
+export function useGrantPanelAppClient() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (appId: string) => nextclawClient.panelApps.grantClient(appId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PANEL_APPS_QUERY_KEY });
+    },
+  });
+}
+
 export function useDeletePanelApp() {
   const queryClient = useQueryClient();
   return useMutation({

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

@@ -5,10 +5,10 @@ import { PanelAppBridgeManager } from '@/features/panel-apps/managers/panel-app-
 import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
 
 const mocks = vi.hoisted(() => ({
-  createBridgeSession: vi.fn(),
   generateAgentObject: vi.fn(),
   grantAgentCapability: vi.fn(),
   grantServiceAction: vi.fn(),
+  grantServiceActions: vi.fn(),
   invokeServiceAction: vi.fn(),
   listServiceActions: vi.fn(),
   sendAgentMessage: vi.fn(),
@@ -18,13 +18,13 @@ const mocks = vi.hoisted(() => ({
 vi.mock('@/shared/lib/api', () => ({
   nextclawClient: {
     panelApps: {
-      createBridgeSession: mocks.createBridgeSession,
       generateAgentObject: mocks.generateAgentObject,
       grantAgentCapability: mocks.grantAgentCapability,
       sendAgentMessage: mocks.sendAgentMessage,
     },
     serviceApps: {
       grantServiceAction: mocks.grantServiceAction,
+      grantServiceActions: mocks.grantServiceActions,
       invokeServiceAction: mocks.invokeServiceAction,
       listServiceActions: mocks.listServiceActions,
       revokeServiceAction: vi.fn(),
@@ -36,58 +36,32 @@ afterEach(() => {
   vi.clearAllMocks();
 });
 
-describe('PanelAppBridgeManager', () => {
-  it('opens the authorization flow before retrying a protected service action', 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;
-    const actionId = 'mood-tracker.saveMood';
-    mocks.createBridgeSession.mockResolvedValue({
-      expiresAt: '2026-05-28T00:00:00.000Z',
-      id: 'session-1',
-      panelAppId: 'mood-calendar',
-      tabId: 'tab-1',
-      token: 'token-1',
-    });
-    mocks.invokeServiceAction
-      .mockRejectedValueOnce(new NextClawClientError({
-        code: 'AUTHORIZATION_REQUIRED',
-        message: 'authorization required',
-      }))
-      .mockResolvedValueOnce({ actionId, result: { saved: true } });
-    mocks.listServiceActions.mockResolvedValue({
-      actions: [{
-        appId: 'mood-tracker',
-        description: 'Save daily mood entries',
-        id: actionId,
-        name: 'saveMood',
-        risk: 'write',
-        title: 'Save mood',
-      }],
-    });
-    mocks.requestAuthorization.mockResolvedValue(true);
-    mocks.grantServiceAction.mockResolvedValue({
-      actionId,
-      caller: { surface: 'panel-app', appId: 'mood-calendar' },
-      grantedAt: '2026-05-28T00:00:00.000Z',
-      risk: 'write',
-    });
+function createManager(): PanelAppBridgeManager {
+  return new PanelAppBridgeManager({
+    requestAuthorization: mocks.requestAuthorization,
+  } as unknown as ServiceActionAuthorizationManager);
+}
 
-    manager.handleIframeMessage({
+function createIframeHarness(manager: PanelAppBridgeManager) {
+  const postMessage = vi.fn();
+  const contentWindow = { postMessage } as unknown as Window;
+  const iframe = { contentWindow } as HTMLIFrameElement;
+  return {
+    postMessage,
+    send: (
+      data: Record<string, unknown>,
+      iframeInstanceId = 'tab-1:0:0',
+    ) => manager.handleIframeMessage({
       event: {
         data: {
-          method: 'invoke',
-          payload: { actionId, input: { mood: 'happy' } },
-          requestId: 'request-1',
-          type: 'nextclaw:panel-app-service-actions:request',
+          appId: 'mood-calendar',
+          runtimeToken: 'token-1',
+          ...data,
         },
         source: contentWindow,
       } as MessageEvent,
       iframe,
-      iframeInstanceId: 'tab-1:0:0',
+      iframeInstanceId,
       tab: {
         currentUrl: '/api/panel-apps/mood-calendar/content',
         history: [],
@@ -97,20 +71,93 @@ describe('PanelAppBridgeManager', () => {
         navVersion: 0,
         title: 'Mood Calendar',
       },
+    }),
+  };
+}
+
+describe('PanelAppBridgeManager', () => {
+  it('authorizes missing service actions in one flow before retrying a protected action', async () => {
+    const manager = createManager();
+    const { postMessage, send } = createIframeHarness(manager);
+    const actionId = 'mood-tracker.saveMood';
+    mocks.invokeServiceAction
+      .mockRejectedValueOnce(new NextClawClientError({
+        code: 'AUTHORIZATION_REQUIRED',
+        message: 'authorization required',
+      }))
+      .mockResolvedValueOnce({ actionId, result: { saved: true } });
+    mocks.listServiceActions.mockResolvedValue({
+      actions: [
+        {
+          appId: 'mood-tracker',
+          description: 'Save daily mood entries',
+          grantState: 'not-granted',
+          id: actionId,
+          name: 'saveMood',
+          risk: 'write',
+          title: 'Save mood',
+        },
+        {
+          appId: 'mood-tracker',
+          description: 'Read mood history',
+          grantState: 'not-granted',
+          id: 'mood-tracker.listMoods',
+          name: 'listMoods',
+          risk: 'read',
+          title: 'List moods',
+        },
+      ],
+    });
+    mocks.requestAuthorization.mockResolvedValue(true);
+    mocks.grantServiceActions.mockResolvedValue({
+      grants: [
+        {
+          actionId,
+          caller: { surface: 'panel-app', appId: 'mood-calendar' },
+          grantedAt: '2026-05-28T00:00:00.000Z',
+          risk: 'write',
+        },
+        {
+          actionId: 'mood-tracker.listMoods',
+          caller: { surface: 'panel-app', appId: 'mood-calendar' },
+          grantedAt: '2026-05-28T00:00:00.000Z',
+          risk: 'read',
+        },
+      ],
+    });
+
+    send({
+      method: 'invoke',
+      payload: { actionId, input: { mood: 'happy' } },
+      requestId: 'request-1',
+      type: 'nextclaw:panel-app-service-actions:request',
     });
 
     await waitFor(() => expect(postMessage).toHaveBeenCalled());
 
     expect(mocks.requestAuthorization).toHaveBeenCalledWith(expect.objectContaining({
-      actionId,
-      actionTitle: 'Save mood',
+      actions: [
+        expect.objectContaining({
+          actionId,
+          actionTitle: 'Save mood',
+          risk: 'write',
+        }),
+        expect.objectContaining({
+          actionId: 'mood-tracker.listMoods',
+          actionTitle: 'List moods',
+          risk: 'read',
+        }),
+      ],
       inputPreview: expect.stringContaining('happy'),
       panelAppId: 'mood-calendar',
-      risk: 'write',
     }));
-    expect(mocks.grantServiceAction).toHaveBeenCalledWith(actionId, {
+    expect(mocks.grantServiceActions).toHaveBeenCalledWith([
+      actionId,
+      'mood-tracker.listMoods',
+    ], {
       bridgeSessionToken: 'token-1',
     });
+    expect(mocks.grantServiceAction).not.toHaveBeenCalled();
     expect(mocks.invokeServiceAction).toHaveBeenCalledTimes(2);
     expect(postMessage).toHaveBeenCalledWith({
       data: { actionId, result: { saved: true } },
@@ -121,19 +168,8 @@ describe('PanelAppBridgeManager', () => {
   });
 
   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',
-    });
+    const manager = createManager();
+    const { postMessage, send } = createIframeHarness(manager);
     mocks.generateAgentObject
       .mockRejectedValueOnce(new NextClawClientError({
         code: 'AUTHORIZATION_REQUIRED',
@@ -147,41 +183,24 @@ describe('PanelAppBridgeManager', () => {
       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',
+    send({
+      method: 'agent.generateObject',
+      payload: {
+        input: {
+          peerId: 'mood-summary',
+          prompt: 'summarize',
+          schema: { type: 'object' },
         },
-        source: contentWindow,
-      } as MessageEvent,
-      iframe,
-      iframeInstanceId: 'tab-1:0:0',
-      tab: {
-        currentUrl: '/api/panel-apps/mood-calendar/content',
-        history: [],
-        historyIndex: 0,
-        id: 'tab-1',
-        kind: 'content',
-        navVersion: 0,
-        title: 'Mood Calendar',
       },
+      requestId: 'request-2',
+      type: 'nextclaw:panel-app-service-actions:request',
     });
 
     await waitFor(() => expect(postMessage).toHaveBeenCalled());
 
     expect(mocks.requestAuthorization).toHaveBeenCalledWith(expect.objectContaining({
-      actionId: 'agent:generateObject',
+      actions: [expect.objectContaining({ actionId: 'agent:generateObject' })],
       panelAppId: 'mood-calendar',
-      risk: 'write',
     }));
     expect(mocks.grantAgentCapability).toHaveBeenCalledWith('agent:generateObject', {
       bridgeSessionToken: 'token-1',
@@ -195,69 +214,34 @@ describe('PanelAppBridgeManager', () => {
     }, '*');
   });
 
-  it('creates a fresh bridge session for each iframe instance', 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
-      .mockResolvedValueOnce({
-        expiresAt: '2026-05-28T00:00:00.000Z',
-        id: 'session-1',
-        panelAppId: 'mood-calendar',
-        tabId: 'tab-1',
-        token: 'token-1',
-      })
-      .mockResolvedValueOnce({
-        expiresAt: '2026-05-28T00:00:00.000Z',
-        id: 'session-2',
-        panelAppId: 'mood-calendar',
-        tabId: 'tab-1',
-        token: 'token-2',
-      });
+  it('uses the injected runtime token without creating a bridge session', async () => {
+    const manager = createManager();
+    const { postMessage, send } = createIframeHarness(manager);
     mocks.listServiceActions.mockResolvedValue({ actions: [] });
 
-    for (const [requestId, iframeInstanceId] of [
-      ['request-1', 'tab-1:0:0'],
-      ['request-2', 'tab-1:0:0'],
-      ['request-3', 'tab-1:0:1'],
+    for (const [requestId, runtimeToken] of [
+      ['request-1', 'token-1'],
+      ['request-2', 'token-2'],
+      ['request-3', 'token-3'],
     ]) {
-      manager.handleIframeMessage({
-        event: {
-          data: {
-            method: 'list',
-            requestId,
-            type: 'nextclaw:panel-app-service-actions:request',
-          },
-          source: contentWindow,
-        } as MessageEvent,
-        iframe,
-        iframeInstanceId,
-        tab: {
-          currentUrl: '/api/panel-apps/mood-calendar/content',
-          history: [],
-          historyIndex: 0,
-          id: 'tab-1',
-          kind: 'content',
-          navVersion: 0,
-          title: 'Mood Calendar',
-        },
+      send({
+        method: 'list',
+        requestId,
+        runtimeToken,
+        type: 'nextclaw:panel-app-service-actions:request',
       });
     }
 
     await waitFor(() => expect(postMessage).toHaveBeenCalledTimes(3));
 
-    expect(mocks.createBridgeSession).toHaveBeenCalledTimes(2);
     expect(mocks.listServiceActions).toHaveBeenNthCalledWith(1, {
       bridgeSessionToken: 'token-1',
     });
     expect(mocks.listServiceActions).toHaveBeenNthCalledWith(2, {
-      bridgeSessionToken: 'token-1',
+      bridgeSessionToken: 'token-2',
     });
     expect(mocks.listServiceActions).toHaveBeenNthCalledWith(3, {
-      bridgeSessionToken: 'token-2',
+      bridgeSessionToken: 'token-3',
     });
   });
 });

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

@@ -5,7 +5,6 @@ import type {
   PanelAppAgentGenerateObjectResultView,
   PanelAppAgentSendRequestView,
   PanelAppAgentSendResultView,
-  PanelAppBridgeSessionView,
   PanelAppCapabilityGrantView,
   ServiceActionGrantView,
   ServiceActionInvokeResultView,
@@ -18,6 +17,8 @@ import { nextclawClient } from '@/shared/lib/api';
 type PanelAppBridgeRequest = {
   type: 'nextclaw:panel-app-service-actions:request';
   requestId: string;
+  appId: string;
+  runtimeToken: string;
   method:
     | 'agent.generateObject'
     | 'agent.send'
@@ -32,6 +33,11 @@ type PanelAppBridgeRequest = {
   };
 };
 
+type PanelAppBridgeContext = {
+  appId: string;
+  token: string;
+};
+
 type PanelAppBridgeResponse =
   | {
       type: 'nextclaw:panel-app-service-actions:response';
@@ -51,8 +57,6 @@ type PanelAppBridgeResponse =
     };
 
 export class PanelAppBridgeManager {
-  private readonly sessions = new Map<string, Promise<PanelAppBridgeSessionView>>();
-
   constructor(private readonly authorizationManager: ServiceActionAuthorizationManager) {}
 
   handleIframeMessage = ({ event, iframe, iframeInstanceId, tab }: DocBrowserIframeMessageParams): void => {
@@ -70,7 +74,7 @@ export class PanelAppBridgeManager {
     request: PanelAppBridgeRequest,
   ): Promise<void> => {
     try {
-      const session = await this.getSession(params);
+      const session = this.getBridgeContext(request);
       const data = await this.dispatchRequest(session, request);
       this.postResponse(params, {
         type: 'nextclaw:panel-app-service-actions:response',
@@ -89,7 +93,7 @@ export class PanelAppBridgeManager {
   };
 
   private dispatchRequest = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     request: PanelAppBridgeRequest,
   ): Promise<
     | PanelAppAgentGenerateObjectResultView
@@ -124,7 +128,7 @@ export class PanelAppBridgeManager {
   };
 
   private invokeWithAuthorization = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     request: PanelAppBridgeRequest,
   ): Promise<ServiceActionInvokeResultView> => {
     const actionId = this.requireActionId(request);
@@ -148,7 +152,7 @@ export class PanelAppBridgeManager {
   };
 
   private sendAgentMessageWithAuthorization = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     request: PanelAppBridgeRequest,
   ): Promise<PanelAppAgentSendResultView> => {
     try {
@@ -169,7 +173,7 @@ export class PanelAppBridgeManager {
   };
 
   private generateAgentObjectWithAuthorization = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     request: PanelAppBridgeRequest,
   ): Promise<PanelAppAgentGenerateObjectResultView> => {
     try {
@@ -190,17 +194,19 @@ export class PanelAppBridgeManager {
   };
 
   private confirmAndGrantAgentCapability = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     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',
+      panelAppId: session.appId,
+      actions: [{
+        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({
@@ -215,17 +221,19 @@ export class PanelAppBridgeManager {
   };
 
   private confirmAndGrant = async (
-    session: PanelAppBridgeSessionView,
+    session: PanelAppBridgeContext,
     actionId: string,
     input?: Record<string, unknown>,
   ): Promise<ServiceActionGrantView> => {
-    const action = await this.findAction(session, actionId);
+    const actions = await this.listGrantCandidateActions(session, actionId);
     const allowed = await this.authorizationManager.requestAuthorization({
-      panelAppId: session.panelAppId,
-      actionId,
-      actionTitle: action?.title,
-      actionDescription: action?.description,
-      risk: action?.risk,
+      panelAppId: session.appId,
+      actions: actions.map((action) => ({
+        actionId: action.id,
+        actionTitle: action.title,
+        actionDescription: action.description,
+        risk: action.risk,
+      })),
       inputPreview: this.createInputPreview(input),
     });
     if (!allowed) {
@@ -234,22 +242,48 @@ export class PanelAppBridgeManager {
         message: `Permission rejected for ${actionId}.`,
       });
     }
-    return await nextclawClient.serviceApps.grantServiceAction(
-      actionId,
+    const result = await nextclawClient.serviceApps.grantServiceActions(
+      actions.map((action) => action.id),
       { bridgeSessionToken: session.token },
     );
+    const grant = result.grants.find((entry) => entry.actionId === actionId) ?? result.grants[0];
+    if (!grant) {
+      throw new Error(`No permission grant returned for ${actionId}.`);
+    }
+    return grant;
   };
 
-  private findAction = async (
-    session: PanelAppBridgeSessionView,
+  private listGrantCandidateActions = async (
+    session: PanelAppBridgeContext,
     actionId: string,
-  ): Promise<ServiceActionListView['actions'][number] | undefined> => {
-    const actions = await nextclawClient.serviceApps.listServiceActions({
+  ): Promise<Array<ServiceActionListView['actions'][number]>> => {
+    const actionList = await nextclawClient.serviceApps.listServiceActions({
       bridgeSessionToken: session.token,
     });
-    return actions.actions.find(
+    const target = actionList.actions.find(
       (action: ServiceActionListView['actions'][number]) => action.id === actionId,
     );
+    if (target && target.grantState !== 'not-granted') {
+      return [target];
+    }
+    const ungrantedActions = actionList.actions.filter((action) =>
+      action.grantState === 'not-granted'
+    );
+    const orderedActions = [
+      ...ungrantedActions.filter((action) => action.id === actionId),
+      ...ungrantedActions.filter((action) => action.id !== actionId),
+    ];
+    if (orderedActions.length > 0) {
+      return orderedActions;
+    }
+    return [{
+      appId: target?.appId ?? actionId.split('.')[0] ?? actionId,
+      description: target?.description,
+      id: actionId,
+      name: target?.name ?? actionId,
+      risk: target?.risk ?? 'dangerous',
+      title: target?.title,
+    }];
   };
 
   private createInputPreview = (input: Record<string, unknown> | undefined): string | undefined => {
@@ -264,29 +298,11 @@ export class PanelAppBridgeManager {
     }
   };
 
-  private getSession = async (
-    params: DocBrowserIframeMessageParams,
-  ): Promise<PanelAppBridgeSessionView> => {
-    const panelAppId = this.readPanelAppId(params.tab.currentUrl);
-    const key = `${params.iframeInstanceId}:${panelAppId}`;
-    let session = this.sessions.get(key);
-    if (!session) {
-      session = nextclawClient.panelApps.createBridgeSession({
-        panelAppId,
-        tabId: params.tab.id,
-      });
-      this.sessions.set(key, session);
-    }
-    return await session;
-  };
-
-  private readPanelAppId = (url: string): string => {
-    const parsed = new URL(url, window.location.origin);
-    const match = /^\/api\/panel-apps\/([^/]+)\/content$/.exec(parsed.pathname);
-    if (!match?.[1]) {
-      throw new Error('Current tab is not a Panel App.');
-    }
-    return decodeURIComponent(match[1]);
+  private getBridgeContext = (request: PanelAppBridgeRequest): PanelAppBridgeContext => {
+    return {
+      appId: request.appId,
+      token: request.runtimeToken,
+    };
   };
 
   private requireActionId = (request: PanelAppBridgeRequest): string => {
@@ -353,6 +369,8 @@ export class PanelAppBridgeManager {
     return (
       candidate.type === 'nextclaw:panel-app-service-actions:request' &&
       typeof candidate.requestId === 'string' &&
+      typeof candidate.runtimeToken === 'string' &&
+      typeof candidate.appId === 'string' &&
       (candidate.method === 'invoke' ||
         candidate.method === 'agent.send' ||
         candidate.method === 'agent.generateObject' ||

package/src/features/panel-apps/utils/panel-app-view.utils.test.ts

@@ -7,13 +7,17 @@ function createPanelAppEntry(overrides: Partial<PanelAppEntryView> = {}): PanelA
   const updatedAt = overrides.updatedAt ?? createdAt;
   return {
     id: overrides.id ?? overrides.fileName ?? 'demo.panel.html',
+    appId: overrides.appId ?? 'demo',
     fileName: overrides.fileName ?? 'demo.panel.html',
+    kind: overrides.kind ?? 'single-file',
     title: overrides.title ?? 'Demo',
     contentPath: overrides.contentPath ?? '/api/panel-apps/demo/content',
     createdAt,
     updatedAt,
     sizeBytes: overrides.sizeBytes ?? 12,
     favorite: overrides.favorite ?? false,
+    clientDeclared: overrides.clientDeclared ?? false,
+    clientGranted: overrides.clientGranted ?? false,
     openCount: overrides.openCount ?? 0,
     ...overrides,
   };