@nextclaw/ui 0.11.22 → 0.12.0

package/src/components/chat/ChatConversationPanel.tsx

@@ -1,10 +1,13 @@
 import { useRef } from "react";
+import { ArrowLeft } from "lucide-react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import {
   ChatInputBarContainer,
   ChatMessageListContainer,
 } from "@/components/chat/nextclaw";
+import { ChatChildSessionPanel } from "@/components/chat/chat-child-session-panel";
 import { ChatWelcome } from "@/components/chat/ChatWelcome";
+import { AgentAvatar } from "@/components/common/AgentAvatar";
 import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/components/chat/session-header/chat-session-project-badge";
@@ -45,6 +48,14 @@ export function ChatConversationPanel() {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+  const childSessionTabs = snapshot.childSessionTabs.filter(
+    (tab) => tab.parentSessionKey === snapshot.sessionKey,
+  );
+  const detailSessionKey = childSessionTabs.some(
+    (tab) => tab.sessionKey === snapshot.activeChildSessionKey,
+  )
+    ? snapshot.activeChildSessionKey
+    : (childSessionTabs[childSessionTabs.length - 1]?.sessionKey ?? null);
   const shouldShowSessionHeader = Boolean(
     snapshot.sessionKey || snapshot.sessionTypeLabel,
   );
@@ -79,97 +90,145 @@ export function ChatConversationPanel() {
   }
 
   return (
-    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-      <div
-        className={cn(
-          "px-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
-          shouldShowSessionHeader
-            ? "py-3 opacity-100"
-            : "h-0 py-0 opacity-0 border-b-0",
-        )}
-      >
-        <div className="min-w-0 flex-1 flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-700 truncate">
-            {sessionHeaderTitle}
-          </span>
-          {snapshot.sessionTypeLabel ? (
-            <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
-              {snapshot.sessionTypeLabel}
+    <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {snapshot.parentSessionKey ? (
+          <div className="border-b border-gray-200/60 bg-white/75 px-5 py-2 backdrop-blur-sm">
+            <button
+              type="button"
+              onClick={presenter.chatThreadManager.goToParentSession}
+              className="inline-flex items-center gap-2 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900"
+            >
+              <ArrowLeft className="h-3.5 w-3.5" />
+              <span>
+                {t("chatBackToParent")}
+                {snapshot.parentSessionLabel?.trim()
+                  ? ` · ${snapshot.parentSessionLabel.trim()}`
+                  : ""}
+              </span>
+            </button>
+          </div>
+        ) : null}
+
+        <div
+          className={cn(
+            "px-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
+            shouldShowSessionHeader
+              ? "py-3 opacity-100"
+              : "h-0 py-0 opacity-0 border-b-0",
+          )}
+        >
+          <div className="min-w-0 flex-1 flex items-center gap-2">
+            {snapshot.agentId ? (
+              <div className="inline-flex items-center gap-2 shrink-0 rounded-full border border-gray-200 bg-white/80 px-2 py-1">
+                <AgentAvatar
+                  agentId={snapshot.agentId}
+                  displayName={snapshot.agentDisplayName}
+                  avatarUrl={snapshot.agentAvatarUrl}
+                  className="h-5 w-5"
+                />
+                <span className="max-w-[120px] truncate text-xs font-medium text-gray-700">
+                  {snapshot.agentDisplayName?.trim() || snapshot.agentId}
+                </span>
+              </div>
+            ) : null}
+            <span className="text-sm font-medium text-gray-700 truncate">
+              {sessionHeaderTitle}
             </span>
-          ) : null}
-          {snapshot.sessionProjectName ? (
-            <ChatSessionProjectBadge
-              sessionKey={snapshot.sessionKey ?? "draft"}
-              projectName={snapshot.sessionProjectName}
+            {snapshot.sessionTypeLabel ? (
+              <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+                {snapshot.sessionTypeLabel}
+              </span>
+            ) : null}
+            {snapshot.sessionProjectName ? (
+              <ChatSessionProjectBadge
+                sessionKey={snapshot.sessionKey ?? "draft"}
+                projectName={snapshot.sessionProjectName}
+                projectRoot={snapshot.sessionProjectRoot}
+                persistToServer={snapshot.canDeleteSession}
+              />
+            ) : null}
+          </div>
+          {snapshot.sessionKey ? (
+            <ChatSessionHeaderActions
+              sessionKey={snapshot.sessionKey}
+              canDeleteSession={snapshot.canDeleteSession}
+              isDeletePending={snapshot.isDeletePending}
               projectRoot={snapshot.sessionProjectRoot}
-              persistToServer={snapshot.canDeleteSession}
+              onDeleteSession={presenter.chatThreadManager.deleteSession}
             />
           ) : null}
         </div>
-        {snapshot.sessionKey ? (
-          <ChatSessionHeaderActions
-            sessionKey={snapshot.sessionKey}
-            canDeleteSession={snapshot.canDeleteSession}
-            isDeletePending={snapshot.isDeletePending}
-            projectRoot={snapshot.sessionProjectRoot}
-            onDeleteSession={presenter.chatThreadManager.deleteSession}
-          />
-        ) : null}
-      </div>
 
-      {shouldShowProviderHint && (
-        <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
-          <span className="text-xs text-amber-800">
-            {t("chatModelNoOptions")}
-          </span>
-          <button
-            type="button"
-            onClick={presenter.chatThreadManager.goToProviders}
-            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
-          >
-            {t("chatGoConfigureProvider")}
-          </button>
-        </div>
-      )}
-
-      {snapshot.sessionTypeUnavailable &&
-        snapshot.sessionTypeUnavailableMessage?.trim() && (
-          <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+        {shouldShowProviderHint && (
+          <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
             <span className="text-xs text-amber-800">
-              {snapshot.sessionTypeUnavailableMessage}
+              {t("chatModelNoOptions")}
             </span>
+            <button
+              type="button"
+              onClick={presenter.chatThreadManager.goToProviders}
+              className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+            >
+              {t("chatGoConfigureProvider")}
+            </button>
           </div>
         )}
 
-      <div
-        ref={threadRef}
-        onScroll={handleScroll}
-        className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
-      >
-        {showWelcome ? (
-          <ChatWelcome
-            onCreateSession={presenter.chatThreadManager.createSession}
-          />
-        ) : hideEmptyHint ? (
-          <div className="h-full" />
-        ) : snapshot.messages.length === 0 ? (
-          <div className="px-5 py-5 text-sm text-gray-500">
-            {t("chatNoMessages")}
-          </div>
-        ) : (
-          <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-            <ChatMessageListContainer
-              key={snapshot.sessionKey ?? "draft"}
-              messages={snapshot.messages}
-              isSending={
-                snapshot.isSending && snapshot.isAwaitingAssistantOutput
-              }
+        {snapshot.sessionTypeUnavailable &&
+          snapshot.sessionTypeUnavailableMessage?.trim() && (
+            <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0">
+              <span className="text-xs text-amber-800">
+                {snapshot.sessionTypeUnavailableMessage}
+              </span>
+            </div>
+          )}
+
+        <div
+          ref={threadRef}
+          onScroll={handleScroll}
+          className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
+        >
+          {showWelcome ? (
+            <ChatWelcome
+              onCreateSession={presenter.chatThreadManager.createSession}
+              agents={snapshot.availableAgents ?? []}
+              selectedAgentId={snapshot.agentId ?? "main"}
+              onSelectAgent={presenter.chatSessionListManager.setSelectedAgentId}
             />
-          </div>
-        )}
+          ) : hideEmptyHint ? (
+            <div className="h-full" />
+          ) : snapshot.messages.length === 0 ? (
+            <div className="px-5 py-5 text-sm text-gray-500">
+              {t("chatNoMessages")}
+            </div>
+          ) : (
+            <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+              <ChatMessageListContainer
+                key={snapshot.sessionKey ?? "draft"}
+                messages={snapshot.messages}
+                isSending={
+                  snapshot.isSending && snapshot.isAwaitingAssistantOutput
+                }
+                onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+              />
+            </div>
+          )}
+        </div>
+
+        <ChatInputBarContainer />
       </div>
 
-      <ChatInputBarContainer />
+      {detailSessionKey ? (
+        <ChatChildSessionPanel
+          tabs={childSessionTabs}
+          activeSessionKey={detailSessionKey}
+          onSelectSession={presenter.chatThreadManager.selectChildSessionDetail}
+          onClose={presenter.chatThreadManager.closeChildSessionDetail}
+          onBackToParent={presenter.chatThreadManager.goToParentSession}
+          onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+        />
+      ) : null}
     </section>
   );
 }

package/src/components/chat/ChatSidebar.test.tsx

@@ -71,6 +71,14 @@ vi.mock('@/components/common/StatusBadge', () => ({
   StatusBadge: () => <div data-testid="status-badge" />
 }));
 
+vi.mock('@/hooks/agents/useAgents', () => ({
+  useAgents: () => ({
+    data: {
+      agents: []
+    }
+  })
+}));
+
 vi.mock('@/components/providers/I18nProvider', () => ({
   useI18n: () => ({
     language: 'en',

package/src/components/chat/ChatSidebar.tsx

@@ -13,6 +13,7 @@ import { useNcpSessionListView, type NcpSessionListItemView } from '@/components
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useAgents } from '@/hooks/agents/useAgents';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
@@ -23,6 +24,7 @@ import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/comp
 import { useUiStore } from '@/stores/ui.store';
 import {
   AlarmClock,
+  Bot,
   BookOpen,
   BrainCircuit,
   ChevronDown,
@@ -93,6 +95,7 @@ function resolveSessionTypeStatusText(option: {
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
+  { target: '/agents', label: () => t('agentsPageTitle'), icon: Bot },
 ];
 
 export function ChatSidebar() {
@@ -105,12 +108,17 @@ export function ChatSidebar() {
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const connectionStatus = useUiStore((state) => state.connectionStatus);
+  const agentsQuery = useAgents();
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const updateSessionLabel = useChatSessionLabel();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
+  const agentsById = useMemo(
+    () => new Map((agentsQuery.data?.agents ?? []).map((agent) => [agent.id, agent])),
+    [agentsQuery.data?.agents]
+  );
 
   const groups = useMemo(() => groupSessionsByDate(items), [items]);
   const defaultSessionType = inputSnapshot.defaultSessionType || 'native';
@@ -293,6 +301,9 @@ export function ChatSidebar() {
                         runStatus={runStatus}
                         context={context}
                         title={sessionTitle(session)}
+                        agentId={session.agentId ?? null}
+                        agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
+                        agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
                         isEditing={isEditing}
                         draftLabel={draftLabel}
                         isSaving={isSaving}

package/src/components/chat/ChatWelcome.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ChatWelcome } from '@/components/chat/ChatWelcome';
+
+describe('ChatWelcome', () => {
+  it('renders draft agent choices and allows switching', () => {
+    const onCreateSession = vi.fn();
+    const onSelectAgent = vi.fn();
+
+    render(
+      <ChatWelcome
+        onCreateSession={onCreateSession}
+        agents={[
+          { id: 'main', displayName: 'Main' },
+          { id: 'engineer', displayName: 'Engineer' }
+        ]}
+        selectedAgentId="main"
+        onSelectAgent={onSelectAgent}
+      />
+    );
+
+    fireEvent.click(screen.getByText('Engineer'));
+    expect(onSelectAgent).toHaveBeenCalledWith('engineer');
+  });
+});

package/src/components/chat/ChatWelcome.tsx

@@ -1,8 +1,13 @@
+import type { AgentProfileView } from '@/api/types';
+import { AgentAvatar } from '@/components/common/AgentAvatar';
 import { t } from '@/lib/i18n';
 import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
 
 type ChatWelcomeProps = {
   onCreateSession: () => void;
+  agents: AgentProfileView[];
+  selectedAgentId: string;
+  onSelectAgent: (agentId: string) => void;
 };
 
 const capabilities = [
@@ -23,7 +28,9 @@ const capabilities = [
   },
 ];
 
-export function ChatWelcome({ onCreateSession }: ChatWelcomeProps) {
+export function ChatWelcome({ onCreateSession, agents, selectedAgentId, onSelectAgent }: ChatWelcomeProps) {
+  const selectedAgent = agents.find((agent) => agent.id === selectedAgentId) ?? null;
+
   return (
     <div className="h-full flex items-center justify-center p-8">
       <div className="max-w-lg w-full text-center">
@@ -36,6 +43,45 @@ export function ChatWelcome({ onCreateSession }: ChatWelcomeProps) {
         <h2 className="text-xl font-semibold text-gray-900 mb-2">{t('chatWelcomeTitle')}</h2>
         <p className="text-sm text-gray-500 mb-8">{t('chatWelcomeSubtitle')}</p>
 
+        <div className="mb-8 rounded-2xl border border-gray-200 bg-white/90 p-4 text-left shadow-card">
+          <div className="text-sm font-semibold text-gray-900">{t('chatDraftAgentTitle')}</div>
+          <p className="mt-1 text-xs text-gray-500">{t('chatDraftAgentDescription')}</p>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {agents.map((agent) => {
+              const active = agent.id === selectedAgentId;
+              return (
+                <button
+                  key={agent.id}
+                  type="button"
+                  onClick={() => onSelectAgent(agent.id)}
+                  className={[
+                    'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-left transition-colors',
+                    active
+                      ? 'border-gray-900 bg-gray-900 text-white'
+                      : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+                  ].join(' ')}
+                >
+                  <AgentAvatar
+                    agentId={agent.id}
+                    displayName={agent.displayName}
+                    avatarUrl={agent.avatarUrl}
+                    className="h-6 w-6"
+                  />
+                  <span className="text-xs font-medium">
+                    {agent.displayName?.trim() || agent.id}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+          {selectedAgent ? (
+            <div className="mt-4 flex items-center gap-2 text-xs text-gray-500">
+              <span>{t('chatDraftAgentCurrent')}:</span>
+              <span className="font-medium text-gray-700">{selectedAgent.displayName?.trim() || selectedAgent.id}</span>
+            </div>
+          ) : null}
+        </div>
+
         {/* Capability cards */}
         <div className="grid grid-cols-3 gap-3">
           {capabilities.map((cap) => {

package/src/components/chat/adapters/chat-message-part.adapter.ts

@@ -8,8 +8,9 @@ import {
   buildRenderableText,
   buildTextPart,
 } from "@/components/chat/adapters/chat-message-inline-content.adapter";
+import { resolveToolInvocationAgentId } from "@/components/chat/adapters/chat-message-tool-agent-id";
 import { buildFileOperationCardData } from "@/components/chat/adapters/file-operation/card";
-import { buildSubagentToolCard } from "@/components/chat/adapters/chat-message.subagent-tool-card";
+import { buildSessionRequestToolCard } from "@/components/chat/adapters/chat-message.session-request-tool-card";
 import type {
   ChatMessagePartViewModel,
   ChatToolPartViewModel,
@@ -77,6 +78,8 @@ export type ChatMessagePartSource =
 type ToolCardViewSource = ToolCard & {
   statusTone: ChatToolPartViewModel["statusTone"];
   statusLabel: string;
+  agentId?: string;
+  action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
 };
@@ -179,6 +182,7 @@ function buildToolCard(
   return {
     kind: toolCard.kind,
     toolName: toolCard.name,
+    ...('agentId' in toolCard && toolCard.agentId ? { agentId: toolCard.agentId } : {}),
     summary: toolCard.detail,
     inputLabel: texts.toolInputLabel,
     input:
@@ -194,6 +198,9 @@ function buildToolCard(
       toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
     outputLabel: texts.toolOutputLabel,
     emptyLabel: texts.toolNoOutputLabel,
+    ...("action" in toolCard && toolCard.action
+      ? { action: toolCard.action }
+      : {}),
     ...("fileOperation" in toolCard && toolCard.fileOperation
       ? { fileOperation: toolCard.fileOperation }
       : {}),
@@ -330,14 +337,18 @@ function buildToolInvocationPart(
     return assetFileView;
   }
 
-  const subagentToolCard = buildSubagentToolCard({
+  const sessionRequestToolCard = buildSessionRequestToolCard({
     invocation,
-    texts,
+    texts: {
+      toolStatusRunningLabel: texts.toolStatusRunningLabel,
+      toolStatusCompletedLabel: texts.toolStatusCompletedLabel,
+      toolStatusFailedLabel: texts.toolStatusFailedLabel,
+    },
   });
-  if (subagentToolCard) {
+  if (sessionRequestToolCard) {
     return {
       type: "tool-card",
-      card: buildToolCard(subagentToolCard, texts),
+      card: buildToolCard(sessionRequestToolCard, texts),
     };
   }
 
@@ -373,9 +384,11 @@ function buildToolInvocationPart(
   const shouldShowRawResult =
     (!fileOperationCardData?.fileOperation || Boolean(invocation.error)) &&
     !shouldHideStructuredTerminalJson;
+  const agentId = resolveToolInvocationAgentId(invocation);
   const card: ToolCardViewSource = {
     kind: statusView.kind,
     name: invocation.toolName,
+    ...(agentId ? { agentId } : {}),
     detail,
     ...(input ? { input } : {}),
     text: shouldShowRawResult && rawResult ? rawResult : undefined,

package/src/components/chat/adapters/chat-message-tool-agent-id.test.ts

@@ -0,0 +1,102 @@
+import { ToolInvocationStatus } from "@nextclaw/agent-chat";
+import { adaptChatMessages, type ChatMessageSource } from "@/components/chat/adapters/chat-message.adapter";
+
+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",
+};
+
+function adapt(uiMessages: ChatMessageSource[]) {
+  return adaptChatMessages({
+    uiMessages,
+    formatTimestamp: (value) => `formatted:${value}`,
+    texts: defaultTexts,
+  });
+}
+
+it("exposes agentId on spawn call cards when the invocation args include it", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-spawn-call",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "spawn-call-args-1",
+            toolName: "spawn",
+            args: '{"agentId":"planner-agent","label":"Planner","task":"Plan the rollout"}',
+            result: {
+              kind: "nextclaw.session_request",
+              requestId: "request-3",
+              sessionId: "child-session-3",
+              isChildSession: true,
+              title: "Planner",
+              task: "Plan the rollout",
+              status: "running",
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "spawn",
+      agentId: "planner-agent",
+      statusTone: "running",
+    },
+  });
+});
+
+it("exposes agentId on running tool call cards even before a session-request result exists", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-spawn-call-running",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "spawn-call-running-1",
+            toolName: "spawn",
+            args: '{"agentId":"planner-agent","task":"Plan the rollout"}',
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "spawn",
+      agentId: "planner-agent",
+      statusTone: "running",
+      titleLabel: "Tool Call",
+    },
+  });
+});

package/src/components/chat/adapters/chat-message-tool-agent-id.ts

@@ -0,0 +1,47 @@
+type ToolInvocationAgentIdSource = {
+  args?: unknown;
+  parsedArgs?: unknown;
+  result?: unknown;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+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;
+  }
+}
+
+function readOptionalString(value: unknown): string | null {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function readAgentIdFromValue(value: unknown): string | null {
+  const parsedValue = parseStructuredValue(value);
+  return isRecord(parsedValue) ? readOptionalString(parsedValue.agentId) : null;
+}
+
+export function resolveToolInvocationAgentId(
+  source: ToolInvocationAgentIdSource,
+): string | null {
+  return (
+    readAgentIdFromValue(source.parsedArgs) ??
+    readAgentIdFromValue(source.args) ??
+    readAgentIdFromValue(source.result)
+  );
+}