@nextclaw/ui 0.9.9 → 0.9.11

package/dist/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-C6dwNe7e.js"></script>
+  <script type="module" crossorigin src="/assets/index-ClLy_7T2.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/vendor-CmQZsDAE.js">
   <link rel="stylesheet" crossorigin href="/assets/index-DfEAJJsA.css">
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -27,11 +27,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/ncp-react": "0.3.2",
+    "@nextclaw/ncp-http-agent-client": "0.3.1",
     "@nextclaw/agent-chat": "0.1.1",
     "@nextclaw/ncp": "0.3.1",
-    "@nextclaw/ncp-http-agent-client": "0.3.1",
-    "@nextclaw/agent-chat-ui": "0.2.1"
+    "@nextclaw/agent-chat-ui": "0.2.1",
+    "@nextclaw/ncp-react": "0.3.2"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/App.tsx

@@ -5,7 +5,7 @@ import { appQueryClient } from '@/app-query-client';
 import { LoginPage } from '@/components/auth/login-page';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { useAuthStatus } from '@/hooks/use-auth';
-import { useWebSocket } from '@/hooks/useWebSocket';
+import { useRealtimeQueryBridge } from '@/hooks/use-realtime-query-bridge';
 import { AppPresenterProvider } from '@/presenter/app-presenter-context';
 import { Toaster } from 'sonner';
 import { Routes, Route, Navigate } from 'react-router-dom';
@@ -32,7 +32,7 @@ function LazyRoute({ children }: { children: JSX.Element }) {
 }
 
 function ProtectedApp() {
-  useWebSocket(appQueryClient); // Initialize WebSocket connection
+  useRealtimeQueryBridge(appQueryClient);
 
   return (
     <AppPresenterProvider>

package/src/api/client.ts

@@ -42,7 +42,7 @@ function inferNonJsonHint(endpoint: string, status: number): string | undefined
   return undefined;
 }
 
-async function apiRequest<T>(
+export async function requestApiResponse<T>(
   endpoint: string,
   options: RequestInit = {}
 ): Promise<ApiResponse<T>> {
@@ -104,19 +104,19 @@ async function apiRequest<T>(
 }
 
 export const api = {
-  get: <T>(path: string) => apiRequest<T>(path, { method: 'GET' }),
+  get: <T>(path: string) => requestApiResponse<T>(path, { method: 'GET' }),
   put: <T>(path: string, body: unknown) =>
-    apiRequest<T>(path, {
+    requestApiResponse<T>(path, {
       method: 'PUT',
       body: JSON.stringify(body)
     }),
   post: <T>(path: string, body: unknown) =>
-    apiRequest<T>(path, {
+    requestApiResponse<T>(path, {
       method: 'POST',
       body: JSON.stringify(body)
     }),
   delete: <T>(path: string) =>
-    apiRequest<T>(path, {
+    requestApiResponse<T>(path, {
       method: 'DELETE'
     })
 };

package/src/api/config.ts

@@ -142,10 +142,8 @@ export async function fetchConfigSchema(): Promise<ConfigSchemaResponse> {
 }
 
 // PUT /api/config/model
-export async function updateModel(data: {
-  model: string;
-}): Promise<{ model: string }> {
-  const response = await api.put<{ model: string }>('/api/config/model', data);
+export async function updateModel(data: { model: string; workspace?: string }): Promise<{ model: string; workspace?: string }> {
+  const response = await api.put<{ model: string; workspace?: string }>('/api/config/model', data);
   if (!response.ok) {
     throw new Error(response.error.message);
   }

package/src/components/chat/chat-stream/transport.ts

@@ -1,4 +1,5 @@
-import { fetchChatRuns, sendChatTurnStream, stopChatTurn, streamChatRun } from '@/api/config';
+import { fetchChatRuns, stopChatTurn } from '@/api/config';
+import { appClient } from '@/transport';
 import type { ActiveRunState, SendMessageParams, StreamDeltaEvent, StreamReadyEvent, StreamSessionEvent } from './types';
 
 function buildSendTurnPayload(item: SendMessageParams, requestedSkills: string[]) {
@@ -32,12 +33,37 @@ export async function openSendTurnStream(params: {
   onDelta: (event: StreamDeltaEvent) => void;
   onSessionEvent: (event: StreamSessionEvent) => void;
 }) {
-  return sendChatTurnStream(buildSendTurnPayload(params.item, params.requestedSkills), {
+  let readySessionKey = '';
+  const session = appClient.openStream<{ reply?: string; sessionKey?: string }>({
+    method: 'POST',
+    path: '/api/chat/turn/stream',
+    body: buildSendTurnPayload(params.item, params.requestedSkills),
     signal: params.signal,
-    onReady: params.onReady,
-    onDelta: params.onDelta,
-    onSessionEvent: params.onSessionEvent
+    onEvent: (event) => {
+      if (event.name === 'ready') {
+        const payload = (event.payload ?? {}) as StreamReadyEvent;
+        if (typeof payload.sessionKey === 'string' && payload.sessionKey.trim()) {
+          readySessionKey = payload.sessionKey;
+        }
+        params.onReady(payload);
+        return;
+      }
+      if (event.name === 'delta') {
+        params.onDelta((event.payload ?? { delta: '' }) as StreamDeltaEvent);
+        return;
+      }
+      if (event.name === 'session_event') {
+        params.onSessionEvent({ data: event.payload as StreamSessionEvent['data'] });
+      }
+    }
   });
+  const result = await session.finished;
+  return {
+    sessionKey: typeof result?.sessionKey === 'string' && result.sessionKey.trim()
+      ? result.sessionKey
+      : readySessionKey,
+    reply: typeof result?.reply === 'string' ? result.reply : ''
+  };
 }
 
 export async function openResumeRunStream(params: {
@@ -48,18 +74,43 @@ export async function openResumeRunStream(params: {
   onDelta: (event: StreamDeltaEvent) => void;
   onSessionEvent: (event: StreamSessionEvent) => void;
 }) {
-  return streamChatRun(
-    {
-      runId: params.runId,
-      ...(typeof params.fromEventIndex === 'number' ? { fromEventIndex: params.fromEventIndex } : {})
-    },
-    {
-      signal: params.signal,
-      onReady: params.onReady,
-      onDelta: params.onDelta,
-      onSessionEvent: params.onSessionEvent
+  let readySessionKey = '';
+  const query = new URLSearchParams();
+  if (typeof params.fromEventIndex === 'number') {
+    query.set('fromEventIndex', String(Math.max(0, Math.trunc(params.fromEventIndex))));
+  }
+  const path =
+    `/api/chat/runs/${encodeURIComponent(params.runId)}/stream`
+    + (query.size > 0 ? `?${query.toString()}` : '');
+  const session = appClient.openStream<{ reply?: string; sessionKey?: string }>({
+    method: 'GET',
+    path,
+    signal: params.signal,
+    onEvent: (event) => {
+      if (event.name === 'ready') {
+        const payload = (event.payload ?? {}) as StreamReadyEvent;
+        if (typeof payload.sessionKey === 'string' && payload.sessionKey.trim()) {
+          readySessionKey = payload.sessionKey;
+        }
+        params.onReady(payload);
+        return;
+      }
+      if (event.name === 'delta') {
+        params.onDelta((event.payload ?? { delta: '' }) as StreamDeltaEvent);
+        return;
+      }
+      if (event.name === 'session_event') {
+        params.onSessionEvent({ data: event.payload as StreamSessionEvent['data'] });
+      }
     }
-  );
+  });
+  const result = await session.finished;
+  return {
+    sessionKey: typeof result?.sessionKey === 'string' && result.sessionKey.trim()
+      ? result.sessionKey
+      : readySessionKey,
+    reply: typeof result?.reply === 'string' ? result.reply : ''
+  };
 }
 
 export async function requestStopRun(activeRun: ActiveRunState): Promise<void> {

package/src/components/config/ModelConfig.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ModelConfig } from '@/components/config/ModelConfig';
+
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  configQuery: {
+    data: {
+      agents: {
+        defaults: {
+          model: 'openai/gpt-5.2',
+          workspace: '~/old-workspace'
+        }
+      },
+      providers: {
+        openai: {
+          enabled: true,
+          apiKeySet: true,
+          models: ['gpt-5.2']
+        }
+      }
+    },
+    isLoading: false
+  },
+  metaQuery: {
+    data: {
+      providers: [
+        {
+          name: 'openai',
+          displayName: 'OpenAI',
+          modelPrefix: 'openai',
+          defaultModels: ['openai/gpt-5.2'],
+          keywords: [],
+          envKey: 'OPENAI_API_KEY'
+        }
+      ]
+    }
+  },
+  schemaQuery: {
+    data: {
+      uiHints: {}
+    }
+  }
+}));
+
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.configQuery,
+  useConfigMeta: () => mocks.metaQuery,
+  useConfigSchema: () => mocks.schemaQuery,
+  useUpdateModel: () => ({
+    mutate: mocks.mutate,
+    isPending: false
+  })
+}));
+
+describe('ModelConfig', () => {
+  beforeEach(() => {
+    mocks.mutate.mockReset();
+  });
+
+  it('submits the workspace together with the selected model', async () => {
+    const user = userEvent.setup();
+
+    render(<ModelConfig />);
+
+    const workspaceInput = await screen.findByLabelText('Default Path');
+    await user.clear(workspaceInput);
+    await user.type(workspaceInput, '~/new-workspace');
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mocks.mutate).toHaveBeenCalledWith({
+        model: 'openai/gpt-5.2',
+        workspace: '~/new-workspace'
+      });
+    });
+  });
+});

package/src/components/config/ModelConfig.tsx

@@ -95,7 +95,10 @@ export function ModelConfig() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    updateModel.mutate({ model: composedModel });
+    updateModel.mutate({
+      model: composedModel,
+      workspace
+    });
   };
 
   if (isLoading) {

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

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+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) {
+    return true;
+  }
+  if (normalized.startsWith('plugins') || normalized.startsWith('skills')) {
+    return false;
+  }
+  return true;
+}
+
+function invalidateMarketplaceQueries(queryClient: QueryClient | undefined, configPath: string): void {
+  if (configPath.startsWith('plugins')) {
+    queryClient?.invalidateQueries({ queryKey: ['ncp-session-types'] });
+    queryClient?.invalidateQueries({ queryKey: ['marketplace-installed', 'plugin'] });
+    queryClient?.invalidateQueries({ queryKey: ['marketplace-items'] });
+  }
+  if (configPath.startsWith('mcp')) {
+    queryClient?.invalidateQueries({ queryKey: ['marketplace-mcp-installed'] });
+    queryClient?.invalidateQueries({ queryKey: ['marketplace-mcp-items'] });
+    queryClient?.invalidateQueries({ queryKey: ['marketplace-mcp-doctor'] });
+  }
+}
+
+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'] });
+}
+
+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);
+}
+
+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] });
+  }
+}
+
+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);
+  }
+}
+
+export function useRealtimeQueryBridge(queryClient?: QueryClient) {
+  const { setConnectionStatus } = useUiStore();
+
+  useEffect(() => {
+    setConnectionStatus('connecting');
+
+    return appClient.subscribe((event) => handleRealtimeEvent(queryClient, setConnectionStatus, event));
+  }, [queryClient, setConnectionStatus]);
+}

package/src/transport/app-client.ts

@@ -0,0 +1,107 @@
+import { API_BASE } from '@/api/client';
+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';
+
+async function resolveRuntime(apiBase: string): Promise<AppTransport> {
+  const runtimeUrl = `${apiBase.replace(/\/$/, '')}${REMOTE_RUNTIME_PATH}`;
+  let response: Response;
+  try {
+    response = await fetch(runtimeUrl, {
+      method: 'GET',
+      credentials: 'include',
+      cache: 'no-store'
+    });
+  } catch {
+    return new LocalAppTransport({ apiBase });
+  }
+
+  if (response.status === 404) {
+    return new LocalAppTransport({ apiBase });
+  }
+
+  const payload = await response.json() as { ok?: boolean; data?: RemoteRuntimeInfo };
+  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 LocalAppTransport({ apiBase });
+}
+
+class AppClient {
+  private transportPromise: Promise<AppTransport> | null = null;
+
+  constructor(private readonly apiBase: string = API_BASE) {}
+
+  private async getTransport(): Promise<AppTransport> {
+    if (!this.transportPromise) {
+      this.transportPromise = resolveRuntime(this.apiBase);
+    }
+    return await this.transportPromise;
+  }
+
+  async request<T>(input: RequestInput): Promise<T> {
+    return await (await this.getTransport()).request<T>(input);
+  }
+
+  openStream<TFinal = unknown>(input: StreamInput): StreamSession<TFinal> {
+    let currentSession: StreamSession<TFinal> | null = null;
+    let resolveFinished!: (value: TFinal) => void;
+    let rejectFinished!: (error: Error) => void;
+    const finished = new Promise<TFinal>((resolve, reject) => {
+      resolveFinished = resolve;
+      rejectFinished = reject;
+    });
+
+    void this.getTransport()
+      .then((transport) => {
+        currentSession = transport.openStream<TFinal>(input);
+        void currentSession.finished.then(resolveFinished).catch((error) => {
+          rejectFinished(error instanceof Error ? error : new Error(String(error)));
+        });
+      })
+      .catch((error) => {
+        rejectFinished(error instanceof Error ? error : new Error(String(error)));
+      });
+
+    return {
+      finished,
+      cancel: () => currentSession?.cancel()
+    };
+  }
+
+  subscribe(handler: (event: Parameters<Parameters<AppTransport['subscribe']>[0]>[0]) => void): () => void {
+    let unsubscribe = () => {};
+    let active = true;
+    void this.getTransport().then((transport) => {
+      if (!active) {
+        return;
+      }
+      unsubscribe = transport.subscribe(handler);
+    }).catch((error) => {
+      handler({
+        type: 'connection.error',
+        payload: {
+          message: error instanceof Error ? error.message : String(error)
+        }
+      });
+    });
+
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }
+}
+
+export const appClient = new AppClient();

package/src/transport/index.ts

@@ -0,0 +1,9 @@
+export { appClient } from './app-client';
+export type {
+  AppEvent,
+  AppTransport,
+  RequestInput,
+  StreamEvent,
+  StreamInput,
+  StreamSession
+} from './transport.types';