@nextclaw/ui 0.12.35-beta.2 → 0.12.35-beta.4

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

@@ -0,0 +1,247 @@
+import { NextClawClientError } from '@nextclaw/client-sdk';
+import type {
+  PanelAppBridgeSessionView,
+  ServiceActionGrantView,
+  ServiceActionInvokeResultView,
+  ServiceActionListView,
+} from '@nextclaw/client-sdk';
+import type { ServiceActionAuthorizationManager } from '@/features/service-apps';
+import type { DocBrowserIframeMessageParams } from '@/shared/components/doc-browser/doc-browser-renderer.types';
+import { nextclawClient } from '@/shared/lib/api';
+
+type PanelAppBridgeRequest = {
+  type: 'nextclaw:panel-app-service-actions:request';
+  requestId: string;
+  method: 'invoke' | 'list' | 'requestGrant' | 'revokeGrant';
+  payload?: {
+    actionId?: string;
+    input?: Record<string, unknown>;
+  };
+};
+
+type PanelAppBridgeResponse =
+  | {
+      type: 'nextclaw:panel-app-service-actions:response';
+      requestId: string;
+      ok: true;
+      data: unknown;
+    }
+  | {
+      type: 'nextclaw:panel-app-service-actions:response';
+      requestId: string;
+      ok: false;
+      error: {
+        code?: string;
+        message: string;
+        details?: Record<string, unknown>;
+      };
+    };
+
+export class PanelAppBridgeManager {
+  private readonly sessions = new Map<string, Promise<PanelAppBridgeSessionView>>();
+
+  constructor(private readonly authorizationManager: ServiceActionAuthorizationManager) {}
+
+  handleIframeMessage = ({ event, iframe, tab }: DocBrowserIframeMessageParams): void => {
+    if (!this.isBridgeRequest(event.data)) {
+      return;
+    }
+    if (!iframe?.contentWindow || event.source !== iframe.contentWindow) {
+      return;
+    }
+    void this.handleBridgeRequest({ event, iframe, tab }, event.data);
+  };
+
+  private handleBridgeRequest = async (
+    params: DocBrowserIframeMessageParams,
+    request: PanelAppBridgeRequest,
+  ): Promise<void> => {
+    try {
+      const session = await this.getSession(params);
+      const data = await this.dispatchRequest(session, request);
+      this.postResponse(params, {
+        type: 'nextclaw:panel-app-service-actions:response',
+        requestId: request.requestId,
+        ok: true,
+        data,
+      });
+    } catch (error) {
+      this.postResponse(params, {
+        type: 'nextclaw:panel-app-service-actions:response',
+        requestId: request.requestId,
+        ok: false,
+        error: this.toBridgeError(error),
+      });
+    }
+  };
+
+  private dispatchRequest = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<
+    | ServiceActionGrantView
+    | ServiceActionInvokeResultView
+    | ServiceActionListView
+    | { revoked: boolean }
+  > => {
+    switch (request.method) {
+      case 'list':
+        return await nextclawClient.serviceApps.listServiceActions({
+          bridgeSessionToken: session.token,
+        });
+      case 'requestGrant':
+        return await this.confirmAndGrant(session, this.requireActionId(request));
+      case 'revokeGrant':
+        return await nextclawClient.serviceApps.revokeServiceAction(
+          this.requireActionId(request),
+          { bridgeSessionToken: session.token },
+        );
+      case 'invoke':
+        return await this.invokeWithAuthorization(session, request);
+      default:
+        throw new Error(`Unsupported panel bridge method: ${String(request.method)}`);
+    }
+  };
+
+  private invokeWithAuthorization = async (
+    session: PanelAppBridgeSessionView,
+    request: PanelAppBridgeRequest,
+  ): Promise<ServiceActionInvokeResultView> => {
+    const actionId = this.requireActionId(request);
+    try {
+      return await nextclawClient.serviceApps.invokeServiceAction(
+        actionId,
+        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);
+      return await nextclawClient.serviceApps.invokeServiceAction(
+        actionId,
+        request.payload?.input,
+        { bridgeSessionToken: session.token },
+      );
+    }
+  };
+
+  private confirmAndGrant = async (
+    session: PanelAppBridgeSessionView,
+    actionId: string,
+    input?: Record<string, unknown>,
+  ): Promise<ServiceActionGrantView> => {
+    const action = await this.findAction(session, actionId);
+    const allowed = await this.authorizationManager.requestAuthorization({
+      panelAppId: session.panelAppId,
+      actionId,
+      actionTitle: action?.title,
+      actionDescription: action?.description,
+      risk: action?.risk,
+      inputPreview: this.createInputPreview(input),
+    });
+    if (!allowed) {
+      throw new NextClawClientError({
+        code: 'AUTHORIZATION_REJECTED',
+        message: `Permission rejected for ${actionId}.`,
+      });
+    }
+    return await nextclawClient.serviceApps.grantServiceAction(
+      actionId,
+      { bridgeSessionToken: session.token },
+    );
+  };
+
+  private findAction = async (
+    session: PanelAppBridgeSessionView,
+    actionId: string,
+  ): Promise<ServiceActionListView['actions'][number] | undefined> => {
+    const actions = await nextclawClient.serviceApps.listServiceActions({
+      bridgeSessionToken: session.token,
+    });
+    return actions.actions.find((action) => action.id === actionId);
+  };
+
+  private createInputPreview = (input: Record<string, unknown> | undefined): string | undefined => {
+    if (!input || Object.keys(input).length === 0) {
+      return undefined;
+    }
+    try {
+      const value = JSON.stringify(input, null, 2);
+      return value.length > 500 ? `${value.slice(0, 500)}...` : value;
+    } catch {
+      return '[unserializable input]';
+    }
+  };
+
+  private getSession = async (
+    params: DocBrowserIframeMessageParams,
+  ): Promise<PanelAppBridgeSessionView> => {
+    const panelAppId = this.readPanelAppId(params.tab.currentUrl);
+    const key = `${params.tab.id}:${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 requireActionId = (request: PanelAppBridgeRequest): string => {
+    const actionId = request.payload?.actionId?.trim();
+    if (!actionId) {
+      throw new Error('Panel bridge actionId is required.');
+    }
+    return actionId;
+  };
+
+  private postResponse = (
+    params: DocBrowserIframeMessageParams,
+    response: PanelAppBridgeResponse,
+  ): void => {
+    params.iframe?.contentWindow?.postMessage(response, '*');
+  };
+
+  private toBridgeError = (
+    error: unknown,
+  ): { code?: string; message: string; details?: Record<string, unknown> } => {
+    if (error instanceof NextClawClientError) {
+      return {
+        code: error.code,
+        message: error.message,
+        details: error.details,
+      };
+    }
+    return {
+      message: error instanceof Error ? error.message : String(error),
+    };
+  };
+
+  private isBridgeRequest = (value: unknown): value is PanelAppBridgeRequest => {
+    if (!value || typeof value !== 'object') {
+      return false;
+    }
+    const candidate = value as Partial<PanelAppBridgeRequest>;
+    return (
+      candidate.type === 'nextclaw:panel-app-service-actions:request' &&
+      typeof candidate.requestId === 'string' &&
+      (candidate.method === 'invoke' ||
+        candidate.method === 'list' ||
+        candidate.method === 'requestGrant' ||
+        candidate.method === 'revokeGrant')
+    );
+  };
+}

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

@@ -0,0 +1,23 @@
+import {
+  createAppsPanelUrl,
+  getAppsPanelTabFromUrl,
+} from '@/features/panel-apps/utils/panel-app-doc-browser.utils';
+
+describe('panel app doc browser URL helpers', () => {
+  it('uses the root apps URL for the default panel apps tab', () => {
+    expect(createAppsPanelUrl('panel-apps')).toBe('nextclaw://apps');
+    expect(getAppsPanelTabFromUrl('nextclaw://apps')).toBe('panel-apps');
+  });
+
+  it('round-trips the service apps tab through the hidden apps URL', () => {
+    const url = createAppsPanelUrl('service-apps');
+
+    expect(url).toBe('nextclaw://apps?tab=service-apps');
+    expect(getAppsPanelTabFromUrl(url)).toBe('service-apps');
+  });
+
+  it('falls back to panel apps for unknown URL state', () => {
+    expect(getAppsPanelTabFromUrl('nextclaw://apps?tab=unknown')).toBe('panel-apps');
+    expect(getAppsPanelTabFromUrl('not a url')).toBe('panel-apps');
+  });
+});

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

@@ -1,15 +1,16 @@
-import { AppWindow } from 'lucide-react';
+import { AppWindow, Boxes } from 'lucide-react';
 import type { DocBrowserContextValue } from '@/shared/components/doc-browser/doc-browser-context';
 import type { DocBrowserCustomTabRenderers } from '@/shared/components/doc-browser/doc-browser-renderer.types';
+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 { PanelAppsList } from '@/features/panel-apps/components/panel-apps-list';
 import { t } from '@/shared/lib/i18n';
 
-export const PANEL_APPS_LIST_TAB_KIND = 'panel-apps';
+export const APPS_TAB_KIND = 'apps';
 export const PANEL_APP_TAB_KIND = 'panel-app';
-const PANEL_APPS_LIST_URL = 'nextclaw://panel-apps';
+const APPS_URL = 'nextclaw://apps';
+const DEFAULT_APPS_PANEL_TAB: AppsPanelTab = 'panel-apps';
 const PANEL_APP_IFRAME_SANDBOX = [
-  'allow-same-origin',
   'allow-scripts',
   'allow-forms',
   'allow-modals',
@@ -20,20 +21,44 @@ const PANEL_APP_IFRAME_SANDBOX = [
   'allow-presentation',
 ].join(' ');
 
-export function openPanelApps(docBrowser: Pick<DocBrowserContextValue, 'open'>): void {
-  docBrowser.open(PANEL_APPS_LIST_URL, {
-    kind: PANEL_APPS_LIST_TAB_KIND,
-    title: t('panelAppsTitle'),
-    dedupeKey: 'panel-apps:list',
+function isAppsPanelTab(value: unknown): value is AppsPanelTab {
+  return value === 'panel-apps' || value === 'service-apps';
+}
+
+export function createAppsPanelUrl(tab: AppsPanelTab = DEFAULT_APPS_PANEL_TAB): string {
+  return tab === DEFAULT_APPS_PANEL_TAB ? APPS_URL : `${APPS_URL}?tab=${tab}`;
+}
+
+export function getAppsPanelTabFromUrl(url: string): AppsPanelTab {
+  try {
+    const tab = new URL(url).searchParams.get('tab');
+    return isAppsPanelTab(tab) ? tab : DEFAULT_APPS_PANEL_TAB;
+  } catch {
+    return DEFAULT_APPS_PANEL_TAB;
+  }
+}
+
+export function openApps(docBrowser: Pick<DocBrowserContextValue, 'open'>): void {
+  docBrowser.open(createAppsPanelUrl(), {
+    kind: APPS_TAB_KIND,
+    title: t('appsTitle'),
+    dedupeKey: 'apps',
   });
 }
 
 export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
-  [PANEL_APPS_LIST_TAB_KIND]: {
-    getTitle: () => t('panelAppsTitle'),
-    renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
-    renderContent: ({ open }) => (
-      <PanelAppsList
+  [APPS_TAB_KIND]: {
+    getTitle: () => t('appsTitle'),
+    renderIcon: () => <Boxes className="w-4 h-4 text-primary shrink-0" />,
+    renderContent: ({ currentUrl, open }) => (
+      <AppsPanel
+        activeTab={getAppsPanelTabFromUrl(currentUrl)}
+        onActiveTabChange={(tab) => open(createAppsPanelUrl(tab), {
+          activate: false,
+          kind: APPS_TAB_KIND,
+          title: t('appsTitle'),
+          dedupeKey: 'apps',
+        })}
         onOpenPanelApp={(entry) => open(entry.contentPath, {
           kind: PANEL_APP_TAB_KIND,
           title: entry.title,
@@ -45,10 +70,11 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
   [PANEL_APP_TAB_KIND]: {
     getIframeSandbox: () => PANEL_APP_IFRAME_SANDBOX,
     getTitle: (tab) => tab.title || t('panelAppsTitle'),
+    onIframeMessage: (params) => getPresenter().panelAppBridgeManager.handleIframeMessage(params),
     renderIcon: () => <AppWindow className="w-4 h-4 text-primary shrink-0" />,
     renderToolbar: ({ open, refreshIframe }) => (
       <PanelAppToolbar
-        onOpenPanelApps={() => openPanelApps({ open })}
+        onOpenApps={() => openApps({ open })}
         onRefresh={refreshIframe}
       />
     ),

package/src/features/remote/components/remote-access-page.test.tsx

@@ -20,8 +20,8 @@ vi.mock("@/features/remote/hooks/use-remote-access", () => ({
   useRemoteStatus: () => mocks.statusQuery,
 }));
 
-vi.mock("@/app/components/app-manager-provider", () => ({
-  useAppManager: () => ({
+vi.mock("@/app/components/app-presenter-provider", () => ({
+  useAppPresenter: () => ({
     remoteAccessManager: {
       reauthorizeRemoteAccess: mocks.reauthorizeRemoteAccess,
       repairRemoteAccess: mocks.repairRemoteAccess,

package/src/features/remote/components/remote-access-page.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/shared/components/ui/card";
 import { NoticeCard } from "@/shared/components/ui/notice-card";
 import { StatusDot } from "@/shared/components/ui/status-dot";
-import { useAppManager } from "@/app/components/app-manager-provider";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import {
   buildRemoteAccessFeedbackView,
   resolveRemoteWebBase,
@@ -45,7 +45,7 @@ function KeyValueRow(props: {
 }
 
 export function RemoteAccessPage() {
-  const manager = useAppManager();
+  const presenter = useAppPresenter();
   const remoteStatus = useRemoteStatus();
   const status = remoteStatus.data;
   const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
@@ -64,8 +64,8 @@ export function RemoteAccessPage() {
   const { hero: heroView, issueHint } = feedbackView;
 
   useEffect(() => {
-    manager.remoteAccessManager.syncStatus(status);
-  }, [manager, status]);
+    presenter.remoteAccessManager.syncStatus(status);
+  }, [presenter, status]);
 
   if (remoteStatus.isLoading && !status) {
     return <div className="p-8 text-gray-400">{t("remoteLoading")}</div>;
@@ -117,18 +117,18 @@ export function RemoteAccessPage() {
                 <Button
                   onClick={() => {
                     if (feedbackView.primaryAction?.kind === "reauthorize") {
-                      void manager.remoteAccessManager.reauthorizeRemoteAccess(
+                      void presenter.remoteAccessManager.reauthorizeRemoteAccess(
                         status,
                       );
                       return;
                     }
                     if (feedbackView.primaryAction?.kind === "repair") {
-                      void manager.remoteAccessManager.repairRemoteAccess(
+                      void presenter.remoteAccessManager.repairRemoteAccess(
                         status,
                       );
                       return;
                     }
-                    void manager.remoteAccessManager.enableRemoteAccess(
+                    void presenter.remoteAccessManager.enableRemoteAccess(
                       status,
                     );
                   }}
@@ -143,7 +143,7 @@ export function RemoteAccessPage() {
 
               <Button
                 variant="outline"
-                onClick={() => void manager.accountManager.openNextClawWeb()}
+                onClick={() => void presenter.accountManager.openNextClawWeb()}
                 disabled={busy || !canOpenDeviceList}
               >
                 <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
@@ -154,7 +154,7 @@ export function RemoteAccessPage() {
                 <Button
                   variant="outline"
                   onClick={() =>
-                    void manager.remoteAccessManager.disableRemoteAccess(
+                    void presenter.remoteAccessManager.disableRemoteAccess(
                       status,
                     )
                   }

package/src/features/remote/managers/remote-access.manager.ts

@@ -1,17 +1,13 @@
 import { controlRemoteService, fetchRemoteDoctor, updateRemoteSettings } from '@/shared/lib/api';
 import type { RemoteAccessView } from '@/shared/lib/api';
-import type { AccountManager, AccountPendingAction } from '@/features/account';
+import type { AccountManager } from '@/features/account';
 import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
 import { refreshRemoteStatus } from '@/features/remote/services/remote-access-query.service';
 import { useRemoteAccessStore } from '@/features/remote/stores/remote-access.store';
 
 export class RemoteAccessManager {
-  private accountManager: AccountManager | null = null;
-
-  bindAccountManager = (accountManager: AccountManager) => {
-    this.accountManager = accountManager;
-  };
+  constructor(private readonly params: { accountManager: AccountManager }) {}
 
   syncStatus = (status: RemoteAccessView | undefined) => {
     if (!status) {
@@ -43,14 +39,8 @@ export class RemoteAccessManager {
   enableRemoteAccess = async (status: RemoteAccessView | undefined) => {
     const currentStatus = status ?? (await refreshRemoteStatus());
     const draft = useRemoteAccessStore.getState();
-    if (!currentStatus.account.loggedIn) {
-      await this.accountManager?.ensureSignedIn({
-        pendingAction: { type: 'enable-remote' },
-        apiBase: draft.platformApiBase
-      });
-      return;
-    }
-    await this.applyEnabledState(true, currentStatus);
+    const readyStatus = await this.ensureRemoteAccount(currentStatus, draft.platformApiBase);
+    await this.applyEnabledState(true, readyStatus);
   };
 
   disableRemoteAccess = async (status: RemoteAccessView | undefined) => {
@@ -60,13 +50,8 @@ export class RemoteAccessManager {
 
   repairRemoteAccess = async (status: RemoteAccessView | undefined) => {
     const currentStatus = status ?? (await refreshRemoteStatus());
-    if (!currentStatus.account.loggedIn) {
-      await this.accountManager?.ensureSignedIn({
-        pendingAction: { type: 'enable-remote' }
-      });
-      return;
-    }
-    const action = currentStatus.service.running ? 'restart' : 'start';
+    const readyStatus = await this.ensureRemoteAccount(currentStatus);
+    const action = readyStatus.service.running ? 'restart' : 'start';
     await this.runManagedAction({
       actionLabel: action === 'restart' ? t('remoteActionRestarting') : t('remoteActionStarting'),
       job: async () => {
@@ -80,11 +65,11 @@ export class RemoteAccessManager {
 
   reauthorizeRemoteAccess = async (status: RemoteAccessView | undefined) => {
     const currentStatus = status ?? (await refreshRemoteStatus());
-    await this.accountManager?.startBrowserSignIn({
+    const readyStatus = await this.params.accountManager.startBrowserSignInAndWait({
       status: currentStatus,
-      apiBase: useRemoteAccessStore.getState().platformApiBase,
-      pendingAction: { type: 'repair-remote' }
+      apiBase: useRemoteAccessStore.getState().platformApiBase
     });
+    await this.repairRemoteAccess(readyStatus);
   };
 
   saveAdvancedSettings = async (status: RemoteAccessView | undefined) => {
@@ -128,19 +113,6 @@ export class RemoteAccessManager {
     await this.runServiceAction('stop', t('remoteActionStopping'));
   };
 
-  resumePendingActionAfterSignIn = async (action: AccountPendingAction, status: RemoteAccessView) => {
-    if (!action) {
-      return;
-    }
-    if (action.type === 'enable-remote') {
-      await this.applyEnabledState(true, status);
-      return;
-    }
-    if (action.type === 'repair-remote') {
-      await this.repairRemoteAccess(status);
-    }
-  };
-
   private applyEnabledState = async (enabled: boolean, status: RemoteAccessView) => {
     const draft = useRemoteAccessStore.getState();
     await this.runManagedAction({
@@ -166,6 +138,16 @@ export class RemoteAccessManager {
     });
   };
 
+  private ensureRemoteAccount = async (status: RemoteAccessView, apiBase?: string) => {
+    if (status.account.loggedIn) {
+      return status;
+    }
+    return await this.params.accountManager.ensureSignedIn({
+      apiBase,
+      status
+    });
+  };
+
   private runServiceAction = async (action: 'start' | 'restart' | 'stop', actionLabel: string) => {
     await this.runManagedAction({
       actionLabel,
@@ -191,11 +173,12 @@ export class RemoteAccessManager {
     job: () => Promise<void>;
     successMessage?: string;
   }) => {
-    useRemoteAccessStore.getState().beginAction(params.actionLabel);
+    const { actionLabel, job, successMessage } = params;
+    useRemoteAccessStore.getState().beginAction(actionLabel);
     try {
-      await params.job();
-      if (params.successMessage) {
-        toast.success(params.successMessage);
+      await job();
+      if (successMessage) {
+        toast.success(successMessage);
       }
     } catch (error) {
       const message = error instanceof Error ? error.message : t('error');

package/src/features/service-apps/components/service-action-authorization-dialog.tsx

@@ -0,0 +1,78 @@
+import { ShieldAlert } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+import { Button } from '@/shared/components/ui/button';
+import { t } from '@/shared/lib/i18n';
+import { useServiceActionAuthorizationStore } from '@/features/service-apps/stores/service-action-authorization.store';
+
+export function ServiceActionAuthorizationDialog() {
+  const pending = useServiceActionAuthorizationStore((state) => state.pending);
+  const resolveAuthorization = useServiceActionAuthorizationStore(
+    (state) => state.resolveAuthorization,
+  );
+
+  return (
+    <Dialog
+      open={Boolean(pending)}
+      onOpenChange={(open) => {
+        if (!open) {
+          resolveAuthorization(false);
+        }
+      }}
+    >
+      <DialogContent className="[&>:last-child]:hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4 text-amber-600" />
+            {t('serviceActionAuthorizationTitle')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('serviceActionAuthorizationDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        {pending ? (
+          <div className="space-y-3 rounded-md border border-gray-100 bg-gray-50 p-3 text-sm">
+            <AuthorizationField label={t('serviceActionAuthorizationSource')} value={pending.panelAppId} />
+            <AuthorizationField label={t('serviceActionAuthorizationAction')} value={pending.actionTitle ?? pending.actionId} />
+            {pending.actionDescription ? (
+              <AuthorizationField label={t('serviceActionAuthorizationPurpose')} value={pending.actionDescription} />
+            ) : null}
+            <AuthorizationField label={t('serviceActionAuthorizationRisk')} value={pending.risk ?? 'dangerous'} />
+            {pending.inputPreview ? (
+              <AuthorizationField label={t('serviceActionAuthorizationInput')} value={pending.inputPreview} />
+            ) : null}
+          </div>
+        ) : null}
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button type="button" variant="outline" onClick={() => resolveAuthorization(false)}>
+            {t('serviceActionAuthorizationReject')}
+          </Button>
+          <Button type="button" onClick={() => resolveAuthorization(true)}>
+            {t('serviceActionAuthorizationAllow')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AuthorizationField({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
+      <div className="text-xs font-medium text-gray-500">{label}</div>
+      <div className="min-w-0 break-words text-xs text-gray-900">{value}</div>
+    </div>
+  );
+}