@nextclaw/ui 0.11.19 → 0.11.21

package/src/components/chat/ncp/ncp-session-adapter.test.ts

@@ -3,6 +3,7 @@ import {
   adaptNcpSessionSummary,
   readNcpSessionPreferredThinking
 } from '@/components/chat/ncp/ncp-session-adapter';
+import { adaptChatMessage } from '@/components/chat/adapters/chat-message.adapter';
 import type { NcpSessionSummaryView } from '@/api/types';
 
 function createSummary(partial: Partial<NcpSessionSummaryView> = {}): NcpSessionSummaryView {
@@ -79,6 +80,178 @@ describe('adaptNcpMessageToUiMessage', () => {
       }
     ]);
   });
+
+  it('keeps streamed native file tool args renderable as a preview before the tool result arrives', () => {
+    const uiMessage = adaptNcpMessageToUiMessage({
+      id: 'ncp-message-tool-1',
+      sessionId: 'ncp-session-1',
+      role: 'assistant',
+      status: 'streaming',
+      timestamp: '2026-04-01T00:00:00.000Z',
+      parts: [
+        {
+          type: 'tool-invocation',
+          toolCallId: 'tool-edit-1',
+          toolName: 'edit_file',
+          state: 'partial-call',
+          args: JSON.stringify({
+            path: 'src/app.ts',
+            oldText: 'const count = 1;',
+            newText: 'const count = 2;',
+          }),
+        },
+      ],
+    });
+
+    const adapted = adaptChatMessage(
+      {
+        id: uiMessage.id,
+        role: uiMessage.role,
+        meta: {
+          timestamp: uiMessage.meta?.timestamp,
+          status: uiMessage.meta?.status,
+        },
+        parts: uiMessage.parts as never,
+      },
+      {
+        formatTimestamp: (value) => value ?? '',
+        texts: {
+          roleLabels: {
+            user: 'User',
+            assistant: 'Assistant',
+            tool: 'Tool',
+            system: 'System',
+            fallback: 'Message',
+          },
+          reasoningLabel: 'Reasoning',
+          toolCallLabel: 'Tool Call',
+          toolResultLabel: 'Tool Result',
+          toolInputLabel: 'Input',
+          toolNoOutputLabel: 'No output',
+          toolOutputLabel: 'Output',
+          toolStatusPreparingLabel: 'Preparing',
+          toolStatusRunningLabel: 'Running',
+          toolStatusCompletedLabel: 'Completed',
+          toolStatusFailedLabel: 'Failed',
+          toolStatusCancelledLabel: 'Cancelled',
+          imageAttachmentLabel: 'Image',
+          fileAttachmentLabel: 'File',
+          unknownPartLabel: 'Unknown',
+        },
+      },
+    );
+
+    expect(adapted.parts[0]).toMatchObject({
+      type: 'tool-card',
+      card: {
+        toolName: 'edit_file',
+        summary: 'src/app.ts',
+        statusTone: 'running',
+        fileOperation: {
+          blocks: [
+            {
+              path: 'src/app.ts',
+              lines: [
+                {
+                  kind: 'remove',
+                  text: 'const count = 1;',
+                },
+                {
+                  kind: 'add',
+                  text: 'const count = 2;',
+                },
+              ],
+            },
+          ],
+        },
+      },
+    });
+  });
+
+  it('downgrades large streamed write_file payloads into a lightweight preview block', () => {
+    const largeContent = Array.from({ length: 300 }, (_, index) => `line ${index + 1}`).join('\n');
+    const uiMessage = adaptNcpMessageToUiMessage({
+      id: 'ncp-message-tool-write-1',
+      sessionId: 'ncp-session-1',
+      role: 'assistant',
+      status: 'streaming',
+      timestamp: '2026-04-01T00:00:00.000Z',
+      parts: [
+        {
+          type: 'tool-invocation',
+          toolCallId: 'tool-write-1',
+          toolName: 'write_file',
+          state: 'partial-call',
+          args: JSON.stringify({
+            path: 'src/game.html',
+            content: largeContent,
+          }),
+        },
+      ],
+    });
+
+    const adapted = adaptChatMessage(
+      {
+        id: uiMessage.id,
+        role: uiMessage.role,
+        meta: {
+          timestamp: uiMessage.meta?.timestamp,
+          status: uiMessage.meta?.status,
+        },
+        parts: uiMessage.parts as never,
+      },
+      {
+        formatTimestamp: (value) => value ?? '',
+        texts: {
+          roleLabels: {
+            user: 'User',
+            assistant: 'Assistant',
+            tool: 'Tool',
+            system: 'System',
+            fallback: 'Message',
+          },
+          reasoningLabel: 'Reasoning',
+          toolCallLabel: 'Tool Call',
+          toolResultLabel: 'Tool Result',
+          toolInputLabel: 'Input',
+          toolNoOutputLabel: 'No output',
+          toolOutputLabel: 'Output',
+          toolStatusPreparingLabel: 'Preparing',
+          toolStatusRunningLabel: 'Running',
+          toolStatusCompletedLabel: 'Completed',
+          toolStatusFailedLabel: 'Failed',
+          toolStatusCancelledLabel: 'Cancelled',
+          imageAttachmentLabel: 'Image',
+          fileAttachmentLabel: 'File',
+          unknownPartLabel: 'Unknown',
+        },
+      },
+    );
+
+    expect(adapted.parts[0]).toMatchObject({
+      type: 'tool-card',
+      card: {
+        toolName: 'write_file',
+        summary: 'src/game.html',
+        statusTone: 'running',
+        fileOperation: {
+          blocks: expect.arrayContaining([
+            expect.objectContaining({
+              path: 'src/game.html',
+              display: 'preview',
+              lines: expect.arrayContaining([
+                expect.objectContaining({
+                  kind: 'add',
+                  text: 'line 1',
+                  newLineNumber: 1,
+                }),
+              ]),
+            }),
+          ]),
+        },
+      },
+    });
+  });
 });
 
 describe('readNcpSessionPreferredThinking', () => {

package/src/components/chat/useNcpAgentRuntime.test.tsx

@@ -0,0 +1,90 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NcpEventType, type NcpEndpointEvent } from "@nextclaw/ncp";
+import { useNcpAgentRuntime } from "../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.ts";
+
+function createEvent(type: NcpEventType, delta: string): NcpEndpointEvent {
+  return {
+    type,
+    payload: {
+      sessionId: "session-1",
+      messageId: "assistant-1",
+      toolCallId: "tool-1",
+      delta,
+    },
+  } as NcpEndpointEvent;
+}
+
+describe("useNcpAgentRuntime", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("batches streamed endpoint events before dispatching them to the manager", async () => {
+    let subscriber: ((event: NcpEndpointEvent) => void) | null = null;
+    const snapshot = {
+      messages: [],
+      streamingMessage: null,
+      error: null,
+      activeRun: null,
+    };
+    const client = {
+      subscribe: vi.fn((callback: (event: NcpEndpointEvent) => void) => {
+        subscriber = callback;
+        return () => {
+          subscriber = null;
+        };
+      }),
+      stop: vi.fn().mockResolvedValue(undefined),
+      send: vi.fn().mockResolvedValue(undefined),
+      abort: vi.fn().mockResolvedValue(undefined),
+      stream: vi.fn().mockResolvedValue(undefined),
+    };
+    const manager = {
+      getSnapshot: vi.fn(() => snapshot),
+      subscribe: vi.fn(() => () => {}),
+      dispatch: vi.fn().mockResolvedValue(undefined),
+      dispatchBatch: vi.fn().mockResolvedValue(undefined),
+    };
+
+    renderHook(() =>
+      useNcpAgentRuntime({
+        sessionId: "session-1",
+        client: client as never,
+        manager: manager as never,
+      }),
+    );
+
+    expect(subscriber).not.toBeNull();
+
+    act(() => {
+      subscriber?.(createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'));
+      subscriber?.(
+        createEvent(
+          NcpEventType.MessageToolCallArgsDelta,
+          '"content":"console.log(1);"}',
+        ),
+      );
+    });
+
+    expect(manager.dispatchBatch).not.toHaveBeenCalled();
+
+    await act(async () => {
+      vi.advanceTimersByTime(16);
+      await Promise.resolve();
+    });
+
+    expect(manager.dispatchBatch).toHaveBeenCalledTimes(1);
+    expect(manager.dispatchBatch).toHaveBeenCalledWith([
+      createEvent(NcpEventType.MessageToolCallArgsDelta, '{"path":"src/app.ts",'),
+      createEvent(
+        NcpEventType.MessageToolCallArgsDelta,
+        '"content":"console.log(1);"}',
+      ),
+    ]);
+  });
+});

package/src/lib/i18n.chat.ts

@@ -74,9 +74,10 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
   chatRoleMessage: { zh: '消息', en: 'Message' },
   chatToolCall: { zh: '工具调用', en: 'Tool Call' },
   chatToolResult: { zh: '工具结果', en: 'Tool Result' },
+  chatToolInput: { zh: '输入', en: 'Input' },
   chatToolWorkflow: { zh: '工具工作流', en: 'Tool Workflow' },
   chatToolWorkflowDetails: { zh: '展开查看参数和结果', en: 'Expand to view params and results' },
-  chatToolOutput: { zh: '查看输出', en: 'View Output' },
+  chatToolOutput: { zh: '输出', en: 'Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
   chatToolStatusPreparing: { zh: '准备中', en: 'Preparing' },
   chatToolStatusRunning: { zh: '执行中', en: 'Running' },

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

@@ -70,6 +70,24 @@ describe('remote-access-feedback.service', () => {
 
     expect(feedback.hero.title).toBe('远程访问暂时没有连上');
     expect(feedback.primaryAction?.kind).toBe('repair');
+    expect(feedback.issueHint?.body).toBe(
+      '远程访问暂时不可用。你可以先重新连接；如果问题持续，再重新登录或稍后再试。 (Remote relay closed unexpectedly.)'
+    );
+  });
+
+  it('keeps the generic hint unchanged when there is no runtime error detail', () => {
+    const status = createRemoteAccessView({
+      runtime: {
+        enabled: true,
+        mode: 'service',
+        state: 'disconnected',
+        lastError: null,
+        updatedAt: '2026-03-23T00:00:00.000Z'
+      }
+    });
+
+    const feedback = buildRemoteAccessFeedbackView(status);
+
     expect(feedback.issueHint?.body).toBe('远程访问暂时不可用。你可以先重新连接；如果问题持续，再重新登录或稍后再试。');
   });
 });

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

@@ -42,6 +42,15 @@ function readRuntimeError(status: RemoteAccessView | undefined): string {
   return status?.runtime?.lastError?.trim() || '';
 }
 
+function buildRuntimeIssueHintBody(status: RemoteAccessView | undefined): string {
+  const genericHint = t('remoteStatusIssueDetailGeneric');
+  const error = readRuntimeError(status);
+  if (!error) {
+    return genericHint;
+  }
+  return `${genericHint} (${error})`;
+}
+
 export function requiresRemoteReauthorization(status: RemoteAccessView | undefined): boolean {
   if (!status?.settings.enabled) {
     return false;
@@ -187,7 +196,7 @@ export function buildRemoteAccessFeedbackView(status: RemoteAccessView | undefin
     },
     issueHint: {
       title: t('remoteStatusRecoveryTitle'),
-      body: t('remoteStatusIssueDetailGeneric')
+      body: buildRuntimeIssueHintBody(status)
     },
     shouldShowIssueHint: Boolean(status.settings.enabled && status.account.loggedIn),
     requiresReauthorization: false