@nextclaw/ui 0.11.23 → 0.12.1

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

@@ -12,6 +12,7 @@ const mocks = vi.hoisted(() => ({
   selectSession: vi.fn(),
   docOpen: vi.fn(),
   updateNcpSession: vi.fn(),
+  agents: [] as Array<{ id: string; displayName?: string; avatarUrl?: string | null }>,
   sessionItems: [] as NcpSessionListItemView[],
   isLoading: false
 }));
@@ -71,6 +72,14 @@ vi.mock('@/components/common/StatusBadge', () => ({
   StatusBadge: () => <div data-testid="status-badge" />
 }));
 
+vi.mock('@/hooks/agents/useAgents', () => ({
+  useAgents: () => ({
+    data: {
+      agents: mocks.agents
+    }
+  })
+}));
+
 vi.mock('@/components/providers/I18nProvider', () => ({
   useI18n: () => ({
     language: 'en',
@@ -98,6 +107,7 @@ describe('ChatSidebar', () => {
     mocks.docOpen.mockReset();
     mocks.updateNcpSession.mockReset();
     mocks.updateNcpSession.mockResolvedValue({});
+    mocks.agents = [];
     mocks.sessionItems = [];
     mocks.isLoading = false;
 
@@ -246,6 +256,44 @@ describe('ChatSidebar', () => {
     expect(screen.queryByText('Native')).toBeNull();
   });
 
+  it('hides the sidebar agent avatar for the main agent but keeps specialist avatars', () => {
+    mocks.agents = [
+      { id: 'main', displayName: 'Main' },
+      { id: 'engineer', displayName: 'Engineer' }
+    ];
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:main-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Main Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1,
+        agentId: 'main'
+      }),
+      createSessionItem({
+        key: 'session:engineer-1',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:05:00.000Z',
+        label: 'Engineer Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1,
+        agentId: 'engineer'
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Main')).toBeNull();
+    expect(screen.getByLabelText('Engineer')).not.toBeNull();
+  });
+
   it('edits the session label inline and saves through the ncp session api by default', async () => {
     mocks.sessionItems = [
       createSessionItem({

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,30 @@
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ChatWelcome } from '@/components/chat/ChatWelcome';
+
+describe('ChatWelcome', () => {
+  it('renders a lightweight draft agent select 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}
+      />
+    );
+
+    const trigger = screen.getByRole('combobox', { name: 'Draft agent' });
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Engineer'));
+
+    expect(onSelectAgent).toHaveBeenCalledWith('engineer');
+    expect(screen.queryByText('Current Agent:')).toBeNull();
+  });
+});

package/src/components/chat/ChatWelcome.tsx

@@ -1,8 +1,14 @@
+import type { AgentProfileView } from '@/api/types';
+import { AgentAvatar } from '@/components/common/AgentAvatar';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 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 +29,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 +44,47 @@ 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-6 flex items-center justify-center gap-2.5">
+          <span className="text-[13px] font-medium text-gray-500">
+            {t('chatDraftAgentTitle')}
+          </span>
+          <Select value={selectedAgentId} onValueChange={onSelectAgent}>
+            <SelectTrigger
+              aria-label={t('chatDraftAgentTitle')}
+              className="h-auto w-auto gap-1 rounded-full border-0 bg-transparent px-1.5 py-1 text-gray-500 shadow-none hover:bg-white/70 hover:text-gray-800 focus:ring-0"
+            >
+              <span className="sr-only">{t('chatDraftAgentTitle')}</span>
+              <div className="flex items-center gap-1.5">
+                {selectedAgent ? (
+                  <AgentAvatar
+                    agentId={selectedAgent.id}
+                    displayName={selectedAgent.displayName}
+                    avatarUrl={selectedAgent.avatarUrl}
+                    className="h-7 w-7 shrink-0"
+                  />
+                ) : null}
+              </div>
+            </SelectTrigger>
+            <SelectContent className="rounded-xl border-gray-200/80 shadow-lg">
+              {agents.map((agent) => (
+                <SelectItem key={agent.id} value={agent.id} className="rounded-lg pr-10">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <AgentAvatar
+                      agentId={agent.id}
+                      displayName={agent.displayName}
+                      avatarUrl={agent.avatarUrl}
+                      className="h-5 w-5 shrink-0"
+                    />
+                    <span className="truncate text-sm font-medium text-gray-700">
+                      {agent.displayName?.trim() || agent.id}
+                    </span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </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,6 +8,7 @@ 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 { buildSessionRequestToolCard } from "@/components/chat/adapters/chat-message.session-request-tool-card";
 import type {
@@ -77,6 +78,7 @@ export type ChatMessagePartSource =
 type ToolCardViewSource = ToolCard & {
   statusTone: ChatToolPartViewModel["statusTone"];
   statusLabel: string;
+  agentId?: string;
   action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
@@ -180,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:
@@ -381,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)
+  );
+}

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

@@ -240,6 +240,7 @@ it("renders session request tool cards from structured child-session status upda
               kind: "nextclaw.session_request",
               requestId: "request-1",
               sessionId: "child-session-1",
+              agentId: "verifier-agent",
               isChildSession: true,
               title: "Verifier",
               task: "Verify 1+1=2",
@@ -257,6 +258,7 @@ it("renders session request tool cards from structured child-session status upda
     type: "tool-card",
     card: {
       toolName: "spawn",
+      agentId: "verifier-agent",
       summary: "title: Verifier · session: child-session-1 · task: Verify 1+1=2",
       output: [
         "Request ID: request-1",
@@ -280,6 +282,7 @@ it("renders session request tool cards from structured child-session status upda
         kind: "open-session",
         sessionId: "child-session-1",
         sessionKind: "child",
+        agentId: "verifier-agent",
         label: "Verifier",
         parentSessionId: "parent-session-1",
       },
@@ -304,6 +307,7 @@ it("renders regular session request tool cards with session navigation instead o
               kind: "nextclaw.session_request",
               requestId: "request-2",
               sessionId: "session-2",
+              agentId: "research-agent",
               isChildSession: false,
               title: "Research thread",
               task: "Summarize the latest findings",
@@ -320,6 +324,7 @@ it("renders regular session request tool cards with session navigation instead o
     type: "tool-card",
     card: {
       toolName: "sessions_request",
+      agentId: "research-agent",
       summary: "title: Research thread · session: session-2 · task: Summarize the latest findings",
       output: [
         "Request ID: request-2",
@@ -341,6 +346,7 @@ it("renders regular session request tool cards with session navigation instead o
         kind: "open-session",
         sessionId: "session-2",
         sessionKind: "session",
+        agentId: "research-agent",
         label: "Research thread",
       },
     },

package/src/components/chat/adapters/chat-message.session-request-tool-card.ts

@@ -3,6 +3,7 @@ import {
   summarizeToolArgs,
   type ToolCard,
 } from "@/lib/chat-message";
+import { resolveToolInvocationAgentId } from "@/components/chat/adapters/chat-message-tool-agent-id";
 import type { ChatToolPartViewModel } from "@nextclaw/agent-chat-ui";
 
 type ToolCardViewSource = ToolCard & {
@@ -28,6 +29,7 @@ type SessionRequestResult = {
   kind: string;
   requestId?: string;
   sessionId?: string;
+  agentId?: string;
   isChildSession?: boolean;
   title?: string;
   task?: string;
@@ -118,28 +120,32 @@ export function buildSessionRequestToolCard(params: {
   invocation: SessionRequestInvocation;
   texts: SessionRequestToolCardTexts;
 }): ToolCardViewSource | null {
-  if (
-    params.invocation.toolName !== "spawn" &&
-    params.invocation.toolName !== "sessions_request"
-  ) {
+  const { invocation, texts } = params;
+  const { toolName, toolCallId, args, result } = invocation;
+
+  if (toolName !== "spawn" && toolName !== "sessions_request") {
     return null;
   }
 
-  const sessionRequest = readSessionRequestResult(params.invocation.result);
+  const sessionRequest = readSessionRequestResult(result);
   if (!sessionRequest) {
     return null;
   }
 
   const normalizedStatus = readOptionalString(sessionRequest.status)?.toLowerCase();
-  const detail = buildSessionRequestDetail(sessionRequest, params.invocation.args);
+  const detail = buildSessionRequestDetail(sessionRequest, args);
   const output = buildSessionRequestOutput(sessionRequest);
   const targetSessionId = readOptionalString(sessionRequest.sessionId);
+  const agentId = resolveToolInvocationAgentId({ args, result: sessionRequest });
   const action =
     targetSessionId
       ? {
           kind: "open-session" as const,
           sessionId: targetSessionId,
           sessionKind: sessionRequest.isChildSession === true ? ("child" as const) : ("session" as const),
+          ...(agentId
+            ? { agentId }
+            : {}),
           ...(readOptionalString(sessionRequest.title)
             ? { label: sessionRequest.title!.trim() }
             : {}),
@@ -152,13 +158,14 @@ export function buildSessionRequestToolCard(params: {
   if (normalizedStatus === "failed") {
     return {
       kind: "result",
-      name: params.invocation.toolName,
+      name: toolName,
       detail,
       text: output,
-      callId: params.invocation.toolCallId || undefined,
+      callId: toolCallId || undefined,
       hasResult: Boolean(output),
       statusTone: "error",
-      statusLabel: params.texts.toolStatusFailedLabel,
+      statusLabel: texts.toolStatusFailedLabel,
+      ...(agentId ? { agentId } : {}),
       ...(action ? { action } : {}),
     };
   }
@@ -166,26 +173,28 @@ export function buildSessionRequestToolCard(params: {
   if (normalizedStatus === "completed") {
     return {
       kind: "result",
-      name: params.invocation.toolName,
+      name: toolName,
       detail,
       text: output,
-      callId: params.invocation.toolCallId || undefined,
+      callId: toolCallId || undefined,
       hasResult: Boolean(output),
       statusTone: "success",
-      statusLabel: params.texts.toolStatusCompletedLabel,
+      statusLabel: texts.toolStatusCompletedLabel,
+      ...(agentId ? { agentId } : {}),
       ...(action ? { action } : {}),
     };
   }
 
   return {
     kind: "result",
-    name: params.invocation.toolName,
+    name: toolName,
     detail,
     text: output,
-    callId: params.invocation.toolCallId || undefined,
+    callId: toolCallId || undefined,
     hasResult: Boolean(output),
     statusTone: "running",
-    statusLabel: params.texts.toolStatusRunningLabel,
+    statusLabel: texts.toolStatusRunningLabel,
+    ...(agentId ? { agentId } : {}),
     ...(action ? { action } : {}),
   };
 }