@nextclaw/ui 0.11.22 → 0.11.23

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

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ArrowLeft, Loader2, X } from 'lucide-react';
+import { fetchNcpSessionMessages } from '@/api/ncp-session';
+import { ChatMessageListContainer } from '@/components/chat/containers/chat-message-list.container';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+import { cn } from '@/lib/utils';
+import type { ChatToolActionViewModel } from '@nextclaw/agent-chat-ui';
+
+type ChatChildSessionPanelProps = {
+  sessionKey: string;
+  title?: string | null;
+  onClose: () => void;
+  onBackToParent: () => void;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
+};
+
+export function ChatChildSessionPanel({
+  sessionKey,
+  title,
+  onClose,
+  onBackToParent,
+  onToolAction,
+}: ChatChildSessionPanelProps) {
+  const detailParentSessionKey = useChatThreadStore(
+    (state) => state.snapshot.childSessionDetailParentSessionKey,
+  );
+  const query = useQuery({
+    queryKey: ['ncp-session-messages', sessionKey, 'child-panel'],
+    queryFn: () => fetchNcpSessionMessages(sessionKey, 300),
+    staleTime: 5_000,
+  });
+
+  const messages = query.data?.messages ?? [];
+  const headerTitle = useMemo(() => title?.trim() || sessionKey, [sessionKey, title]);
+
+  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 hover:text-gray-900',
+                !detailParentSessionKey && 'pointer-events-none opacity-0',
+              )}
+            >
+              <ArrowLeft className="h-3.5 w-3.5" />
+              <span>Back to parent</span>
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md border border-gray-200 p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
+              aria-label="Close child session panel"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="mt-2">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">
+              Child Session
+            </div>
+            <div className="mt-1 text-sm font-semibold text-gray-900">
+              {headerTitle}
+            </div>
+            <div className="mt-1 text-[11px] text-gray-500">{sessionKey}</div>
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+          {query.isLoading ? (
+            <div className="flex h-full items-center justify-center text-sm text-gray-500">
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Loading child session
+            </div>
+          ) : query.isError ? (
+            <div className="px-4 py-5 text-sm text-rose-600">
+              {(query.error as Error).message}
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="px-4 py-5 text-sm text-gray-500">
+              No child session messages yet.
+            </div>
+          ) : (
+            <div className="px-4 py-5">
+              <ChatMessageListContainer
+                messages={messages}
+                isSending={false}
+                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-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/containers/chat-message-list.container.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
+  type ChatToolActionViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
@@ -18,6 +19,7 @@ type ChatMessageListContainerProps = {
   messages: readonly NcpMessage[];
   isSending: boolean;
   className?: string;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
 };
 
 const messageViewModelCache = new WeakMap<
@@ -69,6 +71,7 @@ export function ChatMessageListContainer({
   messages: rawMessages,
   isSending,
   className,
+  onToolAction,
 }: ChatMessageListContainerProps) {
   const { language } = useI18n();
   const texts = useMemo<ChatMessageAdapterTexts>(
@@ -125,6 +128,7 @@ export function ChatMessageListContainer({
       hasAssistantDraft={hasAssistantDraft}
       className={className}
       texts={messageTexts}
+      onToolAction={onToolAction}
     />
   );
 }

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -1,30 +1,53 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { NcpHttpAgentClientEndpoint } from '@nextclaw/ncp-http-agent-client';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MutableRefObject,
+} from "react";
+import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
 import {
   buildNcpRequestEnvelope,
   useHydratedNcpAgent,
-  type NcpConversationSeed
-} from '@nextclaw/ncp-react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { API_BASE } from '@/api/api-base';
-import { fetchNcpSessionMessages } from '@/api/ncp-session';
-import { ChatPageLayout, type ChatPageProps, useChatSessionSync } from '@/components/chat/chat-page-shell';
-import { sessionDisplayName } from '@/components/chat/chat-session-display';
-import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from '@/components/chat/chat-inline-token.utils';
-import { createNcpAppClientFetch } from '@/components/chat/ncp/ncp-app-client-fetch';
-import { parseSessionKeyFromRoute, resolveAgentIdFromSessionKey } from '@/components/chat/chat-session-route';
-import { useNcpChatPageData } from '@/components/chat/ncp/ncp-chat-page-data';
-import { NcpChatPresenter } from '@/components/chat/ncp/ncp-chat.presenter';
-import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
-import { ChatPresenterProvider } from '@/components/chat/presenter/chat-presenter-context';
-import type { ResumeRunParams } from '@/components/chat/chat-stream/types';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
-import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
-import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import { normalizeRequestedSkills } from '@/lib/chat-runtime-utils';
-import { getSessionProjectName, normalizeSessionProjectRootValue } from '@/lib/session-project/session-project.utils';
-import { appClient } from '@/transport';
+  type NcpConversationSeed,
+  type NcpConversationSeedLoader,
+} from "@nextclaw/ncp-react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { API_BASE } from "@/api/api-base";
+import { fetchNcpSessionMessages } from "@/api/ncp-session";
+import {
+  ChatPageLayout,
+  type ChatPageProps,
+  useChatSessionSync,
+} from "@/components/chat/chat-page-shell";
+import { sessionDisplayName } from "@/components/chat/chat-session-display";
+import {
+  buildInlineSkillTokensFromComposer,
+  CHAT_UI_INLINE_TOKENS_METADATA_KEY,
+} from "@/components/chat/chat-inline-token.utils";
+import { createNcpAppClientFetch } from "@/components/chat/ncp/ncp-app-client-fetch";
+import {
+  parseSessionKeyFromRoute,
+  resolveAgentIdFromSessionKey,
+} from "@/components/chat/chat-session-route";
+import { useNcpChatPageData } from "@/components/chat/ncp/ncp-chat-page-data";
+import { NcpChatPresenter } from "@/components/chat/ncp/ncp-chat.presenter";
+import {
+  adaptNcpSessionSummary,
+  createNcpSessionId,
+} from "@/components/chat/ncp/ncp-session-adapter";
+import { ChatPresenterProvider } from "@/components/chat/presenter/chat-presenter-context";
+import type { ResumeRunParams } from "@/components/chat/chat-stream/types";
+import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
+import { useChatSessionListStore } from "@/components/chat/stores/chat-session-list.store";
+import { resolveSessionTypeLabel } from "@/components/chat/useChatSessionTypeState";
+import { useConfirmDialog } from "@/hooks/useConfirmDialog";
+import { normalizeRequestedSkills } from "@/lib/chat-runtime-utils";
+import {
+  getSessionProjectName,
+  normalizeSessionProjectRootValue,
+} from "@/lib/session-project/session-project.utils";
 
 export function buildNcpSendMetadata(payload: {
   model?: string;
@@ -67,33 +90,89 @@ function isMissingNcpSessionError(error: unknown): boolean {
   if (!(error instanceof Error)) {
     return false;
   }
-  return error.message.includes('ncp session not found:');
+  return error.message.includes("ncp session not found:");
+}
+
+type NcpSeedSessionSummary = {
+  sessionId: string;
+  status?: string;
+};
+
+function useNcpConversationSeedLoader<T extends NcpSeedSessionSummary>(
+  sessionSummariesRef: MutableRefObject<readonly T[]>,
+): NcpConversationSeedLoader {
+  return useCallback(
+    async (
+      sessionId: string,
+      signal: AbortSignal,
+    ): Promise<NcpConversationSeed> => {
+      signal.throwIfAborted();
+      let history: Awaited<ReturnType<typeof fetchNcpSessionMessages>> | null =
+        null;
+      try {
+        history = await fetchNcpSessionMessages(sessionId, 300);
+      } catch (error) {
+        if (!isMissingNcpSessionError(error)) {
+          throw error;
+        }
+      }
+      signal.throwIfAborted();
+
+      const sessionSummary =
+        sessionSummariesRef.current.find(
+          (item) => item.sessionId === sessionId,
+        ) ?? null;
+      return {
+        messages: history?.messages ?? [],
+        status: sessionSummary?.status === "running" ? "running" : "idle",
+      };
+    },
+    [sessionSummariesRef],
+  );
 }
 
 export function NcpChatPage({ view }: ChatPageProps) {
   const [presenter] = useState(() => new NcpChatPresenter());
-  const [draftSessionId, setDraftSessionId] = useState(() => createNcpSessionId());
+  const [draftSessionId, setDraftSessionId] = useState(() =>
+    createNcpSessionId(),
+  );
   const query = useChatSessionListStore((state) => state.snapshot.query);
-  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
-  const selectedAgentId = useChatSessionListStore((state) => state.snapshot.selectedAgentId);
-  const pendingSessionType = useChatInputStore((state) => state.snapshot.pendingSessionType);
-  const pendingProjectRoot = useChatInputStore((state) => state.snapshot.pendingProjectRoot);
-  const pendingProjectRootSessionKey = useChatInputStore((state) => state.snapshot.pendingProjectRootSessionKey);
-  const currentSelectedModel = useChatInputStore((state) => state.snapshot.selectedModel);
+  const selectedSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
+  );
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
+  );
+  const pendingSessionType = useChatInputStore(
+    (state) => state.snapshot.pendingSessionType,
+  );
+  const pendingProjectRoot = useChatInputStore(
+    (state) => state.snapshot.pendingProjectRoot,
+  );
+  const pendingProjectRootSessionKey = useChatInputStore(
+    (state) => state.snapshot.pendingProjectRootSessionKey,
+  );
+  const currentSelectedModel = useChatInputStore(
+    (state) => state.snapshot.selectedModel,
+  );
   const { confirm, ConfirmDialog } = useConfirmDialog();
   const location = useLocation();
   const navigate = useNavigate();
-  const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
+  const { sessionId: routeSessionIdParam } = useParams<{
+    sessionId?: string;
+  }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
-  const sessionStreamAttachInFlightRef = useRef(false);
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
-    [routeSessionIdParam]
+    [routeSessionIdParam],
   );
   const sessionKey = selectedSessionKey ?? draftSessionId;
-  const hasSessionProjectRootOverride = pendingProjectRootSessionKey === sessionKey;
-  const sessionProjectRootOverride = hasSessionProjectRootOverride ? pendingProjectRoot : undefined;
+  const hasSessionProjectRootOverride =
+    pendingProjectRootSessionKey === sessionKey;
+  const sessionProjectRootOverride = hasSessionProjectRootOverride
+    ? pendingProjectRoot
+    : undefined;
   const {
     sessionSkillsQuery,
     isProviderStateResolved,
@@ -106,7 +185,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     selectedSessionType,
     canEditSessionType,
     sessionTypeUnavailable,
-    sessionTypeUnavailableMessage
+    sessionTypeUnavailableMessage,
   } = useNcpChatPageData({
     query,
     sessionKey,
@@ -115,7 +194,8 @@ export function NcpChatPage({ view }: ChatPageProps) {
     pendingSessionType,
     setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
     setSelectedModel: presenter.chatInputManager.setSelectedModel,
-    setSelectedThinkingLevel: presenter.chatInputManager.setSelectedThinkingLevel
+    setSelectedThinkingLevel:
+      presenter.chatInputManager.setSelectedThinkingLevel,
   });
 
   const sessionSummariesRef = useRef(sessionSummaries);
@@ -126,35 +206,18 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const [ncpClient] = useState(
     () =>
       new NcpHttpAgentClientEndpoint({
-      baseUrl: API_BASE,
-      basePath: '/api/ncp/agent',
-      fetchImpl: createNcpAppClientFetch()
-      })
+        baseUrl: API_BASE,
+        basePath: "/api/ncp/agent",
+        fetchImpl: createNcpAppClientFetch(),
+      }),
   );
 
-  const loadSeed = useCallback(async (sessionId: string, signal: AbortSignal): Promise<NcpConversationSeed> => {
-    signal.throwIfAborted();
-    let history: Awaited<ReturnType<typeof fetchNcpSessionMessages>> | null = null;
-    try {
-      history = await fetchNcpSessionMessages(sessionId, 300);
-    } catch (error) {
-      if (!isMissingNcpSessionError(error)) {
-        throw error;
-      }
-    }
-    signal.throwIfAborted();
-
-    const sessionSummary = sessionSummariesRef.current.find((item) => item.sessionId === sessionId) ?? null;
-    return {
-      messages: history?.messages ?? [],
-      status: sessionSummary?.status === 'running' ? 'running' : 'idle'
-    };
-  }, []);
+  const loadSeed = useNcpConversationSeedLoader(sessionSummariesRef);
 
   const agent = useHydratedNcpAgent({
     sessionId: sessionKey,
     client: ncpClient,
-    loadSeed
+    loadSeed,
   });
 
   useEffect(() => {
@@ -169,43 +232,21 @@ export function NcpChatPage({ view }: ChatPageProps) {
     }
   }, [presenter, selectedSessionKey]);
 
-  const effectiveSessionProjectRoot = hasSessionProjectRootOverride ? pendingProjectRoot : selectedSession?.projectRoot ?? null;
-  const effectiveSessionProjectName = hasSessionProjectRootOverride ? getSessionProjectName(effectiveSessionProjectRoot) : selectedSession?.projectName ?? getSessionProjectName(effectiveSessionProjectRoot);
+  const effectiveSessionProjectRoot = hasSessionProjectRootOverride
+    ? pendingProjectRoot
+    : (selectedSession?.projectRoot ?? null);
+  const effectiveSessionProjectName = hasSessionProjectRootOverride
+    ? getSessionProjectName(effectiveSessionProjectRoot)
+    : (selectedSession?.projectName ??
+      getSessionProjectName(effectiveSessionProjectRoot));
+  const parentSessionId = selectedSession?.parentSessionId ?? null;
 
   const isSending = agent.isSending || agent.isRunning;
   const isAwaitingAssistantOutput = agent.isRunning;
   const canStopCurrentRun = agent.isRunning;
-  const stopDisabledReason = agent.isRunning ? null : '__preparing__';
-  const lastSendError = agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
-
-  useEffect(() => {
-    const attachRealtimeSessionStream = () => {
-      if (sessionStreamAttachInFlightRef.current) {
-        return;
-      }
-      if (agent.isHydrating || agent.isRunning || agent.isSending) {
-        return;
-      }
-
-      sessionStreamAttachInFlightRef.current = true;
-      void ncpClient
-        .stream({ sessionId: sessionKey })
-        .catch(() => undefined)
-        .finally(() => {
-          sessionStreamAttachInFlightRef.current = false;
-        });
-    };
-
-    return appClient.subscribe((event) => {
-      if (
-        event.type === 'session.run-status' &&
-        event.payload.sessionKey === sessionKey &&
-        event.payload.status === 'running'
-      ) {
-        attachRealtimeSessionStream();
-      }
-    });
-  }, [agent.isHydrating, agent.isRunning, agent.isSending, ncpClient, sessionKey]);
+  const stopDisabledReason = agent.isRunning ? null : "__preparing__";
+  const lastSendError =
+    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
 
   useEffect(() => {
     presenter.chatStreamActionsManager.bind({
@@ -220,16 +261,16 @@ export function NcpChatPage({ view }: ChatPageProps) {
           projectRoot:
             payload.sessionKey === pendingProjectRootSessionKey
               ? pendingProjectRoot
-              : selectedSession?.projectRoot ?? null,
+              : (selectedSession?.projectRoot ?? null),
           requestedSkills: payload.requestedSkills,
-          composerNodes: payload.composerNodes
+          composerNodes: payload.composerNodes,
         });
         const envelope = buildNcpRequestEnvelope({
           sessionId: payload.sessionKey,
           text: payload.message,
           attachments: payload.attachments,
           parts: payload.parts,
-          metadata
+          metadata,
         });
         if (!envelope) {
           return;
@@ -241,11 +282,13 @@ export function NcpChatPage({ view }: ChatPageProps) {
             if (payload.composerNodes && payload.composerNodes.length > 0) {
               presenter.chatInputManager.restoreComposerState?.(
                 payload.composerNodes,
-                payload.attachments ?? []
+                payload.attachments ?? [],
               );
             } else {
               presenter.chatInputManager.setDraft((currentDraft) =>
-                currentDraft.trim().length === 0 ? payload.message : currentDraft
+                currentDraft.trim().length === 0
+                  ? payload.message
+                  : currentDraft,
               );
             }
           }
@@ -264,7 +307,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
       resetStreamState: () => {
         selectedSessionKeyRef.current = null;
       },
-      applyHistoryMessages: () => {}
+      applyHistoryMessages: () => {},
     });
   }, [
     agent,
@@ -272,16 +315,20 @@ export function NcpChatPage({ view }: ChatPageProps) {
     pendingProjectRootSessionKey,
     presenter,
     selectedSession?.projectRoot,
-    sessionKey
+    sessionKey,
   ]);
 
   useEffect(() => {
-    if (!selectedSession || pendingProjectRootSessionKey !== selectedSession.key || (selectedSession.projectRoot ?? null) !== pendingProjectRoot) {
+    if (
+      !selectedSession ||
+      pendingProjectRootSessionKey !== selectedSession.key ||
+      (selectedSession.projectRoot ?? null) !== pendingProjectRoot
+    ) {
       return;
     }
     useChatInputStore.getState().setSnapshot({
       pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
+      pendingProjectRootSessionKey: null,
     });
   }, [pendingProjectRoot, pendingProjectRootSessionKey, selectedSession]);
 
@@ -290,27 +337,40 @@ export function NcpChatPage({ view }: ChatPageProps) {
     routeSessionKey,
     selectedSessionKey,
     selectedAgentId,
-    setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
+    setSelectedSessionKey:
+      presenter.chatSessionListManager.setSelectedSessionKey,
     setSelectedAgentId: presenter.chatSessionListManager.setSelectedAgentId,
     selectedSessionKeyRef,
     resetStreamState: presenter.chatStreamActionsManager.resetStreamState,
-    resolveAgentIdFromSessionKey
+    resolveAgentIdFromSessionKey,
   });
 
   useEffect(() => {
     presenter.chatUiManager.syncState({
-      pathname: location.pathname
+      pathname: location.pathname,
     });
     presenter.chatUiManager.bindActions({
       navigate,
-      confirm
+      confirm,
     });
   }, [confirm, location.pathname, navigate, presenter]);
 
-  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
+  const currentSessionDisplayName = selectedSession
+    ? sessionDisplayName(selectedSession)
+    : undefined;
+  const parentSession = useMemo(() => {
+    if (!parentSessionId) {
+      return null;
+    }
+    const parentSummary =
+      sessionSummaries.find(
+        (summary) => summary.sessionId === parentSessionId,
+      ) ?? null;
+    return parentSummary ? adaptNcpSessionSummary(parentSummary) : null;
+  }, [parentSessionId, sessionSummaries]);
   const currentSessionTypeLabel =
-    sessionTypeOptions.find((option) => option.value === selectedSessionType)?.label ??
-    resolveSessionTypeLabel(selectedSessionType);
+    sessionTypeOptions.find((option) => option.value === selectedSessionType)
+      ?.label ?? resolveSessionTypeLabel(selectedSessionType);
 
   useEffect(() => {
     presenter.chatInputManager.syncSnapshot({
@@ -328,7 +388,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
       canEditSessionType,
       sessionTypeUnavailable,
       skillRecords,
-      isSkillsLoading: sessionSkillsQuery.isLoading
+      isSkillsLoading: sessionSkillsQuery.isLoading,
     });
     presenter.chatThreadManager.syncSnapshot({
       isProviderStateResolved,
@@ -345,7 +405,11 @@ export function NcpChatPage({ view }: ChatPageProps) {
       isHistoryLoading: agent.isHydrating,
       messages: agent.visibleMessages,
       isSending,
-      isAwaitingAssistantOutput
+      isAwaitingAssistantOutput,
+      parentSessionKey: parentSession?.key ?? null,
+      parentSessionLabel: parentSession
+        ? sessionDisplayName(parentSession)
+        : null,
     });
   }, [
     agent.isHydrating,
@@ -360,6 +424,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     isSending,
     lastSendError,
     modelOptions,
+    parentSession,
     presenter,
     effectiveSessionProjectName,
     effectiveSessionProjectRoot,
@@ -372,7 +437,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     skillRecords,
     stopDisabledReason,
     threadRef,
-    agent.visibleMessages
+    agent.visibleMessages,
   ]);
 
   return (

package/src/components/chat/ncp/ncp-chat-thread.manager.ts

@@ -1,6 +1,7 @@
 import { appQueryClient } from '@/app-query-client';
 import { deleteNcpSessionSummaryInQueryClient } from '@/api/ncp-session-query-cache';
 import { deleteNcpSession as deleteNcpSessionApi } from '@/api/ncp-session';
+import type { ChatToolActionViewModel } from '@nextclaw/agent-chat-ui';
 import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
@@ -45,6 +46,54 @@ export class NcpChatThreadManager {
     this.uiManager.goToProviders();
   };
 
+  openSessionFromToolAction = (action: ChatToolActionViewModel) => {
+    if (action.kind !== 'open-session') {
+      return;
+    }
+    if (action.sessionKind === 'child' && !this.isCompactViewport()) {
+      const parentSessionKey =
+        action.parentSessionId?.trim() ||
+        useChatSessionListStore.getState().snapshot.selectedSessionKey ||
+        null;
+      useChatThreadStore.getState().setSnapshot({
+        childSessionDetailSessionKey: action.sessionId,
+        childSessionDetailParentSessionKey: parentSessionKey,
+        childSessionDetailLabel: action.label?.trim() || null,
+      });
+      return;
+    }
+    this.uiManager.goToSession(action.sessionId);
+  };
+
+  closeChildSessionDetail = () => {
+    useChatThreadStore.getState().setSnapshot({
+      childSessionDetailSessionKey: null,
+      childSessionDetailParentSessionKey: null,
+      childSessionDetailLabel: null,
+    });
+  };
+
+  goToParentSession = () => {
+    const {
+      parentSessionKey,
+      childSessionDetailParentSessionKey,
+    } = useChatThreadStore.getState().snapshot;
+    const resolvedParentSessionKey =
+      parentSessionKey ?? childSessionDetailParentSessionKey;
+    if (!resolvedParentSessionKey) {
+      return;
+    }
+    this.closeChildSessionDetail();
+    this.uiManager.goToSession(resolvedParentSessionKey);
+  };
+
+  private isCompactViewport = (): boolean => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return false;
+    }
+    return window.matchMedia('(max-width: 767px)').matches;
+  };
+
   private deleteCurrentSession = async () => {
     const {
       snapshot: { selectedSessionKey }