@nextclaw/ui 0.9.10 → 0.9.12

package/src/components/chat/ncp/ncp-app-client-fetch.test.ts

@@ -0,0 +1,69 @@
+import { createNcpAppClientFetch } from '@/components/chat/ncp/ncp-app-client-fetch';
+
+const mocks = vi.hoisted(() => ({
+  request: vi.fn(),
+  openStream: vi.fn()
+}));
+
+vi.mock('@/transport', () => ({
+  appClient: {
+    request: mocks.request,
+    openStream: mocks.openStream
+  }
+}));
+
+describe('ncp-app-client-fetch', () => {
+  beforeEach(() => {
+    mocks.request.mockReset();
+    mocks.openStream.mockReset();
+  });
+
+  it('routes JSON requests through appClient.request', async () => {
+    mocks.request.mockResolvedValue({ stopped: true });
+    const fetchImpl = createNcpAppClientFetch();
+
+    const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/abort', {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ sessionId: 's1' })
+    });
+
+    expect(mocks.request).toHaveBeenCalledWith({
+      method: 'POST',
+      path: '/api/ncp/agent/abort',
+      body: { sessionId: 's1' }
+    });
+    expect(response.ok).toBe(true);
+  });
+
+  it('re-encodes appClient stream events as SSE frames', async () => {
+    mocks.openStream.mockImplementation(({ onEvent }) => {
+      onEvent({ name: 'ncp-event', payload: { type: 'message.chunk', payload: { text: 'hello' } } });
+      return {
+        finished: Promise.resolve(undefined),
+        cancel: vi.fn()
+      };
+    });
+    const fetchImpl = createNcpAppClientFetch();
+
+    const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/stream?sessionId=s1', {
+      method: 'GET',
+      headers: {
+        accept: 'text/event-stream'
+      }
+    });
+    const text = await response.text();
+
+    expect(mocks.openStream).toHaveBeenCalledWith({
+      method: 'GET',
+      path: '/api/ncp/agent/stream?sessionId=s1',
+      signal: undefined,
+      onEvent: expect.any(Function)
+    });
+    expect(text).toContain('event: ncp-event');
+    expect(text).toContain('"text":"hello"');
+  });
+});

package/src/components/chat/ncp/ncp-app-client-fetch.ts

@@ -0,0 +1,127 @@
+import { API_BASE } from '@/api/api-base';
+import { appClient } from '@/transport';
+
+type FetchLike = typeof fetch;
+
+export function createNcpAppClientFetch(): FetchLike {
+  return async (input, init) => {
+    const request = toRequestSnapshot(input, init);
+    if (isSseRequest(request)) {
+      return createSseResponse(request);
+    }
+
+    try {
+      const data = await appClient.request<unknown>({
+        method: request.method,
+        path: request.path,
+        ...(request.body !== undefined ? { body: request.body } : {})
+      });
+      return new Response(JSON.stringify(data ?? {}), {
+        status: 200,
+        headers: {
+          'content-type': 'application/json'
+        }
+      });
+    } catch (error) {
+      return new Response(error instanceof Error ? error.message : String(error), {
+        status: 500,
+        headers: {
+          'content-type': 'text/plain; charset=utf-8'
+        }
+      });
+    }
+  };
+}
+
+type RequestSnapshot = {
+  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  path: string;
+  body?: unknown;
+  signal?: AbortSignal;
+  headers: Headers;
+};
+
+function toRequestSnapshot(input: URL | string | Request, init?: RequestInit): RequestSnapshot {
+  const request = input instanceof Request ? input : null;
+  const url = new URL(
+    typeof input === 'string'
+      ? input
+      : input instanceof URL
+        ? input.toString()
+        : input.url,
+    API_BASE
+  );
+  const headers = new Headers(init?.headers ?? request?.headers);
+  const method = ((init?.method ?? request?.method ?? 'GET').toUpperCase()) as RequestSnapshot['method'];
+  return {
+    method,
+    path: `${url.pathname}${url.search}`,
+    body: parseRequestBody(init?.body),
+    signal: init?.signal ?? request?.signal ?? undefined,
+    headers
+  };
+}
+
+function parseRequestBody(body: BodyInit | null | undefined): unknown {
+  if (body === undefined || body === null) {
+    return undefined;
+  }
+  if (typeof body === 'string') {
+    try {
+      return JSON.parse(body);
+    } catch {
+      return body;
+    }
+  }
+  return body;
+}
+
+function isSseRequest(request: RequestSnapshot): boolean {
+  const accept = request.headers.get('accept')?.toLowerCase() ?? '';
+  return accept.includes('text/event-stream');
+}
+
+function createSseResponse(request: RequestSnapshot): Response {
+  const encoder = new TextEncoder();
+  let session: ReturnType<typeof appClient.openStream<unknown>> | null = null;
+
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      session = appClient.openStream<unknown>({
+        method: request.method === 'GET' ? 'GET' : 'POST',
+        path: request.path,
+        ...(request.body !== undefined ? { body: request.body } : {}),
+        signal: request.signal,
+        onEvent: (event) => {
+          controller.enqueue(encoder.encode(encodeSseFrame(event.name, event.payload)));
+        }
+      });
+
+      void session.finished
+        .then(() => {
+          controller.close();
+        })
+        .catch((error) => {
+          controller.enqueue(encoder.encode(encodeSseFrame('error', {
+            message: error instanceof Error ? error.message : String(error)
+          })));
+          controller.close();
+        });
+    },
+    cancel() {
+      session?.cancel();
+    }
+  });
+
+  return new Response(stream, {
+    status: 200,
+    headers: {
+      'content-type': 'text/event-stream'
+    }
+  });
+}
+
+function encodeSseFrame(event: string, payload: unknown): string {
+  const data = payload === undefined ? '' : JSON.stringify(payload);
+  return `event: ${event}\ndata: ${data}\n\n`;
+}

package/src/components/remote/RemoteAccessPage.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RemoteAccessPage } from '@/components/remote/RemoteAccessPage';
+import { setLanguage } from '@/lib/i18n';
+import { useRemoteAccessStore } from '@/remote/stores/remote-access.store';
+
+const mocks = vi.hoisted(() => ({
+  reauthorizeRemoteAccess: vi.fn(),
+  repairRemoteAccess: vi.fn(),
+  enableRemoteAccess: vi.fn(),
+  disableRemoteAccess: vi.fn(),
+  syncStatus: vi.fn(),
+  openNextClawWeb: vi.fn(),
+  statusQuery: {
+    data: undefined as unknown,
+    isLoading: false
+  }
+}));
+
+vi.mock('@/hooks/useRemoteAccess', () => ({
+  useRemoteStatus: () => mocks.statusQuery
+}));
+
+vi.mock('@/presenter/app-presenter-context', () => ({
+  useAppPresenter: () => ({
+    remoteAccessManager: {
+      reauthorizeRemoteAccess: mocks.reauthorizeRemoteAccess,
+      repairRemoteAccess: mocks.repairRemoteAccess,
+      enableRemoteAccess: mocks.enableRemoteAccess,
+      disableRemoteAccess: mocks.disableRemoteAccess,
+      syncStatus: mocks.syncStatus
+    },
+    accountManager: {
+      openNextClawWeb: mocks.openNextClawWeb
+    }
+  })
+}));
+
+describe('RemoteAccessPage', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.reauthorizeRemoteAccess.mockReset();
+    mocks.repairRemoteAccess.mockReset();
+    mocks.enableRemoteAccess.mockReset();
+    mocks.disableRemoteAccess.mockReset();
+    mocks.syncStatus.mockReset();
+    mocks.openNextClawWeb.mockReset();
+    useRemoteAccessStore.setState({
+      enabled: false,
+      deviceName: '',
+      platformApiBase: '',
+      draftTouched: false,
+      advancedOpen: false,
+      actionLabel: null,
+      doctor: null
+    });
+    mocks.statusQuery = {
+      data: {
+        account: {
+          loggedIn: true,
+          email: 'user@example.com',
+          apiBase: 'https://ai-gateway-api.nextclaw.io/v1',
+          platformBase: 'https://ai-gateway-api.nextclaw.io'
+        },
+        settings: {
+          enabled: true,
+          deviceName: 'MacBook Pro',
+          platformApiBase: 'https://ai-gateway-api.nextclaw.io/v1'
+        },
+        service: {
+          running: true,
+          currentProcess: false
+        },
+        localOrigin: 'http://127.0.0.1:55667',
+        configuredEnabled: true,
+        platformBase: 'https://ai-gateway-api.nextclaw.io',
+        runtime: {
+          enabled: true,
+          mode: 'service',
+          state: 'error',
+          lastError: 'Invalid or expired token.',
+          updatedAt: '2026-03-23T00:00:00.000Z'
+        }
+      },
+      isLoading: false
+    };
+  });
+
+  it('shows a user-facing reauthorization flow instead of raw token errors', async () => {
+    const user = userEvent.setup();
+
+    render(<RemoteAccessPage />);
+
+    expect(screen.getByText('登录已过期，请重新登录 NextClaw')).toBeTruthy();
+    expect(screen.getByText('重新登录并恢复远程访问')).toBeTruthy();
+    expect(screen.queryByText('Invalid or expired token.')).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: '重新登录并恢复远程访问' }));
+
+    expect(mocks.reauthorizeRemoteAccess).toHaveBeenCalledTimes(1);
+    expect(mocks.repairRemoteAccess).not.toHaveBeenCalled();
+  });
+});

package/src/components/remote/RemoteAccessPage.tsx

@@ -1,4 +1,3 @@
-import type { RemoteAccessView } from '@/api/remote.types';
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -7,102 +6,33 @@ import { useRemoteStatus } from '@/hooks/useRemoteAccess';
 import { formatDateTime, t } from '@/lib/i18n';
 import { useAppPresenter } from '@/presenter/app-presenter-context';
 import { resolveRemoteWebBase } from '@/remote/remote-access.query';
+import { buildRemoteAccessFeedbackView } from '@/remote/remote-access-feedback.service';
 import { useRemoteAccessStore } from '@/remote/stores/remote-access.store';
 import { Laptop, RefreshCcw, SquareArrowOutUpRight } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
 
-type RemoteHeroView = {
-  badgeStatus: 'active' | 'inactive' | 'ready' | 'setup' | 'warning';
-  badgeLabel: string;
-  title: string;
-  description: string;
-};
-
 function KeyValueRow(props: { label: string; value?: string | number | null; muted?: boolean }) {
-  const value = props.value === undefined || props.value === null || props.value === '' ? '-' : String(props.value);
+  const { label, muted, value: rawValue } = props;
+  const value = rawValue === undefined || rawValue === null || rawValue === '' ? '-' : String(rawValue);
   return (
     <div className="flex items-start justify-between gap-4 py-2 text-sm">
-      <span className="text-gray-500">{props.label}</span>
-      <span className={props.muted ? 'text-right text-gray-500' : 'text-right text-gray-900'}>{value}</span>
+      <span className="text-gray-500">{label}</span>
+      <span className={muted ? 'text-right text-gray-500' : 'text-right text-gray-900'}>{value}</span>
     </div>
   );
 }
 
-function buildHeroView(status: RemoteAccessView | undefined): RemoteHeroView {
-  if (!status?.account.loggedIn) {
-    return {
-      badgeStatus: 'setup',
-      badgeLabel: t('statusSetup'),
-      title: t('remoteStatusNeedsSignIn'),
-      description: t('remoteStatusNeedsSignInDescription')
-    };
-  }
-
-  if (!status.settings.enabled) {
-    return {
-      badgeStatus: 'inactive',
-      badgeLabel: t('statusInactive'),
-      title: t('remoteStatusNeedsEnable'),
-      description: t('remoteStatusNeedsEnableDescription')
-    };
-  }
-
-  if (!status.service.running) {
-    return {
-      badgeStatus: 'warning',
-      badgeLabel: t('remoteServiceStopped'),
-      title: t('remoteStatusNeedsServiceTitle'),
-      description: t('remoteStatusNeedsServiceDescription')
-    };
-  }
-
-  if (status.runtime?.state === 'connected') {
-    return {
-      badgeStatus: 'ready',
-      badgeLabel: t('statusReady'),
-      title: t('remoteStatusReadyTitle'),
-      description: t('remoteStatusReadyDescription')
-    };
-  }
-
-  if (status.runtime?.state === 'connecting') {
-    return {
-      badgeStatus: 'active',
-      badgeLabel: t('connecting'),
-      title: t('remoteStatusConnectingTitle'),
-      description: t('remoteStatusConnectingDescription')
-    };
-  }
-
-  return {
-    badgeStatus: 'warning',
-    badgeLabel: t('remoteStateDisconnected'),
-    title: t('remoteStatusIssueTitle'),
-    description: t('remoteStatusIssueDescription')
-  };
-}
-
-function buildIssueHint(status: RemoteAccessView | undefined) {
-  if (!status?.settings.enabled) {
-    return null;
-  }
-  if (!status.service.running) {
-    return t('remoteStatusIssueDetailServiceStopped');
-  }
-  return status.runtime?.lastError?.trim() || t('remoteStatusIssueDetailGeneric');
-}
 
 export function RemoteAccessPage() {
   const presenter = useAppPresenter();
   const remoteStatus = useRemoteStatus();
   const status = remoteStatus.data;
   const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
-  const heroView = useMemo(() => buildHeroView(status), [status]);
-  const issueHint = useMemo(() => buildIssueHint(status), [status]);
+  const feedbackView = useMemo(() => buildRemoteAccessFeedbackView(status), [status]);
   const busy = Boolean(actionLabel);
   const deviceName = status?.runtime?.deviceName?.trim() || status?.settings.deviceName?.trim() || t('remoteDeviceNameAuto');
   const canOpenDeviceList = Boolean(status?.account.loggedIn && resolveRemoteWebBase(status));
-  const shouldShowIssueHint = Boolean(status?.settings.enabled && status?.account.loggedIn && heroView.badgeStatus === 'warning');
+  const { hero: heroView, issueHint } = feedbackView;
 
   useEffect(() => {
     presenter.remoteAccessManager.syncStatus(status);
@@ -134,20 +64,25 @@ export function RemoteAccessPage() {
             </div>
 
             <div className="flex flex-wrap gap-3">
-              {!status?.account.loggedIn ? (
-                <Button onClick={() => void presenter.remoteAccessManager.enableRemoteAccess(status)} disabled={busy}>
-                  {actionLabel || t('remoteSignInAndEnable')}
-                </Button>
-              ) : !status.settings.enabled ? (
-                <Button onClick={() => void presenter.remoteAccessManager.enableRemoteAccess(status)} disabled={busy}>
-                  {actionLabel || t('remoteEnableNow')}
+              {feedbackView.primaryAction ? (
+                <Button
+                  onClick={() => {
+                    if (feedbackView.primaryAction?.kind === 'reauthorize') {
+                      void presenter.remoteAccessManager.reauthorizeRemoteAccess(status);
+                      return;
+                    }
+                    if (feedbackView.primaryAction?.kind === 'repair') {
+                      void presenter.remoteAccessManager.repairRemoteAccess(status);
+                      return;
+                    }
+                    void presenter.remoteAccessManager.enableRemoteAccess(status);
+                  }}
+                  disabled={busy}
+                >
+                  {feedbackView.primaryAction.showRefreshIcon ? <RefreshCcw className="mr-2 h-4 w-4" /> : null}
+                  {actionLabel || feedbackView.primaryAction.label}
                 </Button>
-              ) : (
-                <Button onClick={() => void presenter.remoteAccessManager.repairRemoteAccess(status)} disabled={busy}>
-                  <RefreshCcw className="mr-2 h-4 w-4" />
-                  {actionLabel || t('remoteReconnectNow')}
-                </Button>
-              )}
+              ) : null}
 
               <Button
                 variant="outline"
@@ -165,10 +100,10 @@ export function RemoteAccessPage() {
               ) : null}
             </div>
 
-            {shouldShowIssueHint ? (
+            {feedbackView.shouldShowIssueHint && issueHint ? (
               <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3">
-                <p className="text-sm font-medium text-amber-900">{t('remoteStatusIssueDetailTitle')}</p>
-                <p className="mt-1 text-sm leading-6 text-amber-800">{issueHint}</p>
+                <p className="text-sm font-medium text-amber-900">{issueHint.title}</p>
+                <p className="mt-1 text-sm leading-6 text-amber-800">{issueHint.body}</p>
               </div>
             ) : null}
 

package/src/hooks/use-realtime-query-bridge.ts

@@ -3,6 +3,9 @@ import { appClient } from '@/transport';
 import { useUiStore } from '@/stores/ui.store';
 import type { QueryClient } from '@tanstack/react-query';
 
+type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
+type SetConnectionStatus = (status: ConnectionStatus) => void;
+
 function shouldInvalidateConfigQuery(configPath: string) {
   const normalized = configPath.trim().toLowerCase();
   if (!normalized) {
@@ -27,82 +30,85 @@ function invalidateMarketplaceQueries(queryClient: QueryClient | undefined, conf
   }
 }
 
-export function useRealtimeQueryBridge(queryClient?: QueryClient) {
-  const { setConnectionStatus } = useUiStore();
-
-  useEffect(() => {
-    const invalidateSessionQueries = (sessionKey?: string) => {
-      if (!queryClient) {
-        return;
-      }
-      queryClient.invalidateQueries({ queryKey: ['sessions'] });
-      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-      if (sessionKey && sessionKey.trim().length > 0) {
-        queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey.trim()] });
-        queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', sessionKey.trim()] });
-        return;
-      }
-      queryClient.invalidateQueries({ queryKey: ['session-history'] });
-      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
-    };
-
-    setConnectionStatus('connecting');
-
-    return appClient.subscribe((event) => {
-      if (event.type === 'connection.open') {
-        setConnectionStatus('connected');
-        return;
-      }
+function invalidateSessionQueries(queryClient: QueryClient | undefined, sessionKey?: string): void {
+  if (!queryClient) {
+    return;
+  }
+  queryClient.invalidateQueries({ queryKey: ['sessions'] });
+  queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
+  if (sessionKey && sessionKey.trim().length > 0) {
+    queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey.trim()] });
+    queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', sessionKey.trim()] });
+    return;
+  }
+  queryClient.invalidateQueries({ queryKey: ['session-history'] });
+  queryClient.invalidateQueries({ queryKey: ['ncp-session-messages'] });
+}
 
-      if (event.type === 'connection.close') {
-        setConnectionStatus('disconnected');
-        return;
-      }
+function handleConfigUpdatedEvent(queryClient: QueryClient | undefined, path: string): void {
+  if (queryClient && shouldInvalidateConfigQuery(path)) {
+    queryClient.invalidateQueries({ queryKey: ['config'] });
+  }
+  if (path.startsWith('session')) {
+    invalidateSessionQueries(queryClient);
+  }
+  invalidateMarketplaceQueries(queryClient, path);
+}
 
-      if (event.type === 'connection.error') {
-        setConnectionStatus('disconnected');
-        return;
-      }
+function handleRunUpdatedEvent(queryClient: QueryClient | undefined, payload: { run: { sessionKey?: string; runId?: string } }): void {
+  if (!queryClient) {
+    return;
+  }
+  const { sessionKey, runId } = payload.run;
+  queryClient.invalidateQueries({ queryKey: ['chat-runs'] });
+  if (sessionKey) {
+    queryClient.invalidateQueries({ queryKey: ['sessions'] });
+    queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey] });
+  } else {
+    queryClient.invalidateQueries({ queryKey: ['session-history'] });
+  }
+  if (runId) {
+    queryClient.invalidateQueries({ queryKey: ['chat-run', runId] });
+  }
+}
 
-      if (event.type === 'config.updated') {
-        const configPath = typeof event.payload?.path === 'string' ? event.payload.path : '';
-        if (queryClient && shouldInvalidateConfigQuery(configPath)) {
-          queryClient.invalidateQueries({ queryKey: ['config'] });
-        }
-        if (configPath.startsWith('session')) {
-          invalidateSessionQueries();
-        }
-        invalidateMarketplaceQueries(queryClient, configPath);
-        return;
-      }
+function handleRealtimeEvent(
+  queryClient: QueryClient | undefined,
+  setConnectionStatus: SetConnectionStatus,
+  event: Parameters<Parameters<typeof appClient.subscribe>[0]>[0]
+): void {
+  if (event.type === 'connection.open') {
+    setConnectionStatus('connected');
+    return;
+  }
+  if (event.type === 'connection.close' || event.type === 'connection.error') {
+    setConnectionStatus('disconnected');
+    return;
+  }
+  if (event.type === 'config.updated') {
+    const configPath = typeof event.payload?.path === 'string' ? event.payload.path : '';
+    handleConfigUpdatedEvent(queryClient, configPath);
+    return;
+  }
+  if (event.type === 'run.updated') {
+    handleRunUpdatedEvent(queryClient, event.payload);
+    return;
+  }
+  if (event.type === 'session.updated') {
+    invalidateSessionQueries(queryClient, event.payload.sessionKey);
+    return;
+  }
+  if (event.type === 'error') {
+    console.error('Realtime transport error:', event.payload.message);
+  }
+}
 
-      if (event.type === 'run.updated') {
-        if (!queryClient) {
-          return;
-        }
-        const sessionKey = event.payload.run.sessionKey;
-        const runId = event.payload.run.runId;
-        queryClient.invalidateQueries({ queryKey: ['chat-runs'] });
-        if (sessionKey) {
-          queryClient.invalidateQueries({ queryKey: ['sessions'] });
-          queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey] });
-        } else {
-          queryClient.invalidateQueries({ queryKey: ['session-history'] });
-        }
-        if (runId) {
-          queryClient.invalidateQueries({ queryKey: ['chat-run', runId] });
-        }
-        return;
-      }
+export function useRealtimeQueryBridge(queryClient?: QueryClient) {
+  const { setConnectionStatus } = useUiStore();
 
-      if (event.type === 'session.updated') {
-        invalidateSessionQueries(event.payload.sessionKey);
-        return;
-      }
+  useEffect(() => {
+    setConnectionStatus('connecting');
 
-      if (event.type === 'error') {
-        console.error('Realtime transport error:', event.payload.message);
-      }
-    });
+    return appClient.subscribe((event) => handleRealtimeEvent(queryClient, setConnectionStatus, event));
   }, [queryClient, setConnectionStatus]);
 }