@nextclaw/ui 0.18.3 → 0.19.0

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -15,6 +15,7 @@ import { ChatConversationTrack } from "@/features/chat/components/conversation/c
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { t } from "@/shared/lib/i18n";
+import type { SessionMessageToolPayloadState } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
 type ChatConversationContentProps = {
   bottomSlot?: ReactNode;
@@ -27,9 +28,11 @@ type ChatConversationContentProps = {
   isSending: boolean;
   messageActionsDisabled?: boolean;
   messages: readonly NcpMessage[];
+  messageDetailStates?: Readonly<Record<string, SessionMessageToolPayloadState>>;
   sessionKey: string | null;
   showWelcome: boolean;
   onLoadPreviousMessages: () => Promise<void>;
+  onLoadMessageDetails?: (messageId: string) => Promise<void>;
   onContinueRun?: () => Promise<void> | void;
   onEditMessage?: (payload: {
     readonly message: NcpMessage;
@@ -49,9 +52,11 @@ export function ChatConversationContent({
   isSending,
   messageActionsDisabled = false,
   messages,
+  messageDetailStates,
   sessionKey,
   showWelcome,
   onLoadPreviousMessages,
+  onLoadMessageDetails,
   onContinueRun,
   onEditMessage,
   welcomeSlot,
@@ -121,10 +126,12 @@ export function ChatConversationContent({
                 <ChatMessageListContainer
                   canContinue={canContinue}
                   messages={messages}
+                  messageDetailStates={messageDetailStates}
                   isSending={isSending}
                   messageActionsDisabled={messageActionsDisabled}
                   onContinueRun={onContinueRun}
                   onEditMessage={onEditMessage}
+                  onLoadMessageDetails={onLoadMessageDetails}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
                 />

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -7,7 +7,8 @@ import { MarketplacePage } from "@/features/marketplace";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { ChatMobileShell } from "@/platforms/mobile";
 import { InboxPage } from "@/features/inbox";
-export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox";
+import { PanelAppMainPage } from "@/features/panel-apps";
+export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app";
 export type ChatPageProps = {
   view: MainPanelView;
 };
@@ -48,6 +49,8 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
             <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
               <InboxPage />
             </div>
+          ) : view === "panel-app" ? (
+            <PanelAppMainPage />
           ) : view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -25,6 +25,7 @@ import {
 import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
+import { PanelAppMainSidebarNav } from "@/features/panel-apps";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import {
@@ -108,28 +109,31 @@ export function ChatSidebarDesktopNav({
 }) {
   const unreadCount = useInboxUnreadCount();
   return (
-    <div className={cn("pb-1", isCollapsed ? "px-0" : "px-3")}>
-      <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
-        {navItems.map((item) => (
-          <li
-            key={item.target}
-            className={isCollapsed ? "flex justify-center" : undefined}
-          >
-            <SidebarNavLinkItem
-              to={item.target}
-              label={item.label()}
-              icon={item.icon}
-              density="compact"
-              collapsed={isCollapsed}
-              indicator={item.target === "/inbox" && unreadCount > 0}
-              trailing={item.target === "/inbox" && unreadCount > 0
-                ? unreadCount > 99 ? "99+" : unreadCount
-                : undefined}
-              className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
-            />
-          </li>
-        ))}
-      </ul>
+    <div className="pb-1">
+      <div className={isCollapsed ? "px-0" : "px-3"}>
+        <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
+          {navItems.map((item) => (
+            <li
+              key={item.target}
+              className={isCollapsed ? "flex justify-center" : undefined}
+            >
+              <SidebarNavLinkItem
+                to={item.target}
+                label={item.label()}
+                icon={item.icon}
+                density="compact"
+                collapsed={isCollapsed}
+                indicator={item.target === "/inbox" && unreadCount > 0}
+                trailing={item.target === "/inbox" && unreadCount > 0
+                  ? unreadCount > 99 ? "99+" : unreadCount
+                  : undefined}
+                className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <PanelAppMainSidebarNav isCollapsed={isCollapsed} />
     </div>
   );
 }

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -424,9 +424,11 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         )}
         bottomSlot={showWelcome ? null : conversationFailureSlot}
         messages={agent.visibleMessages}
+        messageDetailStates={agent.messageDetailStates}
         sessionKey={sessionKey}
         showWelcome={showWelcome}
         onLoadPreviousMessages={agent.loadPreviousMessages}
+        onLoadMessageDetails={agent.loadMessageDetails}
         onContinueRun={() => controllerRef.current.continueRun()}
         onEditMessage={(payload) => controllerRef.current.editMessage(payload)}
         welcomeSlot={

package/src/features/chat/features/input/input-surface-plugins/__tests__/context-reference-plugin.test.ts

@@ -23,6 +23,7 @@ function createPanelApp(): PanelAppEntryView {
     updatedAt: '2026-06-18T00:00:00.000Z',
     sizeBytes: 100,
     favorite: false,
+    mainSidebar: false,
     clientDeclared: false,
     clientGranted: false,
     openCount: 0,

package/src/features/chat/features/input/input-surface-plugins/__tests__/slash-command-plugin.test.ts

@@ -18,6 +18,7 @@ function createPanelApp(
     updatedAt: overrides.updatedAt ?? '2026-06-18T00:00:00.000Z',
     sizeBytes: overrides.sizeBytes ?? 100,
     favorite: overrides.favorite ?? false,
+    mainSidebar: overrides.mainSidebar ?? false,
     clientDeclared: overrides.clientDeclared ?? false,
     clientGranted: overrides.clientGranted ?? false,
     lastOpenedAt: overrides.lastOpenedAt,

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

@@ -102,13 +102,11 @@ export function ChatInlinePanelAppCard({
       getPresenter().panelAppBridgeManager.handleIframeMessage({
         event,
         iframe: iframeRef.current,
-        iframeInstanceId,
-        tab,
       });
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [iframeInstanceId, tab, url]);
+  }, [url]);
 
   if (!url) {
     return (

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

@@ -61,12 +61,14 @@ import {
 import { useChatMessageActions } from "@/features/chat/features/message/hooks/use-chat-message-actions";
 import { useChatInlineTokenActions } from "@/features/chat/features/message/hooks/use-chat-inline-token-actions";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
-import { formatDateTime, t } from "@/shared/lib/i18n";
+import { formatDateTime, formatNumber, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
+import type { SessionMessageToolPayloadState } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
 type ChatMessageListContainerProps = {
   canContinue?: boolean;
   messages: readonly NcpMessage[];
+  messageDetailStates?: Readonly<Record<string, SessionMessageToolPayloadState>>;
   isSending: boolean;
   messageActionsDisabled?: boolean;
   onContinueRun?: () => Promise<void> | void;
@@ -74,6 +76,7 @@ type ChatMessageListContainerProps = {
     readonly message: NcpMessage;
     readonly messageId: string;
   }) => Promise<void> | void;
+  onLoadMessageDetails?: (messageId: string) => Promise<void>;
   sessionKey: string | null;
   scrollRef: RefObject<HTMLDivElement | null>;
   className?: string;
@@ -105,6 +108,13 @@ class ChatMessageViewModelAdapter {
       const processSummary = buildChatMessageProcessSummary({
         message,
         processedLabel,
+        formatDeferredToolSummary: (toolCallCount, toolNames) => {
+          const countLabel = t("chatProcessSummaryToolCalls", language)
+            .replace("{count}", formatNumber(toolCallCount, language));
+          if (toolNames.length === 0) return countLabel;
+          const separator = language === "zh" ? "、" : ", ";
+          return `${countLabel} · ${toolNames.join(separator)}`;
+        },
       });
       const processSummaryLabel = processSummary?.label ?? null;
       const executionPresentation = buildChatMessageExecutionPresentation({
@@ -199,10 +209,12 @@ function isAwaitingAssistantOutputRow(
 export function ChatMessageListContainer({
   canContinue = false,
   messages: rawMessages,
+  messageDetailStates,
   isSending,
   messageActionsDisabled = false,
   onContinueRun,
   onEditMessage,
+  onLoadMessageDetails,
   scrollRef,
   sessionKey,
   className,
@@ -414,6 +426,8 @@ export function ChatMessageListContainer({
                   onAttachmentOpen={handleAttachmentOpen}
                   onInlineTokenClick={handleInlineTokenClick}
                   onMessageAction={handleMessageAction}
+                  resolveMessageToolPayloadState={(messageId) => messageDetailStates?.[messageId]}
+                  onMessageToolPayloadRequest={onLoadMessageDetails}
                   resolveFileContentUrl={resolveFileContentUrl}
                   renderCustomPart={renderCustomPart}
                   renderInlineDisplay={renderInlineDisplayWithFiles}

package/src/features/chat/features/message/components/chat-tool-call-stress-harness.tsx

@@ -0,0 +1,178 @@
+import { Profiler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChatMessageList, type ChatMessageTexts } from "@nextclaw/agent-chat-ui";
+import {
+  createChatToolCallStressViewModel,
+  DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG,
+  type ChatToolCallStressConfig,
+} from "@/features/chat/features/message/utils/chat-tool-call-stress-fixture.utils";
+
+type StressMetric = {
+  action: string;
+  commitMs: number;
+  nextFrameMs: number;
+};
+
+declare global {
+  interface Window {
+    __nextclawChatToolStress?: {
+      latestMetric: StressMetric | null;
+      config: ChatToolCallStressConfig;
+    };
+  }
+}
+
+const STRESS_TEXTS: ChatMessageTexts = {
+  copyCodeLabel: "Copy",
+  copiedCodeLabel: "Copied",
+  copyMessageLabel: "Copy",
+  copiedMessageLabel: "Copied",
+  typingLabel: "Thinking…",
+  toolActivitySegmentTemplates: {
+    read: { one: "Read 1 file", other: "Read {count} files" },
+    edit: { one: "Edit 1 file", other: "Edit {count} files" },
+    directory: { one: "View 1 directory", other: "View {count} directories" },
+    search: { one: "Search 1 time", other: "Search {count} times" },
+    bash: { one: "Run 1 command", other: "Run {count} commands" },
+    web: { one: "Open 1 page", other: "Open {count} pages" },
+    agent: { one: "Start 1 subtask", other: "Start {count} subtasks" },
+    panel: { one: "Show 1 result", other: "Show {count} results" },
+    other: { one: "Use 1 tool", other: "Use {count} tools" },
+  },
+  toolActivityFailedLabel: "failed",
+  toolActivityCancelledLabel: "cancelled",
+};
+
+function readBoundedNumber(value: string, fallback: number, maximum: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed)
+    ? Math.max(1, Math.min(maximum, Math.round(parsed)))
+    : fallback;
+}
+
+export function ChatToolCallStressHarness() {
+  const [config, setConfig] = useState(DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG);
+  const [renderVersion, setRenderVersion] = useState(0);
+  const [metric, setMetric] = useState<StressMetric | null>(null);
+  const pendingMeasurement = useRef<{ action: string; startedAt: number } | null>(null);
+  const viewModel = useMemo(
+    () => createChatToolCallStressViewModel(config, `chat-tool-call-stress-message-${renderVersion}`),
+    [config, renderVersion],
+  );
+  const publishMetric = useCallback((nextMetric: StressMetric | null) => {
+    setMetric(nextMetric);
+    window.__nextclawChatToolStress = { latestMetric: nextMetric, config };
+  }, [config]);
+  const startMeasurement = useCallback((action: string, update: () => void) => {
+    pendingMeasurement.current = { action, startedAt: performance.now() };
+    update();
+  }, []);
+
+  useEffect(() => {
+    window.__nextclawChatToolStress = { latestMetric: metric, config };
+  }, [config, metric]);
+
+  return (
+    <main className="min-h-screen bg-background p-6 text-foreground">
+      <section className="mx-auto max-w-5xl space-y-5">
+        <header className="space-y-2">
+          <h1 className="text-xl font-semibold">Chat tool-call stress harness</h1>
+          <p className="max-w-3xl text-sm text-muted-foreground">
+            One assistant message with dense, nested NCP tool invocations. This data remains in the browser and is never written into a session.
+          </p>
+        </header>
+        <div className="grid gap-3 rounded-lg border border-border p-4 sm:grid-cols-3">
+          {([
+            ["toolCallCount", "Tool calls", 1_000],
+            ["argumentBytesPerCall", "Argument bytes / call", 65_536],
+            ["resultBytesPerCall", "Result bytes / call", 65_536],
+          ] as const).map(([key, label, maximum]) => (
+            <label key={key} className="grid gap-1 text-sm">
+              <span>{label}</span>
+              <input
+                aria-label={label}
+                className="rounded border border-input bg-background px-2 py-1"
+                min="1"
+                max={maximum}
+                type="number"
+                value={config[key]}
+                onChange={(event) => setConfig((current) => ({
+                  ...current,
+                  [key]: readBoundedNumber(event.target.value, current[key], maximum),
+                }))}
+              />
+            </label>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            className="rounded bg-primary px-3 py-1.5 text-sm text-primary-foreground"
+            onClick={() => startMeasurement("rerender", () => setRenderVersion((value) => value + 1))}
+          >
+            Re-render message
+          </button>
+          <button
+            type="button"
+            className="rounded border border-border px-3 py-1.5 text-sm"
+            onClick={() => {
+              const summary = Array.from(
+                document.querySelectorAll<HTMLButtonElement>("[data-chat-process-meta-row]"),
+              ).find((candidate) => candidate.parentElement?.classList.contains("group/tool-activity"));
+              if (!summary) return;
+              const startedAt = performance.now();
+              const observer = new MutationObserver(() => {
+                observer.disconnect();
+                requestAnimationFrame(() => publishMetric({
+                  action: summary.getAttribute("aria-expanded") === "true" ? "expand" : "collapse",
+                  commitMs: performance.now() - startedAt,
+                  nextFrameMs: performance.now() - startedAt,
+                }));
+              });
+              observer.observe(document.body, { childList: true, subtree: true });
+              summary.click();
+            }}
+          >
+            Toggle tool details
+          </button>
+          <button
+            type="button"
+            className="rounded border border-border px-3 py-1.5 text-sm"
+            onClick={() => startMeasurement("stream-update", () => setConfig((current) => ({
+              ...current,
+              resultBytesPerCall: Math.min(65_536, current.resultBytesPerCall + 1),
+            })))}
+          >
+            Simulate stream update
+          </button>
+        </div>
+        <output aria-live="polite" data-stress-metric="true" className="block rounded bg-muted px-3 py-2 font-mono text-xs">
+          {metric
+            ? `${metric.action}: commit ${metric.commitMs.toFixed(1)}ms, next frame ${metric.nextFrameMs.toFixed(1)}ms`
+            : "Run an action to record a browser metric."}
+        </output>
+        <Profiler
+          id="chat-tool-call-stress"
+          onRender={(_id, _phase, actualDuration) => {
+            const pending = pendingMeasurement.current;
+            if (!pending) return;
+            pendingMeasurement.current = null;
+            requestAnimationFrame(() => publishMetric({
+              action: pending.action,
+              commitMs: actualDuration,
+              nextFrameMs: performance.now() - pending.startedAt,
+            }));
+          }}
+        >
+          <section data-stress-message="true" className="rounded-lg border border-border p-4">
+            <ChatMessageList
+              messages={[viewModel]}
+              isSending={false}
+              hasAssistantDraft={false}
+              texts={STRESS_TEXTS}
+            />
+          </section>
+        </Profiler>
+      </section>
+    </main>
+  );
+}

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

@@ -66,4 +66,25 @@ describe("buildChatMessageProcessSummary", () => {
     expect(summary?.label.toLowerCase()).not.toContain("bash");
     expect(summary?.label.toLowerCase()).not.toContain("read");
   });
+
+  it("shows the bounded aggregate for a deferred history payload", () => {
+    const summary = buildChatMessageProcessSummary({
+      message: {
+        ...baseAssistantMessage,
+        metadata: {
+          nextclawUiHistoryToolPayloadSummary: {
+            toolCallCount: 500,
+            toolNames: ["exec_command", "read_file"],
+          },
+        },
+      },
+      processedLabel: "Processed",
+      formatDeferredToolSummary: (count, names) =>
+        `${count} tool calls · ${names.join(", ")}`,
+    });
+
+    expect(summary?.label).toBe(
+      "Processed · 500 tool calls · exec_command, read_file",
+    );
+  });
 });

package/src/features/chat/features/message/utils/__tests__/chat-tool-call-stress-fixture.utils.test.ts

@@ -0,0 +1,56 @@
+import { expect, it } from "vitest";
+import {
+  createChatToolCallStressMessage,
+  createChatToolCallStressViewModel,
+} from "@/features/chat/features/message/utils/chat-tool-call-stress-fixture.utils";
+
+it("builds one assistant message with dense nested NCP tool invocations", () => {
+  const message = createChatToolCallStressMessage({
+    toolCallCount: 120,
+    argumentBytesPerCall: 4_096,
+    resultBytesPerCall: 6_144,
+  });
+
+  expect(message.parts).toHaveLength(122);
+  const firstTool = message.parts[1];
+  expect(firstTool).toMatchObject({
+    type: "tool-invocation",
+    toolCallId: "stress-call-0",
+    state: "result",
+  });
+  expect(firstTool).toMatchObject({
+    args: {
+      request: {
+        nested: { levelOne: { levelTwo: { levelThree: { payload: expect.any(String) } } } },
+      },
+    },
+  });
+});
+
+it("adapts the stress message through the regular tool-card presentation path", () => {
+  const message = createChatToolCallStressViewModel({
+    toolCallCount: 120,
+    argumentBytesPerCall: 4_096,
+    resultBytesPerCall: 6_144,
+  });
+
+  const toolCards = message.parts.filter((part) => part.type === "tool-card");
+  expect(toolCards).toHaveLength(120);
+  expect(toolCards[0]).toMatchObject({
+    card: {
+      toolCallId: "stress-call-0",
+      input: undefined,
+      output: undefined,
+      inputData: {
+        request: {
+          metadata: { labels: expect.arrayContaining(["nested-payload"]) },
+        },
+      },
+      outputData: {
+        request: {
+          metadata: { labels: expect.arrayContaining(["nested-payload"]) },
+        },
+      },
+    },
+  });
+});

package/src/features/chat/features/message/utils/chat-message-core.utils.ts

@@ -93,7 +93,7 @@ export function summarizeToolArgs(args: unknown): string | undefined {
   if (items.length > 0) {
     return truncateInlineText(items.join(' · '), 120);
   }
-  return truncateInlineText(stringifyUnknown(parsed), 140);
+  return undefined;
 }
 
 function toToolName(value: unknown): string {

package/src/features/chat/features/message/utils/chat-message-part.utils.ts

@@ -1,7 +1,4 @@
-import {
-  stringifyUnknown,
-  summarizeToolArgs,
-} from "@/features/chat/features/message/utils/chat-message-core.utils";
+import { stringifyUnknown, summarizeToolArgs } 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,
@@ -9,7 +6,6 @@ import {
 } from "./chat-message-markdown-part.utils";
 import {
   buildToolCard,
-  buildToolInvocationInput,
   extractAssetFileView,
   isTerminalResultRecord,
   readOptionalNumber,
@@ -155,15 +151,12 @@ function buildToolInvocationPart(
   const detail = invalidArgsIssue
     ? `Invalid arguments: ${invalidArgsIssue}`
     : fileOperationCardData?.summary ?? summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
-  const input = fileOperationCardData ? undefined : buildToolInvocationInput(invocation.args, invocation.parsedArgs);
   const rawResult =
     invalidArgsIssue
       ? invalidArgsIssue
       : typeof invocation.error === "string" && invocation.error.trim()
       ? invocation.error.trim()
-      : invocation.result != null
-        ? stringifyUnknown(invocation.result).trim()
-        : "";
+      : "";
   const shouldHideStructuredTerminalJson =
     !invocation.error && isTerminalResultRecord(invocation.result);
   const shouldShowRawResult =
@@ -175,7 +168,7 @@ function buildToolInvocationPart(
     name: invocation.toolName,
     ...(agentId ? { agentId } : {}),
     detail,
-    ...(input ? { input } : {}),
+    inputData: fileOperationCardData ? undefined : invocation.parsedArgs ?? invocation.args,
     text: shouldShowRawResult && rawResult ? rawResult : undefined,
     outputData: invocation.result,
     callId: invocation.toolCallId || undefined,

package/src/features/chat/features/message/utils/chat-message-process-summary.utils.ts

@@ -4,8 +4,26 @@ import type { ChatMessageProcessSummarySource } from "@/features/chat/types/chat
 type BuildChatMessageProcessSummaryParams = {
   message: NcpMessage;
   processedLabel: string;
+  formatDeferredToolSummary?: (toolCallCount: number, toolNames: readonly string[]) => string;
 };
 
+const UI_HISTORY_TOOL_PAYLOAD_SUMMARY_METADATA_KEY =
+  "nextclawUiHistoryToolPayloadSummary";
+
+function readDeferredToolSummary(
+  message: NcpMessage,
+): { toolCallCount: number; toolNames: string[] } | null {
+  const value = message.metadata?.[UI_HISTORY_TOOL_PAYLOAD_SUMMARY_METADATA_KEY];
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const record = value as Record<string, unknown>;
+  const { toolCallCount } = record;
+  if (!Number.isInteger(toolCallCount) || (toolCallCount as number) <= 0) return null;
+  const toolNames = Array.isArray(record.toolNames)
+    ? record.toolNames.filter((name): name is string => typeof name === "string" && name.trim().length > 0)
+    : [];
+  return { toolCallCount: toolCallCount as number, toolNames };
+}
+
 function isAssistantProcessPart(part: NcpMessage["parts"][number]): boolean {
   return part.type === "reasoning" || part.type === "tool-invocation";
 }
@@ -74,6 +92,7 @@ function formatLifecycleDuration(message: NcpMessage): string | null {
  * and must not be mixed into this summary.
  */
 export function buildChatMessageProcessSummary({
+  formatDeferredToolSummary,
   message,
   processedLabel,
 }: BuildChatMessageProcessSummaryParams): ChatMessageProcessSummarySource | undefined {
@@ -81,5 +100,14 @@ export function buildChatMessageProcessSummary({
     return undefined;
   }
   const duration = formatLifecycleDuration(message);
-  return { label: duration ? `${processedLabel} ${duration}` : processedLabel };
+  const baseLabel = duration ? `${processedLabel} ${duration}` : processedLabel;
+  const deferredToolSummary = readDeferredToolSummary(message);
+  return {
+    label: deferredToolSummary && formatDeferredToolSummary
+      ? `${baseLabel} · ${formatDeferredToolSummary(
+          deferredToolSummary.toolCallCount,
+          deferredToolSummary.toolNames,
+        )}`
+      : baseLabel,
+  };
 }

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

@@ -247,5 +247,8 @@ export function buildChatMessageTexts(
     },
     toolActivityFailedLabel: t("chatProcessSummaryFailed"),
     toolActivityCancelledLabel: t("chatProcessSummaryCancelled"),
+    toolPayloadLoadingLabel: t("chatToolPayloadLoading"),
+    toolPayloadLoadFailedLabel: t("chatToolPayloadLoadFailed"),
+    toolActivityShowMoreTemplate: t("chatToolActivityShowMore"),
   };
 }

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

@@ -1,7 +1,4 @@
-import {
-  stringifyUnknown,
-  type ToolCard,
-} from "@/features/chat/features/message/utils/chat-message-core.utils";
+import type { ToolCard } from "@/features/chat/features/message/utils/chat-message-core.utils";
 import type {
   ChatMessagePartViewModel,
   ChatToolPartViewModel,
@@ -14,6 +11,7 @@ export type ToolCardViewSource = ToolCard & {
   agentId?: string;
   action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
+  inputData?: unknown;
   outputData?: unknown;
   execution?: ChatToolPartViewModel["execution"];
   toolCallId?: string;
@@ -168,6 +166,7 @@ export function buildToolCard(
       "input" in toolCard && typeof toolCard.input === "string"
         ? toolCard.input
         : undefined,
+    inputData: toolCard.inputData,
     output: toolCard.text,
     outputData: toolCard.outputData,
     ...(toolCard.execution ? { execution: { ...toolCard.execution } } : {}),
@@ -245,27 +244,3 @@ export function resolveToolCardStatus(params: {
     statusLabel: texts.toolStatusRunningLabel,
   };
 }
-
-function parseStructuredValue(value: unknown): unknown {
-  if (typeof value !== "string") {
-    return value;
-  }
-  const trimmed = value.trim();
-  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) {
-    return value;
-  }
-  try {
-    return JSON.parse(trimmed) as unknown;
-  } catch {
-    return value;
-  }
-}
-
-export function buildToolInvocationInput(
-  args?: unknown,
-  parsedArgs?: unknown,
-): string | undefined {
-  const source = parsedArgs ?? parseStructuredValue(args);
-  const text = stringifyUnknown(source).trim();
-  return text || undefined;
-}