@nextclaw/ui 0.11.23 → 0.12.0

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,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 } : {}),
   };
 }