@nextclaw/ui 0.15.10 → 0.15.11

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

@@ -1,6 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, expect, it, vi } from 'vitest';
-import { ChatInlinePanelAppCard } from '@/features/chat/features/message/components/chat-inline-panel-app-card';
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { PANEL_APP_INLINE_HOST_CONTRACT } from "@nextclaw/shared";
+import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 
 const mocks = vi.hoisted(() => ({
   handleIframeMessage: vi.fn(),
@@ -10,12 +11,12 @@ const mocks = vi.hoisted(() => ({
     data: {
       entries: [
         {
-          appId: 'weather-card',
-          contentPath: '/api/panel-apps/weather-card/content',
-          fileName: 'weather-card.panel.html',
-          icon: '*',
-          id: 'weather-card',
-          title: 'Weather',
+          appId: "weather-card",
+          contentPath: "/api/panel-apps/weather-card/content",
+          fileName: "weather-card.panel.html",
+          icon: "*",
+          id: "weather-card",
+          title: "Weather",
         },
       ],
     },
@@ -23,7 +24,7 @@ const mocks = vi.hoisted(() => ({
   },
 }));
 
-vi.mock('@/app/presenters/app.presenter', () => ({
+vi.mock("@/app/presenters/app.presenter", () => ({
   getPresenter: () => ({
     panelAppBridgeManager: {
       handleIframeMessage: mocks.handleIframeMessage,
@@ -31,10 +32,16 @@ vi.mock('@/app/presenters/app.presenter', () => ({
   }),
 }));
 
-vi.mock('@/features/panel-apps', () => ({
-  PANEL_APP_IFRAME_SANDBOX: 'allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock allow-presentation',
-  findPanelAppEntryByDisplayId: (entries: Array<{ appId: string; id: string; title: string }>, value: string) =>
-    entries.find((entry) => [entry.appId, entry.id, entry.title].includes(value)) ?? null,
+vi.mock("@/features/panel-apps", () => ({
+  PANEL_APP_IFRAME_SANDBOX:
+    "allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-downloads allow-pointer-lock allow-presentation",
+  findPanelAppEntryByDisplayId: (
+    entries: Array<{ appId: string; id: string; title: string }>,
+    value: string,
+  ) =>
+    entries.find((entry) =>
+      [entry.appId, entry.id, entry.title].includes(value),
+    ) ?? null,
   focusPanelAppIframe: (iframe: HTMLIFrameElement | null) => {
     iframe?.focus({ preventScroll: true });
     iframe?.contentWindow?.focus();
@@ -42,14 +49,14 @@ vi.mock('@/features/panel-apps', () => ({
   usePanelApps: () => mocks.panelApps,
 }));
 
-vi.mock('@/shared/components/doc-browser', () => ({
+vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
     open: mocks.open,
     openTarget: mocks.openTarget,
   }),
 }));
 
-vi.mock('@/shared/lib/i18n', () => ({
+vi.mock("@/shared/lib/i18n", () => ({
   t: (key: string) => key,
 }));
 
@@ -60,60 +67,131 @@ beforeEach(() => {
   mocks.panelApps.isLoading = false;
 });
 
-it('renders inline panel apps as bounded card-mode iframes with an expand action', () => {
-  render(<ChatInlinePanelAppCard panelApp={{
-    appId: 'weather-card',
-    title: 'Weather',
-  }} />);
-
-  const iframe = screen.getByTitle('Weather');
-  const card = iframe.closest('[data-chat-message-wide-content="true"]');
-  expect(card?.className).toContain('w-full');
-  expect(card?.className).toContain('max-w-[48rem]');
-  expect(iframe.getAttribute('src')).toBe(
-    '/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline',
+it("renders panel apps through the shared adaptive inline surface", () => {
+  const { container } = render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        title: "Weather",
+      }}
+    />,
   );
 
-  fireEvent.click(screen.getByLabelText('chatPanelCardExpand'));
+  const iframe = screen.getByTitle("Weather") as HTMLIFrameElement;
+  const surface = iframe.closest('[data-chat-inline-content-surface="true"]');
+  const actions = container.querySelector(
+    '[data-chat-inline-content-actions="true"]',
+  );
+  const viewport = container.querySelector<HTMLElement>(
+    '[data-chat-inline-content-viewport="true"]',
+  );
+  expect(surface?.className).toContain("w-full");
+  expect(surface?.className).toContain("max-w-[48rem]");
+  expect(surface?.classList.contains("border")).toBe(false);
+  expect(screen.queryByText("Weather")).toBeNull();
+  expect(viewport?.classList.contains("h-[240px]")).toBe(true);
+  expect(viewport?.classList.contains("max-h-[min(90vh,1440px)]")).toBe(true);
+  expect(actions?.classList.contains("opacity-0")).toBe(true);
+  expect(actions?.classList.contains("pointer-events-none")).toBe(true);
+  expect(
+    actions?.classList.contains("group-hover/inline-content:opacity-100"),
+  ).toBe(true);
+  expect(iframe.getAttribute("src")).toBe(
+    "/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline",
+  );
 
-  expect(mocks.openTarget).toHaveBeenCalledWith(expect.objectContaining({
-    dedupeKey: 'panel-app:weather-card',
-    kind: 'panel-app',
-    title: 'Weather',
-    url: '/api/panel-apps/weather-card/content',
-  }));
+  fireEvent(
+    window,
+    new MessageEvent("message", {
+      data: {
+        type: PANEL_APP_INLINE_HOST_CONTRACT.contentHeightMessageType,
+        height: 560,
+      },
+      source: iframe.contentWindow,
+    }),
+  );
+
+  expect(viewport?.style.height).toBe("560px");
+  expect(screen.getByTitle("Weather")).toBe(iframe);
+
+  fireEvent.click(screen.getByLabelText("chatPanelCardExpand"));
+
+  expect(mocks.openTarget).toHaveBeenCalledWith(
+    expect.objectContaining({
+      dedupeKey: "panel-app:weather-card",
+      kind: "panel-app",
+      title: "Weather",
+      url: "/api/panel-apps/weather-card/content",
+    }),
+  );
 });
 
-it('focuses the inline panel app iframe when the pointer enters it', () => {
-  render(<ChatInlinePanelAppCard panelApp={{
-    appId: 'weather-card',
-    title: 'Weather',
-  }} />);
+it("ignores inline height messages from a different window", () => {
+  const { container } = render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        title: "Weather",
+      }}
+    />,
+  );
+  const viewport = container.querySelector<HTMLElement>(
+    '[data-chat-inline-content-viewport="true"]',
+  );
+
+  fireEvent(
+    window,
+    new MessageEvent("message", {
+      data: {
+        type: PANEL_APP_INLINE_HOST_CONTRACT.contentHeightMessageType,
+        height: 560,
+      },
+      source: window,
+    }),
+  );
+
+  expect(viewport?.style.height).toBe("");
+});
+
+it("focuses the inline panel app iframe when the pointer enters it", () => {
+  render(
+    <ChatInlinePanelAppCard
+      panelApp={{
+        appId: "weather-card",
+        title: "Weather",
+      }}
+    />,
+  );
 
-  const iframe = screen.getByTitle('Weather') as HTMLIFrameElement;
-  const iframeFocus = vi.spyOn(iframe, 'focus');
-  const contentWindowFocus = vi.spyOn(iframe.contentWindow!, 'focus').mockImplementation(() => undefined);
+  const iframe = screen.getByTitle("Weather") as HTMLIFrameElement;
+  const iframeFocus = vi.spyOn(iframe, "focus");
+  const contentWindowFocus = vi
+    .spyOn(iframe.contentWindow!, "focus")
+    .mockImplementation(() => undefined);
 
   fireEvent.pointerOver(iframe);
 
-  expect(iframe.getAttribute('tabindex')).toBe('0');
+  expect(iframe.getAttribute("tabindex")).toBe("0");
   expect(iframeFocus).toHaveBeenCalledWith({ preventScroll: true });
   expect(contentWindowFocus).toHaveBeenCalled();
 });
 
-it('can render inline panel apps without a side-panel expand action', () => {
+it("can render inline panel apps without a side-panel expand action", () => {
   render(
     <ChatInlinePanelAppCard
       panelApp={{
-        appId: 'weather-card',
-        title: 'Weather',
+        appId: "weather-card",
+        title: "Weather",
       }}
       showExpandAction={false}
     />,
   );
 
-  expect(screen.getByTitle('Weather')).toBeTruthy();
-  expect(screen.queryByLabelText('chatPanelCardExpand')).toBeNull();
+  expect(screen.getByTitle("Weather")).toBeTruthy();
+  expect(screen.queryByLabelText("chatPanelCardExpand")).toBeNull();
+  expect(
+    document.querySelector('[data-chat-inline-content-actions="true"]'),
+  ).toBeNull();
   expect(mocks.open).not.toHaveBeenCalled();
   expect(mocks.openTarget).not.toHaveBeenCalled();
 });

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

@@ -1,8 +1,28 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { isValidElement } from "react";
+import { isValidElement, type ComponentProps, useRef } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
-import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { ChatMessageListContainer as RuntimeChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+
+function ChatMessageListContainer({
+  sessionKey = "session-1",
+  ...props
+}: Omit<
+  ComponentProps<typeof RuntimeChatMessageListContainer>,
+  "sessionKey" | "scrollRef"
+> & {
+  sessionKey?: string | null;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  return (
+    <RuntimeChatMessageListContainer
+      {...props}
+      scrollRef={scrollRef}
+      sessionKey={sessionKey}
+    />
+  );
+}
 
 const captures = vi.hoisted(() => ({
   renders: [] as Array<{
@@ -11,6 +31,7 @@ const captures = vi.hoisted(() => ({
     onFileOpen?: (action: unknown) => void;
     onAttachmentOpen?: (file: unknown) => void;
     onInlineTokenClick?: (token: unknown) => void;
+    assistantAvatarIcon?: unknown;
     renderInlineDisplay?: (display: unknown) => unknown;
     renderPanelAppCard?: (panelApp: unknown) => unknown;
     texts?: Record<string, unknown>;
@@ -20,7 +41,12 @@ const captures = vi.hoisted(() => ({
   handleToolAction: vi.fn(),
   showContent: vi.fn(),
   filePreviewProps: [] as Array<{ showBreadcrumbs?: boolean }>,
-  selectedSession: null as null | { projectRoot: string; workingDir?: string | null },
+  selectedSessionKeys: [] as Array<string | null>,
+  selectedSession: null as null | {
+    projectRoot: string;
+    workingDir?: string | null;
+    sessionType?: string;
+  },
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -33,6 +59,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
       onFileOpen?: (action: unknown) => void;
       onAttachmentOpen?: (file: unknown) => void;
       onInlineTokenClick?: (token: unknown) => void;
+      assistantAvatarIcon?: unknown;
       renderInlineDisplay?: (display: unknown) => unknown;
       renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
@@ -43,6 +70,24 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
   };
 });
 
+vi.mock(
+  "@/features/chat/features/message/hooks/use-chat-message-virtualizer",
+  () => ({
+    useChatMessageVirtualizer: ({
+      rows,
+    }: {
+      rows: Array<{ key: string }>;
+    }) => ({
+      containerRef: vi.fn(),
+      virtualizer: {
+        getVirtualItems: () =>
+          rows.map((_, index) => ({ index, start: index * 180 })),
+        measureElement: vi.fn(),
+      },
+    }),
+  }),
+);
+
 vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   usePresenter: () => ({
     chatThreadManager: {
@@ -55,9 +100,15 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
   }),
 }));
 
-vi.mock("@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state", () => ({
-  useNcpChatSelectedSession: () => captures.selectedSession,
-}));
+vi.mock(
+  "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state",
+  () => ({
+    useNcpChatSelectedSession: (sessionKey: string | null) => {
+      captures.selectedSessionKeys.push(sessionKey);
+      return captures.selectedSession;
+    },
+  }),
+);
 
 vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
@@ -71,9 +122,7 @@ vi.mock("@/shared/lib/i18n", () => ({
 vi.mock(
   "@/features/chat/features/workspace/components/chat-session-workspace-file-preview",
   () => ({
-    ChatSessionWorkspaceFilePreview: (props: {
-      showBreadcrumbs?: boolean;
-    }) => {
+    ChatSessionWorkspaceFilePreview: (props: { showBreadcrumbs?: boolean }) => {
       captures.filePreviewProps.push(props);
       return <div data-testid="inline-workspace-file-preview" />;
     },
@@ -87,7 +136,9 @@ beforeEach(() => {
   captures.handleToolAction.mockReset();
   captures.showContent.mockReset();
   captures.filePreviewProps = [];
+  captures.selectedSessionKeys = [];
   captures.selectedSession = null;
+  useChatQueryStore.setState({ snapshot: {} });
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -104,8 +155,9 @@ it("reuses adapted message references when the source message object is unchange
     <ChatMessageListContainer messages={[message]} isSending={false} />,
   );
 
-  const firstMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const firstMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
 
   rerender(<ChatMessageListContainer messages={[message]} isSending={false} />);
 
@@ -140,13 +192,15 @@ it("keeps historical adapted message references stable when only the streaming m
     />,
   );
 
-  const firstMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const firstMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
   const nextStreamingMessage = {
     ...firstStreamingMessage,
     parts: [{ type: "text", text: "hello world" }],
   } satisfies NcpMessage;
 
+  captures.renders = [];
   rerender(
     <ChatMessageListContainer
       messages={[historicalMessage, nextStreamingMessage]}
@@ -154,8 +208,9 @@ it("keeps historical adapted message references stable when only the streaming m
     />,
   );
 
-  const secondMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const secondMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
 
   expect(secondMessages[0]).toBe(firstMessages[0]);
   expect(secondMessages[1]).not.toBe(firstMessages[1]);
@@ -183,8 +238,9 @@ it("adapts persisted inline token metadata into markdown token data", () => {
 
   render(<ChatMessageListContainer messages={[message]} isSending={false} />);
 
-  const renderedMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const renderedMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
   expect(renderedMessages[0]).toMatchObject({
     parts: [
       {
@@ -245,8 +301,9 @@ it("adds a completed assistant process summary without inventing a duration", ()
     />,
   );
 
-  const renderedMessages =
-    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  const renderedMessages = captures.renders.flatMap(
+    (rendered) => rendered.messages,
+  );
   expect(renderedMessages[1]).toMatchObject({
     processSummary: {
       label: "chatProcessSummaryProcessed",
@@ -301,6 +358,67 @@ it("derives completed assistant process duration from message lifecycle", () =>
   });
 });
 
+it("projects ai execution metadata into the assistant message footer summary", () => {
+  const assistantMessage = {
+    id: "assistant-execution",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-31T10:01:03.000Z",
+    parts: [{ type: "text", text: "Done." }],
+    metadata: {
+      ai_execution: {
+        version: 1,
+        runId: "run-1",
+        runtimeId: "native",
+        model: "openai/gpt-5",
+        requestedModel: null,
+        outcome: "completed",
+        usage: {
+          inputTokens: 1_200,
+          outputTokens: 200,
+          cachedInputTokens: 500,
+          totalTokens: 1_400,
+          modelCallCount: 1,
+          reportedModelCallCount: 1,
+          status: "reported",
+        },
+      },
+    },
+  } satisfies NcpMessage;
+
+  render(
+    <ChatMessageListContainer
+      messages={[assistantMessage]}
+      isSending={false}
+    />,
+  );
+
+  const renderedMessages =
+    captures.renders[captures.renders.length - 1]?.messages ?? [];
+  expect(renderedMessages[0]).toMatchObject({
+    executionSummaryLabel:
+      "openai/gpt-5 · 1.2k chatAiExecutionInput / 200 chatAiExecutionOutput",
+    moreActions: {
+      triggerLabel: "chatMessageMoreActions",
+      items: [
+        {
+          key: "ai-execution-metadata",
+          label: "chatAiExecutionViewMetadata",
+          dialog: {
+            rows: expect.arrayContaining([
+              {
+                label: "chatAiExecutionCachedInputTokens",
+                value: "500",
+              },
+            ]),
+          },
+        },
+      ],
+    },
+  });
+});
+
 it("wires markdown file link actions to the workspace file preview manager", () => {
   const message = {
     id: "assistant-file-link",
@@ -333,7 +451,8 @@ it("opens workspace file and directory tokens from the message", () => {
     workingDir: "/tmp/project/packages/ui",
   };
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
-  const onInlineTokenClick = captures.renders[captures.renders.length - 1]?.onInlineTokenClick;
+  const onInlineTokenClick =
+    captures.renders[captures.renders.length - 1]?.onInlineTokenClick;
 
   onInlineTokenClick?.({
     kind: "workspace_file",
@@ -556,6 +675,54 @@ it("passes the inline panel app renderer to the shared chat UI", () => {
   ).toEqual(expect.any(Function));
 });
 
+it("passes the rendered session runtime icon to assistant messages", () => {
+  captures.selectedSession = {
+    projectRoot: "/tmp/project",
+    sessionType: "codex",
+  };
+  useChatQueryStore.setState({
+    snapshot: {
+      sessionTypesQuery: {
+        data: {
+          defaultType: "native",
+          options: [
+            {
+              value: "codex",
+              label: "Codex",
+              icon: {
+                kind: "image",
+                src: "https://example.com/codex.png",
+                alt: "Codex",
+              },
+            },
+          ],
+        },
+      } as never,
+    },
+  });
+
+  render(
+    <ChatMessageListContainer
+      messages={[]}
+      isSending={false}
+      sessionKey="session-codex"
+    />,
+  );
+
+  expect(captures.selectedSessionKeys).toContain("session-codex");
+
+  const assistantAvatarIcon =
+    captures.renders[captures.renders.length - 1]?.assistantAvatarIcon;
+  if (!isValidElement(assistantAvatarIcon)) {
+    throw new Error("Expected the runtime assistant avatar icon");
+  }
+  render(assistantAvatarIcon);
+
+  expect(
+    screen.getByRole("img", { name: "Codex logo" }).getAttribute("src"),
+  ).toBe("https://example.com/codex.png");
+});
+
 it("connects inline HTML actions to the chat thread manager", () => {
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
 

package/src/features/chat/features/message/components/chat-inline-content-surface.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { cn } from "@/shared/lib/utils";
+
+const INLINE_CONTENT_MIN_HEIGHT = 240;
+
+export function ChatInlineContentSurface({
+  actions,
+  children,
+  contentHeight,
+  isLoading = false,
+}: {
+  actions?: ReactNode;
+  children: ReactNode;
+  contentHeight?: number | null;
+  isLoading?: boolean;
+}) {
+  return (
+    <section
+      className="group/inline-content relative my-2 w-full max-w-[48rem] overflow-visible"
+      data-chat-inline-content-surface="true"
+      data-chat-message-wide-content="true"
+    >
+      {actions ? (
+        <div
+          className={cn(
+            "pointer-events-none absolute bottom-full left-1/2 z-10 -translate-x-1/2 pb-2 opacity-0 transition-opacity duration-150",
+            "group-hover/inline-content:pointer-events-auto group-hover/inline-content:opacity-100 group-focus-within/inline-content:pointer-events-auto group-focus-within/inline-content:opacity-100",
+          )}
+          data-chat-inline-content-actions="true"
+        >
+          <div
+            className="flex items-center gap-0.5 rounded-lg bg-background/95 p-0.5 shadow-md ring-1 ring-border/60 backdrop-blur-sm"
+            data-chat-inline-content-actions-surface="true"
+          >
+            {actions}
+          </div>
+        </div>
+      ) : null}
+      <div
+        className={cn(
+          "h-[240px] min-h-[240px] max-h-[min(90vh,1440px)] overflow-hidden rounded-lg",
+          isLoading && "animate-pulse bg-muted/45",
+        )}
+        data-chat-inline-content-viewport="true"
+        style={
+          contentHeight
+            ? { height: Math.max(INLINE_CONTENT_MIN_HEIGHT, contentHeight) }
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </section>
+  );
+}