@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useId, useMemo, useRef } from 'react';
+import type { ChatPanelAppCardViewModel } from '@nextclaw/agent-chat-ui';
+import { AppWindow, Maximize2 } from 'lucide-react';
+import { getPresenter } from '@/app/presenters/app.presenter';
+import { findPanelAppEntryByDisplayId, usePanelApps } from '@/features/panel-apps';
+import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources';
+import {
+  createInlinePanelAppCardUrl,
+  createFallbackPanelAppContentPath,
+  createInlinePanelAppTab,
+  PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX,
+  PANEL_APP_INLINE_IFRAME_SANDBOX,
+} from '@/features/chat/features/message/utils/chat-inline-panel-app-card.utils';
+import { useDocBrowser } from '@/shared/components/doc-browser';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { t } from '@/shared/lib/i18n';
+
+export function ChatInlinePanelAppCard({
+  panelApp,
+}: {
+  panelApp: ChatPanelAppCardViewModel;
+}) {
+  const docBrowser = useDocBrowser();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const iframeId = useId();
+  const panelApps = usePanelApps();
+  const entry = useMemo(
+    () => findPanelAppEntryByDisplayId(panelApps.data?.entries ?? [], panelApp.appId),
+    [panelApp.appId, panelApps.data?.entries],
+  );
+  const target = entry ? createPanelAppRightPanelResourceTarget(entry) : null;
+  const title = panelApp.title ?? target?.title ?? panelApp.appId;
+  const url = panelApps.isLoading
+    ? ''
+    : target?.url ?? createFallbackPanelAppContentPath(panelApp.appId);
+  const cardUrl = useMemo(
+    () => (url ? createInlinePanelAppCardUrl(url) : ''),
+    [url],
+  );
+  const tab = useMemo(
+    () => createInlinePanelAppTab({
+      appId: entry?.id ?? panelApp.appId,
+      title,
+      url,
+    }),
+    [entry?.id, panelApp.appId, title, url],
+  );
+  const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}`;
+  const openExpanded = () => {
+    if (target) {
+      docBrowser.openTarget(target);
+      return;
+    }
+    docBrowser.open(url, {
+      dedupeKey: tab.dedupeKey,
+      kind: tab.kind,
+      title,
+    });
+  };
+
+  useEffect(() => {
+    if (!url) {
+      return undefined;
+    }
+    const handleMessage = (event: MessageEvent) => {
+      getPresenter().panelAppBridgeManager.handleIframeMessage({
+        event,
+        iframe: iframeRef.current,
+        iframeInstanceId,
+        tab,
+      });
+    };
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [iframeInstanceId, tab, url]);
+
+  if (!url) {
+    return (
+      <div
+        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-[#eee3d1] bg-gradient-to-b from-white to-amber-50/60"
+        style={{ maxHeight: PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX }}
+      />
+    );
+  }
+
+  return (
+    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-[#eee3d1] bg-white shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
+      <div className="flex h-9 items-center justify-between gap-2 border-b border-[#f1e7d4] bg-[#fffaf2] px-2.5">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-[#5c4933]">
+          <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
+          <span className="truncate">{title}</span>
+        </div>
+        <IconActionButton
+          className="h-7 w-7 rounded-md text-[#7a6145] hover:bg-white hover:text-[#2f2212]"
+          icon={<Maximize2 className="h-3.5 w-3.5" />}
+          label={t('chatPanelCardExpand')}
+          onClick={openExpanded}
+        />
+      </div>
+      <div
+        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-white"
+      >
+        <iframe
+          ref={iframeRef}
+          key={iframeInstanceId}
+          src={cardUrl}
+          title={title}
+          sandbox={PANEL_APP_INLINE_IFRAME_SANDBOX}
+          scrolling="auto"
+          className="h-full w-full border-0 bg-white"
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -17,6 +17,7 @@ import {
   type ContextCompactionTimelineView,
 } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 import { useI18n } from "@/app/components/i18n-provider";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 
@@ -309,6 +310,9 @@ export function ChatMessageListContainer({
                 className="h-4 w-4 shrink-0"
               />
             )}
+            renderPanelAppCard={(panelApp) => (
+              <ChatInlinePanelAppCard panelApp={panelApp} />
+            )}
           />
         ),
       )}

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-show-content-tool-card.utils.test.ts

@@ -1,5 +1,32 @@
 import { describe, expect, it } from "vitest";
-import { buildShowContentToolCard } from "../chat-message-show-content-tool-card.utils";
+import { buildShowContentToolCard } from "@/features/chat/features/message/utils/chat-message-show-content-tool-card.utils";
+import { buildToolCard } from "@/features/chat/features/message/utils/chat-message-tool-card.utils";
+import type { ChatMessageAdapterTexts } from "@/features/chat/types/chat-message.types";
+
+const TEXTS: ChatMessageAdapterTexts = {
+  fileAttachmentLabel: "File",
+  imageAttachmentLabel: "Image",
+  reasoningLabel: "Reasoning",
+  roleLabels: {
+    assistant: "Assistant",
+    fallback: "Message",
+    system: "System",
+    tool: "Tool",
+    user: "User",
+  },
+  showContentActionLabel: "Show content",
+  toolCallLabel: "Tool call",
+  toolInputLabel: "Input",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "Output",
+  toolResultLabel: "Tool result",
+  toolStatusCancelledLabel: "Cancelled",
+  toolStatusCompletedLabel: "Completed",
+  toolStatusFailedLabel: "Failed",
+  toolStatusPreparingLabel: "Preparing",
+  toolStatusRunningLabel: "Running",
+  unknownPartLabel: "Unknown",
+};
 
 describe("buildShowContentToolCard", () => {
   it("builds a show-content action from a normalized show_content result", () => {
@@ -47,6 +74,97 @@ describe("buildShowContentToolCard", () => {
           },
           title: "Example",
           purpose: "read",
+          placement: "side_panel",
+        },
+      },
+    });
+  });
+
+  it("builds an inline panel app card while keeping the expand action on side panel placement", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-content",
+        toolName: "show_content",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "reader",
+              },
+            },
+            title: "Reader",
+            purpose: "interact",
+            placement: "inline",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).toMatchObject({
+      panelApp: {
+        appId: "reader",
+        title: "Reader",
+        action: {
+          kind: "show-content",
+          label: "Show content",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "reader",
+              },
+            },
+            title: "Reader",
+            purpose: "interact",
+            placement: "side_panel",
+          },
+        },
+      },
+    });
+  });
+
+  it("preserves inline panel app data when converting to the shared chat tool view model", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-content",
+        toolName: "show_content",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "weather-card",
+              },
+            },
+            title: "Weather",
+            purpose: "interact",
+            placement: "inline",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).not.toBeNull();
+    expect(buildToolCard(card!, TEXTS)).toMatchObject({
+      panelApp: {
+        appId: "weather-card",
+        title: "Weather",
+        action: {
+          kind: "show-content",
+          request: {
+            placement: "side_panel",
+          },
         },
       },
     });

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,
+  });
+}