@nextclaw/ui 0.14.0 → 0.14.1-beta.1

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

@@ -1,42 +1,5 @@
 import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
-import { adaptChatMessages } from "../chat-message.utils";
-import type { ChatMessageSource } from "../chat-message.utils";
-
-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",
-};
-
-function adapt(uiMessages: ChatMessageSource[]) {
-  return adaptChatMessages({
-    uiMessages,
-    formatTimestamp: (value) => `formatted:${value}`,
-    texts: defaultTexts,
-  });
-}
+import { adapt, toSource, type ChatMessageSource } from "./chat-message-test.utils";
 
 it("maps markdown, reasoning, and tool parts into UI view models", () => {
   const messages: UiMessage[] = [
@@ -576,311 +539,3 @@ 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,
-              },
-            ],
-          },
-        ],
-      },
-    },
-  });
-});

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -0,0 +1,51 @@
+import {
+  createPanelAppResourceUri,
+  RIGHT_PANEL_PANEL_APP_TAB_KIND,
+} from '@/features/right-panel-resources';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
+
+export const PANEL_APP_INLINE_IFRAME_SANDBOX = [
+  'allow-scripts',
+  'allow-forms',
+  'allow-modals',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-downloads',
+  'allow-pointer-lock',
+  'allow-presentation',
+].join(' ');
+
+export const PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX = 420;
+
+const PANEL_APP_INLINE_CARD_SEARCH_PARAMS = {
+  nextclawDisplayMode: 'card',
+  nextclawPlacement: 'inline',
+} as const;
+
+export function createFallbackPanelAppContentPath(appId: string): string {
+  return `/api/panel-apps/${encodeURIComponent(appId)}/content`;
+}
+
+export function createInlinePanelAppCardUrl(url: string): string {
+  const separator = url.includes('?') ? '&' : '?';
+  return `${url}${separator}${new URLSearchParams(PANEL_APP_INLINE_CARD_SEARCH_PARAMS).toString()}`;
+}
+
+export function createInlinePanelAppTab(params: {
+  appId: string;
+  title: string;
+  url: string;
+}): DocBrowserTab {
+  const { appId, title, url } = params;
+  return {
+    currentUrl: url,
+    dedupeKey: `panel-app:${appId}`,
+    history: [url],
+    historyIndex: 0,
+    id: `inline-panel-app:${appId}`,
+    kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
+    navVersion: 0,
+    resourceUri: createPanelAppResourceUri(appId),
+    title,
+  };
+}

package/src/features/chat/features/message/utils/chat-message-show-content-tool-card.utils.ts

@@ -42,6 +42,12 @@ function readPurpose(value: unknown): ChatUiShowContentRequest["purpose"] {
     : undefined;
 }
 
+function readPlacement(value: unknown): ChatUiShowContentRequest["placement"] {
+  return value === "inline" || value === "side_panel"
+    ? value
+    : undefined;
+}
+
 function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null {
   if (!isRecord(value) || !isRecord(value.target)) {
     return null;
@@ -57,6 +63,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
   }
   const title = readOptionalString(value.title);
   const purpose = readPurpose(value.purpose);
+  const placement = readPlacement(value.placement);
 
   if (targetType === "file") {
     const path = readOptionalString(payload.path);
@@ -74,6 +81,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
       },
       title,
       purpose,
+      placement,
     };
   }
 
@@ -91,6 +99,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
       },
       title,
       purpose,
+      placement,
     };
   }
 
@@ -107,6 +116,7 @@ function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null
     },
     title,
     purpose,
+    placement,
   };
 }
 
@@ -147,6 +157,22 @@ export function buildShowContentToolCard(params: {
   if (!request) {
     return null;
   }
+  const sidePanelRequest: ChatUiShowContentRequest = {
+    ...request,
+    placement: "side_panel",
+  };
+  const showContentAction = {
+    kind: "show-content" as const,
+    label: actionLabel,
+    request: sidePanelRequest,
+  };
+  const panelApp = request.target.type === "panel_app" && request.placement === "inline"
+    ? {
+        appId: request.target.payload.appId,
+        title: request.title,
+        action: showContentAction,
+      }
+    : undefined;
   return {
     kind: "result",
     name: SHOW_CONTENT_TOOL_NAME,
@@ -156,10 +182,7 @@ export function buildShowContentToolCard(params: {
     hasResult: true,
     statusTone: "success",
     statusLabel,
-    action: {
-      kind: "show-content",
-      label: actionLabel,
-      request,
-    },
+    action: showContentAction,
+    ...(panelApp ? { panelApp } : {}),
   };
 }

package/src/features/chat/features/message/utils/chat-message-tool-card.utils.ts

@@ -15,6 +15,7 @@ export type ToolCardViewSource = ToolCard & {
   action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
+  panelApp?: ChatToolPartViewModel["panelApp"];
 };
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -133,6 +134,9 @@ export function buildToolCard(
     ...("fileOperation" in toolCard && toolCard.fileOperation
       ? { fileOperation: toolCard.fileOperation }
       : {}),
+    ...("panelApp" in toolCard && toolCard.panelApp
+      ? { panelApp: toolCard.panelApp }
+      : {}),
   };
 }
 
@@ -146,17 +150,18 @@ export function resolveToolCardStatus(params: {
   ChatToolPartViewModel,
   "kind" | "hasResult" | "statusTone" | "statusLabel"
 > {
+  const { cancelled, error, result, status, texts } = params;
   const rawStatus =
-    typeof params.status === "string" ? params.status.trim().toLowerCase() : "";
+    typeof status === "string" ? status.trim().toLowerCase() : "";
   const hasError =
-    typeof params.error === "string" && params.error.trim().length > 0;
-  const isCancelled = params.cancelled === true || rawStatus === "cancelled";
+    typeof error === "string" && error.trim().length > 0;
+  const isCancelled = cancelled === true || rawStatus === "cancelled";
   if (isCancelled) {
     return {
       kind: "result",
       hasResult: true,
       statusTone: "cancelled",
-      statusLabel: params.texts.toolStatusCancelledLabel,
+      statusLabel: texts.toolStatusCancelledLabel,
     };
   }
   if (hasError || rawStatus === "error") {
@@ -164,15 +169,15 @@ export function resolveToolCardStatus(params: {
       kind: "result",
       hasResult: true,
       statusTone: "error",
-      statusLabel: params.texts.toolStatusFailedLabel,
+      statusLabel: texts.toolStatusFailedLabel,
     };
   }
-  if (rawStatus === "result" || params.result != null) {
+  if (rawStatus === "result" || result != null) {
     return {
       kind: "result",
       hasResult: true,
       statusTone: "success",
-      statusLabel: params.texts.toolStatusCompletedLabel,
+      statusLabel: texts.toolStatusCompletedLabel,
     };
   }
   if (rawStatus === "partial-call") {
@@ -180,14 +185,14 @@ export function resolveToolCardStatus(params: {
       kind: "call",
       hasResult: false,
       statusTone: "running",
-      statusLabel: params.texts.toolStatusRunningLabel,
+      statusLabel: texts.toolStatusRunningLabel,
     };
   }
   return {
     kind: "call",
     hasResult: false,
     statusTone: "running",
-    statusLabel: params.texts.toolStatusRunningLabel,
+    statusLabel: texts.toolStatusRunningLabel,
   };
 }