@nextclaw/ui 0.17.1 → 0.17.2

package/src/features/chat/features/ncp/hooks/__tests__/use-hydrated-ncp-agent.test.tsx

@@ -85,7 +85,10 @@ describe("useHydratedNcpAgent", () => {
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
-    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-a" });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-a" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
 
     rerender({ sessionId: "session-b" });
 
@@ -94,7 +97,10 @@ describe("useHydratedNcpAgent", () => {
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
-    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-b" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
     expect(mocks.stream).toHaveBeenCalledTimes(2);
   });
 
@@ -207,12 +213,13 @@ describe("useHydratedNcpAgent", () => {
       expect(result.current.isHydrating).toBe(false);
     });
     expect(loadSeed).not.toHaveBeenCalled();
-    expect(mocks.stream).toHaveBeenCalledWith({
-      sessionId: "session-materialized",
-    });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-materialized" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
   });
 
-  it("reloads missed state and reconnects after the live stream disconnects", async () => {
+  it("reloads missed state and remains usable after repeated live stream disconnects", async () => {
     vi.useFakeTimers();
     try {
       const connected = new Promise<void>(() => {});
@@ -220,9 +227,15 @@ describe("useHydratedNcpAgent", () => {
         stop: mocks.stop.mockResolvedValue(undefined),
         stream: mocks.stream
           .mockRejectedValueOnce(new Error("stream disconnected"))
+          .mockRejectedValueOnce(new Error("stream disconnected again"))
           .mockImplementationOnce(() => connected),
         subscribe: vi.fn(() => () => {}),
-        send: mocks.send,
+        send: mocks.send.mockResolvedValue({
+          sessionId: "session-recovery",
+          userMessageId: "user-after-recovery",
+          assistantMessageId: null,
+          runId: null,
+        }),
       } as unknown as NcpAgentClientEndpoint;
       const recoveredMessage = {
         id: "message-recovered",
@@ -235,6 +248,7 @@ describe("useHydratedNcpAgent", () => {
       const loadSeed = vi
         .fn()
         .mockResolvedValueOnce({ messages: [], status: "running" })
+        .mockResolvedValueOnce({ messages: [], status: "running" })
         .mockResolvedValueOnce({
           messages: [recoveredMessage],
           status: "idle",
@@ -254,15 +268,22 @@ describe("useHydratedNcpAgent", () => {
       await act(async () => {
         await vi.runOnlyPendingTimersAsync();
       });
+      await vi.waitFor(() => expect(mocks.stream).toHaveBeenCalledTimes(2));
+      await act(async () => {
+        await vi.runOnlyPendingTimersAsync();
+      });
       await vi.waitFor(() => {
         expect(result.current.visibleMessages).toEqual([recoveredMessage]);
       });
 
-      expect(loadSeed).toHaveBeenCalledTimes(2);
-      expect(mocks.stream).toHaveBeenCalledTimes(2);
-      expect(mocks.send).not.toHaveBeenCalled();
+      expect(loadSeed).toHaveBeenCalledTimes(3);
+      expect(mocks.stream).toHaveBeenCalledTimes(3);
       expect(result.current.hydrateError).toBeNull();
       expect(result.current.isRunning).toBe(false);
+      await act(async () => {
+        await result.current.send("after recovery");
+      });
+      expect(mocks.send).toHaveBeenCalledOnce();
     } finally {
       vi.useRealTimers();
     }
@@ -306,3 +327,69 @@ describe("useHydratedNcpAgent", () => {
     }
   });
 });
+
+describe("useHydratedNcpAgent stream reconciliation", () => {
+  it("reconciles history after the stream opens without overwriting newer live completion", async () => {
+    let subscriber: NcpEndpointSubscriber | null = null;
+    let resolveReconcile: ((seed: { messages: readonly NcpMessage[]; status: "running" }) => void) | null = null;
+    const reconcileSeed = new Promise<{ messages: readonly NcpMessage[]; status: "running" }>((resolve) => {
+      resolveReconcile = resolve;
+    });
+    const client = {
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockImplementation((_payload, observer) => {
+        observer?.onOpen?.();
+        return new Promise<void>(() => {});
+      }),
+      subscribe: vi.fn((nextSubscriber: NcpEndpointSubscriber) => {
+        subscriber = nextSubscriber;
+        return () => {};
+      }),
+    } as unknown as NcpAgentClientEndpoint;
+    const loadSeed = vi
+      .fn()
+      .mockResolvedValueOnce({ messages: [], status: "running" })
+      .mockImplementationOnce(() => reconcileSeed);
+    const finalMessage: NcpMessage = {
+      id: "assistant-gap",
+      sessionId: "session-gap",
+      role: "assistant",
+      status: "final",
+      parts: [{ type: "text", text: "Recovered without refresh" }],
+      timestamp: "2026-08-14T00:00:00.000Z",
+    };
+    const { result } = renderHook(() =>
+      useHydratedNcpAgent({
+        sessionId: "session-gap",
+        client,
+        loadSeed,
+      }),
+    );
+
+    await waitFor(() => expect(loadSeed).toHaveBeenCalledTimes(2));
+    act(() => {
+      subscriber?.({
+        type: NcpEventType.MessageSent,
+        payload: { sessionId: "session-gap", message: finalMessage },
+      });
+      subscriber?.({
+        type: NcpEventType.RunFinished,
+        payload: { sessionId: "session-gap", runId: "run-gap" },
+      });
+    });
+    await waitFor(() => expect(result.current.visibleMessages).toEqual([finalMessage]));
+
+    await act(async () => {
+      resolveReconcile?.({
+        messages: [{ ...finalMessage, status: "streaming", parts: [{ type: "text", text: "Recovered" }] }],
+        status: "running",
+      });
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([finalMessage]);
+      expect(result.current.isRunning).toBe(false);
+    });
+  });
+});

package/src/features/chat/features/ncp/hooks/use-ncp-session-conversation.ts

@@ -19,6 +19,8 @@ import { nextclawClient } from "@/shared/lib/api";
 
 const NCP_AGENT_UNAVAILABLE_DURING_STARTUP =
   "ncp agent unavailable during startup";
+const NCP_AGENT_STREAM_OPEN_TIMEOUT_MS = 15_000;
+const NCP_AGENT_STREAM_IDLE_TIMEOUT_MS = 70_000;
 
 export { fetchNcpSessionConversationSeed } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
@@ -42,6 +44,8 @@ export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint
     baseUrl: API_BASE,
     basePath: "/api/ncp/agent",
     fetchImpl: createNcpAppClientFetch(),
+    streamOpenTimeoutMs: NCP_AGENT_STREAM_OPEN_TIMEOUT_MS,
+    streamIdleTimeoutMs: NCP_AGENT_STREAM_IDLE_TIMEOUT_MS,
   });
 }
 

package/src/features/chat/features/ncp/hooks/use-ncp-session-queries.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import {
   fetchNcpSessionSkills,
+  fetchNcpSessionTokenUsage,
   fetchNcpSessions
 } from '@/shared/lib/api';
 
@@ -30,3 +31,12 @@ export function useNcpSessionSkills(params: {
     ...ncpSessionQueryDefaults
   });
 }
+
+export function useNcpSessionTokenUsage(sessionId: string | null) {
+  return useQuery({
+    queryKey: ['ncp-session-token-usage', sessionId],
+    queryFn: () => fetchNcpSessionTokenUsage(sessionId as string),
+    enabled: Boolean(sessionId),
+    ...ncpSessionQueryDefaults
+  });
+}

package/src/features/chat/features/session/utils/__tests__/ncp-session-adapter.utils.test.ts

@@ -35,6 +35,33 @@ it('preserves NCP extension parts for the chat presentation adapter', () => {
   ]);
 });
 
+it('preserves standard tool execution timing without reading opaque result timing', () => {
+  const adapted = adaptNcpMessageToUiMessage({
+    id: 'ncp-message-timing-1',
+    sessionId: 'ncp-session-1',
+    role: 'assistant',
+    status: 'streaming',
+    timestamp: '2026-08-14T00:00:00.000Z',
+    parts: [{
+      type: 'tool-invocation',
+      toolCallId: 'tool-timing-1',
+      toolName: 'exec',
+      state: 'call',
+      args: { command: 'pnpm test' },
+      result: { durationMs: 999_999 },
+      execution: { startedAt: '2026-08-14T00:00:01.000Z' },
+    }],
+  });
+
+  expect(adapted.parts[0]).toMatchObject({
+    type: 'tool-invocation',
+    toolInvocation: {
+      toolCallId: 'tool-timing-1',
+      execution: { startedAt: '2026-08-14T00:00:01.000Z' },
+    },
+  });
+});
+
 describe('adaptNcpSessionSummary', () => {
   it('maps session metadata into shared session entry fields', () => {
     const adapted = adaptNcpSessionSummary(

package/src/features/chat/features/session/utils/ncp-session-adapter.utils.ts

@@ -284,7 +284,8 @@ function toUiParts(parts: NcpMessagePart[]): UIMessage['parts'] {
           toolCallId: part.toolCallId ?? `${part.toolName}-${Math.random().toString(36).slice(2, 8)}`,
           toolName: part.toolName,
           args: stringifyUnknown(part.args),
-          result: part.result
+          result: part.result,
+          ...(part.execution ? { execution: { ...part.execution } } : {})
         }
       });
     }

package/src/features/chat/features/workspace/components/__tests__/chat-session-child-sessions.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatSessionChildSessions } from '@/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions';
+import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
+
+const mocks = vi.hoisted(() => ({
+  openSideChatDraft: vi.fn(),
+  selectChildSessionDetail: vi.fn(),
+}));
+
+vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
+  usePresenter: () => ({ chatThreadManager: mocks }),
+}));
+
+beforeEach(() => vi.clearAllMocks());
+
+function createChildSession(): ResolvedChildSessionTab {
+  return {
+    sessionKey: 'child-1',
+    parentSessionKey: 'parent-1',
+    title: 'Research branch',
+    agentId: 'main',
+    updatedAt: null,
+    lastMessageAt: null,
+    readAt: null,
+    runStatus: undefined,
+    sessionTypeLabel: 'Native',
+    preferredModel: 'openai/gpt-5',
+    projectName: 'nextbot',
+    projectRoot: '/tmp/nextbot',
+  };
+}
+
+it('opens a new child-session draft from the management page', async () => {
+  const user = userEvent.setup();
+  render(<ChatSessionChildSessions childSessionTabs={[]} sessionKey="parent-1" />);
+
+  expect(screen.getByText('No child sessions yet.')).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: 'New child session' }));
+  expect(mocks.openSideChatDraft).toHaveBeenCalledWith('parent-1');
+});
+
+it('keeps existing child sessions selectable beside the create action', async () => {
+  const user = userEvent.setup();
+  render(<ChatSessionChildSessions childSessionTabs={[createChildSession()]} sessionKey="parent-1" />);
+
+  expect(screen.getByRole('button', { name: 'New child session' })).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: /Research branch/ }));
+  expect(mocks.selectChildSessionDetail).toHaveBeenCalledWith('child-1');
+});

package/src/features/chat/features/workspace/components/__tests__/chat-session-token-usage.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatSessionTokenUsage } from '@/features/chat/features/workspace/components/overview/chat-session-token-usage';
+
+const mocks = vi.hoisted(() => ({
+  refetch: vi.fn(),
+  query: {
+    data: undefined as unknown,
+    isLoading: false,
+    isError: false,
+  },
+}));
+
+vi.mock('@/features/chat/features/ncp/hooks/use-ncp-session-queries', () => ({
+  useNcpSessionTokenUsage: () => ({
+    ...mocks.query,
+    refetch: mocks.refetch,
+  }),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.refetch.mockResolvedValue(undefined);
+  mocks.query.data = {
+    sessionId: 'parent-1',
+    totals: {
+      inputTokens: 1_250,
+      outputTokens: 240,
+      cachedInputTokens: 500,
+      totalTokens: 1_490,
+      cacheHitRate: 0.4,
+    },
+    models: [
+      {
+        model: 'openai/gpt-5',
+        inputTokens: 1_000,
+        outputTokens: 200,
+        cachedInputTokens: 400,
+        totalTokens: 1_200,
+        cacheHitRate: 0.4,
+        runCount: 2,
+        modelCallCount: 3,
+        reportedModelCallCount: 3,
+        status: 'reported',
+      },
+      {
+        model: 'anthropic/claude-sonnet-4',
+        inputTokens: 250,
+        outputTokens: 40,
+        cachedInputTokens: 100,
+        totalTokens: 290,
+        cacheHitRate: 0.4,
+        runCount: 1,
+        modelCallCount: 2,
+        reportedModelCallCount: 1,
+        status: 'partial',
+      },
+    ],
+    runCount: 3,
+    modelCallCount: 5,
+    reportedModelCallCount: 4,
+    status: 'partial',
+  };
+  mocks.query.isLoading = false;
+  mocks.query.isError = false;
+});
+
+it('shows totals, cache hit rate, and usage grouped by model', () => {
+  render(<ChatSessionTokenUsage sessionKey="parent-1" />);
+
+  expect(screen.getByText('Token usage')).toBeTruthy();
+  expect(screen.getByText('1,490')).toBeTruthy();
+  expect(screen.getAllByText('40%').length).toBeGreaterThan(0);
+  expect(screen.getByText('openai/gpt-5')).toBeTruthy();
+  expect(screen.getByText('anthropic/claude-sonnet-4')).toBeTruthy();
+  expect(screen.getAllByText('Partial usage')).toHaveLength(2);
+});
+
+it('lets users retry after token usage fails to load', async () => {
+  const user = userEvent.setup();
+  mocks.query.data = undefined;
+  mocks.query.isError = true;
+
+  render(<ChatSessionTokenUsage sessionKey="parent-1" />);
+
+  expect(screen.getByRole('alert').textContent).toContain('Couldn’t load token usage.');
+  await user.click(screen.getByRole('button', { name: 'Retry' }));
+  expect(mocks.refetch).toHaveBeenCalledTimes(1);
+});

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-panel-content.test.tsx

@@ -78,6 +78,10 @@ vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
   }),
 }));
 
+vi.mock('@/features/chat/features/workspace/components/overview/chat-session-token-usage', () => ({
+  ChatSessionTokenUsage: () => <section><h3>Token usage</h3></section>,
+}));
+
 vi.mock('@/shared/lib/api', async (importOriginal) => ({
   ...(await importOriginal()),
   createServerPathDirectory: mocks.createServerPathDirectory,
@@ -250,41 +254,29 @@ it('shows all session workspace entries in the overview', async () => {
   );
 
   expect(screen.getByText('Overview')).toBeTruthy();
+  expect(screen.getByText('Token usage')).toBeTruthy();
   const childSessionsButton = screen.getByRole('button', {
     name: /Child sessions/,
   });
   const cronJobsButton = screen.getByRole('button', {
     name: /Scheduled tasks/,
   });
+  const projectFilesButton = screen.getByRole('button', { name: /Project files/ });
 
   expect((childSessionsButton as HTMLButtonElement).disabled).toBe(false);
   expect((cronJobsButton as HTMLButtonElement).disabled).toBe(false);
+  expect(projectFilesButton.compareDocumentPosition(screen.getByText('Token usage')) & Node.DOCUMENT_POSITION_FOLLOWING)
+    .toBeTruthy();
 
   await user.click(childSessionsButton);
   await user.click(cronJobsButton);
-  await user.click(screen.getByRole('button', { name: /Project files/ }));
+  await user.click(projectFilesButton);
 
   expect(mocks.openChildSessions).toHaveBeenCalledWith('parent-1');
   expect(mocks.openSessionCronPanel).toHaveBeenCalledWith('parent-1');
   expect(mocks.openProjectFiles).toHaveBeenCalledWith('parent-1');
 });
 
-it('shows an empty child sessions page instead of disabling the entry', () => {
-  render(
-    <ChatSessionWorkspacePanelContent
-      activeSelection={{ kind: 'child-sessions' }}
-      childSessionTabs={[]}
-      filePreviewRefreshVersion={0}
-      sessionKey="parent-1"
-      sessionCronJobs={[]}
-      sessionProjectRoot={null}
-      sessionWorkingDir={null}
-    />,
-  );
-
-  expect(screen.getByText('No child sessions yet.')).toBeTruthy();
-});
-
 it('shows the selected session project as a hierarchical file tree', () => {
   render(
     <ChatSessionWorkspacePanelContent

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -15,6 +15,8 @@ import { SessionConversationArea } from '@/features/chat/features/conversation/c
 import { ChatSessionWorkspaceFilePreview } from '@/features/chat/features/workspace/components/chat-session-workspace-file-preview';
 import { ChatSessionWorkspaceDirectoryBrowser } from '@/features/chat/features/workspace/components/chat-session-workspace-directory-browser';
 import { SessionCronJobContent } from '@/features/chat/features/workspace/components/session-cron-job-content';
+import { ChatSessionChildSessions } from '@/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions';
+import { ChatSessionTokenUsage } from '@/features/chat/features/workspace/components/overview/chat-session-token-usage';
 import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
 import type { WorkspaceSelection } from '@/features/chat/features/workspace/utils/chat-workspace-panel-view-model.utils';
 import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
@@ -126,50 +128,7 @@ function WorkspaceOverview({
             }}
           />
         </div>
-      </div>
-    </div>
-  );
-}
-
-function WorkspaceChildSessions({ childSessionTabs }: { childSessionTabs: readonly ResolvedChildSessionTab[] }) {
-  const presenter = usePresenter();
-
-  return (
-    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
-      <div className="mx-auto max-w-xl">
-        <div className="flex items-center gap-2">
-          <h2 className="text-base font-semibold text-gray-900">{t('chatWorkspaceChildSessions')}</h2>
-          <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
-            {childSessionTabs.length}
-          </span>
-        </div>
-        {childSessionTabs.length === 0 ? (
-          <div className="py-10 text-center text-sm text-gray-500">{t('chatWorkspaceChildSessionsEmpty')}</div>
-        ) : (
-          <div className="mt-4 space-y-2">
-            {childSessionTabs.map((tab) => (
-              <button
-                key={tab.sessionKey}
-                type="button"
-                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
-                onClick={() => presenter.chatThreadManager.selectChildSessionDetail(tab.sessionKey)}
-              >
-                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
-                  <GitBranch className="h-4 w-4" />
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="block truncate text-sm font-medium text-gray-900">{tab.title}</span>
-                  {tab.projectName || tab.sessionTypeLabel ? (
-                    <span className="mt-0.5 block truncate text-xs text-gray-500">
-                      {[tab.sessionTypeLabel, tab.projectName].filter(Boolean).join(' · ')}
-                    </span>
-                  ) : null}
-                </span>
-                <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
-              </button>
-            ))}
-          </div>
-        )}
+        <ChatSessionTokenUsage sessionKey={sessionKey} />
       </div>
     </div>
   );
@@ -299,7 +258,7 @@ function WorkspaceSelectedContent({
   }
 
   if (activeSelection.kind === 'child-sessions') {
-    return <WorkspaceChildSessions childSessionTabs={childSessionTabs} />;
+    return <ChatSessionChildSessions childSessionTabs={childSessionTabs} sessionKey={sessionKey} />;
   }
 
   if (activeSelection.kind === 'side-chat-draft') {

package/src/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions.tsx

@@ -0,0 +1,66 @@
+import { ChevronRight, GitBranch, MessageSquarePlus } from 'lucide-react';
+
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import type { ResolvedChildSessionTab } from '@/features/chat/features/ncp/hooks/use-ncp-child-session-tabs-view';
+import { t } from '@/shared/lib/i18n';
+
+export function ChatSessionChildSessions({
+  childSessionTabs,
+  sessionKey,
+}: {
+  childSessionTabs: readonly ResolvedChildSessionTab[];
+  sessionKey: string | null;
+}) {
+  const presenter = usePresenter();
+
+  return (
+    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+      <div className="mx-auto max-w-xl">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <h2 className="truncate text-base font-semibold text-gray-900">{t('chatWorkspaceChildSessions')}</h2>
+            <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
+              {childSessionTabs.length}
+            </span>
+          </div>
+          <button
+            type="button"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={!sessionKey}
+            onClick={() => presenter.chatThreadManager.openSideChatDraft(sessionKey)}
+          >
+            <MessageSquarePlus className="h-3.5 w-3.5" />
+            <span>{t('chatWorkspaceCreateChildSession')}</span>
+          </button>
+        </div>
+        {childSessionTabs.length === 0 ? (
+          <div className="py-10 text-center text-sm text-gray-500">{t('chatWorkspaceChildSessionsEmpty')}</div>
+        ) : (
+          <div className="mt-4 space-y-2">
+            {childSessionTabs.map((tab) => (
+              <button
+                key={tab.sessionKey}
+                type="button"
+                className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+                onClick={() => presenter.chatThreadManager.selectChildSessionDetail(tab.sessionKey)}
+              >
+                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+                  <GitBranch className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium text-gray-900">{tab.title}</span>
+                  {tab.projectName || tab.sessionTypeLabel ? (
+                    <span className="mt-0.5 block truncate text-xs text-gray-500">
+                      {[tab.sessionTypeLabel, tab.projectName].filter(Boolean).join(' · ')}
+                    </span>
+                  ) : null}
+                </span>
+                <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}