@nextclaw/ui 0.9.11 → 0.9.13

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

@@ -0,0 +1,195 @@
+import type { RemoteAccessView } from '@/api/remote.types';
+import { t } from '@/lib/i18n';
+
+type RemoteHeroView = {
+  badgeStatus: 'active' | 'inactive' | 'ready' | 'setup' | 'warning';
+  badgeLabel: string;
+  title: string;
+  description: string;
+};
+
+type RemotePrimaryAction =
+  | {
+      kind: 'sign-in-enable' | 'enable' | 'repair' | 'reauthorize';
+      label: string;
+      showRefreshIcon: boolean;
+    }
+  | null;
+
+type RemoteIssueHint = {
+  title: string;
+  body: string;
+};
+
+export type RemoteAccessFeedbackView = {
+  hero: RemoteHeroView;
+  primaryAction: RemotePrimaryAction;
+  issueHint: RemoteIssueHint | null;
+  shouldShowIssueHint: boolean;
+  requiresReauthorization: boolean;
+};
+
+const AUTH_EXPIRED_PATTERNS = [
+  /invalid or expired token/i,
+  /missing bearer token/i,
+  /token expired/i,
+  /token is invalid/i,
+  /run "nextclaw login"/i,
+  /browser sign-in again/i
+];
+
+function readRuntimeError(status: RemoteAccessView | undefined): string {
+  return status?.runtime?.lastError?.trim() || '';
+}
+
+export function requiresRemoteReauthorization(status: RemoteAccessView | undefined): boolean {
+  if (!status?.settings.enabled) {
+    return false;
+  }
+  const error = readRuntimeError(status);
+  return AUTH_EXPIRED_PATTERNS.some((pattern) => pattern.test(error));
+}
+
+export function buildRemoteAccessFeedbackView(status: RemoteAccessView | undefined): RemoteAccessFeedbackView {
+  const reauthorizationRequired = requiresRemoteReauthorization(status);
+
+  if (reauthorizationRequired) {
+    return {
+      hero: {
+        badgeStatus: 'warning',
+        badgeLabel: t('remoteStateReauthorizationRequired'),
+        title: t('remoteStatusReauthorizationTitle'),
+        description: t('remoteStatusReauthorizationDescription')
+      },
+      primaryAction: {
+        kind: 'reauthorize',
+        label: t('remoteReauthorizeNow'),
+        showRefreshIcon: false
+      },
+      issueHint: {
+        title: t('remoteStatusRecoveryTitle'),
+        body: t('remoteStatusReauthorizationHint')
+      },
+      shouldShowIssueHint: true,
+      requiresReauthorization: true
+    };
+  }
+
+  if (!status?.account.loggedIn) {
+    return {
+      hero: {
+        badgeStatus: 'setup',
+        badgeLabel: t('statusSetup'),
+        title: t('remoteStatusNeedsSignIn'),
+        description: t('remoteStatusNeedsSignInDescription')
+      },
+      primaryAction: {
+        kind: 'sign-in-enable',
+        label: t('remoteSignInAndEnable'),
+        showRefreshIcon: false
+      },
+      issueHint: null,
+      shouldShowIssueHint: false,
+      requiresReauthorization: false
+    };
+  }
+
+  if (!status.settings.enabled) {
+    return {
+      hero: {
+        badgeStatus: 'inactive',
+        badgeLabel: t('statusInactive'),
+        title: t('remoteStatusNeedsEnable'),
+        description: t('remoteStatusNeedsEnableDescription')
+      },
+      primaryAction: {
+        kind: 'enable',
+        label: t('remoteEnableNow'),
+        showRefreshIcon: false
+      },
+      issueHint: null,
+      shouldShowIssueHint: false,
+      requiresReauthorization: false
+    };
+  }
+
+  if (!status.service.running) {
+    return {
+      hero: {
+        badgeStatus: 'warning',
+        badgeLabel: t('remoteServiceStopped'),
+        title: t('remoteStatusNeedsServiceTitle'),
+        description: t('remoteStatusNeedsServiceDescription')
+      },
+      primaryAction: {
+        kind: 'repair',
+        label: t('remoteReconnectNow'),
+        showRefreshIcon: true
+      },
+      issueHint: {
+        title: t('remoteStatusRecoveryTitle'),
+        body: t('remoteStatusIssueDetailServiceStopped')
+      },
+      shouldShowIssueHint: true,
+      requiresReauthorization: false
+    };
+  }
+
+  if (status.runtime?.state === 'connected') {
+    return {
+      hero: {
+        badgeStatus: 'ready',
+        badgeLabel: t('statusReady'),
+        title: t('remoteStatusReadyTitle'),
+        description: t('remoteStatusReadyDescription')
+      },
+      primaryAction: {
+        kind: 'repair',
+        label: t('remoteReconnectNow'),
+        showRefreshIcon: true
+      },
+      issueHint: null,
+      shouldShowIssueHint: false,
+      requiresReauthorization: false
+    };
+  }
+
+  if (status.runtime?.state === 'connecting') {
+    return {
+      hero: {
+        badgeStatus: 'active',
+        badgeLabel: t('connecting'),
+        title: t('remoteStatusConnectingTitle'),
+        description: t('remoteStatusConnectingDescription')
+      },
+      primaryAction: {
+        kind: 'repair',
+        label: t('remoteReconnectNow'),
+        showRefreshIcon: true
+      },
+      issueHint: null,
+      shouldShowIssueHint: false,
+      requiresReauthorization: false
+    };
+  }
+
+  return {
+    hero: {
+      badgeStatus: 'warning',
+      badgeLabel: t('remoteStateDisconnected'),
+      title: t('remoteStatusIssueTitle'),
+      description: t('remoteStatusIssueDescription')
+    },
+    primaryAction: {
+      kind: 'repair',
+      label: t('remoteReconnectNow'),
+      showRefreshIcon: true
+    },
+    issueHint: {
+      title: t('remoteStatusRecoveryTitle'),
+      body: t('remoteStatusIssueDetailGeneric')
+    },
+    shouldShowIssueHint: Boolean(status.settings.enabled && status.account.loggedIn),
+    requiresReauthorization: false
+  };
+}

package/src/transport/app-client.test.ts

@@ -0,0 +1,49 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('appClient runtime detection', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('falls back to LocalAppTransport when runtime probe returns html', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response('<html>ui shell</html>', {
+        status: 200,
+        headers: {
+          'content-type': 'text/html; charset=utf-8'
+        }
+      })
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { LocalAppTransport } = await import('@/transport/local.transport');
+    const localRequest = vi
+      .spyOn(LocalAppTransport.prototype, 'request')
+      .mockResolvedValue({ ok: true } as never);
+
+    const { appClient } = await import('@/transport/app-client');
+    const result = await appClient.request<{ ok: boolean }>({
+      method: 'GET',
+      path: '/api/config'
+    });
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      expect.stringContaining('/_remote/runtime'),
+      expect.objectContaining({
+        method: 'GET',
+        credentials: 'include',
+        cache: 'no-store'
+      })
+    );
+    expect(localRequest).toHaveBeenCalledWith({
+      method: 'GET',
+      path: '/api/config'
+    });
+    expect(result).toEqual({ ok: true });
+  });
+});

package/src/transport/app-client.ts

@@ -1,9 +1,14 @@
-import { API_BASE } from '@/api/client';
+import { API_BASE } from '@/api/api-base';
 import { LocalAppTransport } from './local.transport';
 import { RemoteSessionMultiplexTransport } from './remote.transport';
 import type { AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
 
 const REMOTE_RUNTIME_PATH = '/_remote/runtime';
+const DEFAULT_REMOTE_RUNTIME: RemoteRuntimeInfo = {
+  mode: 'remote',
+  protocolVersion: 1,
+  wsPath: '/_remote/ws'
+};
 
 async function resolveRuntime(apiBase: string): Promise<AppTransport> {
   const runtimeUrl = `${apiBase.replace(/\/$/, '')}${REMOTE_RUNTIME_PATH}`;
@@ -22,17 +27,28 @@ async function resolveRuntime(apiBase: string): Promise<AppTransport> {
     return new LocalAppTransport({ apiBase });
   }
 
-  const payload = await response.json() as { ok?: boolean; data?: RemoteRuntimeInfo };
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? '';
+  if (!contentType.includes('application/json')) {
+    return response.status >= 400
+      ? new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase)
+      : new LocalAppTransport({ apiBase });
+  }
+
+  let payload: { ok?: boolean; data?: RemoteRuntimeInfo } | null = null;
+  try {
+    payload = await response.json() as { ok?: boolean; data?: RemoteRuntimeInfo };
+  } catch {
+    return response.status >= 400
+      ? new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase)
+      : new LocalAppTransport({ apiBase });
+  }
+
   if (response.ok && payload.ok && payload.data?.mode === 'remote') {
     return new RemoteSessionMultiplexTransport(payload.data, apiBase);
   }
 
   if (response.status >= 400) {
-    return new RemoteSessionMultiplexTransport({
-      mode: 'remote',
-      protocolVersion: 1,
-      wsPath: '/_remote/ws'
-    }, apiBase);
+    return new RemoteSessionMultiplexTransport(DEFAULT_REMOTE_RUNTIME, apiBase);
   }
 
   return new LocalAppTransport({ apiBase });

package/src/transport/local.transport.ts

@@ -1,4 +1,5 @@
-import { API_BASE, requestApiResponse } from '@/api/client';
+import { API_BASE } from '@/api/api-base';
+import { requestRawApiResponse } from '@/api/raw-client';
 import type { ApiResponse } from '@/api/types';
 import type { AppEvent, AppTransport, RequestInput, StreamInput, StreamSession } from './transport.types';
 import { readSseStreamResult } from './sse-stream';
@@ -112,7 +113,7 @@ export class LocalAppTransport implements AppTransport {
   }
 
   async request<T>(input: RequestInput): Promise<T> {
-    const response = await requestApiResponse<T>(input.path, {
+    const response = await requestRawApiResponse<T>(input.path, {
       method: input.method,
       ...(input.body !== undefined ? { body: JSON.stringify(input.body) } : {})
     });

package/src/transport/remote.transport.ts

@@ -1,4 +1,4 @@
-import { API_BASE } from '@/api/client';
+import { API_BASE } from '@/api/api-base';
 import type { ApiError } from '@/api/types';
 import type { AppEvent, AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url';
@@ -350,7 +350,12 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
       return;
     }
     if (frame.type === 'stream.event') {
-      pending.onEvent({ name: frame.event, payload: frame.payload });
+      try {
+        pending.onEvent({ name: frame.event, payload: frame.payload });
+      } catch (error) {
+        this.pendingStreams.delete(frame.streamId);
+        pending.reject(error instanceof Error ? error : new Error(String(error)));
+      }
       return;
     }
     this.pendingStreams.delete(frame.streamId);