npm - @nextclaw/ui - Versions diffs - 0.11.1 → 0.11.2 - Mend

@nextclaw/ui 0.11.1 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <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-D41ntvb7.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-D_JxmsLV.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-CrilScMo.css">
+  <script type="module" crossorigin src="/assets/index-COJomMe9.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-waGu-koL.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-BtAuUyww.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.1.3",
     "@nextclaw/ncp-http-agent-client": "0.3.4",
-    "@nextclaw/agent-chat-ui": "0.2.5",
+    "@nextclaw/ncp-react": "0.4.1",
+    "@nextclaw/agent-chat": "0.1.3",
     "@nextclaw/ncp": "0.4.0",
-    "@nextclaw/ncp-react": "0.4.1"
+    "@nextclaw/agent-chat-ui": "0.2.6"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/components/chat/adapters/chat-message.adapter.test.ts CHANGED Viewed

@@ -17,8 +17,15 @@ const defaultTexts = {
   reasoningLabel: "Reasoning",
   toolCallLabel: "Tool Call",
   toolResultLabel: "Tool Result",
+  toolInputLabel: "Input Summary",
+  toolCallIdLabel: "Call ID",
   toolNoOutputLabel: "No output",
   toolOutputLabel: "View Output",
+  toolStatusPreparingLabel: "Preparing",
+  toolStatusRunningLabel: "Running",
+  toolStatusCompletedLabel: "Completed",
+  toolStatusFailedLabel: "Failed",
+  toolStatusCancelledLabel: "Cancelled",
   imageAttachmentLabel: "Image attachment",
   fileAttachmentLabel: "File attachment",
   unknownPartLabel: "Unknown Part",
@@ -66,9 +73,7 @@ it("maps markdown, reasoning, and tool parts into UI view models", () => {
   expect(adapted).toHaveLength(1);
   expect(adapted[0]?.roleLabel).toBe("Assistant");
-  expect(adapted[0]?.timestampLabel).toBe(
-    "formatted:2026-03-17T10:00:00.000Z",
-  );
+  expect(adapted[0]?.timestampLabel).toBe("formatted:2026-03-17T10:00:00.000Z");
   expect(adapted[0]?.parts.map((part) => part.type)).toEqual([
     "markdown",
     "reasoning",
@@ -82,12 +87,67 @@ it("maps markdown, reasoning, and tool parts into UI view models", () => {
   expect(adapted[0]?.parts[2]).toMatchObject({
     type: "tool-card",
     card: {
+      callId: "call-1",
+      callIdLabel: "Call ID",
+      inputLabel: "Input Summary",
+      statusLabel: "Completed",
+      statusTone: "success",
       titleLabel: "Tool Result",
       outputLabel: "View Output",
     },
   });
 });
+it("maps tool lifecycle statuses into visible card state feedback", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-tool-statuses",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "call-prep",
+            toolName: "web_search",
+            args: '{"q":"latest"}',
+          },
+        },
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.ERROR,
+            toolCallId: "call-error",
+            toolName: "exec_command",
+            args: '{"cmd":"exit 1"}',
+            error: "Command failed",
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      statusTone: "running",
+      statusLabel: "Preparing",
+      titleLabel: "Tool Call",
+      callId: "call-prep",
+    },
+  });
+  expect(adapted[0]?.parts[1]).toMatchObject({
+    type: "tool-card",
+    card: {
+      statusTone: "error",
+      statusLabel: "Failed",
+      titleLabel: "Tool Result",
+      output: "Command failed",
+      callId: "call-error",
+    },
+  });
+});
 it("maps non-standard roles back to the generic message role", () => {
   const adapted = adapt([
     {
@@ -149,6 +209,7 @@ it("maps file parts into previewable attachment view models", () => {
           type: "file",
           mimeType: "image/png",
           data: "ZmFrZS1pbWFnZQ==",
+          sizeBytes: 4096,
         },
       ],
     },
@@ -160,6 +221,7 @@ it("maps file parts into previewable attachment view models", () => {
       label: "Image attachment",
       mimeType: "image/png",
       dataUrl: "data:image/png;base64,ZmFrZS1pbWFnZQ==",
+      sizeBytes: 4096,
       isImage: true,
     },
   });
@@ -176,6 +238,7 @@ it("keeps named non-image files as downloadable attachments", () => {
           name: "spec.pdf",
           mimeType: "application/pdf",
           data: "cGRm",
+          sizeBytes: 2048,
         },
       ],
     },
@@ -187,6 +250,7 @@ it("keeps named non-image files as downloadable attachments", () => {
       label: "spec.pdf",
       mimeType: "application/pdf",
       dataUrl: "data:application/pdf;base64,cGRm",
+      sizeBytes: 2048,
       isImage: false,
     },
   });
@@ -212,6 +276,7 @@ it("renders asset tool results as previewable files", () => {
                 name: "output.png",
                 mimeType: "image/png",
                 url: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F27%2Fasset_1",
+                sizeBytes: 5120,
               },
             },
           },
@@ -225,7 +290,9 @@ it("renders asset tool results as previewable files", () => {
     file: {
       label: "output.png",
       mimeType: "image/png",
-      dataUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F27%2Fasset_1",
+      dataUrl:
+        "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F27%2Fasset_1",
+      sizeBytes: 5120,
       isImage: true,
     },
   });

package/src/components/chat/adapters/chat-message.adapter.ts CHANGED Viewed

@@ -1,32 +1,33 @@
 import {
   stringifyUnknown,
   summarizeToolArgs,
-  type ToolCard
-} from '@/lib/chat-message';
+  type ToolCard,
+} from "@/lib/chat-message";
 import type {
   ChatMessageRole,
   ChatMessageViewModel,
-  ChatToolPartViewModel
-} from '@nextclaw/agent-chat-ui';
+  ChatToolPartViewModel,
+} from "@nextclaw/agent-chat-ui";
 export type ChatMessagePartSource =
   | {
-      type: 'text';
+      type: "text";
       text: string;
     }
   | {
-      type: 'file';
+      type: "file";
       mimeType: string;
       data: string;
       url?: string;
       name?: string;
+      sizeBytes?: number;
     }
   | {
-      type: 'reasoning';
+      type: "reasoning";
       reasoning: string;
     }
   | {
-      type: 'tool-invocation';
+      type: "tool-invocation";
       toolInvocation: {
         status?: string;
         toolName: string;
@@ -34,6 +35,7 @@ export type ChatMessagePartSource =
         parsedArgs?: unknown;
         result?: unknown;
         error?: string;
+        cancelled?: boolean;
         toolCallId?: string;
       };
     }
@@ -63,8 +65,15 @@ export type ChatMessageAdapterTexts = {
   reasoningLabel: string;
   toolCallLabel: string;
   toolResultLabel: string;
+  toolInputLabel: string;
+  toolCallIdLabel: string;
   toolNoOutputLabel: string;
   toolOutputLabel: string;
+  toolStatusPreparingLabel: string;
+  toolStatusRunningLabel: string;
+  toolStatusCompletedLabel: string;
+  toolStatusFailedLabel: string;
+  toolStatusCancelledLabel: string;
   imageAttachmentLabel: string;
   fileAttachmentLabel: string;
   unknownPartLabel: string;
@@ -73,91 +82,114 @@ export type ChatMessageAdapterTexts = {
 const INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
+  return typeof value === "object" && value !== null;
 }
 function readOptionalString(value: unknown): string | null {
-  if (typeof value !== 'string') {
+  if (typeof value !== "string") {
     return null;
   }
   const trimmed = value.trim();
   return trimmed.length > 0 ? trimmed : null;
 }
+function readOptionalNumber(value: unknown): number | null {
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
 function extractAssetFileView(
   value: unknown,
-  texts: ChatMessageAdapterTexts
-):
-  | {
-      type: 'file';
-      file: {
-        label: string;
-        mimeType: string;
-        dataUrl: string;
-        isImage: boolean;
-      };
-    }
-  | null {
+  texts: ChatMessageAdapterTexts,
+): {
+  type: "file";
+  file: {
+    label: string;
+    mimeType: string;
+    dataUrl: string;
+    sizeBytes?: number;
+    isImage: boolean;
+  };
+} | null {
   if (!isRecord(value)) {
     return null;
   }
   const assetCandidate = isRecord(value.asset)
     ? value.asset
-    : Array.isArray(value.assets) && value.assets.length > 0 && isRecord(value.assets[0])
+    : Array.isArray(value.assets) &&
+        value.assets.length > 0 &&
+        isRecord(value.assets[0])
       ? value.assets[0]
       : null;
   if (!assetCandidate) {
     return null;
   }
   const url = readOptionalString(assetCandidate.url);
-  const mimeType = readOptionalString(assetCandidate.mimeType) ?? 'application/octet-stream';
+  const mimeType =
+    readOptionalString(assetCandidate.mimeType) ?? "application/octet-stream";
+  const sizeBytes = readOptionalNumber(assetCandidate.sizeBytes);
   if (!url) {
     return null;
   }
   const label =
     readOptionalString(assetCandidate.name) ??
-    (mimeType.startsWith('image/') ? texts.imageAttachmentLabel : texts.fileAttachmentLabel);
+    (mimeType.startsWith("image/")
+      ? texts.imageAttachmentLabel
+      : texts.fileAttachmentLabel);
   return {
-    type: 'file',
+    type: "file",
     file: {
       label,
       mimeType,
       dataUrl: url,
-      isImage: mimeType.startsWith('image/')
-    }
+      ...(sizeBytes != null ? { sizeBytes } : {}),
+      isImage: mimeType.startsWith("image/"),
+    },
   };
 }
-function isTextPart(part: ChatMessagePartSource): part is Extract<ChatMessagePartSource, { type: 'text' }> {
-  return part.type === 'text' && typeof part.text === 'string';
+function isTextPart(
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "text" }> {
+  return part.type === "text" && typeof part.text === "string";
 }
 function isReasoningPart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'reasoning' }> {
-  return part.type === 'reasoning' && typeof part.reasoning === 'string';
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "reasoning" }> {
+  return part.type === "reasoning" && typeof part.reasoning === "string";
 }
 function isFilePart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'file' }> {
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "file" }> {
   return (
-    part.type === 'file' &&
-    typeof part.mimeType === 'string' &&
-    typeof part.data === 'string'
+    part.type === "file" &&
+    typeof part.mimeType === "string" &&
+    typeof part.data === "string"
   );
 }
 function isToolInvocationPart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'tool-invocation' }> {
-  if (part.type !== 'tool-invocation') {
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "tool-invocation" }> {
+  if (part.type !== "tool-invocation") {
     return false;
   }
   if (!isRecord(part.toolInvocation)) {
     return false;
   }
-  return typeof part.toolInvocation.toolName === 'string';
+  return typeof part.toolInvocation.toolName === "string";
 }
 function resolveMessageTimestamp(message: ChatMessageSource): string {
@@ -170,33 +202,38 @@ function resolveMessageTimestamp(message: ChatMessageSource): string {
 function resolveRoleLabel(
   role: string,
-  texts: ChatMessageAdapterTexts['roleLabels']
+  texts: ChatMessageAdapterTexts["roleLabels"],
 ): string {
-  if (role === 'user') {
+  if (role === "user") {
     return texts.user;
   }
-  if (role === 'assistant') {
+  if (role === "assistant") {
     return texts.assistant;
   }
-  if (role === 'tool') {
+  if (role === "tool") {
     return texts.tool;
   }
-  if (role === 'system') {
+  if (role === "system") {
     return texts.system;
   }
   return texts.fallback;
 }
 function resolveUiRole(role: string): ChatMessageRole {
-  if (role === 'user' || role === 'assistant' || role === 'tool' || role === 'system') {
+  if (
+    role === "user" ||
+    role === "assistant" ||
+    role === "tool" ||
+    role === "system"
+  ) {
     return role;
   }
-  return 'message';
+  return "message";
 }
 function buildToolCard(
-  toolCard: ToolCard,
-  texts: ChatMessageAdapterTexts
+  toolCard: ToolCardViewSource,
+  texts: ChatMessageAdapterTexts,
 ): ChatToolPartViewModel {
   return {
     kind: toolCard.kind,
@@ -204,9 +241,75 @@ function buildToolCard(
     summary: toolCard.detail,
     output: toolCard.text,
     hasResult: Boolean(toolCard.hasResult),
-    titleLabel: toolCard.kind === 'call' ? texts.toolCallLabel : texts.toolResultLabel,
+    statusTone: toolCard.statusTone,
+    statusLabel: toolCard.statusLabel,
+    titleLabel:
+      toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
+    inputLabel: texts.toolInputLabel,
     outputLabel: texts.toolOutputLabel,
-    emptyLabel: texts.toolNoOutputLabel
+    emptyLabel: texts.toolNoOutputLabel,
+    callIdLabel: texts.toolCallIdLabel,
+    callId: toolCard.callId,
+  };
+}
+type ToolCardViewSource = ToolCard & {
+  statusTone: ChatToolPartViewModel["statusTone"];
+  statusLabel: string;
+};
+function resolveToolCardStatus(params: {
+  status?: string;
+  error?: string;
+  cancelled?: boolean;
+  result?: unknown;
+  texts: ChatMessageAdapterTexts;
+}): Pick<
+  ChatToolPartViewModel,
+  "kind" | "hasResult" | "statusTone" | "statusLabel"
+> {
+  const rawStatus =
+    typeof params.status === "string" ? params.status.trim().toLowerCase() : "";
+  const hasError =
+    typeof params.error === "string" && params.error.trim().length > 0;
+  const isCancelled = params.cancelled === true || rawStatus === "cancelled";
+  if (isCancelled) {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "cancelled",
+      statusLabel: params.texts.toolStatusCancelledLabel,
+    };
+  }
+  if (hasError || rawStatus === "error") {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "error",
+      statusLabel: params.texts.toolStatusFailedLabel,
+    };
+  }
+  if (rawStatus === "result" || params.result != null) {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "success",
+      statusLabel: params.texts.toolStatusCompletedLabel,
+    };
+  }
+  if (rawStatus === "partial-call") {
+    return {
+      kind: "call",
+      hasResult: false,
+      statusTone: "running",
+      statusLabel: params.texts.toolStatusPreparingLabel,
+    };
+  }
+  return {
+    kind: "call",
+    hasResult: false,
+    statusTone: "running",
+    statusLabel: params.texts.toolStatusRunningLabel,
   };
 }
@@ -238,8 +341,8 @@ export function adaptChatMessages(params: {
             return null;
           }
           return {
-            type: 'markdown' as const,
-            text
+            type: "markdown" as const,
+            text,
           };
         }
         if (isReasoningPart(part)) {
@@ -248,66 +351,80 @@ export function adaptChatMessages(params: {
             return null;
           }
           return {
-            type: 'reasoning' as const,
+            type: "reasoning" as const,
             text,
-            label: params.texts.reasoningLabel
+            label: params.texts.reasoningLabel,
           };
         }
         if (isFilePart(part)) {
-          const isImage = part.mimeType.startsWith('image/');
+          const isImage = part.mimeType.startsWith("image/");
+          const sizeBytes = readOptionalNumber(part.sizeBytes);
           return {
-            type: 'file' as const,
+            type: "file" as const,
             file: {
               label:
-                typeof part.name === 'string' && part.name.trim()
+                typeof part.name === "string" && part.name.trim()
                   ? part.name.trim()
                   : isImage
                     ? params.texts.imageAttachmentLabel
                     : params.texts.fileAttachmentLabel,
               mimeType: part.mimeType,
               dataUrl:
-                typeof part.url === 'string' && part.url.trim().length > 0
+                typeof part.url === "string" && part.url.trim().length > 0
                   ? part.url.trim()
                   : `data:${part.mimeType};base64,${part.data}`,
-              isImage
-            }
+              ...(sizeBytes != null ? { sizeBytes } : {}),
+              isImage,
+            },
           };
         }
         if (isToolInvocationPart(part)) {
           const invocation = part.toolInvocation;
-          const assetFileView = extractAssetFileView(invocation.result, params.texts);
+          const assetFileView = extractAssetFileView(
+            invocation.result,
+            params.texts,
+          );
           if (assetFileView) {
             return assetFileView;
           }
-          const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+          const statusView = resolveToolCardStatus({
+            status: invocation.status,
+            error: invocation.error,
+            cancelled: invocation.cancelled,
+            result: invocation.result,
+            texts: params.texts,
+          });
+          const detail = summarizeToolArgs(
+            invocation.parsedArgs ?? invocation.args,
+          );
           const rawResult =
-            typeof invocation.error === 'string' && invocation.error.trim()
+            typeof invocation.error === "string" && invocation.error.trim()
               ? invocation.error.trim()
               : invocation.result != null
                 ? stringifyUnknown(invocation.result).trim()
-                : '';
-          const hasResult =
-            invocation.status === 'result' || invocation.status === 'error' || invocation.status === 'cancelled';
-          const card: ToolCard = {
-            kind: hasResult ? 'result' : 'call',
+                : "";
+          const card: ToolCardViewSource = {
+            kind: statusView.kind,
             name: invocation.toolName,
             detail,
             text: rawResult || undefined,
             callId: invocation.toolCallId || undefined,
-            hasResult
+            hasResult: statusView.hasResult,
+            statusTone: statusView.statusTone,
+            statusLabel: statusView.statusLabel,
           };
           return {
-            type: 'tool-card' as const,
-            card: buildToolCard(card, params.texts)
+            type: "tool-card" as const,
+            card: buildToolCard(card, params.texts),
           };
         }
         return {
-          type: 'unknown' as const,
+          type: "unknown" as const,
           label: params.texts.unknownPartLabel,
-          rawType: typeof part.type === 'string' ? part.type : 'unknown',
-          text: stringifyUnknown(part)
+          rawType: typeof part.type === "string" ? part.type : "unknown",
+          text: stringifyUnknown(part),
         };
       })
-      .filter((part) => part !== null)
+      .filter((part) => part !== null),
   }));
 }

package/src/components/chat/containers/chat-message-list.container.tsx CHANGED Viewed

@@ -46,8 +46,15 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
           reasoningLabel: t("chatReasoning"),
           toolCallLabel: t("chatToolCall"),
           toolResultLabel: t("chatToolResult"),
+          toolInputLabel: t("chatToolInput"),
+          toolCallIdLabel: t("chatToolCallId"),
           toolNoOutputLabel: t("chatToolNoOutput"),
           toolOutputLabel: t("chatToolOutput"),
+          toolStatusPreparingLabel: t("chatToolStatusPreparing"),
+          toolStatusRunningLabel: t("chatToolStatusRunning"),
+          toolStatusCompletedLabel: t("chatToolStatusCompleted"),
+          toolStatusFailedLabel: t("chatToolStatusFailed"),
+          toolStatusCancelledLabel: t("chatToolStatusCancelled"),
           imageAttachmentLabel: t("chatImageAttachment"),
           fileAttachmentLabel: t("chatFileAttachment"),
           unknownPartLabel: t("chatUnknownPart"),

package/src/lib/i18n.chat.ts CHANGED Viewed

@@ -70,10 +70,17 @@ 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 Summary' },
+  chatToolCallId: { zh: '调用 ID', en: 'Call ID' },
   chatToolWorkflow: { zh: '工具工作流', en: 'Tool Workflow' },
   chatToolWorkflowDetails: { zh: '展开查看参数和结果', en: 'Expand to view params and results' },
   chatToolOutput: { zh: '查看输出', en: 'View Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
+  chatToolStatusPreparing: { zh: '准备中', en: 'Preparing' },
+  chatToolStatusRunning: { zh: '执行中', en: 'Running' },
+  chatToolStatusCompleted: { zh: '已完成', en: 'Completed' },
+  chatToolStatusFailed: { zh: '失败', en: 'Failed' },
+  chatToolStatusCancelled: { zh: '已取消', en: 'Cancelled' },
   chatReasoning: { zh: '推理过程', en: 'Reasoning' },
   chatImageAttachment: { zh: '图片附件', en: 'Image attachment' },
   chatFileAttachment: { zh: '文件附件', en: 'File attachment' },