@nextclaw/ui 0.11.22 → 0.11.23

package/src/components/chat/ChatConversationPanel.tsx

@@ -1,9 +1,11 @@
 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 { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
@@ -45,6 +47,10 @@ export function ChatConversationPanel() {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+  const detailSessionKey =
+    snapshot.childSessionDetailParentSessionKey === snapshot.sessionKey
+      ? snapshot.childSessionDetailSessionKey
+      : null;
   const shouldShowSessionHeader = Boolean(
     snapshot.sessionKey || snapshot.sessionTypeLabel,
   );
@@ -79,97 +85,128 @@ 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>
+                Back to parent
+                {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">
+            <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}
             />
-          </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
+          sessionKey={detailSessionKey}
+          title={snapshot.childSessionDetailLabel}
+          onClose={presenter.chatThreadManager.closeChildSessionDetail}
+          onBackToParent={presenter.chatThreadManager.goToParentSession}
+          onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+        />
+      ) : null}
     </section>
   );
 }

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

@@ -9,7 +9,7 @@ import {
   buildTextPart,
 } from "@/components/chat/adapters/chat-message-inline-content.adapter";
 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 +77,7 @@ export type ChatMessagePartSource =
 type ToolCardViewSource = ToolCard & {
   statusTone: ChatToolPartViewModel["statusTone"];
   statusLabel: string;
+  action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
 };
@@ -194,6 +195,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 +334,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),
     };
   }
 

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,15 @@ 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",
+              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 +257,92 @@ 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",
+      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",
+        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",
+              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",
+      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",
+        label: "Research thread",
+      },
     },
   });
 });

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

@@ -0,0 +1,191 @@
+import {
+  stringifyUnknown,
+  summarizeToolArgs,
+  type ToolCard,
+} from "@/lib/chat-message";
+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;
+  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 {
+  if (
+    params.invocation.toolName !== "spawn" &&
+    params.invocation.toolName !== "sessions_request"
+  ) {
+    return null;
+  }
+
+  const sessionRequest = readSessionRequestResult(params.invocation.result);
+  if (!sessionRequest) {
+    return null;
+  }
+
+  const normalizedStatus = readOptionalString(sessionRequest.status)?.toLowerCase();
+  const detail = buildSessionRequestDetail(sessionRequest, params.invocation.args);
+  const output = buildSessionRequestOutput(sessionRequest);
+  const targetSessionId = readOptionalString(sessionRequest.sessionId);
+  const action =
+    targetSessionId
+      ? {
+          kind: "open-session" as const,
+          sessionId: targetSessionId,
+          sessionKind: sessionRequest.isChildSession === true ? ("child" as const) : ("session" as const),
+          ...(readOptionalString(sessionRequest.title)
+            ? { label: sessionRequest.title!.trim() }
+            : {}),
+          ...(readOptionalString(sessionRequest.parentSessionId)
+            ? { parentSessionId: sessionRequest.parentSessionId!.trim() }
+            : {}),
+        }
+      : undefined;
+
+  if (normalizedStatus === "failed") {
+    return {
+      kind: "result",
+      name: params.invocation.toolName,
+      detail,
+      text: output,
+      callId: params.invocation.toolCallId || undefined,
+      hasResult: Boolean(output),
+      statusTone: "error",
+      statusLabel: params.texts.toolStatusFailedLabel,
+      ...(action ? { action } : {}),
+    };
+  }
+
+  if (normalizedStatus === "completed") {
+    return {
+      kind: "result",
+      name: params.invocation.toolName,
+      detail,
+      text: output,
+      callId: params.invocation.toolCallId || undefined,
+      hasResult: Boolean(output),
+      statusTone: "success",
+      statusLabel: params.texts.toolStatusCompletedLabel,
+      ...(action ? { action } : {}),
+    };
+  }
+
+  return {
+    kind: "result",
+    name: params.invocation.toolName,
+    detail,
+    text: output,
+    callId: params.invocation.toolCallId || undefined,
+    hasResult: Boolean(output),
+    statusTone: "running",
+    statusLabel: params.texts.toolStatusRunningLabel,
+    ...(action ? { action } : {}),
+  };
+}