@nextclaw/ui 0.11.22 → 0.12.0

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

@@ -223,7 +223,7 @@ it("keeps structured terminal results as structured data instead of raw json out
   });
 });
 
-it("renders spawn tool cards from structured subagent status updates", () => {
+it("renders session request tool cards from structured child-session status updates", () => {
   const adapted = adapt([
     {
       id: "assistant-subagent",
@@ -237,12 +237,16 @@ it("renders spawn tool cards from structured subagent status updates", () => {
             toolName: "spawn",
             args: '{"label":"Verifier","task":"Verify 1+1=2"}',
             result: {
-              kind: "nextclaw.subagent_run",
-              runId: "subagent-1",
-              label: "Verifier",
+              kind: "nextclaw.session_request",
+              requestId: "request-1",
+              sessionId: "child-session-1",
+              agentId: "verifier-agent",
+              isChildSession: true,
+              title: "Verifier",
               task: "Verify 1+1=2",
               status: "completed",
-              result: "Verified 1+1=2.",
+              finalResponseText: "Verified 1+1=2.",
+              parentSessionId: "parent-session-1",
             },
           },
         },
@@ -254,21 +258,97 @@ it("renders spawn tool cards from structured subagent status updates", () => {
     type: "tool-card",
     card: {
       toolName: "spawn",
-      summary: "label: Verifier · run: subagent-1 · task: Verify 1+1=2",
+      agentId: "verifier-agent",
+      summary: "title: Verifier · session: child-session-1 · task: Verify 1+1=2",
       output: [
-        "Run ID: subagent-1",
+        "Request ID: request-1",
         "",
-        "Label: Verifier",
+        "Session ID: child-session-1",
+        "",
+        "Target: child",
+        "",
+        "Title: Verifier",
         "",
         "Task:",
         "Verify 1+1=2",
         "",
-        "Result:",
+        "Final Response:",
         "Verified 1+1=2.",
       ].join("\n"),
       statusTone: "success",
       statusLabel: "Completed",
       titleLabel: "Tool Result",
+      action: {
+        kind: "open-session",
+        sessionId: "child-session-1",
+        sessionKind: "child",
+        agentId: "verifier-agent",
+        label: "Verifier",
+        parentSessionId: "parent-session-1",
+      },
+    },
+  });
+});
+
+it("renders regular session request tool cards with session navigation instead of child navigation", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-session-request",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "session-request-call-1",
+            toolName: "sessions_request",
+            args: '{"sessionId":"session-2","task":"Summarize the latest findings"}',
+            result: {
+              kind: "nextclaw.session_request",
+              requestId: "request-2",
+              sessionId: "session-2",
+              agentId: "research-agent",
+              isChildSession: false,
+              title: "Research thread",
+              task: "Summarize the latest findings",
+              status: "completed",
+              finalResponseText: "Here is the summary.",
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    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",
+        "",
+        "Session ID: session-2",
+        "",
+        "Target: session",
+        "",
+        "Title: Research thread",
+        "",
+        "Task:",
+        "Summarize the latest findings",
+        "",
+        "Final Response:",
+        "Here is the summary.",
+      ].join("\n"),
+      statusTone: "success",
+      action: {
+        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

@@ -0,0 +1,200 @@
+import {
+  stringifyUnknown,
+  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 & {
+  statusTone: ChatToolPartViewModel["statusTone"];
+  statusLabel: string;
+  action?: ChatToolPartViewModel["action"];
+};
+
+type SessionRequestInvocation = {
+  toolName: string;
+  toolCallId?: string;
+  args?: unknown;
+  result?: unknown;
+};
+
+type SessionRequestToolCardTexts = {
+  toolStatusRunningLabel: string;
+  toolStatusCompletedLabel: string;
+  toolStatusFailedLabel: string;
+};
+
+type SessionRequestResult = {
+  kind: string;
+  requestId?: string;
+  sessionId?: string;
+  agentId?: string;
+  isChildSession?: boolean;
+  title?: string;
+  task?: string;
+  status?: string;
+  message?: unknown;
+  finalResponseText?: unknown;
+  error?: unknown;
+  parentSessionId?: string;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function readOptionalString(value: unknown): string | null {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function readSessionRequestResult(value: unknown): SessionRequestResult | null {
+  if (!isRecord(value) || value.kind !== "nextclaw.session_request") {
+    return null;
+  }
+  return value as SessionRequestResult;
+}
+
+function buildSessionRequestDetail(
+  result: SessionRequestResult,
+  fallbackArgs: unknown,
+): string | undefined {
+  const detailParts = [
+    readOptionalString(result.title)
+      ? `title: ${result.title?.trim()}`
+      : null,
+    readOptionalString(result.sessionId)
+      ? `session: ${result.sessionId?.trim()}`
+      : null,
+    readOptionalString(result.task)
+      ? `task: ${result.task?.trim()}`
+      : null,
+  ].filter((value): value is string => Boolean(value));
+
+  return detailParts.join(" · ") || summarizeToolArgs(fallbackArgs);
+}
+
+function buildSessionRequestOutput(result: SessionRequestResult): string | undefined {
+  const requestId = readOptionalString(result.requestId);
+  const sessionId = readOptionalString(result.sessionId);
+  const title = readOptionalString(result.title);
+  const task = readOptionalString(result.task);
+  const messageText =
+    typeof result.message !== "undefined"
+      ? stringifyUnknown(result.message).trim()
+      : "";
+  const finalResponseText =
+    typeof result.finalResponseText !== "undefined"
+      ? stringifyUnknown(result.finalResponseText).trim()
+      : "";
+  const errorText =
+    typeof result.error !== "undefined"
+      ? stringifyUnknown(result.error).trim()
+      : "";
+
+  const sections = [
+    requestId ? `Request ID: ${requestId}` : null,
+    sessionId ? `Session ID: ${sessionId}` : null,
+    typeof result.isChildSession === "boolean"
+      ? `Target: ${result.isChildSession ? "child" : "session"}`
+      : null,
+    title ? `Title: ${title}` : null,
+    task ? `Task:\n${task}` : null,
+    finalResponseText
+      ? `Final Response:\n${finalResponseText}`
+      : errorText
+        ? `Error:\n${errorText}`
+        : messageText
+          ? `Status:\n${messageText}`
+        : null,
+  ].filter((value): value is string => Boolean(value));
+
+  return sections.length > 0 ? sections.join("\n\n") : undefined;
+}
+
+export function buildSessionRequestToolCard(params: {
+  invocation: SessionRequestInvocation;
+  texts: SessionRequestToolCardTexts;
+}): ToolCardViewSource | null {
+  const { invocation, texts } = params;
+  const { toolName, toolCallId, args, result } = invocation;
+
+  if (toolName !== "spawn" && toolName !== "sessions_request") {
+    return null;
+  }
+
+  const sessionRequest = readSessionRequestResult(result);
+  if (!sessionRequest) {
+    return null;
+  }
+
+  const normalizedStatus = readOptionalString(sessionRequest.status)?.toLowerCase();
+  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() }
+            : {}),
+          ...(readOptionalString(sessionRequest.parentSessionId)
+            ? { parentSessionId: sessionRequest.parentSessionId!.trim() }
+            : {}),
+        }
+      : undefined;
+
+  if (normalizedStatus === "failed") {
+    return {
+      kind: "result",
+      name: toolName,
+      detail,
+      text: output,
+      callId: toolCallId || undefined,
+      hasResult: Boolean(output),
+      statusTone: "error",
+      statusLabel: texts.toolStatusFailedLabel,
+      ...(agentId ? { agentId } : {}),
+      ...(action ? { action } : {}),
+    };
+  }
+
+  if (normalizedStatus === "completed") {
+    return {
+      kind: "result",
+      name: toolName,
+      detail,
+      text: output,
+      callId: toolCallId || undefined,
+      hasResult: Boolean(output),
+      statusTone: "success",
+      statusLabel: texts.toolStatusCompletedLabel,
+      ...(agentId ? { agentId } : {}),
+      ...(action ? { action } : {}),
+    };
+  }
+
+  return {
+    kind: "result",
+    name: toolName,
+    detail,
+    text: output,
+    callId: toolCallId || undefined,
+    hasResult: Boolean(output),
+    statusTone: "running",
+    statusLabel: texts.toolStatusRunningLabel,
+    ...(agentId ? { agentId } : {}),
+    ...(action ? { action } : {}),
+  };
+}

package/src/components/chat/chat-child-session-panel.tsx

@@ -0,0 +1,166 @@
+import { ArrowLeft, Loader2, X } from 'lucide-react';
+import { ChatMessageListContainer } from '@/components/chat/containers/chat-message-list.container';
+import { useNcpChildSessionTabsView } from '@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view';
+import { useNcpSessionConversation } from '@/components/chat/ncp/session-conversation/use-ncp-session-conversation';
+import type { ChatChildSessionTab } from '@/components/chat/stores/chat-thread.store';
+import { AgentIdentityAvatar } from '@/components/common/agent-identity';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import type { ChatToolActionViewModel } from '@nextclaw/agent-chat-ui';
+
+type ChatChildSessionPanelProps = {
+  tabs: readonly ChatChildSessionTab[];
+  activeSessionKey: string;
+  onSelectSession: (sessionKey: string) => void;
+  onClose: () => void;
+  onBackToParent: () => void;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
+};
+
+function ChildSessionPanelConversation({
+  sessionKey,
+  onToolAction,
+}: {
+  sessionKey: string;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
+}) {
+  const agent = useNcpSessionConversation(sessionKey);
+  const messages = agent.visibleMessages;
+
+  if (agent.isHydrating) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-gray-500">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        {t('chatChildSessionLoading')}
+      </div>
+    );
+  }
+
+  if (agent.hydrateError) {
+    return (
+      <div className="px-4 py-5 text-sm text-rose-600">
+        {agent.hydrateError.message}
+      </div>
+    );
+  }
+
+  if (messages.length === 0 && !agent.isRunning) {
+    return (
+      <div className="px-4 py-5 text-sm text-gray-500">
+        {t('chatChildSessionEmpty')}
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 py-5">
+      <ChatMessageListContainer
+        messages={messages}
+        isSending={agent.isRunning}
+        onToolAction={onToolAction}
+      />
+    </div>
+  );
+}
+
+export function ChatChildSessionPanel({
+  tabs,
+  activeSessionKey,
+  onSelectSession,
+  onClose,
+  onBackToParent,
+  onToolAction,
+}: ChatChildSessionPanelProps) {
+  const resolvedTabs = useNcpChildSessionTabsView(tabs);
+  const activeTab =
+    resolvedTabs.find((tab) => tab.sessionKey === activeSessionKey) ??
+    resolvedTabs[0] ??
+    null;
+  const hasParentSession = resolvedTabs.some((tab) => Boolean(tab.parentSessionKey));
+  const shouldShowTabs = resolvedTabs.length > 1;
+
+  if (!activeTab) {
+    return null;
+  }
+
+  return (
+    <aside className="hidden md:flex md:w-[24rem] lg:w-[28rem] shrink-0 border-l border-gray-200/70 bg-white/90 backdrop-blur-sm">
+      <div className="flex h-full min-h-0 w-full flex-col">
+        <div className="border-b border-gray-200/70 px-4 py-3">
+          <div className="flex items-center justify-between gap-3">
+            <button
+              type="button"
+              onClick={onBackToParent}
+              className={cn(
+                'inline-flex items-center gap-1 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900',
+                !hasParentSession && 'pointer-events-none opacity-0',
+              )}
+            >
+              <ArrowLeft className="h-3.5 w-3.5" />
+              <span>{t('chatBackToParent')}</span>
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-full border border-gray-200/80 p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
+              aria-label={t('chatChildSessionClosePanel')}
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          {!shouldShowTabs ? (
+            <div className="mt-3 flex min-w-0 items-center gap-2 text-sm font-semibold text-gray-900">
+              {activeTab.agentId ? (
+                <AgentIdentityAvatar
+                  agentId={activeTab.agentId}
+                  className="h-5 w-5 shrink-0"
+                />
+              ) : null}
+              <span className="truncate" title={activeTab.sessionKey}>
+                {activeTab.title}
+              </span>
+            </div>
+          ) : null}
+          {shouldShowTabs ? (
+            <div className="mt-3 overflow-x-auto custom-scrollbar">
+              <Tabs value={activeSessionKey} onValueChange={onSelectSession}>
+                <TabsList className="h-auto min-w-max justify-start gap-1.5 rounded-none bg-transparent p-0 text-gray-500">
+                  {resolvedTabs.map((tab) => (
+                    <TabsTrigger
+                      key={tab.sessionKey}
+                      value={tab.sessionKey}
+                      className="gap-2 rounded-full border border-gray-200/80 bg-white/85 px-2.5 py-1.5 text-xs font-medium text-gray-600 shadow-none hover:border-primary/30 hover:text-primary data-[state=active]:border-primary/30 data-[state=active]:bg-primary-50/70 data-[state=active]:text-primary data-[state=active]:shadow-sm"
+                    >
+                      {tab.agentId ? (
+                        <AgentIdentityAvatar
+                          agentId={tab.agentId}
+                          className="h-4 w-4 shrink-0"
+                        />
+                      ) : null}
+                      <span className="max-w-[132px] truncate">{tab.title}</span>
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+          {resolvedTabs.map((tab) => (
+            <div
+              key={tab.sessionKey}
+              className={cn(tab.sessionKey === activeSessionKey ? 'block' : 'hidden')}
+            >
+              <ChildSessionPanelConversation
+                sessionKey={tab.sessionKey}
+                onToolAction={onToolAction}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/components/chat/chat-page-runtime.test.ts

@@ -29,6 +29,7 @@ function createSession(overrides: Partial<SessionEntryView> & Pick<SessionEntryV
     updatedAt: overrides.updatedAt ?? '2026-03-19T00:00:00.000Z',
     sessionType: overrides.sessionType ?? 'native',
     sessionTypeMutable: overrides.sessionTypeMutable ?? false,
+    isChildSession: overrides.isChildSession ?? false,
     messageCount: overrides.messageCount ?? 0,
     ...(overrides.label ? { label: overrides.label } : {}),
     ...(overrides.preferredModel ? { preferredModel: overrides.preferredModel } : {}),

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

@@ -2,10 +2,11 @@ import { useEffect } from 'react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import { ChatSidebar } from '@/components/chat/ChatSidebar';
 import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { AgentsPage } from '@/components/agents/AgentsPage';
 import { CronConfig } from '@/components/config/CronConfig';
 import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
 
-export type MainPanelView = 'chat' | 'cron' | 'skills';
+export type MainPanelView = 'chat' | 'cron' | 'skills' | 'agents';
 
 export type ChatPageProps = {
   view: MainPanelView;
@@ -15,12 +16,9 @@ type UseChatSessionSyncParams = {
   view: MainPanelView;
   routeSessionKey: string | null;
   selectedSessionKey: string | null;
-  selectedAgentId: string;
   setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
-  setSelectedAgentId: Dispatch<SetStateAction<string>>;
   selectedSessionKeyRef: MutableRefObject<string | null>;
   resetStreamState: () => void;
-  resolveAgentIdFromSessionKey: (sessionKey: string) => string | null;
 };
 
 export function useChatSessionSync(params: UseChatSessionSyncParams): void {
@@ -28,12 +26,9 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
     view,
     routeSessionKey,
     selectedSessionKey,
-    selectedAgentId,
     setSelectedSessionKey,
-    setSelectedAgentId,
     selectedSessionKeyRef,
     resetStreamState,
-    resolveAgentIdFromSessionKey
   } = params;
 
   useEffect(() => {
@@ -52,16 +47,6 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
     }
   }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
 
-  useEffect(() => {
-    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
-    if (!inferred) {
-      return;
-    }
-    if (selectedAgentId !== inferred) {
-      setSelectedAgentId(inferred);
-    }
-  }, [resolveAgentIdFromSessionKey, selectedAgentId, selectedSessionKey, setSelectedAgentId]);
-
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
   }, [selectedSessionKey, selectedSessionKeyRef]);
@@ -87,6 +72,12 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
                 <CronConfig />
               </div>
             </div>
+          ) : view === 'agents' ? (
+            <div className="h-full overflow-auto custom-scrollbar">
+              <div className="mx-auto w-full max-w-[min(1180px,100%)] px-6 py-5">
+                <AgentsPage />
+              </div>
+            </div>
           ) : (
             <div className="h-full overflow-hidden">
               <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">

package/src/components/chat/chat-session-display.test.ts

@@ -9,6 +9,7 @@ function createSession(overrides: Partial<SessionEntryView> = {}): SessionEntryV
     updatedAt: '2026-03-31T10:00:00.000Z',
     sessionType: 'native',
     sessionTypeMutable: false,
+    isChildSession: false,
     messageCount: 3,
     ...overrides
   };

package/src/components/chat/chat-session-route.ts

@@ -1,19 +1,5 @@
 const SESSION_ROUTE_PREFIX = 'sid_';
 
-export function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
-  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
-  if (!match) {
-    return null;
-  }
-  const value = match[1]?.trim();
-  return value ? value : null;
-}
-
-export function buildNewSessionKey(agentId: string): string {
-  const slug = Math.random().toString(36).slice(2, 8);
-  return `agent:${agentId}:ui:direct:web-${Date.now().toString(36)}${slug}`;
-}
-
 export function encodeSessionRouteId(sessionKey: string): string {
   const bytes = new TextEncoder().encode(sessionKey);
   let binary = '';

package/src/components/chat/chat-sidebar-session-item.tsx

@@ -1,4 +1,5 @@
 import type { SessionEntryView } from '@/api/types';
+import { AgentAvatar } from '@/components/common/AgentAvatar';
 import { SessionContextIconNode } from '@/components/common/session-context-icon';
 import { SessionRunBadge } from '@/components/common/SessionRunBadge';
 import { Button } from '@/components/ui/button';
@@ -15,6 +16,9 @@ type ChatSidebarSessionItemProps = {
   runStatus?: SessionRunStatus;
   context: SessionContextView;
   title: string;
+  agentId?: string | null;
+  agentLabel?: string | null;
+  agentAvatarUrl?: string | null;
   isEditing: boolean;
   draftLabel: string;
   isSaving: boolean;
@@ -32,6 +36,9 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
     runStatus,
     context,
     title,
+    agentId,
+    agentLabel,
+    agentAvatarUrl,
     isEditing,
     draftLabel,
     isSaving,
@@ -105,6 +112,14 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
           <button type="button" onClick={onSelect} className="w-full text-left">
             <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5 pr-8">
               <span className="flex min-w-0 items-center gap-1.5">
+                {agentId ? (
+                  <AgentAvatar
+                    agentId={agentId}
+                    displayName={agentLabel}
+                    avatarUrl={agentAvatarUrl}
+                    className="h-5 w-5 shrink-0"
+                  />
+                ) : null}
                 <span className="truncate font-medium">{title}</span>
                 {context.label ? (
                   <span
@@ -129,7 +144,7 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
               </span>
             </div>
             <div className="mt-0.5 text-[11px] text-gray-400 truncate">
-              {session.messageCount} · {formatDateTime(session.updatedAt)}
+              {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
             </div>
           </button>
           <button

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -87,8 +87,9 @@ export function ChatInputBarContainer() {
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-  const skillScopeLabels = useMemo<Record<'project' | 'workspace', string>>(() => {
+  const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
     return {
+      builtin: t('chatSkillScopeBuiltin'),
       project: t('chatSkillScopeProject'),
       workspace: t('chatSkillScopeWorkspace'),
     };