@nextclaw/ui 0.11.20 → 0.11.22

package/src/components/chat/adapters/chat-input-bar.adapter.ts

@@ -12,6 +12,7 @@ export type ChatThinkingLevel = 'off' | 'minimal' | 'low' | 'medium' | 'high' |
 export type ChatSkillRecord = {
   key: string;
   label: string;
+  scopeLabel?: string;
   description?: string;
   descriptionZh?: string;
   badgeLabel?: string;
@@ -43,6 +44,7 @@ const SLASH_ITEM_MATCH_SCORE = {
 export type ChatInputBarAdapterTexts = {
   slashSkillSubtitle: string;
   slashSkillSpecLabel: string;
+  slashSkillScopeLabel: string;
   noSkillDescription: string;
   recentSkillsLabel: string;
   allSkillsLabel: string;
@@ -171,7 +173,7 @@ function prioritizeSkillRecords(skillRecords: ChatSkillRecord[], recentSkillValu
 export function buildChatSlashItems(
   skillRecords: ChatSkillRecord[],
   normalizedSlashQuery: string,
-  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'noSkillDescription'>,
+  texts: Pick<ChatInputBarAdapterTexts, 'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'slashSkillScopeLabel' | 'noSkillDescription'>,
   recentSkillValues: string[] = []
 ): ChatSlashItem[] {
   const skillSortCollator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
@@ -211,7 +213,10 @@ export function buildChatSlashItems(
       title: record.label || record.key,
       subtitle: texts.slashSkillSubtitle,
       description: (record.descriptionZh ?? record.description ?? '').trim() || texts.noSkillDescription,
-      detailLines: [`${texts.slashSkillSpecLabel}: ${record.key}`],
+      detailLines: [
+        `${texts.slashSkillSpecLabel}: ${record.key}`,
+        ...(record.scopeLabel ? [`${texts.slashSkillScopeLabel}: ${record.scopeLabel}`] : [])
+      ],
       value: record.key
     }));
 }

package/src/components/chat/adapters/chat-message-part.adapter.ts

@@ -3,13 +3,12 @@ import {
   summarizeToolArgs,
   type ToolCard,
 } from "@/lib/chat-message";
-import {
-  type ChatInlineTokenSource,
-} from "@/components/chat/chat-inline-token.utils";
+import { type ChatInlineTokenSource } from "@/components/chat/chat-inline-token.utils";
 import {
   buildRenderableText,
   buildTextPart,
 } from "@/components/chat/adapters/chat-message-inline-content.adapter";
+import { buildFileOperationCardData } from "@/components/chat/adapters/file-operation/card";
 import { buildSubagentToolCard } from "@/components/chat/adapters/chat-message.subagent-tool-card";
 import type {
   ChatMessagePartViewModel,
@@ -27,6 +26,7 @@ export type ChatMessageAdapterTexts = {
   reasoningLabel: string;
   toolCallLabel: string;
   toolResultLabel: string;
+  toolInputLabel: string;
   toolNoOutputLabel: string;
   toolOutputLabel: string;
   toolStatusPreparingLabel: string;
@@ -77,6 +77,8 @@ export type ChatMessagePartSource =
 type ToolCardViewSource = ToolCard & {
   statusTone: ChatToolPartViewModel["statusTone"];
   statusLabel: string;
+  fileOperation?: ChatToolPartViewModel["fileOperation"];
+  outputData?: unknown;
 };
 
 type ChatMessagePartAdapterParams = {
@@ -112,6 +114,23 @@ function readOptionalNumber(value: unknown): number | null {
   return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
 }
 
+function isTerminalResultRecord(
+  value: unknown,
+): value is Record<string, unknown> {
+  if (!isRecord(value)) {
+    return false;
+  }
+  return (
+    "command" in value ||
+    "workingDir" in value ||
+    "exitCode" in value ||
+    "stdout" in value ||
+    "stderr" in value ||
+    "aggregated_output" in value ||
+    "combinedOutput" in value
+  );
+}
+
 function extractAssetFileView(
   value: unknown,
   texts: ChatMessageAdapterTexts,
@@ -161,7 +180,13 @@ function buildToolCard(
     kind: toolCard.kind,
     toolName: toolCard.name,
     summary: toolCard.detail,
+    inputLabel: texts.toolInputLabel,
+    input:
+      "input" in toolCard && typeof toolCard.input === "string"
+        ? toolCard.input
+        : undefined,
     output: toolCard.text,
+    outputData: toolCard.outputData,
     hasResult: Boolean(toolCard.hasResult),
     statusTone: toolCard.statusTone,
     statusLabel: toolCard.statusLabel,
@@ -169,6 +194,9 @@ function buildToolCard(
       toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
     outputLabel: texts.toolOutputLabel,
     emptyLabel: texts.toolNoOutputLabel,
+    ...("fileOperation" in toolCard && toolCard.fileOperation
+      ? { fileOperation: toolCard.fileOperation }
+      : {}),
   };
 }
 
@@ -216,7 +244,7 @@ function resolveToolCardStatus(params: {
       kind: "call",
       hasResult: false,
       statusTone: "running",
-      statusLabel: params.texts.toolStatusPreparingLabel,
+      statusLabel: params.texts.toolStatusRunningLabel,
     };
   }
   return {
@@ -227,6 +255,30 @@ function resolveToolCardStatus(params: {
   };
 }
 
+function parseStructuredValue(value: unknown): unknown {
+  if (typeof value !== "string") {
+    return value;
+  }
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) {
+    return value;
+  }
+  try {
+    return JSON.parse(trimmed) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+function buildToolInvocationInput(
+  args?: unknown,
+  parsedArgs?: unknown,
+): string | undefined {
+  const source = parsedArgs ?? parseStructuredValue(args);
+  const text = stringifyUnknown(source).trim();
+  return text || undefined;
+}
+
 function buildReasoningPart(
   part: Extract<ChatMessagePartSource, { type: "reasoning" }>,
   texts: ChatMessageAdapterTexts,
@@ -296,22 +348,45 @@ function buildToolInvocationPart(
     result: invocation.result,
     texts,
   });
-  const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+  const fileOperationCardData = buildFileOperationCardData({
+    toolName: invocation.toolName,
+    status: invocation.status,
+    toolCallId: invocation.toolCallId,
+    args: invocation.args,
+    parsedArgs: invocation.parsedArgs,
+    result: invocation.result,
+  });
+  const detail =
+    fileOperationCardData?.summary ??
+    summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+  const input = fileOperationCardData
+    ? undefined
+    : buildToolInvocationInput(invocation.args, invocation.parsedArgs);
   const rawResult =
     typeof invocation.error === "string" && invocation.error.trim()
       ? invocation.error.trim()
       : invocation.result != null
         ? stringifyUnknown(invocation.result).trim()
         : "";
+  const shouldHideStructuredTerminalJson =
+    !invocation.error && isTerminalResultRecord(invocation.result);
+  const shouldShowRawResult =
+    (!fileOperationCardData?.fileOperation || Boolean(invocation.error)) &&
+    !shouldHideStructuredTerminalJson;
   const card: ToolCardViewSource = {
     kind: statusView.kind,
     name: invocation.toolName,
     detail,
-    text: rawResult || undefined,
+    ...(input ? { input } : {}),
+    text: shouldShowRawResult && rawResult ? rawResult : undefined,
+    outputData: invocation.result,
     callId: invocation.toolCallId || undefined,
     hasResult: statusView.hasResult,
     statusTone: statusView.statusTone,
     statusLabel: statusView.statusLabel,
+    ...(fileOperationCardData?.fileOperation
+      ? { fileOperation: fileOperationCardData.fileOperation }
+      : {}),
   };
   return {
     type: "tool-card",

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

@@ -17,8 +17,9 @@ const defaultTexts = {
   reasoningLabel: "Reasoning",
   toolCallLabel: "Tool Call",
   toolResultLabel: "Tool Result",
+  toolInputLabel: "Input",
   toolNoOutputLabel: "No output",
-  toolOutputLabel: "View Output",
+  toolOutputLabel: "Output",
   toolStatusPreparingLabel: "Preparing",
   toolStatusRunningLabel: "Running",
   toolStatusCompletedLabel: "Completed",
@@ -88,7 +89,7 @@ it("maps markdown, reasoning, and tool parts into UI view models", () => {
       statusLabel: "Completed",
       statusTone: "success",
       titleLabel: "Tool Result",
-      outputLabel: "View Output",
+      outputLabel: "Output",
     },
   });
 });
@@ -126,7 +127,7 @@ it("maps tool lifecycle statuses into visible card state feedback", () => {
     type: "tool-card",
     card: {
       statusTone: "running",
-      statusLabel: "Preparing",
+      statusLabel: "Running",
       titleLabel: "Tool Call",
     },
   });
@@ -141,6 +142,87 @@ it("maps tool lifecycle statuses into visible card state feedback", () => {
   });
 });
 
+it("preserves full generic tool args for the expanded body while keeping the header summary short", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-generic-tool-input",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "call-generic-input",
+            toolName: "open_url",
+            args: JSON.stringify({
+              url: "https://example.com/really/long/path",
+              headers: {
+                authorization: "Bearer secret-token",
+              },
+              mode: "reader",
+            }),
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "open_url",
+      statusTone: "running",
+      summary: "url: https://example.com/really/long/path",
+      input: `{
+  "url": "https://example.com/really/long/path",
+  "headers": {
+    "authorization": "Bearer secret-token"
+  },
+  "mode": "reader"
+}`,
+    },
+  });
+});
+
+it("keeps structured terminal results as structured data instead of raw json output", () => {
+  const terminalResult = {
+    status: "completed",
+    command: "python3 -m http.server 8765",
+    aggregated_output: "",
+    exit_code: 0,
+  };
+
+  const adapted = adapt([
+    {
+      id: "assistant-terminal-result",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "call-terminal-result",
+            toolName: "command_execution",
+            args: '{"command":"python3 -m http.server 8765"}',
+            result: terminalResult,
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "command_execution",
+      summary: "command: python3 -m http.server 8765",
+      output: undefined,
+      outputData: terminalResult,
+      statusTone: "success",
+    },
+  });
+});
+
 it("renders spawn tool cards from structured subagent status updates", () => {
   const adapted = adapt([
     {
@@ -377,3 +459,311 @@ it("renders asset tool results as previewable files", () => {
     },
   });
 });
+
+it("builds edit-file previews from structured args before the tool finishes", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-edit-preview",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.CALL,
+            toolCallId: "edit-call-1",
+            toolName: "edit_file",
+            args: JSON.stringify({
+              path: "src/app.ts",
+              oldText: "const color = 'red';",
+              newText: "const color = 'blue';",
+            }),
+            parsedArgs: {
+              path: "src/app.ts",
+              oldText: "const color = 'red';",
+              newText: "const color = 'blue';",
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  const editLines =
+    adapted[0]?.parts[0]?.type === "tool-card"
+      ? (adapted[0].parts[0].card.fileOperation?.blocks[0]?.lines ?? [])
+      : [];
+
+  expect(adapted[0]?.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 color = 'red';",
+              },
+              {
+                kind: "add",
+                text: "const color = 'blue';",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+  expect(editLines[0]).not.toHaveProperty("oldLineNumber");
+  expect(editLines[1]).not.toHaveProperty("newLineNumber");
+});
+
+it("uses structured edit-file result line numbers after the tool finishes", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-edit-result",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "edit-result-1",
+            toolName: "edit_file",
+            args: JSON.stringify({
+              path: "src/app.ts",
+              oldText: "const color = 'red';",
+              newText: "const color = 'blue';",
+            }),
+            parsedArgs: {
+              path: "src/app.ts",
+              oldText: "const color = 'red';",
+              newText: "const color = 'blue';",
+            },
+            result: {
+              path: "src/app.ts",
+              oldStartLine: 27,
+              newStartLine: 27,
+              message: "Edited src/app.ts",
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "edit_file",
+      summary: "src/app.ts",
+      statusTone: "success",
+      fileOperation: {
+        blocks: [
+          {
+            path: "src/app.ts",
+            lines: [
+              {
+                kind: "remove",
+                text: "const color = 'red';",
+                oldLineNumber: 27,
+              },
+              {
+                kind: "add",
+                text: "const color = 'blue';",
+                newLineNumber: 27,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+});
+
+it("builds write-file previews from partial native args before the JSON is complete", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-write-preview",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "write-call-1",
+            toolName: "write_file",
+            args: '{"path":"games/snake.html","content":"<!DOCTYPE html>\\n<canvas id=\\"game\\"></canvas>\\n<script>const score = 1;',
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "write_file",
+      summary: "games/snake.html",
+      statusTone: "running",
+      statusLabel: "Running",
+      fileOperation: {
+        blocks: [
+          {
+            display: "preview",
+            path: "games/snake.html",
+            lines: expect.arrayContaining([
+              expect.objectContaining({
+                kind: "add",
+                text: "<!DOCTYPE html>",
+              }),
+              expect.objectContaining({
+                kind: "add",
+                text: '<canvas id="game"></canvas>',
+              }),
+            ]),
+          },
+        ],
+      },
+    },
+  });
+});
+
+it("keeps completed write-file cards in preview mode instead of falling back to raw byte summaries", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-write-result",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "write-result-1",
+            toolName: "write_file",
+            args: JSON.stringify({
+              path: "games/snake.html",
+              content: '<!DOCTYPE html>\n<canvas id="game"></canvas>',
+            }),
+            result: "Wrote 3906 bytes to games/snake.html",
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "write_file",
+      summary: "games/snake.html",
+      statusTone: "success",
+      fileOperation: {
+        blocks: [
+          {
+            display: "preview",
+            path: "games/snake.html",
+            lines: [
+              {
+                kind: "add",
+                text: "<!DOCTYPE html>",
+                newLineNumber: 1,
+              },
+              {
+                kind: "add",
+                text: '<canvas id="game"></canvas>',
+                newLineNumber: 2,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+  expect(adapted[0]?.parts[0]).not.toMatchObject({
+    type: "tool-card",
+    card: {
+      output: "Wrote 3906 bytes to games/snake.html",
+    },
+  });
+});
+
+it("renders codex file_change results as structured diff previews", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-file-change",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "file-change-1",
+            toolName: "file_change",
+            args: JSON.stringify({
+              changes: [
+                {
+                  path: "src/main.ts",
+                  diff: [
+                    "--- a/src/main.ts",
+                    "+++ b/src/main.ts",
+                    "@@ -109,1 +109,1 @@",
+                    "-console.log('old');",
+                    "+console.log('new');",
+                  ].join("\n"),
+                },
+              ],
+            }),
+            result: {
+              status: "completed",
+              changes: [
+                {
+                  path: "src/main.ts",
+                  diff: [
+                    "--- a/src/main.ts",
+                    "+++ b/src/main.ts",
+                    "@@ -109,1 +109,1 @@",
+                    "-console.log('old');",
+                    "+console.log('new');",
+                  ].join("\n"),
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "file_change",
+      summary: "src/main.ts",
+      statusTone: "success",
+      fileOperation: {
+        blocks: [
+          {
+            path: "src/main.ts",
+            lines: [
+              {
+                kind: "remove",
+                text: "console.log('old');",
+                oldLineNumber: 109,
+              },
+              {
+                kind: "add",
+                text: "console.log('new');",
+                newLineNumber: 109,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+});