@nextclaw/ui 0.15.9 → 0.15.11

package/src/features/chat/features/message/hooks/__tests__/use-chat-message-virtualizer.test.tsx

@@ -0,0 +1,163 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useChatMessageVirtualizer } from "@/features/chat/features/message/hooks/use-chat-message-virtualizer";
+
+describe("useChatMessageVirtualizer", () => {
+  it("starts from the estimated end before the first measured paint", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      clientHeight: { configurable: true, value: 800 },
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    scrollElement.scrollTo = vi.fn((options) => {
+      if (typeof options === "object" && options.top !== undefined) {
+        scrollElement.scrollTop = options.top;
+      }
+    });
+    const rows = Array.from({ length: 80 }, (_, index) => ({
+      key: `message:${index}`,
+    }));
+    const { result } = renderHook(() =>
+      useChatMessageVirtualizer({
+        rows,
+        scrollRef: { current: scrollElement },
+      }),
+    );
+
+    await waitFor(() =>
+      expect(result.current.virtualizer.getVirtualItems().at(-1)?.index).toBe(79),
+    );
+    expect(result.current.virtualizer.scrollOffset).toBe(14_400);
+  });
+
+  it("keeps the same visible row anchored when earlier rows are prepended", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      clientHeight: { configurable: true, value: 800 },
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    scrollElement.getBoundingClientRect = () => ({
+      bottom: 800,
+      height: 800,
+      left: 0,
+      right: 800,
+      top: 0,
+      width: 800,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    scrollElement.scrollTo = vi.fn((options) => {
+      if (typeof options === "object" && options.top !== undefined) {
+        scrollElement.scrollTop = options.top;
+      }
+    });
+    const initialRows = Array.from({ length: 80 }, (_, index) => ({
+      key: `message:${index + 80}`,
+    }));
+    const { rerender, result } = renderHook(
+      ({ rows }) =>
+        useChatMessageVirtualizer({
+          rows,
+          scrollRef: { current: scrollElement },
+        }),
+      { initialProps: { rows: initialRows } },
+    );
+    scrollElement.scrollTop = 900;
+    act(() => scrollElement.dispatchEvent(new Event("scroll")));
+    await waitFor(() => expect(result.current.virtualizer.scrollOffset).toBe(900));
+    const anchor = result.current.virtualizer.getVirtualItemForOffset(900);
+
+    rerender({
+      rows: Array.from({ length: 160 }, (_, index) => ({
+        key: `message:${index}`,
+      })),
+    });
+
+    await waitFor(() =>
+      expect(scrollElement.scrollTop).toBeGreaterThan(900),
+    );
+    const anchored = result.current.virtualizer.getVirtualItemForOffset(
+      scrollElement.scrollTop,
+    );
+    expect(anchored?.key).toBe(anchor?.key);
+    expect(scrollElement.scrollTop - (anchored?.start ?? 0)).toBe(
+      900 - (anchor?.start ?? 0),
+    );
+  });
+
+  it("keeps mounted rows bounded while pinning the active row", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      clientHeight: { configurable: true, value: 800 },
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollHeight: { configurable: true, value: 18_000 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    scrollElement.getBoundingClientRect = () => ({
+      bottom: 800,
+      height: 800,
+      left: 0,
+      right: 800,
+      top: 0,
+      width: 800,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    const rows = Array.from({ length: 10_000 }, (_, index) => ({
+      key: `message:${index}`,
+    }));
+    const { result } = renderHook(() =>
+      useChatMessageVirtualizer({
+        rows,
+        scrollRef: { current: scrollElement },
+        activeRowKey: "message:9999",
+      }),
+    );
+    await waitFor(() => {
+      expect(result.current.virtualizer.getVirtualItems().length).toBeGreaterThan(0);
+    });
+    const indexes = result.current.virtualizer
+      .getVirtualItems()
+      .map((item) => item.index);
+
+    expect(indexes.length).toBeLessThan(30);
+    expect(indexes).toContain(9_999);
+  });
+
+  it("remeasures a row when dynamic content changes its height", async () => {
+    const scrollElement = document.createElement("div");
+    Object.defineProperties(scrollElement, {
+      offsetHeight: { configurable: true, value: 800 },
+      offsetWidth: { configurable: true, value: 800 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    });
+    const { result } = renderHook(() =>
+      useChatMessageVirtualizer({
+        rows: [{ key: "message:1" }],
+        scrollRef: { current: scrollElement },
+      }),
+    );
+    await waitFor(() =>
+      expect(result.current.virtualizer.getVirtualItems()).toHaveLength(1),
+    );
+    const row = document.createElement("div");
+    row.dataset.index = "0";
+    Object.defineProperty(row, "offsetHeight", {
+      configurable: true,
+      value: 420,
+    });
+    document.body.appendChild(row);
+
+    act(() => result.current.virtualizer.measureElement(row));
+
+    expect(result.current.virtualizer.getTotalSize()).toBe(420);
+    row.remove();
+  });
+});

package/src/features/chat/features/message/hooks/use-chat-message-virtualizer.ts

@@ -0,0 +1,68 @@
+import { useCallback, useMemo, useRef, type RefObject } from "react";
+import {
+  defaultRangeExtractor,
+  elementScroll,
+  useVirtualizer,
+} from "@tanstack/react-virtual";
+
+type ChatMessageVirtualRow = {
+  key: string;
+};
+
+const ESTIMATED_CHAT_MESSAGE_ROW_HEIGHT = 180;
+
+export function useChatMessageVirtualizer(params: {
+  rows: readonly ChatMessageVirtualRow[];
+  scrollRef: RefObject<HTMLDivElement | null>;
+  activeRowKey?: string | null;
+  focusedRowKey?: string | null;
+}) {
+  const { activeRowKey, focusedRowKey, rows, scrollRef } = params;
+  const pinnedIndexes = useMemo(
+    () =>
+      rows.flatMap((row, index) =>
+        row.key === activeRowKey || row.key === focusedRowKey ? [index] : [],
+      ),
+    [activeRowKey, focusedRowKey, rows],
+  );
+  const rangeExtractor = useCallback(
+    (range: Parameters<typeof defaultRangeExtractor>[0]) =>
+      [...new Set([...defaultRangeExtractor(range), ...pinnedIndexes])].sort(
+        (left, right) => left - right,
+      ),
+    [pinnedIndexes],
+  );
+  const sizeContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // TanStack Virtual intentionally exposes imperative measurement methods;
+  // this hook does not pass the returned virtualizer through memoized owners.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const virtualizer = useVirtualizer({
+    anchorTo: "end",
+    count: rows.length,
+    directDomUpdates: true,
+    estimateSize: () => ESTIMATED_CHAT_MESSAGE_ROW_HEIGHT,
+    getItemKey: (index) => rows[index]?.key ?? index,
+    getScrollElement: () => scrollRef.current,
+    initialOffset: () => rows.length * ESTIMATED_CHAT_MESSAGE_ROW_HEIGHT,
+    initialRect: { width: 0, height: 800 },
+    overscan: 8,
+    rangeExtractor,
+    scrollToFn: (offset, options, instance) => {
+      const sizeContainer = sizeContainerRef.current;
+      if (sizeContainer) {
+        sizeContainer.style.height = `${instance.getTotalSize()}px`;
+      }
+      elementScroll(offset, options, instance);
+    },
+  });
+  const containerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      sizeContainerRef.current = node;
+      virtualizer.containerRef(node);
+    },
+    [virtualizer],
+  );
+
+  return { containerRef, virtualizer };
+}

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

@@ -0,0 +1,188 @@
+import { describe, expect, it } from "vitest";
+import type { NcpMessage } from "@nextclaw/ncp";
+import {
+  buildChatMessageExecutionPresentation,
+  buildChatMessageExecutionSummary,
+} from "@/features/chat/features/message/utils/chat-message-execution-summary.utils";
+
+const labels = {
+  input: "input",
+  output: "output",
+  tokens: "tokens",
+  partial: "partial usage",
+  unavailable: "Token usage unavailable",
+};
+
+const presentationLabels = {
+  ...labels,
+  moreActions: "More actions",
+  viewMetadata: "View run metadata",
+  metadataTitle: "AI run metadata",
+  metadataDescription: "Runtime facts",
+  close: "Close",
+  notAvailable: "Not available",
+  fields: {
+    runId: "Run ID",
+    runtime: "Runtime",
+    model: "Model",
+    requestedModel: "Requested model",
+    outcome: "Outcome",
+    inputTokens: "Input tokens",
+    outputTokens: "Output tokens",
+    cachedInputTokens: "Cached input tokens",
+    totalTokens: "Total tokens",
+    modelCallCount: "Model calls",
+    reportedModelCallCount: "Calls with reported usage",
+    usageStatus: "Usage status",
+  },
+  outcomes: {
+    completed: "Completed",
+    failed: "Failed",
+    aborted: "Aborted",
+  },
+  usageStatuses: {
+    reported: "Reported",
+    partial: "Partial",
+    unavailable: "Unavailable",
+  },
+};
+
+function createMessage(aiExecution: unknown): NcpMessage {
+  return {
+    id: "assistant-1",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-07-18T00:00:00.000Z",
+    parts: [{ type: "text", text: "done" }],
+    metadata: { ai_execution: aiExecution },
+  };
+}
+
+describe("buildChatMessageExecutionSummary", () => {
+  it("formats reported input and output usage with the resolved model", () => {
+    expect(
+      buildChatMessageExecutionSummary({
+        message: createMessage({
+          version: 1,
+          runId: "run-1",
+          runtimeId: "native",
+          model: "openai/gpt-5",
+          requestedModel: null,
+          outcome: "completed",
+          usage: {
+            inputTokens: 143_000,
+            outputTokens: 307,
+            cachedInputTokens: 8_000,
+            totalTokens: 143_307,
+            modelCallCount: 1,
+            reportedModelCallCount: 1,
+            status: "reported",
+          },
+        }),
+        labels,
+      }),
+    ).toBe("openai/gpt-5 · 143k input / 307 output");
+  });
+
+  it("shows partial and unavailable states without inventing zero usage", () => {
+    const base = {
+      version: 1,
+      runId: "run-1",
+      runtimeId: "codex",
+      model: "gpt-5",
+      requestedModel: null,
+      outcome: "failed",
+    };
+    expect(
+      buildChatMessageExecutionSummary({
+        message: createMessage({
+          ...base,
+          usage: {
+            inputTokens: 2_000,
+            outputTokens: null,
+            cachedInputTokens: null,
+            totalTokens: null,
+            modelCallCount: 2,
+            reportedModelCallCount: 1,
+            status: "partial",
+          },
+        }),
+        labels,
+      }),
+    ).toBe("gpt-5 · 2k input · partial usage");
+    expect(
+      buildChatMessageExecutionSummary({
+        message: createMessage({
+          ...base,
+          usage: {
+            inputTokens: null,
+            outputTokens: null,
+            cachedInputTokens: null,
+            totalTokens: null,
+            modelCallCount: null,
+            reportedModelCallCount: null,
+            status: "unavailable",
+          },
+        }),
+        labels,
+      }),
+    ).toBe("gpt-5 · Token usage unavailable");
+  });
+
+  it("keeps cached and exact token counts in the metadata detail action", () => {
+    const presentation = buildChatMessageExecutionPresentation({
+      message: createMessage({
+        version: 1,
+        runId: "run-1",
+        runtimeId: "native",
+        model: "openai/gpt-5",
+        requestedModel: null,
+        outcome: "completed",
+        usage: {
+          inputTokens: 143_000,
+          outputTokens: 307,
+          cachedInputTokens: 128_000,
+          totalTokens: 143_307,
+          modelCallCount: 2,
+          reportedModelCallCount: 2,
+          status: "reported",
+        },
+      }),
+      labels: presentationLabels,
+    });
+
+    expect(presentation?.summaryLabel).toBe(
+      "openai/gpt-5 · 143k input / 307 output",
+    );
+    expect(presentation?.moreActions).toMatchObject({
+      triggerLabel: "More actions",
+      items: [
+        {
+          label: "View run metadata",
+          dialog: {
+            rows: expect.arrayContaining([
+              { label: "Cached input tokens", value: "128k (128000)" },
+              { label: "Total tokens", value: "143.3k (143307)" },
+            ]),
+          },
+        },
+      ],
+    });
+  });
+
+  it("ignores missing, malformed, and non-assistant metadata", () => {
+    expect(
+      buildChatMessageExecutionSummary({
+        message: createMessage({ version: 1 }),
+        labels,
+      }),
+    ).toBeNull();
+    expect(
+      buildChatMessageExecutionSummary({
+        message: { ...createMessage(null), role: "user" },
+        labels,
+      }),
+    ).toBeNull();
+  });
+});

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

@@ -1,5 +1,8 @@
 import { expect, it, vi } from "vitest";
-import { buildChatMessageTexts } from "@/features/chat/features/message/utils/chat-message-texts.utils";
+import {
+  buildChatMessageExecutionLabels,
+  buildChatMessageTexts,
+} from "@/features/chat/features/message/utils/chat-message-texts.utils";
 
 vi.mock("@/shared/lib/i18n", () => ({
   t: (key: string) => key,
@@ -21,3 +24,13 @@ it("provides localized status keys for built-in tool categories", () => {
     },
   });
 });
+
+it("provides localized labels for the AI execution metadata action", () => {
+  expect(buildChatMessageExecutionLabels("zh")).toMatchObject({
+    moreActions: "chatMessageMoreActions",
+    viewMetadata: "chatAiExecutionViewMetadata",
+    fields: {
+      cachedInputTokens: "chatAiExecutionCachedInputTokens",
+    },
+  });
+});

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

@@ -57,6 +57,39 @@ it("maps markdown, reasoning, and tool parts into UI view models", () => {
   });
 });
 
+it("preserves the prepared execution summary on the message view model", () => {
+  const adapted = adapt([{
+    id: "assistant-execution",
+    role: "assistant",
+    meta: {
+      executionSummaryLabel: "openai/gpt-5 · 120 input / 30 output",
+      moreActions: {
+        triggerLabel: "More actions",
+        items: [
+          {
+            key: "metadata",
+            label: "View metadata",
+            dialog: {
+              title: "Metadata",
+              closeLabel: "Close",
+              rows: [{ label: "Model", value: "openai/gpt-5" }],
+            },
+          },
+        ],
+      },
+    },
+    parts: [{ type: "text", text: "done" }],
+  }]);
+
+  expect(adapted[0]?.executionSummaryLabel).toBe(
+    "openai/gpt-5 · 120 input / 30 output",
+  );
+  expect(adapted[0]?.moreActions?.items[0]?.dialog.rows[0]).toEqual({
+    label: "Model",
+    value: "openai/gpt-5",
+  });
+});
+
 it("maps tool lifecycle statuses into visible card state feedback", () => {
   const adapted = adapt([
     {

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

@@ -1,21 +1,36 @@
 import {
   createPanelAppResourceUri,
   RIGHT_PANEL_PANEL_APP_TAB_KIND,
-} from '@/features/right-panel-resources';
-import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
-
-const PANEL_APP_INLINE_CARD_SEARCH_PARAMS = {
-  nextclawDisplayMode: 'card',
-  nextclawPlacement: 'inline',
-} as const;
+} from "@/features/right-panel-resources";
+import { PANEL_APP_INLINE_HOST_CONTRACT } from "@nextclaw/shared";
+import type { DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
 
 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()}`;
+  const separator = url.includes("?") ? "&" : "?";
+  return `${url}${separator}${new URLSearchParams({
+    [PANEL_APP_INLINE_HOST_CONTRACT.displayModeSearchParam]:
+      PANEL_APP_INLINE_HOST_CONTRACT.displayMode,
+    [PANEL_APP_INLINE_HOST_CONTRACT.placementSearchParam]:
+      PANEL_APP_INLINE_HOST_CONTRACT.placement,
+  }).toString()}`;
+}
+
+export function readInlinePanelAppContentHeight(value: unknown): number | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const message = value as { height?: unknown; type?: unknown };
+  return message.type ===
+    PANEL_APP_INLINE_HOST_CONTRACT.contentHeightMessageType &&
+    typeof message.height === "number" &&
+    Number.isFinite(message.height) &&
+    message.height > 0
+    ? Math.ceil(message.height)
+    : null;
 }
 
 export function createInlinePanelAppTab(params: {