@nextclaw/ui 0.9.9 → 0.9.11

package/src/transport/local.transport.ts

@@ -0,0 +1,168 @@
+import { API_BASE, requestApiResponse } from '@/api/client';
+import type { ApiResponse } from '@/api/types';
+import type { AppEvent, AppTransport, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { readSseStreamResult } from './sse-stream';
+import { resolveTransportWebSocketUrl } from './transport-websocket-url';
+
+type EventHandler = (event: AppEvent) => void;
+
+function createTransportError(response: ApiResponse<unknown>, fallback: string): Error {
+  if (!response.ok) {
+    return new Error(response.error.message);
+  }
+  return new Error(fallback);
+}
+
+class LocalRealtimeGateway {
+  private socket: WebSocket | null = null;
+  private reconnectTimer: number | null = null;
+  private manualClose = false;
+  private subscribers = new Set<EventHandler>();
+
+  constructor(private readonly wsUrl: string) {}
+
+  subscribe(handler: EventHandler): () => void {
+    this.subscribers.add(handler);
+    if (this.subscribers.size === 1) {
+      this.connect();
+    } else if (this.socket?.readyState === WebSocket.OPEN) {
+      handler({ type: 'connection.open', payload: {} });
+    }
+
+    return () => {
+      this.subscribers.delete(handler);
+      if (this.subscribers.size === 0) {
+        this.disconnect();
+      }
+    };
+  }
+
+  private emit(event: AppEvent): void {
+    for (const subscriber of this.subscribers) {
+      subscriber(event);
+    }
+  }
+
+  private connect(): void {
+    if (this.socket && (this.socket.readyState === WebSocket.CONNECTING || this.socket.readyState === WebSocket.OPEN)) {
+      return;
+    }
+    this.manualClose = false;
+    const socket = new WebSocket(this.wsUrl);
+    this.socket = socket;
+
+    socket.onopen = () => {
+      this.emit({ type: 'connection.open', payload: {} });
+    };
+
+    socket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(String(event.data ?? '')) as AppEvent;
+        this.emit(data);
+      } catch (error) {
+        console.error('Failed to parse websocket message:', error);
+      }
+    };
+
+    socket.onerror = () => {
+      this.emit({ type: 'connection.error', payload: { message: 'websocket error' } });
+    };
+
+    socket.onclose = () => {
+      this.emit({ type: 'connection.close', payload: {} });
+      this.socket = null;
+      if (!this.manualClose && this.subscribers.size > 0) {
+        this.scheduleReconnect();
+      }
+    };
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectTimer !== null) {
+      return;
+    }
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, 3_000);
+  }
+
+  private disconnect(): void {
+    this.manualClose = true;
+    if (this.reconnectTimer !== null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.socket?.close();
+    this.socket = null;
+  }
+}
+
+export class LocalAppTransport implements AppTransport {
+  private readonly realtimeGateway: LocalRealtimeGateway;
+
+  constructor(
+    private readonly options: {
+      apiBase?: string;
+      wsPath?: string;
+    } = {}
+  ) {
+    const apiBase = options.apiBase ?? API_BASE;
+    this.realtimeGateway = new LocalRealtimeGateway(resolveTransportWebSocketUrl(apiBase, options.wsPath ?? '/ws'));
+  }
+
+  async request<T>(input: RequestInput): Promise<T> {
+    const response = await requestApiResponse<T>(input.path, {
+      method: input.method,
+      ...(input.body !== undefined ? { body: JSON.stringify(input.body) } : {})
+    });
+    if (!response.ok) {
+      throw createTransportError(response, `Request failed for ${input.method} ${input.path}`);
+    }
+    return response.data;
+  }
+
+  openStream<TFinal = unknown>(input: StreamInput): StreamSession<TFinal> {
+    const controller = new AbortController();
+    const abort = () => controller.abort();
+    if (input.signal) {
+      if (input.signal.aborted) {
+        abort();
+      } else {
+        input.signal.addEventListener('abort', abort, { once: true });
+      }
+    }
+
+    const finished = (async () => {
+      const response = await fetch(`${API_BASE}${input.path}`, {
+        method: input.method,
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'text/event-stream'
+        },
+        ...(input.body !== undefined ? { body: JSON.stringify(input.body) } : {}),
+        signal: controller.signal
+      });
+
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(text.trim() || `HTTP ${response.status}`);
+      }
+      try {
+        return await readSseStreamResult<TFinal>(response, input.onEvent);
+      } finally {
+        input.signal?.removeEventListener('abort', abort);
+      }
+    })();
+
+    return {
+      finished,
+      cancel: () => controller.abort()
+    };
+  }
+
+  subscribe(handler: (event: AppEvent) => void): () => void {
+    return this.realtimeGateway.subscribe(handler);
+  }
+}

package/src/transport/remote.transport.ts

@@ -0,0 +1,363 @@
+import { API_BASE } from '@/api/client';
+import type { ApiError } from '@/api/types';
+import type { AppEvent, AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { resolveTransportWebSocketUrl } from './transport-websocket-url';
+
+type RemoteTarget = {
+  method: string;
+  path: string;
+  body?: unknown;
+};
+
+type RemoteBrowserFrame =
+  | { type: 'connection.ready'; connectionId: string; protocolVersion: 1 }
+  | { type: 'response'; id: string; status: number; body?: unknown }
+  | { type: 'request.error'; id: string; message: string; code?: string }
+  | { type: 'stream.event'; streamId: string; event: string; payload?: unknown }
+  | { type: 'stream.end'; streamId: string; result?: unknown }
+  | { type: 'stream.error'; streamId: string; message: string; code?: string }
+  | { type: 'event'; event: AppEvent }
+  | { type: 'connection.error'; message: string; code?: string };
+
+type RemoteBrowserCommand =
+  | { type: 'request'; id: string; target: RemoteTarget }
+  | { type: 'stream.open'; streamId: string; target: RemoteTarget }
+  | { type: 'stream.cancel'; streamId: string };
+
+type PendingRequest = {
+  resolve: (value: unknown) => void;
+  reject: (error: Error) => void;
+};
+
+type PendingStream = {
+  onEvent: StreamInput['onEvent'];
+  resolve: (value: unknown) => void;
+  reject: (error: Error) => void;
+};
+
+function normalizeApiError(body: unknown, status: number, fallback: string): Error {
+  if (typeof body === 'object' && body && 'ok' in body) {
+    const typed = body as { ok?: boolean; error?: ApiError; data?: unknown };
+    if (typed.ok === false && typed.error?.message) {
+      return new Error(typed.error.message);
+    }
+    if (typed.ok === true) {
+      return new Error(fallback);
+    }
+  }
+  if (typeof body === 'string' && body.trim()) {
+    return new Error(body.trim());
+  }
+  return new Error(`${fallback} (${status})`);
+}
+
+function unwrapApiBody<T>(body: unknown): T {
+  if (typeof body === 'object' && body && 'ok' in body) {
+    const typed = body as { ok?: boolean; error?: ApiError; data?: T };
+    if (typed.ok === false) {
+      throw new Error(typed.error?.message ?? 'Remote request failed.');
+    }
+    if (typed.ok === true) {
+      return typed.data as T;
+    }
+  }
+  return body as T;
+}
+
+function createId(prefix: string): string {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export class RemoteSessionMultiplexTransport implements AppTransport {
+  private socket: WebSocket | null = null;
+  private connectPromise: Promise<void> | null = null;
+  private connectTimeoutId: number | null = null;
+  private reconnectTimer: number | null = null;
+  private manualClose = false;
+  private subscribers = new Set<(event: AppEvent) => void>();
+  private pendingRequests = new Map<string, PendingRequest>();
+  private pendingStreams = new Map<string, PendingStream>();
+
+  constructor(
+    private readonly runtime: RemoteRuntimeInfo,
+    private readonly apiBase: string = API_BASE
+  ) {}
+
+  async request<T>(input: RequestInput): Promise<T> {
+    await this.ensureSocket();
+    const id = createId('req');
+    return await new Promise<T>((resolve, reject) => {
+      this.pendingRequests.set(id, {
+        resolve: (value) => resolve(value as T),
+        reject
+      });
+      this.send({
+        type: 'request',
+        id,
+        target: {
+          method: input.method,
+          path: input.path,
+          ...(input.body !== undefined ? { body: input.body } : {})
+        }
+      });
+    });
+  }
+
+  openStream<TFinal = unknown>(input: StreamInput): StreamSession<TFinal> {
+    const streamId = createId('stream');
+    let settled = false;
+    const rejectEarly = (error: Error) => {
+      if (!settled) {
+        settled = true;
+        reject(error);
+      }
+    };
+    let resolve!: (value: TFinal) => void;
+    let reject!: (error: Error) => void;
+    const finished = new Promise<TFinal>((innerResolve, innerReject) => {
+      resolve = innerResolve;
+      reject = innerReject;
+    });
+
+    const cancel = () => {
+      this.pendingStreams.delete(streamId);
+      if (settled) {
+        return;
+      }
+      settled = true;
+      this.send({ type: 'stream.cancel', streamId });
+      reject(new Error('stream cancelled'));
+    };
+
+    this.pendingStreams.set(streamId, {
+      onEvent: input.onEvent,
+      resolve: (value) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        resolve(value as TFinal);
+      },
+      reject: (error) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        reject(error);
+      }
+    });
+
+    const abort = () => cancel();
+    if (input.signal) {
+      if (input.signal.aborted) {
+        cancel();
+      } else {
+        input.signal.addEventListener('abort', abort, { once: true });
+      }
+    }
+
+    void this.ensureSocket()
+      .then(() => {
+        if (settled) {
+          return;
+        }
+        this.send({
+          type: 'stream.open',
+          streamId,
+          target: {
+            method: input.method,
+            path: input.path,
+            ...(input.body !== undefined ? { body: input.body } : {})
+          }
+        });
+      })
+      .catch((error) => {
+        this.pendingStreams.delete(streamId);
+        rejectEarly(error instanceof Error ? error : new Error(String(error)));
+      });
+
+    return {
+      finished: finished.finally(() => {
+        input.signal?.removeEventListener('abort', abort);
+        this.pendingStreams.delete(streamId);
+      }),
+      cancel
+    };
+  }
+
+  subscribe(handler: (event: AppEvent) => void): () => void {
+    this.subscribers.add(handler);
+    void this.ensureSocket().catch((error) => {
+      handler({
+        type: 'connection.error',
+        payload: { message: error instanceof Error ? error.message : String(error) }
+      });
+    });
+    return () => {
+      this.subscribers.delete(handler);
+    };
+  }
+
+  private emit(event: AppEvent): void {
+    for (const subscriber of this.subscribers) {
+      subscriber(event);
+    }
+  }
+
+  private send(frame: RemoteBrowserCommand): void {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
+      throw new Error('Remote transport websocket is not connected.');
+    }
+    this.socket.send(JSON.stringify(frame));
+  }
+
+  private async ensureSocket(): Promise<void> {
+    if (this.socket?.readyState === WebSocket.OPEN && this.connectPromise === null) {
+      return;
+    }
+    if (this.connectPromise) {
+      return await this.connectPromise;
+    }
+
+    const wsUrl = resolveTransportWebSocketUrl(this.apiBase, this.runtime.wsPath);
+    this.manualClose = false;
+    this.connectPromise = new Promise<void>((innerResolve, innerReject) => {
+        const socket = new WebSocket(wsUrl);
+        this.socket = socket;
+        let connectionOpened = false;
+
+        const clearConnectTimeout = () => {
+          if (this.connectTimeoutId !== null) {
+            window.clearTimeout(this.connectTimeoutId);
+            this.connectTimeoutId = null;
+          }
+        };
+
+        this.connectTimeoutId = window.setTimeout(() => {
+          this.connectTimeoutId = null;
+          innerReject(new Error('Timed out waiting for remote transport websocket.'));
+          socket.close();
+        }, 8_000);
+
+        socket.onopen = () => {
+          connectionOpened = true;
+          clearConnectTimeout();
+          this.connectPromise = null;
+          innerResolve();
+          this.emit({ type: 'connection.open', payload: {} });
+        };
+
+        socket.onmessage = (event) => {
+          try {
+            const frame = JSON.parse(String(event.data ?? '')) as RemoteBrowserFrame;
+            if (frame.type === 'connection.ready') {
+              return;
+            }
+            this.handleFrame(frame);
+          } catch (error) {
+            console.error('Failed to parse remote websocket frame:', error);
+          }
+        };
+
+        socket.onerror = () => {
+          this.emit({ type: 'connection.error', payload: { message: 'remote websocket error' } });
+        };
+
+        socket.onclose = () => {
+          clearConnectTimeout();
+          const wasConnecting = this.connectPromise !== null;
+          this.socket = null;
+          this.connectPromise = null;
+          this.failPendingWork(new Error('Remote transport connection closed.'));
+          this.emit({ type: 'connection.close', payload: {} });
+          if (wasConnecting && !connectionOpened) {
+            innerReject(new Error('Remote transport connection closed before ready.'));
+          }
+          if (!this.manualClose && this.subscribers.size > 0) {
+            this.scheduleReconnect();
+          }
+        };
+      });
+
+    const connectPromise = this.connectPromise;
+    return await connectPromise;
+  }
+
+  private scheduleReconnect(): void {
+    if (this.reconnectTimer !== null) {
+      return;
+    }
+    this.reconnectTimer = window.setTimeout(() => {
+      this.reconnectTimer = null;
+      void this.ensureSocket().catch(() => undefined);
+    }, 3_000);
+  }
+
+  private failPendingWork(error: Error): void {
+    for (const pending of this.pendingRequests.values()) {
+      pending.reject(error);
+    }
+    this.pendingRequests.clear();
+
+    for (const pending of this.pendingStreams.values()) {
+      pending.reject(error);
+    }
+    this.pendingStreams.clear();
+  }
+
+  private handleFrame(frame: RemoteBrowserFrame): void {
+    if (frame.type === 'response' || frame.type === 'request.error') {
+      this.handleRequestFrame(frame);
+      return;
+    }
+    if (frame.type === 'stream.event' || frame.type === 'stream.end' || frame.type === 'stream.error') {
+      this.handleStreamFrame(frame);
+      return;
+    }
+    if (frame.type === 'event') {
+      this.emit(frame.event);
+      return;
+    }
+    if (frame.type === 'connection.error') {
+      this.emit({ type: 'connection.error', payload: { message: frame.message } });
+    }
+  }
+
+  private handleRequestFrame(frame: Extract<RemoteBrowserFrame, { type: 'response' | 'request.error' }>): void {
+    const pending = this.pendingRequests.get(frame.id);
+    if (!pending) {
+      return;
+    }
+    this.pendingRequests.delete(frame.id);
+    if (frame.type === 'request.error') {
+      pending.reject(new Error(frame.message));
+      return;
+    }
+    if (frame.status >= 400) {
+      pending.reject(normalizeApiError(frame.body, frame.status, 'Remote request failed.'));
+      return;
+    }
+    try {
+      pending.resolve(unwrapApiBody(frame.body));
+    } catch (error) {
+      pending.reject(error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+
+  private handleStreamFrame(frame: Extract<RemoteBrowserFrame, { type: 'stream.event' | 'stream.end' | 'stream.error' }>): void {
+    const pending = this.pendingStreams.get(frame.streamId);
+    if (!pending) {
+      return;
+    }
+    if (frame.type === 'stream.event') {
+      pending.onEvent({ name: frame.event, payload: frame.payload });
+      return;
+    }
+    this.pendingStreams.delete(frame.streamId);
+    if (frame.type === 'stream.end') {
+      pending.resolve(frame.result);
+      return;
+    }
+    pending.reject(new Error(frame.message));
+  }
+}

package/src/transport/sse-stream.ts

@@ -0,0 +1,114 @@
+import type { StreamEvent } from './transport.types';
+
+type SseErrorPayload = { message?: string } | string | undefined;
+
+function parseSseFrame(frame: string): StreamEvent | null {
+  const lines = frame.split('\n');
+  let name = '';
+  const dataLines: string[] = [];
+  for (const raw of lines) {
+    const line = raw.trimEnd();
+    if (!line || line.startsWith(':')) {
+      continue;
+    }
+    if (line.startsWith('event:')) {
+      name = line.slice(6).trim();
+      continue;
+    }
+    if (line.startsWith('data:')) {
+      dataLines.push(line.slice(5).trimStart());
+    }
+  }
+  if (!name) {
+    return null;
+  }
+
+  let payload: unknown = undefined;
+  const data = dataLines.join('\n');
+  if (data) {
+    try {
+      payload = JSON.parse(data);
+    } catch {
+      payload = data;
+    }
+  }
+
+  return { name, payload };
+}
+
+function readSseErrorMessage(payload: SseErrorPayload, fallback: string): string {
+  return typeof payload === 'string'
+    ? payload
+    : payload?.message ?? fallback;
+}
+
+function processSseFrame(
+  rawFrame: string,
+  onEvent: (event: StreamEvent) => void,
+  setFinalResult: (value: unknown) => void
+): void {
+  const frame = parseSseFrame(rawFrame);
+  if (!frame) {
+    return;
+  }
+  if (frame.name === 'final') {
+    setFinalResult(frame.payload);
+    return;
+  }
+  if (frame.name === 'error') {
+    throw new Error(readSseErrorMessage(frame.payload as SseErrorPayload, 'chat stream failed'));
+  }
+  onEvent(frame);
+}
+
+function flushBufferedFrames(
+  bufferState: { value: string },
+  onEvent: (event: StreamEvent) => void,
+  setFinalResult: (value: unknown) => void
+): void {
+  let boundary = bufferState.value.indexOf('\n\n');
+  while (boundary !== -1) {
+    processSseFrame(bufferState.value.slice(0, boundary), onEvent, setFinalResult);
+    bufferState.value = bufferState.value.slice(boundary + 2);
+    boundary = bufferState.value.indexOf('\n\n');
+  }
+}
+
+export async function readSseStreamResult<TFinal>(
+  response: Response,
+  onEvent: (event: StreamEvent) => void
+): Promise<TFinal> {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error('SSE response body unavailable');
+  }
+
+  const decoder = new TextDecoder();
+  const bufferState = { value: '' };
+  let finalResult: unknown = undefined;
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) {
+        break;
+      }
+      bufferState.value += decoder.decode(value, { stream: true });
+      flushBufferedFrames(bufferState, onEvent, (nextValue) => {
+        finalResult = nextValue;
+      });
+    }
+    if (bufferState.value.trim()) {
+      processSseFrame(bufferState.value, onEvent, (nextValue) => {
+        finalResult = nextValue;
+      });
+    }
+  } finally {
+    reader.releaseLock();
+  }
+
+  if (finalResult === undefined) {
+    throw new Error('stream ended without final event');
+  }
+  return finalResult as TFinal;
+}

package/src/transport/transport-websocket-url.ts

@@ -0,0 +1,24 @@
+export function resolveTransportWebSocketUrl(base: string, path: string): string {
+  const normalizedBase = base.replace(/\/$/, '');
+  try {
+    const resolved = new URL(normalizedBase, window.location.origin);
+    const protocol =
+      resolved.protocol === 'https:'
+        ? 'wss:'
+        : resolved.protocol === 'http:'
+          ? 'ws:'
+          : resolved.protocol;
+    return `${protocol}//${resolved.host}${path}`;
+  } catch {
+    if (normalizedBase.startsWith('wss://') || normalizedBase.startsWith('ws://')) {
+      return `${normalizedBase}${path}`;
+    }
+    if (normalizedBase.startsWith('https://')) {
+      return `${normalizedBase.replace(/^https:/, 'wss:')}${path}`;
+    }
+    if (normalizedBase.startsWith('http://')) {
+      return `${normalizedBase.replace(/^http:/, 'ws:')}${path}`;
+    }
+    return `${normalizedBase}${path}`;
+  }
+}

package/src/transport/transport.types.ts

@@ -0,0 +1,41 @@
+import type { WsEvent } from '@/api/types';
+
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+export type RequestInput = {
+  method: RequestMethod;
+  path: string;
+  body?: unknown;
+};
+
+export type StreamEvent = {
+  name: string;
+  payload?: unknown;
+};
+
+export type StreamInput = {
+  method: Extract<RequestMethod, 'GET' | 'POST'>;
+  path: string;
+  body?: unknown;
+  signal?: AbortSignal;
+  onEvent: (event: StreamEvent) => void;
+};
+
+export type StreamSession<TFinal = unknown> = {
+  finished: Promise<TFinal>;
+  cancel: () => void;
+};
+
+export type AppEvent = WsEvent;
+
+export type AppTransport = {
+  request<T>(input: RequestInput): Promise<T>;
+  openStream<TFinal = unknown>(input: StreamInput): StreamSession<TFinal>;
+  subscribe(handler: (event: AppEvent) => void): () => void;
+};
+
+export type RemoteRuntimeInfo = {
+  mode: 'remote';
+  protocolVersion: 1;
+  wsPath: string;
+};