@nextclaw/ui 0.14.1-beta.0 → 0.14.1-beta.1

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -35,10 +35,16 @@ export function buildModelStateHint(params: {
     "noModelOptionsLabel" | "configureProviderLabel"
   >;
 }): ChatInlineHint | null {
-  if (!params.isModelOptionsLoading && !params.isModelOptionsEmpty) {
+  const {
+    isModelOptionsEmpty,
+    isModelOptionsLoading,
+    onGoToProviders,
+    texts,
+  } = params;
+  if (!isModelOptionsLoading && !isModelOptionsEmpty) {
     return null;
   }
-  if (params.isModelOptionsLoading) {
+  if (isModelOptionsLoading) {
     return {
       tone: "neutral",
       loading: true,
@@ -46,25 +52,40 @@ export function buildModelStateHint(params: {
   }
   return {
     tone: "warning",
-    text: params.texts.noModelOptionsLabel,
-    actionLabel: params.texts.configureProviderLabel,
-    onAction: params.onGoToProviders,
+    text: texts.noModelOptionsLabel,
+    actionLabel: texts.configureProviderLabel,
+    onAction: onGoToProviders,
   };
 }
 
 export function buildModelToolbarSelect({
-  modelOptions, recentModelValues, selectedModel, isModelOptionsLoading, hasModelOptions, onValueChange, texts,
+  modelOptions,
+  favoriteModelValues,
+  recentModelValues,
+  selectedModel,
+  isModelOptionsLoading,
+  hasModelOptions,
+  onFavoriteToggle,
+  onValueChange,
+  texts,
 }: {
   modelOptions: ChatModelRecord[];
+  favoriteModelValues?: string[];
   recentModelValues?: string[];
   selectedModel: string;
   isModelOptionsLoading: boolean;
   hasModelOptions: boolean;
+  onFavoriteToggle?: (value: string, favorite: boolean) => void;
   onValueChange: (value: string) => void;
   texts: Pick<
     ChatInputBarAdapterTexts,
     | "modelSelectPlaceholder"
     | "modelNoOptionsLabel"
+    | "modelSearchPlaceholder"
+    | "modelSearchEmptyLabel"
+    | "favoriteModelsLabel"
+    | "favoriteModelLabel"
+    | "unfavoriteModelLabel"
     | "recentModelsLabel"
     | "allModelsLabel"
   >;
@@ -76,19 +97,33 @@ export function buildModelToolbarSelect({
   const resolvedValue = hasModelOptions
     ? resolvedModelOption?.value
     : undefined;
-  const recentValueSet = new Set(recentModelValues ?? []);
   const modelOptionMap = new Map(
     modelOptions.map((option) => [option.value, option] as const),
   );
-  const recentOptions = (recentModelValues ?? [])
+  const favoriteOptions = (favoriteModelValues ?? [])
     .map((value) => modelOptionMap.get(value))
     .filter((option): option is ChatModelRecord => Boolean(option));
+  const favoriteValueSet = new Set(favoriteOptions.map((option) => option.value));
+  const recentOptions = (recentModelValues ?? [])
+    .map((value) => modelOptionMap.get(value))
+    .filter(
+      (option): option is ChatModelRecord =>
+        option !== undefined && !favoriteValueSet.has(option.value),
+    );
+  const recentValueSet = new Set(recentOptions.map((option) => option.value));
   const remainingOptions = modelOptions.filter(
-    (option) => !recentValueSet.has(option.value),
+    (option) => !favoriteValueSet.has(option.value) && !recentValueSet.has(option.value),
   );
-  const optionGroups =
-    recentOptions.length > 0
-      ? [
+  const optionGroups = favoriteOptions.length > 0 || recentOptions.length > 0
+    ? [
+          {
+            key: "favorite-models",
+            label: texts.favoriteModelsLabel,
+            options: favoriteOptions.map((option) => ({
+              value: option.value,
+              label: formatModelOptionLabel(option),
+            })),
+          },
           {
             key: "recent-models",
             label: texts.recentModelsLabel,
@@ -106,7 +141,7 @@ export function buildModelToolbarSelect({
             })),
           },
         ].filter((group) => group.options.length > 0)
-      : undefined;
+    : undefined;
 
   return {
     key: "model",
@@ -124,6 +159,19 @@ export function buildModelToolbarSelect({
     disabled: !hasModelOptions,
     loading: isModelOptionsLoading,
     emptyLabel: texts.modelNoOptionsLabel,
+    search: {
+      placeholder: texts.modelSearchPlaceholder,
+      emptyLabel: texts.modelSearchEmptyLabel,
+    },
+    optionAction: onFavoriteToggle
+      ? {
+          kind: "favorite",
+          activeValues: favoriteOptions.map((option) => option.value),
+          activeLabel: texts.unfavoriteModelLabel,
+          inactiveLabel: texts.favoriteModelLabel,
+          onToggle: onFavoriteToggle,
+        }
+      : undefined,
     onValueChange,
   };
 }
@@ -135,31 +183,38 @@ export function buildThinkingToolbarSelect(params: {
   onValueChange: (value: ChatThinkingLevel) => void;
   texts: Pick<ChatInputBarAdapterTexts, "thinkingLabels">;
 }): ChatToolbarSelect | null {
-  if (params.supportedLevels.length === 0) {
+  const {
+    defaultThinkingLevel,
+    onValueChange,
+    selectedThinkingLevel,
+    supportedLevels,
+    texts,
+  } = params;
+  if (supportedLevels.length === 0) {
     return null;
   }
 
-  const options = normalizeThinkingLevels(params.supportedLevels);
+  const options = normalizeThinkingLevels(supportedLevels);
   const fallback = options.includes("off") ? "off" : options[0];
   const resolvedValue =
-    (params.selectedThinkingLevel &&
-      options.includes(params.selectedThinkingLevel) &&
-      params.selectedThinkingLevel) ||
-    (params.defaultThinkingLevel &&
-      options.includes(params.defaultThinkingLevel) &&
-      params.defaultThinkingLevel) ||
+    (selectedThinkingLevel &&
+      options.includes(selectedThinkingLevel) &&
+      selectedThinkingLevel) ||
+    (defaultThinkingLevel &&
+      options.includes(defaultThinkingLevel) &&
+      defaultThinkingLevel) ||
     fallback;
 
   return {
     key: "thinking",
     value: resolvedValue,
-    placeholder: params.texts.thinkingLabels[resolvedValue],
-    selectedLabel: params.texts.thinkingLabels[resolvedValue],
+    placeholder: texts.thinkingLabels[resolvedValue],
+    selectedLabel: texts.thinkingLabels[resolvedValue],
     icon: "brain",
     options: options.map((level) => ({
       value: level,
-      label: params.texts.thinkingLabels[level],
+      label: texts.thinkingLabels[level],
     })),
-    onValueChange: (value) => params.onValueChange(value as ChatThinkingLevel),
+    onValueChange: (value) => onValueChange(value as ChatThinkingLevel),
   };
 }

package/src/features/chat/features/message/utils/__tests__/chat-message-file-operation.utils.test.ts

@@ -0,0 +1,310 @@
+import { ToolInvocationStatus } from "@nextclaw/agent-chat";
+import { adapt, type ChatMessageSource } from "./chat-message-test.utils";
+
+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,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+});

package/src/features/chat/features/message/utils/__tests__/chat-message-test.utils.ts

@@ -0,0 +1,43 @@
+import type { UiMessage } from "@nextclaw/agent-chat";
+import {
+  adaptChatMessages,
+  type ChatMessageSource,
+} from "@/features/chat/features/message/utils/chat-message.utils";
+
+export type { ChatMessageSource } from "@/features/chat/features/message/utils/chat-message.utils";
+
+export function toSource(uiMessages: UiMessage[]): ChatMessageSource[] {
+  return uiMessages as unknown as ChatMessageSource[];
+}
+
+const defaultTexts = {
+  roleLabels: {
+    user: "You",
+    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 attachment",
+  fileAttachmentLabel: "File attachment",
+  unknownPartLabel: "Unknown Part",
+};
+
+export function adapt(uiMessages: ChatMessageSource[]) {
+  return adaptChatMessages({
+    uiMessages,
+    formatTimestamp: (value) => `formatted:${value}`,
+    texts: defaultTexts,
+  });
+}