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

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

@@ -0,0 +1,290 @@
+import { useState, type ReactNode } from 'react';
+import type {
+  ServiceActionGrantView,
+  ServiceActionListView,
+  ServiceAppRecordView,
+} from '@nextclaw/client-sdk';
+import {
+  RefreshCw,
+  RotateCw,
+  Search,
+  Server,
+  ShieldCheck,
+  Trash2,
+  Wrench,
+} from 'lucide-react';
+import {
+  useDiscoverServiceAppActions,
+  useRestartServiceApp,
+  useRevokeServiceActionGrant,
+  useServiceActionGrants,
+  useServiceActions,
+  useServiceApps,
+} from '@/features/service-apps/hooks/use-service-apps';
+import { t } from '@/shared/lib/i18n';
+
+type ServiceActionView = ServiceActionListView['actions'][number];
+
+export function ServiceAppsPanel({
+  headerContent,
+}: {
+  headerContent?: ReactNode;
+}) {
+  const serviceApps = useServiceApps();
+  const serviceActions = useServiceActions();
+  const serviceActionGrants = useServiceActionGrants();
+  const restartServiceApp = useRestartServiceApp();
+  const discoverServiceAppActions = useDiscoverServiceAppActions();
+  const revokeServiceActionGrant = useRevokeServiceActionGrant();
+  const [discoveredActionsByApp, setDiscoveredActionsByApp] = useState<
+    Record<string, ServiceActionView[]>
+  >({});
+
+  const refetch = () => {
+    void serviceApps.refetch();
+    void serviceActions.refetch();
+    void serviceActionGrants.refetch();
+  };
+
+  if (serviceApps.isLoading || serviceActions.isLoading || serviceActionGrants.isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-gray-500">
+        {t('serviceAppsLoading')}
+      </div>
+    );
+  }
+
+  if (serviceApps.isError || serviceActions.isError || serviceActionGrants.isError) {
+    const error = serviceApps.error ?? serviceActions.error ?? serviceActionGrants.error;
+    return (
+      <div className="p-4 text-sm text-rose-600">
+        {error instanceof Error ? error.message : t('serviceAppsLoadFailed')}
+      </div>
+    );
+  }
+
+  const apps = serviceApps.data?.entries ?? [];
+  const actions = serviceActions.data?.actions ?? [];
+  const grants = serviceActionGrants.data?.grants ?? [];
+  const discover = (appId: string) => {
+    void discoverServiceAppActions.mutateAsync(appId).then((result) => {
+      setDiscoveredActionsByApp((current) => ({
+        ...current,
+        [appId]: result.actions,
+      }));
+    });
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-white">
+      <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          {headerContent ?? (
+            <>
+              <Server className="h-4 w-4 text-primary" />
+              <div className="truncate text-sm font-semibold text-gray-900">{t('serviceAppsTitle')}</div>
+            </>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={refetch}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+          title={t('serviceAppsRefresh')}
+          aria-label={t('serviceAppsRefresh')}
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {apps.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">
+          {t('serviceAppsEmpty')}
+        </div>
+      ) : (
+        <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-3">
+          <div className="space-y-3">
+            {apps.map((app) => (
+              <ServiceAppCard
+                key={app.id}
+                app={app}
+                actions={discoveredActionsByApp[app.id] ?? actions.filter((action) => action.appId === app.id)}
+                grants={grants}
+                isDiscovering={discoverServiceAppActions.isPending}
+                onDiscover={discover}
+                onRestart={(appId) => void restartServiceApp.mutate(appId)}
+                onRevoke={(grant) => void revokeServiceActionGrant.mutate({
+                  actionId: grant.actionId,
+                  caller: grant.caller,
+                })}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ServiceAppCard({
+  app,
+  actions,
+  grants,
+  isDiscovering,
+  onDiscover,
+  onRestart,
+  onRevoke,
+}: {
+  app: ServiceAppRecordView;
+  actions: ServiceActionView[];
+  grants: ServiceActionGrantView[];
+  isDiscovering: boolean;
+  onDiscover: (appId: string) => void;
+  onRestart: (appId: string) => void;
+  onRevoke: (grant: ServiceActionGrantView) => void;
+}) {
+  return (
+    <section className="rounded-lg border border-gray-200 bg-white p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
+            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-600">{app.status}</span>
+          </div>
+          {app.description ? (
+            <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
+          ) : null}
+          {app.lastError ? (
+            <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
+          ) : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            onClick={() => onDiscover(app.id)}
+            disabled={isDiscovering}
+            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
+            title={t('serviceAppsDiscoverActions')}
+            aria-label={t('serviceAppsDiscoverActions')}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => onRestart(app.id)}
+            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
+            title={t('serviceAppsRestart')}
+            aria-label={t('serviceAppsRestart')}
+          >
+            <RotateCw className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+      <ServiceAppDiagnostics app={app} />
+      <div className="mt-3 space-y-1">
+        {actions.map((action) => (
+          <ServiceActionRow
+            key={action.id}
+            action={action}
+            grants={grants.filter((grant) => grant.actionId === action.id)}
+            onRevoke={onRevoke}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
+  const command = [app.command, ...(app.args ?? [])]
+    .filter((value): value is string => Boolean(value?.trim()))
+    .join(' ');
+  const rows = [
+    { label: t('serviceAppsCommand'), value: command },
+    { label: t('serviceAppsCwd'), value: app.cwd },
+    { label: t('serviceAppsManifest'), value: app.manifestPath },
+    { label: t('serviceAppsLastStarted'), value: app.lastStartedAt },
+    { label: t('serviceAppsLastReady'), value: app.lastReadyAt },
+    { label: t('serviceAppsLastFailed'), value: app.lastFailedAt },
+  ].filter((row) => row.value);
+
+  if (rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <dl className="mt-3 grid grid-cols-[4.5rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-gray-100 pt-2 text-[11px]">
+      {rows.map((row) => (
+        <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
+      ))}
+    </dl>
+  );
+}
+
+function ServiceAppDiagnosticRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) {
+  return (
+    <>
+      <dt className="text-gray-400">{label}</dt>
+      <dd className="min-w-0 truncate font-mono text-gray-500" title={value}>
+        {value}
+      </dd>
+    </>
+  );
+}
+
+function ServiceActionRow({
+  action,
+  grants,
+  onRevoke,
+}: {
+  action: ServiceActionView;
+  grants: ServiceActionGrantView[];
+  onRevoke: (grant: ServiceActionGrantView) => void;
+}) {
+  return (
+    <div className="rounded bg-gray-50 px-2 py-1.5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <Wrench className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+          <div className="min-w-0">
+            <div className="truncate text-xs font-medium text-gray-800">{action.title ?? action.name}</div>
+            {action.description ? (
+              <div className="truncate text-[11px] text-gray-500">{action.description}</div>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {action.runtimeState ? (
+            <span className="rounded bg-white px-1.5 py-0.5 text-[11px] text-gray-600">
+              {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
+            </span>
+          ) : null}
+          <span className="rounded bg-white px-1.5 py-0.5 text-[11px] text-gray-600">{action.risk}</span>
+        </div>
+      </div>
+      {grants.map((grant) => (
+        <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1 flex items-center justify-between gap-2 pl-5">
+          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-gray-500">
+            <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
+            <span className="truncate">{t('serviceAppsGrantedTo')} {grant.caller.appId}</span>
+          </div>
+          <button
+            type="button"
+            onClick={() => onRevoke(grant)}
+            className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white hover:text-rose-600"
+            title={t('serviceAppsRevokeGrant')}
+            aria-label={t('serviceAppsRevokeGrant')}
+          >
+            <Trash2 className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { nextclawClient } from '@/shared/lib/api';
+
+const SERVICE_APPS_QUERY_KEY = ['service-apps'] as const;
+const SERVICE_ACTIONS_QUERY_KEY = ['service-actions'] as const;
+const SERVICE_ACTION_GRANTS_QUERY_KEY = ['service-action-grants'] as const;
+
+export function useServiceApps() {
+  return useQuery({
+    queryKey: SERVICE_APPS_QUERY_KEY,
+    queryFn: () => nextclawClient.serviceApps.listServiceApps(),
+  });
+}
+
+export function useServiceActions() {
+  return useQuery({
+    queryKey: SERVICE_ACTIONS_QUERY_KEY,
+    queryFn: () => nextclawClient.serviceApps.listServiceActions(),
+  });
+}
+
+export function useServiceActionGrants() {
+  return useQuery({
+    queryKey: SERVICE_ACTION_GRANTS_QUERY_KEY,
+    queryFn: () => nextclawClient.serviceApps.listServiceActionGrants(),
+  });
+}
+
+export function useRestartServiceApp() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (appId: string) => nextclawClient.serviceApps.restartServiceApp(appId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+      ]);
+    },
+  });
+}
+
+export function useDiscoverServiceAppActions() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (appId: string) => nextclawClient.serviceApps.discoverServiceAppActions(appId),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY });
+    },
+  });
+}
+
+export function useRevokeServiceActionGrant() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (params: {
+      actionId: string;
+      caller: { surface: 'panel-app'; appId: string };
+    }) => nextclawClient.serviceApps.revokeServiceActionGrant(params),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTION_GRANTS_QUERY_KEY }),
+      ]);
+    },
+  });
+}

package/src/features/service-apps/index.ts

@@ -0,0 +1,3 @@
+export { ServiceActionAuthorizationDialog } from '@/features/service-apps/components/service-action-authorization-dialog';
+export { ServiceActionAuthorizationManager } from '@/features/service-apps/managers/service-action-authorization.manager';
+export { ServiceAppsPanel } from '@/features/service-apps/components/service-apps-panel';

package/src/features/service-apps/managers/service-action-authorization.manager.ts

@@ -0,0 +1,10 @@
+import { useServiceActionAuthorizationStore } from '@/features/service-apps/stores/service-action-authorization.store';
+import type { ServiceActionAuthorizationRequest } from '@/features/service-apps/stores/service-action-authorization.store';
+
+export class ServiceActionAuthorizationManager {
+  requestAuthorization = async (
+    request: Omit<ServiceActionAuthorizationRequest, 'id'>,
+  ): Promise<boolean> => {
+    return await useServiceActionAuthorizationStore.getState().requestAuthorization(request);
+  };
+}

package/src/features/service-apps/stores/service-action-authorization.store.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand';
+import type { ServiceActionListView } from '@nextclaw/client-sdk';
+
+type ServiceActionRisk = ServiceActionListView['actions'][number]['risk'];
+
+export type ServiceActionAuthorizationRequest = {
+  id: string;
+  panelAppId: string;
+  actionId: string;
+  actionTitle?: string;
+  actionDescription?: string;
+  risk?: ServiceActionRisk;
+  inputPreview?: string;
+};
+
+type PendingAuthorization = ServiceActionAuthorizationRequest & {
+  resolve: (allowed: boolean) => void;
+};
+
+type ServiceActionAuthorizationState = {
+  pending: PendingAuthorization | null;
+  requestAuthorization: (
+    request: Omit<ServiceActionAuthorizationRequest, 'id'>,
+  ) => Promise<boolean>;
+  resolveAuthorization: (allowed: boolean) => void;
+};
+
+function createAuthorizationId(): string {
+  return `service-action-auth-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export const useServiceActionAuthorizationStore = create<ServiceActionAuthorizationState>((set, get) => ({
+  pending: null,
+  requestAuthorization: async (request) =>
+    await new Promise<boolean>((resolve) => {
+      get().pending?.resolve(false);
+      set({
+        pending: {
+          id: createAuthorizationId(),
+          ...request,
+          resolve,
+        },
+      });
+    }),
+  resolveAuthorization: (allowed) => {
+    const { pending } = get();
+    if (!pending) {
+      return;
+    }
+    pending.resolve(allowed);
+    set({ pending: null });
+  },
+}));

package/src/shared/components/doc-browser/doc-browser-context.test.tsx

@@ -1,6 +1,8 @@
-import { act, renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { DocBrowserProvider, useDocBrowser } from './doc-browser-context';
+import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
+import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
 
 vi.mock('@/shared/lib/i18n', async () => {
   const actual = await vi.importActual('@/shared/lib/i18n');
@@ -14,6 +16,39 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <DocBrowserProvider>{children}</DocBrowserProvider>
 );
 
+const docBrowserStorageKey = 'nextclaw.doc-browser.state';
+
+beforeEach(() => {
+  act(() => {
+    useDocBrowserStore.setState({ snapshot: createDefaultDocBrowserState() });
+  });
+  window.localStorage.clear();
+});
+
+function readPersistedDocBrowserSnapshot() {
+  return JSON.parse(window.localStorage.getItem(docBrowserStorageKey) ?? '{}') as {
+    state?: {
+      snapshot?: Record<string, unknown>;
+    };
+  };
+}
+
+async function rehydrateDocBrowserFromStorage() {
+  await act(async () => {
+    await useDocBrowserStore.persist.rehydrate();
+  });
+}
+
+async function resetMemoryThenRehydrate(savedState: string | null) {
+  act(() => {
+    useDocBrowserStore.setState({ snapshot: createDefaultDocBrowserState() });
+  });
+  if (savedState) {
+    window.localStorage.setItem(docBrowserStorageKey, savedState);
+  }
+  await rehydrateDocBrowserFromStorage();
+}
+
 describe('DocBrowserProvider dedupe keys', () => {
   it('opens different dedupe keys as separate content tabs', () => {
     const { result } = renderHook(() => useDocBrowser(), { wrapper });
@@ -99,4 +134,118 @@ describe('DocBrowserProvider dedupe keys', () => {
       currentUrl: 'data:text/html,A-loaded',
     });
   });
+
+  it('updates custom URL query state for the same dedupe key', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('nextclaw://apps', {
+        dedupeKey: 'apps',
+        kind: 'apps',
+        title: 'Apps',
+      });
+    });
+    act(() => {
+      result.current.open('nextclaw://apps?tab=service-apps', {
+        activate: false,
+        dedupeKey: 'apps',
+        kind: 'apps',
+        title: 'Apps',
+      });
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://apps?tab=service-apps',
+      dedupeKey: 'apps',
+      kind: 'apps',
+    });
+  });
+});
+
+describe('DocBrowserProvider persistence', () => {
+  it('restores the open panel and active tab from the persisted Zustand store', async () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('nextclaw://apps?tab=service-apps', {
+        dedupeKey: 'apps',
+        kind: 'apps',
+        title: 'Apps',
+      });
+    });
+
+    await waitFor(() => {
+      expect(readPersistedDocBrowserSnapshot()).toMatchObject({
+        state: {
+          snapshot: {
+            isOpen: true,
+            activeTabId: result.current.activeTabId,
+          },
+        },
+      });
+    });
+
+    const savedState = window.localStorage.getItem(docBrowserStorageKey);
+    await resetMemoryThenRehydrate(savedState);
+    const restored = renderHook(() => useDocBrowser(), { wrapper });
+
+    expect(restored.result.current.isOpen).toBe(true);
+    expect(restored.result.current.currentTab).toMatchObject({
+      kind: 'apps',
+      currentUrl: 'nextclaw://apps?tab=service-apps',
+      dedupeKey: 'apps',
+    });
+  });
+
+  it('keeps the panel closed after a closed state is persisted', async () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open('nextclaw://apps', {
+        dedupeKey: 'apps',
+        kind: 'apps',
+        title: 'Apps',
+      });
+      result.current.close();
+    });
+
+    await waitFor(() => {
+      expect(readPersistedDocBrowserSnapshot()).toMatchObject({
+        state: {
+          snapshot: {
+            isOpen: false,
+          },
+        },
+      });
+    });
+
+    const savedState = window.localStorage.getItem(docBrowserStorageKey);
+    await resetMemoryThenRehydrate(savedState);
+    const restored = renderHook(() => useDocBrowser(), { wrapper });
+
+    expect(restored.result.current.isOpen).toBe(false);
+    expect(restored.result.current.currentTab).toMatchObject({
+      kind: 'apps',
+      currentUrl: 'nextclaw://apps',
+    });
+  });
+
+  it('falls back to the default docs tab when persisted state is malformed', async () => {
+    window.localStorage.setItem(docBrowserStorageKey, JSON.stringify({
+      version: 1,
+      state: {
+        snapshot: {
+          isOpen: true,
+          tabs: [{ id: 'broken' }],
+          activeTabId: 'broken',
+        },
+      },
+    }));
+
+    await rehydrateDocBrowserFromStorage();
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    expect(result.current.isOpen).toBe(false);
+    expect(result.current.currentTab?.kind).toBe('docs');
+  });
 });