@nextclaw/ui 0.20.1 → 0.20.2

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -21,7 +21,10 @@ import {
   useCreateProject,
   useProjects,
 } from "@/shared/hooks/use-projects";
-import type { ProjectAddExistingRequest, ProjectCreateRequest } from "@/shared/lib/api";
+import type {
+  ProjectAddExistingRequest,
+  ProjectCreateRequest,
+} from "@/shared/lib/api";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from "@/shared/lib/i18n";
@@ -50,6 +53,7 @@ import { useChatNewSessionTypePreference } from "@/features/chat/features/sessio
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import { SIDEBAR_RAIL_WIDTH_CLASS } from "@/app/components/layout/sidebar-rail.styles";
 import { ChatProjectAddDialog } from "@/features/chat/features/project/components/chat-project-add-dialog";
+import { useChatSidebarContextCounts } from "@/features/chat/features/session/hooks/use-chat-sidebar-context-counts";
 
 type ChatSidebarVariant = "desktop" | "mobile";
 
@@ -116,7 +120,9 @@ export function ChatSidebar({
   const projectsQuery = useProjects();
   const projectCreateMutation = useCreateProject();
   const projectAddExistingMutation = useAddExistingProject();
-  const { isLoading, items } = useNcpSessionListView();
+  const { allItems, isLoading, items } = useNcpSessionListView();
+  const { cronJobCountByProjectRoot, cronJobCountBySessionKey } =
+    useChatSidebarContextCounts(allItems);
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(
@@ -160,21 +166,27 @@ export function ChatSidebar({
     [items],
   );
   const childSessionsByParentKey = useMemo(
-    () => groupChildSessionsByParentKey(items),
-    [items],
+    () => groupChildSessionsByParentKey(allItems),
+    [allItems],
   );
   const groups = useMemo(
     () => groupSessionsByDate(sortedItems, pinnedSessionKeys),
     [pinnedSessionKeys, sortedItems],
   );
   const projectGroups = useMemo(
-    () => groupSessionsByProject(
-      sortedItems,
-      pinnedSessionKeys,
+    () =>
+      groupSessionsByProject(
+        sortedItems,
+        pinnedSessionKeys,
+        pinnedProjectRoots,
+        projectsQuery.data?.projects ?? [],
+      ),
+    [
       pinnedProjectRoots,
-      projectsQuery.data?.projects ?? [],
-    ),
-    [pinnedProjectRoots, pinnedSessionKeys, projectsQuery.data?.projects, sortedItems],
+      pinnedSessionKeys,
+      projectsQuery.data?.projects,
+      sortedItems,
+    ],
   );
   const sessionTypeOptions = useMemo(
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
@@ -220,6 +232,7 @@ export function ChatSidebar({
       optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
       agentsById={agentsById}
       childSessionsByParentKey={childSessionsByParentKey}
+      cronJobCount={cronJobCountBySessionKey.get(item.session.key) ?? 0}
       editingSessionKey={editingSessionKey}
       draftLabel={draftLabel}
       savingSessionKey={savingSessionKey}
@@ -227,12 +240,6 @@ export function ChatSidebar({
       isPinned={pinnedSessionKeys.has(item.session.key)}
       sessionTitle={getSessionTitle}
       onSelectSession={presenter.chatSessionListManager.selectSession}
-      onOpenChildSessions={(parentSessionKey, activeChildSessionKey) =>
-        presenter.chatThreadManager.openChildSessionPanel({
-          parentSessionKey,
-          activeChildSessionKey,
-        })
-      }
       onStartEditingSessionLabel={startEditingSessionLabel}
       onDraftLabelChange={setDraftLabel}
       onSaveSessionLabel={saveSessionLabel}
@@ -256,7 +263,9 @@ export function ChatSidebar({
     projectAddExistingMutation.reset();
     setIsProjectAddOpen(true);
   };
-  const createProjectFromSidebar = async (input: ProjectCreateRequest): Promise<void> => {
+  const createProjectFromSidebar = async (
+    input: ProjectCreateRequest,
+  ): Promise<void> => {
     await projectCreateMutation.mutateAsync(input);
     setIsProjectAddOpen(false);
   };
@@ -274,10 +283,7 @@ export function ChatSidebar({
         isMobileVariant
           ? "flex-1 overflow-hidden"
           : shouldCollapse
-            ? cn(
-                SIDEBAR_RAIL_WIDTH_CLASS,
-                "shrink-0",
-              )
+            ? cn(SIDEBAR_RAIL_WIDTH_CLASS, "shrink-0")
             : "w-[280px] shrink-0",
       )}
       data-sidebar-collapsed={shouldCollapse ? "true" : "false"}
@@ -339,6 +345,7 @@ export function ChatSidebar({
         onAddProject={openProjectAdd}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
+        projectCronJobCountByRoot={cronJobCountByProjectRoot}
         renderSessionItem={renderSessionItem}
         sessionTypeOptions={sessionTypeOptions}
       />

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-controller.test.tsx

@@ -1,6 +1,6 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import type { UiNcpSessionQueuedInputView } from '@nextclaw/client-sdk';
+import { NextClawClientError, type UiNcpSessionQueuedInputView } from '@nextclaw/client-sdk';
 import type { NcpAgentSendEnvelope, NcpMessage, NcpRunHandle } from '@nextclaw/ncp';
 
 import { useSessionConversationController } from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
@@ -448,3 +448,43 @@ describe('useSessionConversationController backend run queue', () => {
     expect(params.onSessionMaterialized).not.toHaveBeenCalled();
   });
 });
+
+describe('useSessionConversationController stale queue reconciliation', () => {
+  it('reconciles repeated stale queued actions without exposing their not-found errors', async () => {
+    const queuedInput = createQueuedInput();
+    const params = createControllerParams({ isRunning: true, queuedInputs: [queuedInput] });
+    params.runQueue.steerQueuedInput.mockRejectedValue(new NextClawClientError({
+      code: 'NOT_FOUND',
+      message: `queued input not found in session session-1: ${queuedInput.id}`,
+      status: 404,
+    }));
+    const { result } = renderHook(() => useSessionConversationController(params));
+
+    act(() => result.current.steerQueuedInput(queuedInput.id));
+    await waitFor(() => expect(params.runQueue.refreshPendingInputs).toHaveBeenCalledTimes(1));
+
+    act(() => result.current.steerQueuedInput(queuedInput.id));
+    await waitFor(() => expect(params.runQueue.refreshPendingInputs).toHaveBeenCalledTimes(2));
+
+    expect(params.setSendError).toHaveBeenLastCalledWith(null);
+    expect(params.setSendError).not.toHaveBeenCalledWith(expect.stringContaining('queued input not found'));
+  });
+
+  it('keeps a real steering failure visible', async () => {
+    const queuedInput = createQueuedInput();
+    const params = createControllerParams({ isRunning: true, queuedInputs: [queuedInput] });
+    params.runQueue.steerQueuedInput.mockRejectedValue(new NextClawClientError({
+      code: 'STEER_UNAVAILABLE',
+      message: 'The active runtime cannot accept this input at the next safe step.',
+      status: 409,
+    }));
+    const { result } = renderHook(() => useSessionConversationController(params));
+
+    act(() => result.current.steerQueuedInput(queuedInput.id));
+
+    await waitFor(() => expect(params.setSendError).toHaveBeenCalledWith(
+      'The active runtime cannot accept this input at the next safe step.',
+    ));
+    expect(params.runQueue.refreshPendingInputs).not.toHaveBeenCalled();
+  });
+});

package/src/features/chat/features/conversation/hooks/use-session-pending-input-actions.ts

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
-import type {
-  UiNcpSessionPendingInputView,
-  UiNcpSessionQueuedInputView,
+import {
+  NextClawClientError,
+  type UiNcpSessionPendingInputView,
+  type UiNcpSessionQueuedInputView,
 } from '@nextclaw/client-sdk';
 import type { NcpAgentSendEnvelope } from '@nextclaw/ncp';
 
@@ -20,10 +21,17 @@ type ComposerDraftSnapshot = Pick<
 
 type SessionRunQueue = {
   readonly inputs: readonly UiNcpSessionQueuedInputView[];
+  readonly refreshPendingInputs: () => Promise<readonly UiNcpSessionPendingInputView[]>;
   readonly removeQueuedInput: (id: string) => Promise<UiNcpSessionQueuedInputView | null>;
   readonly steerQueuedInput: (id: string) => Promise<UiNcpSessionPendingInputView | null>;
 };
 
+function isStaleQueuedInputError(error: unknown): boolean {
+  return error instanceof NextClawClientError
+    && error.status === 404
+    && error.code === 'NOT_FOUND';
+}
+
 export type SubmittingQueuedInput = {
   readonly attachments: readonly SessionQueuedInputAttachmentPreview[];
   readonly id: string;
@@ -127,7 +135,17 @@ export function useQueuedInputActions(params: {
   const steerQueuedInput = useCallback((id: string) => {
     void runQueue.steerQueuedInput(id).then((steered) => {
       if (steered) setSendError(null);
-    }).catch((error) => {
+    }).catch(async (error) => {
+      if (isStaleQueuedInputError(error)) {
+        try {
+          await runQueue.refreshPendingInputs();
+          setSendError(null);
+          return;
+        } catch (refreshError) {
+          setSendError(refreshError instanceof Error ? refreshError.message : String(refreshError));
+          return;
+        }
+      }
       setSendError(error instanceof Error ? error.message : String(error));
     });
   }, [runQueue, setSendError]);

package/src/features/chat/features/message/utils/__tests__/chat-message-trigger-details.utils.test.ts

@@ -109,4 +109,39 @@ describe("buildChatMessageTriggerDetails", () => {
       "run-trigger-metadata",
     ]);
   });
+
+  it("keeps a completed steering user message actionable from persisted run metadata", () => {
+    const details = buildChatMessageTriggerDetails({
+      labels,
+      message: {
+        metadata: {
+          run_spec: {
+            runId: "run-1",
+            model: "openai/gpt-5.6",
+          },
+          run_trigger: {
+            version: 1,
+            actor: "human",
+            source: "internal",
+            sourceMessageId: "user-steering",
+            targetRunId: "run-1",
+            triggeredAt: "2026-08-25T13:39:04.000Z",
+          },
+        },
+      },
+    });
+
+    expect(details).toMatchObject({
+      triggerLabel: "More actions",
+      items: [{
+        key: "run-trigger-metadata",
+        dialog: {
+          rows: expect.arrayContaining([
+            { label: "Target run", value: "run-1" },
+            { label: "Run model", value: "openai/gpt-5.6" },
+          ]),
+        },
+      }],
+    });
+  });
 });

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

@@ -73,4 +73,54 @@ describe('useNcpAgentRuntime backend queue submission', () => {
       expect(result.current.visibleMessages).toEqual([queuedMessage]);
     });
   });
+
+  it('keeps a steered message in the pending projection instead of accepting it as a new run', async () => {
+    const manager = new DefaultNcpAgentConversationStateManager();
+    manager.hydrate({ sessionId: 'session-1', messages: [] });
+    await manager.dispatch({
+      type: NcpEventType.RunStarted,
+      payload: {
+        sessionId: 'session-1',
+        runId: 'run-1',
+        messageId: 'assistant-1',
+      },
+    });
+    const send = vi.fn(async (envelope: NcpAgentSendEnvelope) => ({
+      assistantMessageId: null,
+      delivery: 'steered' as const,
+      runId: 'run-1',
+      sessionId: 'session-1',
+      userMessageId: envelope.message.id,
+    }));
+    const client = {
+      abort: vi.fn(async () => undefined),
+      send,
+      stop: vi.fn(async () => undefined),
+      stream: vi.fn(async () => undefined),
+      subscribe: vi.fn(() => () => undefined),
+    } as unknown as NcpAgentClientEndpoint;
+    const { result } = renderHook(() => useNcpAgentRuntime({
+      client,
+      manager,
+      sessionId: 'session-1',
+    }));
+
+    await act(async () => {
+      await result.current.send({
+        delivery: 'prefer-steer',
+        message: {
+          id: 'user-steering',
+          sessionId: 'session-1',
+          role: 'user',
+          status: 'final',
+          parts: [{ type: 'text', text: 'change direction' }],
+          timestamp: '2026-08-25T00:00:00.000Z',
+        },
+        sessionId: 'session-1',
+      });
+    });
+
+    expect(result.current.visibleMessages).toEqual([]);
+    expect(result.current.snapshot.activeRun?.runId).toBe('run-1');
+  });
 });

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-list-view.test.tsx

@@ -62,13 +62,34 @@ describe("useNcpSessionListView", () => {
   it("can override the hidden sidebar query for header switching", () => {
     useChatSessionListStore.getState().setSnapshot({ query: "Alpha" });
 
-    const { result } = renderHook(() =>
-      useNcpSessionListView({ query: "" }),
-    );
+    const { result } = renderHook(() => useNcpSessionListView({ query: "" }));
 
     expect(result.current.items.map((item) => item.session.key)).toEqual([
       "session:alpha",
       "session:beta",
     ]);
   });
+
+  it("keeps hidden child sessions available for sidebar context counts", () => {
+    mocks.sessions.push({
+      ...createSummary("session:alpha:child", "Child Task"),
+      metadata: {
+        label: "Child Task",
+        session_type: "native",
+        parent_session_id: "session:alpha",
+      },
+    });
+
+    const { result } = renderHook(() => useNcpSessionListView());
+
+    expect(result.current.items.map((item) => item.session.key)).toEqual([
+      "session:alpha",
+      "session:beta",
+    ]);
+    expect(result.current.allItems.map((item) => item.session.key)).toEqual([
+      "session:alpha",
+      "session:beta",
+      "session:alpha:child",
+    ]);
+  });
 });

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

@@ -1,17 +1,20 @@
-import { useMemo } from 'react';
-import type { SessionEntryView } from '@/shared/lib/api';
-import { sessionMatchesQuery } from '@/features/chat/features/session/utils/chat-session-display.utils';
-import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
-import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
-import { useNcpSessions } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
-import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
+import { useMemo } from "react";
+import type { SessionEntryView } from "@/shared/lib/api";
+import { sessionMatchesQuery } from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
+import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
 
 export type NcpSessionListItemView = {
   session: SessionEntryView;
   runStatus?: SessionRunStatus;
 };
 
-function filterSessionsByQuery(sessions: readonly SessionEntryView[], query: string): SessionEntryView[] {
+function filterSessionsByQuery(
+  sessions: readonly SessionEntryView[],
+  query: string,
+): SessionEntryView[] {
   return sessions.filter((session) => sessionMatchesQuery(session, query));
 }
 
@@ -22,26 +25,39 @@ function shouldShowSessionInSidebar(session: SessionEntryView): boolean {
   return session.isPromotedChildSession === true;
 }
 
-export function useNcpSessionListView(params: { limit?: number; query?: string | null } = {}) {
+export function useNcpSessionListView(
+  params: { limit?: number; query?: string | null } = {},
+) {
   const storedQuery = useChatSessionListStore((state) => state.snapshot.query);
   const query = params.query ?? storedQuery;
   const sessionsQuery = useNcpSessions({ limit: params.limit ?? 200 });
 
-  const items = useMemo<NcpSessionListItemView[]>(() => {
+  const allItems = useMemo<NcpSessionListItemView[]>(() => {
     const summaries = sessionsQuery.data?.sessions ?? [];
-    const sessions = adaptNcpSessionSummaries(summaries).filter(
-      shouldShowSessionInSidebar,
-    );
-    const filteredSessions = filterSessionsByQuery(sessions, query);
-
-    return filteredSessions.map((session) => ({
+    return adaptNcpSessionSummaries(summaries).map((session) => ({
       session,
-      runStatus: session.status === 'running' ? 'running' : undefined
+      runStatus: session.status === "running" ? "running" : undefined,
     }));
-  }, [query, sessionsQuery.data?.sessions]);
+  }, [sessionsQuery.data?.sessions]);
+  const items = useMemo<NcpSessionListItemView[]>(() => {
+    const visibleItems = allItems.filter(({ session }) =>
+      shouldShowSessionInSidebar(session),
+    );
+    const matchingSessionKeys = new Set(
+      filterSessionsByQuery(
+        visibleItems.map(({ session }) => session),
+        query,
+      ).map((session) => session.key),
+    );
+
+    return visibleItems.filter(({ session }) =>
+      matchingSessionKeys.has(session.key),
+    );
+  }, [allItems, query]);
 
   return {
+    allItems,
     isLoading: sessionsQuery.isLoading,
-    items
+    items,
   };
 }

package/src/features/chat/features/session/components/__tests__/chat-sidebar-project-groups.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
@@ -38,6 +39,7 @@ function renderProjectGroups(isPinned = false) {
   return render(
     <ChatSidebarProjectGroups
       groups={[{ ...projectGroup, isPinned }]}
+      projectCronJobCountByRoot={new Map([[projectGroup.projectRoot, 2]])}
       defaultSessionType="native"
       sessionTypeOptions={[
         { value: "native", label: "Native", icon: null, ready: true },
@@ -74,7 +76,15 @@ describe("ChatSidebarProjectGroups", () => {
     expect(header.parentElement?.className).toContain("h-8");
     expect(header.parentElement?.className).toContain("hover:bg-gray-200/60");
     expect(header.parentElement?.className).not.toContain("focus-within:bg");
-    expect(screen.getByText("analysis-project").nextElementSibling?.tagName).toBe("svg");
+    expect(
+      screen.getByText("analysis-project").nextElementSibling?.tagName,
+    ).toBe("svg");
+    expect(
+      screen
+        .getByText("analysis-project")
+        .nextElementSibling?.getAttribute("class"),
+    ).toContain("opacity-0");
+    expect(screen.queryByText("Sessions")).toBeNull();
 
     fireEvent.click(header);
 
@@ -87,6 +97,20 @@ describe("ChatSidebarProjectGroups", () => {
     expect(screen.queryByText("Project session")).toBeNull();
   });
 
+  it("shows project context from the row on hover", async () => {
+    const user = userEvent.setup();
+    renderProjectGroups();
+
+    await user.hover(screen.getByLabelText("Collapse project"));
+
+    const tooltip = await screen.findByRole("tooltip");
+    expect(within(tooltip).getByText("Path")).toBeTruthy();
+    expect(within(tooltip).getByText("Sessions")).toBeTruthy();
+    expect(within(tooltip).getByText("Scheduled tasks")).toBeTruthy();
+    expect(within(tooltip).getByText("/tmp/analysis-project")).toBeTruthy();
+    expect(within(tooltip).getByText("2")).toBeTruthy();
+  });
+
   it("keeps project creation and pinning in one trailing action cluster", () => {
     renderProjectGroups();
 

package/src/features/chat/features/session/components/__tests__/chat-sidebar-session-item.test.tsx

@@ -1,17 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { beforeEach, expect, it, vi } from 'vitest';
-import { ChatSidebarSessionItem } from '@/features/chat/features/session/components/chat-sidebar-session-item';
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatSidebarSessionItem } from "@/features/chat/features/session/components/chat-sidebar-session-item";
 
 const mocks = vi.hoisted(() => ({
   copyText: vi.fn(),
 }));
 
-vi.mock('@nextclaw/agent-chat-ui', () => ({
+vi.mock("@nextclaw/agent-chat-ui", () => ({
   copyText: mocks.copyText,
 }));
 
-vi.mock('sonner', () => ({
+vi.mock("sonner", () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
@@ -28,9 +28,9 @@ beforeEach(() => {
       showUnreadDot={false}
       context={{
         icon: {
-          kind: 'runtime-image',
-          src: '/runtime-icons/codex-openai.svg',
-          name: 'Codex',
+          kind: "runtime-image",
+          src: "/runtime-icons/codex-openai.svg",
+          name: "Codex",
         },
         label: null,
       }}
@@ -38,6 +38,9 @@ beforeEach(() => {
       title="Current Task"
       previewText="Preview"
       trailingText="Now"
+      childSessionCount={2}
+      cronJobCount={3}
+      projectName="nextbot"
       isEditing={false}
       draftLabel="Current Task"
       isSaving={false}
@@ -51,33 +54,58 @@ beforeEach(() => {
   );
 });
 
-it('shows session actions only on hover or when an action owns focus', () => {
-  screen.getByText('Current Task').closest('button')?.focus();
-  const actions = screen.getByLabelText('Pin session').parentElement;
+it("shows session actions only on hover or when an action owns focus", () => {
+  screen.getByText("Current Task").closest("button")?.focus();
+  const actions = screen.getByLabelText("Pin session").parentElement;
+  const titleRow =
+    screen.getByText("Current Task").parentElement?.parentElement;
 
-  expect(actions?.className).toContain('opacity-0');
-  expect(actions?.className).toContain('group-hover/session:opacity-100');
-  expect(actions?.className).toContain('focus-within:opacity-100');
+  expect(actions?.className).toContain("opacity-0");
+  expect(actions?.className).toContain("group-hover/session:opacity-100");
+  expect(actions?.className).toContain("focus-within:opacity-100");
   expect(actions?.className).not.toContain(
-    'group-focus-within/session:opacity-100',
+    "group-focus-within/session:opacity-100",
   );
-  expect(screen.getByRole('button', { name: 'More actions' })).toBeTruthy();
+  expect(titleRow?.classList.contains("pr-20")).toBe(false);
+  expect(titleRow?.className).toContain("group-hover/session:pr-20");
+  expect(titleRow?.className).toContain(
+    "group-has-[[data-session-actions]:focus-within]/session:pr-20",
+  );
+  expect(titleRow?.className).not.toContain("pr-32");
+  expect(
+    screen.queryByRole("button", { name: "View child sessions" }),
+  ).toBeNull();
+  expect(screen.getByRole("button", { name: "More actions" })).toBeTruthy();
 });
 
-it('copies the sidebar session ID from the more-actions menu', async () => {
+it("copies the sidebar session ID from the more-actions menu", async () => {
   const user = userEvent.setup();
 
-  await user.click(screen.getByRole('button', { name: 'More actions' }));
-  await user.click(screen.getByRole('button', { name: 'Copy session ID' }));
+  await user.click(screen.getByRole("button", { name: "More actions" }));
+  await user.click(screen.getByRole("button", { name: "Copy session ID" }));
+
+  expect(mocks.copyText).toHaveBeenCalledWith("session:current");
+});
+
+it("sizes the runtime icon to the session title text", () => {
+  const runtimeIcon = screen.getByRole("img", { name: "Codex logo" });
 
-  expect(mocks.copyText).toHaveBeenCalledWith('session:current');
+  expect(runtimeIcon.parentElement?.className).toContain("h-[13px]");
+  expect(runtimeIcon.parentElement?.className).toContain("w-[13px]");
+  expect(runtimeIcon.parentElement?.parentElement?.className).toContain("h-4");
+  expect(runtimeIcon.parentElement?.parentElement?.className).toContain("w-4");
 });
 
-it('sizes the runtime icon to the session title text', () => {
-  const runtimeIcon = screen.getByRole('img', { name: 'Codex logo' });
+it("shows session context from the row on hover", async () => {
+  const user = userEvent.setup();
+
+  await user.hover(screen.getByText("Current Task").closest("button")!);
 
-  expect(runtimeIcon.parentElement?.className).toContain('h-[13px]');
-  expect(runtimeIcon.parentElement?.className).toContain('w-[13px]');
-  expect(runtimeIcon.parentElement?.parentElement?.className).toContain('h-4');
-  expect(runtimeIcon.parentElement?.parentElement?.className).toContain('w-4');
+  const tooltip = await screen.findByRole("tooltip");
+  expect(within(tooltip).getByText("Project")).toBeTruthy();
+  expect(within(tooltip).getByText("Child sessions")).toBeTruthy();
+  expect(within(tooltip).getByText("Scheduled tasks")).toBeTruthy();
+  expect(within(tooltip).getByText("nextbot")).toBeTruthy();
+  expect(within(tooltip).getByText("2")).toBeTruthy();
+  expect(within(tooltip).getByText("3")).toBeTruthy();
 });

package/src/features/chat/features/session/components/chat-sidebar-context-card.tsx

@@ -0,0 +1,60 @@
+import type { ReactElement, ReactNode } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+
+export type ChatSidebarContextMetric = {
+  icon: ReactNode;
+  label: string;
+  value: ReactNode;
+};
+
+export function ChatSidebarContextCard({
+  children,
+  metrics,
+  title,
+}: {
+  children: ReactElement;
+  metrics: readonly ChatSidebarContextMetric[];
+  title: string;
+}) {
+  return (
+    <TooltipProvider delayDuration={350} skipDelayDuration={100}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="start"
+          sideOffset={10}
+          collisionPadding={12}
+          className="pointer-events-none w-64 rounded-xl border-border/80 bg-popover p-3 text-popover-foreground shadow-[0_18px_48px_-24px_rgba(15,23,42,0.45)]"
+        >
+          <div className="truncate text-sm font-semibold leading-5">
+            {title}
+          </div>
+          <div className="mt-2 space-y-0.5">
+            {metrics.map((metric) => (
+              <div
+                key={metric.label}
+                className="flex h-5 min-w-0 items-center gap-2 text-xs leading-5"
+              >
+                <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
+                  {metric.icon}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-muted-foreground">
+                  {metric.label}
+                </span>
+                <span className="min-w-0 max-w-40 truncate tabular-nums text-foreground/80">
+                  {metric.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}