@nextclaw/ui 0.9.11 → 0.9.13

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/lib/i18n.remote.ts

@@ -40,23 +40,34 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     zh: '远程访问已经开启，但后台服务没有运行。拉起后才会真正连到网页版。',
     en: 'Remote access is enabled, but the managed service is not running yet. Start it to connect to the web app.'
   },
-  remoteStatusIssueTitle: { zh: '远程连接当前有异常', en: 'The remote connection needs attention' },
+  remoteStatusReauthorizationTitle: { zh: '登录已过期，请重新登录 NextClaw', en: 'Your sign-in expired. Sign in to NextClaw again.' },
+  remoteStatusReauthorizationDescription: {
+    zh: '为了保护你的账号安全，远程访问已暂停。重新登录后会自动恢复，不需要重新配置设备。',
+    en: 'Remote access is paused to protect your account. Sign in again and it will recover automatically without reconfiguring this device.'
+  },
+  remoteStatusIssueTitle: { zh: '远程访问暂时没有连上', en: 'Remote access is temporarily offline' },
   remoteStatusIssueDescription: {
-    zh: '账号和设备配置都还在，但当前没有稳定连上平台。你可以重新连接，或先去设备列表确认这台设备的状态。',
-    en: 'Your account and device settings are still there, but this device is not stably connected to the platform right now. Reconnect it or check the device list first.'
+    zh: '设备配置还在，但当前没有稳定连上平台。你可以先重新连接；如果问题持续，再重新登录或稍后再试。',
+    en: 'Your device settings are still there, but this device is not stably connected to the platform right now. Reconnect first, then sign in again or try later if it keeps happening.'
   },
-  remoteStatusIssueDetailTitle: { zh: '当前提示', en: 'Current Hint' },
+  remoteStatusIssueDetailTitle: { zh: '下一步', en: 'Next Step' },
+  remoteStatusRecoveryTitle: { zh: '推荐操作', en: 'Recommended Next Step' },
   remoteStatusIssueDetailGeneric: {
-    zh: '连接曾经建立，但随后被平台侧主动关闭。常见原因包括登录态失效、平台侧中继不可用，或云端配额暂时触顶。',
-    en: 'The connection was established and then closed by the platform. Common causes include an expired session, an unavailable relay, or a temporary cloud quota limit.'
+    zh: '远程访问暂时不可用。你可以先重新连接；如果问题持续，再重新登录或稍后再试。',
+    en: 'Remote access is temporarily unavailable. Reconnect first, then sign in again or try later if the issue continues.'
   },
   remoteStatusIssueDetailServiceStopped: {
-    zh: '本地托管服务没有在运行，所以远程连接不会保持在线。',
-    en: 'The local managed service is not running, so the remote connection cannot stay online.'
+    zh: '后台服务当前没有运行。启动后，这台设备才会重新出现在网页版设备列表里。',
+    en: 'The managed service is not running right now. Start it so this device can show up in the web device list again.'
+  },
+  remoteStatusReauthorizationHint: {
+    zh: '点击下方按钮后会打开登录页。完成登录后，这台设备会自动恢复远程访问，不需要重新配置。',
+    en: 'Use the button below to open the sign-in page. Once you finish signing in, this device will recover remote access automatically.'
   },
   remoteSignInAndEnable: { zh: '登录并开启远程访问', en: 'Sign In and Enable Remote Access' },
   remoteEnableNow: { zh: '开启远程访问', en: 'Enable Remote Access' },
   remoteReconnectNow: { zh: '重新连接', en: 'Reconnect' },
+  remoteReauthorizeNow: { zh: '重新登录并恢复远程访问', en: 'Sign In Again and Restore Remote Access' },
   remoteDisable: { zh: '关闭远程访问', en: 'Disable Remote Access' },
   remoteDeviceSummaryTitle: { zh: '当前设备', en: 'This Device' },
   remoteDeviceSummaryDescription: {
@@ -114,6 +125,7 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
   remoteStateError: { zh: '连接异常', en: 'Error' },
   remoteStateDisconnected: { zh: '已断开', en: 'Disconnected' },
   remoteStateDisabled: { zh: '未启用', en: 'Disabled' },
+  remoteStateReauthorizationRequired: { zh: '需要重新登录', en: 'Sign-In Required' },
   remoteLocalOrigin: { zh: '本地服务地址', en: 'Local Origin' },
   remotePublicPlatform: { zh: '平台地址', en: 'Platform Base' },
   remoteDeviceId: { zh: '设备 ID', en: 'Device ID' },

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

@@ -79,6 +79,15 @@ export class RemoteAccessManager {
     });
   };
 
+  reauthorizeRemoteAccess = async (status: RemoteAccessView | undefined) => {
+    const currentStatus = status ?? (await refreshRemoteStatus());
+    await this.accountManager?.startBrowserSignIn({
+      status: currentStatus,
+      apiBase: useRemoteAccessStore.getState().platformApiBase,
+      pendingAction: { type: 'repair-remote' }
+    });
+  };
+
   saveAdvancedSettings = async (status: RemoteAccessView | undefined) => {
     const currentStatus = status ?? (await refreshRemoteStatus());
     const draft = useRemoteAccessStore.getState();
@@ -126,6 +135,10 @@ export class RemoteAccessManager {
     }
     if (action.type === 'enable-remote') {
       await this.applyEnabledState(true, status);
+      return;
+    }
+    if (action.type === 'repair-remote') {
+      await this.repairRemoteAccess(status);
     }
   };
 

package/src/remote/remote-access-feedback.service.test.ts

@@ -0,0 +1,75 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import type { RemoteAccessView } from '@/api/remote.types';
+import { setLanguage } from '@/lib/i18n';
+import { buildRemoteAccessFeedbackView, requiresRemoteReauthorization } from '@/remote/remote-access-feedback.service';
+
+function createRemoteAccessView(overrides: Partial<RemoteAccessView> = {}): RemoteAccessView {
+  return {
+    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',
+      deviceName: 'MacBook Pro',
+      lastError: 'Remote relay closed unexpectedly.',
+      updatedAt: '2026-03-23T00:00:00.000Z'
+    },
+    ...overrides
+  };
+}
+
+describe('remote-access-feedback.service', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+  });
+
+  it('turns token errors into a reauthorization experience', () => {
+    const status = createRemoteAccessView({
+      runtime: {
+        enabled: true,
+        mode: 'service',
+        state: 'error',
+        lastError: 'Invalid or expired token.',
+        updatedAt: '2026-03-23T00:00:00.000Z'
+      }
+    });
+
+    expect(requiresRemoteReauthorization(status)).toBe(true);
+
+    const feedback = buildRemoteAccessFeedbackView(status);
+
+    expect(feedback.hero.title).toBe('登录已过期，请重新登录 NextClaw');
+    expect(feedback.primaryAction?.kind).toBe('reauthorize');
+    expect(feedback.primaryAction?.label).toBe('重新登录并恢复远程访问');
+    expect(feedback.issueHint?.body).not.toContain('Invalid or expired token');
+  });
+
+  it('keeps generic reconnect guidance for non-auth runtime errors', () => {
+    const status = createRemoteAccessView();
+
+    expect(requiresRemoteReauthorization(status)).toBe(false);
+
+    const feedback = buildRemoteAccessFeedbackView(status);
+
+    expect(feedback.hero.title).toBe('远程访问暂时没有连上');
+    expect(feedback.primaryAction?.kind).toBe('repair');
+    expect(feedback.issueHint?.body).toBe('远程访问暂时不可用。你可以先重新连接；如果问题持续，再重新登录或稍后再试。');
+  });
+});