@nextclaw/ui 0.13.13 → 0.14.1-beta.0

package/src/features/chat/{components/conversation → features/message/components/__tests__}/chat-message-list.container.test.tsx

@@ -1,24 +1,45 @@
 import { render } from "@testing-library/react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
-import { ChatMessageListContainer } from "./chat-message-list.container";
+import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
 
 const captures = vi.hoisted(() => ({
-  renders: [] as Array<{ messages: unknown[]; texts?: Record<string, unknown> }>,
+  renders: [] as Array<{
+    messages: unknown[];
+    onToolAction?: (action: unknown) => void;
+    renderPanelAppCard?: (panelApp: unknown) => unknown;
+    texts?: Record<string, unknown>;
+  }>,
   language: "en",
+  openFilePreview: vi.fn(),
+  handleToolAction: vi.fn(),
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
   const actual = await importOriginal();
   return {
     ...(actual as object),
-    ChatMessageList: (props: { messages: unknown[]; texts?: Record<string, unknown> }) => {
+    ChatMessageList: (props: {
+      messages: unknown[];
+      onToolAction?: (action: unknown) => void;
+      renderPanelAppCard?: (panelApp: unknown) => unknown;
+      texts?: Record<string, unknown>;
+    }) => {
       captures.renders.push(props);
       return <div data-testid="chat-message-list" />;
     },
   };
 });
 
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      openFilePreview: captures.openFilePreview,
+      handleToolAction: captures.handleToolAction,
+    },
+  }),
+}));
+
 vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
 }));
@@ -31,6 +52,8 @@ vi.mock("@/shared/lib/i18n", () => ({
 beforeEach(() => {
   captures.renders = [];
   captures.language = "en";
+  captures.openFilePreview.mockReset();
+  captures.handleToolAction.mockReset();
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -216,6 +239,26 @@ it("passes localized attachment card texts to the shared chat UI", () => {
   });
 });
 
+it("delegates tool actions to the chat thread manager owner", () => {
+  const toolAction = {
+    kind: "open-session",
+    sessionId: "child-session-1",
+    sessionKind: "child",
+  };
+
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+
+  captures.renders[captures.renders.length - 1]?.onToolAction?.(toolAction);
+
+  expect(captures.handleToolAction).toHaveBeenCalledWith(toolAction);
+});
+
+it("passes the inline panel app renderer to the shared chat UI", () => {
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+
+  expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
+});
+
 it("renders context compaction as an in-flow divider instead of a chat message", () => {
   const beforeMessage = {
     id: "message-before",

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/{components/conversation → features/message/components}/chat-message-list.container.tsx

@@ -1,23 +1,23 @@
 import { useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
-  type ChatFileOpenActionViewModel,
-  type ChatToolActionViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import {
   adaptChatMessage,
   type ChatMessageAdapterTexts,
   type ChatMessageSource,
-} from "@/features/chat/utils/chat-message.utils";
-import { readInlineTokensFromMetadata } from "@/features/chat/utils/chat-inline-token.utils";
-import { adaptNcpMessageToUiMessage } from "@/features/chat/utils/ncp-session-adapter.utils";
+} from "@/features/chat/features/message/utils/chat-message.utils";
+import { readInlineTokensFromMetadata } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import {
   readContextCompactionTimeline,
   type ContextCompactionTimelineView,
-} from "@/features/chat/utils/ncp-session-context-metadata.utils";
+} 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";
 
@@ -25,8 +25,6 @@ type ChatMessageListContainerProps = {
   messages: readonly NcpMessage[];
   isSending: boolean;
   className?: string;
-  onToolAction?: (action: ChatToolActionViewModel) => void;
-  onFileOpen?: (action: ChatFileOpenActionViewModel) => void;
 };
 
 const messageViewModelCache = new WeakMap<
@@ -69,6 +67,7 @@ function buildChatMessageAdapterTexts(
     toolStatusCompletedLabel: t("chatToolStatusCompleted"),
     toolStatusFailedLabel: t("chatToolStatusFailed"),
     toolStatusCancelledLabel: t("chatToolStatusCancelled"),
+    showContentActionLabel: t("chatShowContentAction"),
     imageAttachmentLabel: t("chatImageAttachment"),
     fileAttachmentLabel: t("chatFileAttachment"),
     unknownPartLabel: t("chatUnknownPart"),
@@ -235,9 +234,8 @@ export function ChatMessageListContainer({
   messages: rawMessages,
   isSending,
   className,
-  onToolAction,
-  onFileOpen,
 }: ChatMessageListContainerProps) {
+  const presenter = usePresenter();
   const { language } = useI18n();
   const texts = useMemo<ChatMessageAdapterTexts>(
     () => buildChatMessageAdapterTexts(language),
@@ -292,7 +290,6 @@ export function ChatMessageListContainer({
     () => buildTimelineItems({ rawMessages, messages }),
     [messages, rawMessages],
   );
-
   return (
     <div className={className}>
       {timelineItems.map((item, index) =>
@@ -305,14 +302,17 @@ export function ChatMessageListContainer({
             isSending={index === timelineItems.length - 1 ? isSending : false}
             hasAssistantDraft={hasAssistantDraft}
             texts={messageTexts}
-            onToolAction={onToolAction}
-            onFileOpen={onFileOpen}
+            onToolAction={presenter.chatThreadManager.handleToolAction}
+            onFileOpen={presenter.chatThreadManager.openFilePreview}
             renderToolAgent={(agentId) => (
               <AgentIdentityAvatar
                 agentId={agentId}
                 className="h-4 w-4 shrink-0"
               />
             )}
+            renderPanelAppCard={(panelApp) => (
+              <ChatInlinePanelAppCard panelApp={panelApp} />
+            )}
           />
         ),
       )}

package/src/features/chat/{utils → features/message/utils/__tests__}/chat-message-invalid-tool-arguments.utils.test.ts

@@ -1,6 +1,6 @@
 import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
-import { adaptChatMessages } from "./chat-message.utils";
-import type { ChatMessageSource } from "./chat-message.utils";
+import { adaptChatMessages } from "../chat-message.utils";
+import type { ChatMessageSource } from "../chat-message.utils";
 
 const defaultTexts = {
   roleLabels: {

package/src/features/chat/{utils → features/message/utils/__tests__}/chat-message-session-spawn-tool-card.utils.test.ts

@@ -1,6 +1,6 @@
 import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
-import { adaptChatMessages } from "./chat-message.utils";
-import type { ChatMessageSource } from "./chat-message.utils";
+import { adaptChatMessages } from "../chat-message.utils";
+import type { ChatMessageSource } from "../chat-message.utils";
 
 const defaultTexts = {
   roleLabels: {

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

@@ -0,0 +1,172 @@
+import { describe, expect, it } from "vitest";
+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", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-content",
+        toolName: "show_content",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "file",
+              payload: {
+                path: "docs/example.md",
+                line: 2,
+              },
+            },
+            title: "Example",
+            purpose: "read",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).toMatchObject({
+      kind: "result",
+      name: "show_content",
+      detail: "Example",
+      statusTone: "success",
+      statusLabel: "Completed",
+      action: {
+        kind: "show-content",
+        label: "Show content",
+        request: {
+          target: {
+            type: "file",
+            payload: {
+              path: "docs/example.md",
+              line: 2,
+            },
+          },
+          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/{utils → features/message/utils/__tests__}/chat-message-summary-truncation.utils.test.ts

@@ -1,6 +1,6 @@
 import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
-import { adaptChatMessages } from "./chat-message.utils";
-import type { ChatMessageSource } from "./chat-message.utils";
+import { adaptChatMessages } from "../chat-message.utils";
+import type { ChatMessageSource } from "../chat-message.utils";
 import type { ChatMessagePartViewModel } from "@nextclaw/agent-chat-ui";
 
 const defaultTexts = {

package/src/features/chat/{utils → features/message/utils/__tests__}/chat-message-tool-agent-id.utils.test.ts

@@ -1,5 +1,5 @@
 import { ToolInvocationStatus } from "@nextclaw/agent-chat";
-import { adaptChatMessages, type ChatMessageSource } from "./chat-message.utils";
+import { adaptChatMessages, type ChatMessageSource } from "../chat-message.utils";
 
 const defaultTexts = {
   roleLabels: {

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

@@ -1,6 +1,6 @@
 import { ToolInvocationStatus, type UiMessage } from "@nextclaw/agent-chat";
-import { adaptChatMessages } from "./chat-message.utils";
-import type { ChatMessageSource } from "./chat-message.utils";
+import { adaptChatMessages } from "../chat-message.utils";
+import type { ChatMessageSource } from "../chat-message.utils";
 
 function toSource(uiMessages: UiMessage[]): ChatMessageSource[] {
   return uiMessages as unknown as ChatMessageSource[];

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/{utils → features/message/utils}/chat-message-inline-content.utils.ts

@@ -1,7 +1,7 @@
 import {
   splitTextByInlineTokens,
   type ChatInlineTokenSource,
-} from "@/features/chat/utils/chat-inline-token.utils";
+} from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import type {
   ChatInlineContentSegmentViewModel,
   ChatMessagePartViewModel,

package/src/features/chat/{utils → features/message/utils}/chat-message-part.utils.ts

@@ -1,8 +1,8 @@
 import {
   stringifyUnknown,
   summarizeToolArgs,
-} from "@/features/chat/utils/chat-message-core.utils";
-import { type ChatInlineTokenSource } from "@/features/chat/utils/chat-inline-token.utils";
+} from "@/features/chat/features/message/utils/chat-message-core.utils";
+import { type ChatInlineTokenSource } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import {
   buildRenderableText,
   buildTextPart,
@@ -18,6 +18,7 @@ import {
 } from "./chat-message-tool-card.utils";
 import { resolveToolInvocationAgentId } from "./chat-message-tool-agent-id.utils";
 import { buildFileOperationCardData } from "./file-operation/card.utils";
+import { buildShowContentToolCard } from "./chat-message-show-content-tool-card.utils";
 import { buildSessionRequestToolCard } from "./chat-message-session-request-tool-card.utils";
 import type {
   ChatMessagePartViewModel,
@@ -116,6 +117,18 @@ function buildToolInvocationPart(
     };
   }
 
+  const showContentToolCard = buildShowContentToolCard({
+    invocation,
+    actionLabel: texts.showContentActionLabel ?? "Show content",
+    statusLabel: texts.toolStatusCompletedLabel,
+  });
+  if (showContentToolCard) {
+    return {
+      type: "tool-card",
+      card: buildToolCard(showContentToolCard, texts),
+    };
+  }
+
   const statusView = resolveToolCardStatus({
     status: invocation.status,
     error: invocation.error,

package/src/features/chat/{utils → features/message/utils}/chat-message-session-request-tool-card.utils.ts

@@ -2,7 +2,7 @@ import {
   stringifyUnknown,
   summarizeToolArgs,
   type ToolCard,
-} from "@/features/chat/utils/chat-message-core.utils";
+} from "@/features/chat/features/message/utils/chat-message-core.utils";
 import { resolveToolInvocationAgentId } from "./chat-message-tool-agent-id.utils";
 import type { ChatToolPartViewModel } from "@nextclaw/agent-chat-ui";