@nextclaw/ui 0.15.9 → 0.15.11

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

@@ -1,10 +1,14 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type * as SharedApi from "@/shared/lib/api";
-import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "../use-ncp-session-conversation";
+import {
+  fetchNcpSessionConversationSeed,
+  useNcpSessionConversation,
+} from "@/features/chat/features/ncp/hooks/use-ncp-session-conversation";
 
 const mocks = vi.hoisted(() => ({
   fetchNcpSessionMessages: vi.fn(),
+  prependHistory: vi.fn(),
   hydratedCalls: [] as Array<{ client: unknown; loadSeed: unknown }>,
   runtimeAvailability: {
     phase: "cold-starting" as "cold-starting" | "ready",
@@ -24,6 +28,7 @@ const mocks = vi.hoisted(() => ({
     send: vi.fn(),
     abort: vi.fn(),
     streamRun: vi.fn(),
+    prependHistory: mocks.prependHistory,
     isHydrating: false,
     hydrateError: null,
   })),
@@ -39,14 +44,18 @@ vi.mock("@/shared/lib/api", async (importOriginal) => {
 });
 
 vi.mock("@nextclaw/ncp-react", () => ({
-  useHydratedNcpAgent: vi.fn((params: { client: unknown; loadSeed: unknown }) => {
-    mocks.hydratedCalls.push(params);
-    return mocks.useHydratedNcpAgent();
-  }),
+  useHydratedNcpAgent: vi.fn(
+    (params: { client: unknown; loadSeed: unknown }) => {
+      mocks.hydratedCalls.push(params);
+      return mocks.useHydratedNcpAgent();
+    },
+  ),
 }));
 
 vi.mock("@nextclaw/ncp-http-agent-client", () => ({
-  NcpHttpAgentClientEndpoint: vi.fn().mockImplementation(function MockClient(this: object) {
+  NcpHttpAgentClientEndpoint: vi.fn().mockImplementation(function MockClient(
+    this: object,
+  ) {
     mocks.clientInstances.push(this);
   }),
 }));
@@ -64,6 +73,7 @@ vi.mock("@/features/system-status", () => ({
 describe("useNcpSessionConversation", () => {
   beforeEach(() => {
     mocks.fetchNcpSessionMessages.mockReset();
+    mocks.prependHistory.mockReset();
     mocks.useHydratedNcpAgent.mockClear();
     mocks.hydratedCalls.length = 0;
     mocks.clientInstances.length = 0;
@@ -76,6 +86,7 @@ describe("useNcpSessionConversation", () => {
       sessionId: "session-1",
       status: "running",
       total: 1,
+      pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
       messages: [{ id: "msg-1" }],
       contextWindow: {
         usedContextTokens: 42,
@@ -98,7 +109,10 @@ describe("useNcpSessionConversation", () => {
       300,
     );
 
-    expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledWith("session-1", 300);
+    expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledWith("session-1", {
+      limit: 300,
+      signal: expect.any(AbortSignal),
+    });
     expect(result).toEqual({
       messages: [{ id: "msg-1" }],
       status: "running",
@@ -115,6 +129,8 @@ describe("useNcpSessionConversation", () => {
         compactedMessageCount: 0,
         updatedAt: "2026-05-05T00:00:00.000Z",
       },
+      total: 1,
+      pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
     });
   });
 
@@ -131,6 +147,8 @@ describe("useNcpSessionConversation", () => {
     expect(result).toEqual({
       messages: [],
       status: "idle",
+      total: 0,
+      pageInfo: { startCursor: null, hasPreviousPage: false },
     });
   });
 
@@ -174,18 +192,23 @@ describe("useNcpSessionConversation", () => {
       sessionId: "session-1",
       status: "idle",
       total: 0,
+      pageInfo: { startCursor: null, hasPreviousPage: false },
       messages: [],
       contextWindow,
     });
 
-    const { result, rerender } = renderHook(() => useNcpSessionConversation("session-1"));
+    const { result, rerender } = renderHook(() =>
+      useNcpSessionConversation("session-1"),
+    );
     const loadSeed = mocks.hydratedCalls[0]?.loadSeed as (
       sessionId: string,
-      signal: AbortSignal
+      signal: AbortSignal,
     ) => Promise<{ messages: unknown[]; status: string }>;
 
     await act(async () => {
-      await expect(loadSeed("session-1", new AbortController().signal)).resolves.toEqual({
+      await expect(
+        loadSeed("session-1", new AbortController().signal),
+      ).resolves.toEqual({
         messages: [],
         status: "idle",
       });
@@ -195,13 +218,123 @@ describe("useNcpSessionConversation", () => {
     expect(result.current.snapshot.contextWindow).toEqual(contextWindow);
   });
 
+  it("loads previous pages to the terminal state without repeating the last cursor", async () => {
+    mocks.fetchNcpSessionMessages
+      .mockResolvedValueOnce({
+        sessionId: "session-1",
+        status: "idle",
+        total: 5,
+        pageInfo: { startCursor: "cursor-4", hasPreviousPage: true },
+        messages: [{ id: "message-4" }, { id: "message-5" }],
+      })
+      .mockResolvedValueOnce({
+        sessionId: "session-1",
+        status: "idle",
+        total: 5,
+        pageInfo: { startCursor: "cursor-2", hasPreviousPage: true },
+        messages: [{ id: "message-2" }, { id: "message-3" }],
+      })
+      .mockResolvedValueOnce({
+        sessionId: "session-1",
+        status: "idle",
+        total: 5,
+        pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
+        messages: [{ id: "message-1" }],
+      });
+    const { result } = renderHook(() => useNcpSessionConversation("session-1"));
+    const loadSeed = mocks.hydratedCalls[0]?.loadSeed as (
+      sessionId: string,
+      signal: AbortSignal,
+    ) => Promise<{ messages: unknown[]; status: string }>;
+    await act(async () => {
+      await loadSeed("session-1", new AbortController().signal);
+    });
+
+    await act(async () => {
+      await result.current.loadPreviousMessages();
+      await result.current.loadPreviousMessages();
+      await result.current.loadPreviousMessages();
+    });
+
+    expect(mocks.fetchNcpSessionMessages).toHaveBeenLastCalledWith(
+      "session-1",
+      {
+        limit: 80,
+        cursor: "cursor-2",
+        signal: expect.any(AbortSignal),
+      },
+    );
+    expect(mocks.fetchNcpSessionMessages).toHaveBeenCalledTimes(3);
+    expect(mocks.prependHistory).toHaveBeenNthCalledWith(1, [
+      { id: "message-2" },
+      { id: "message-3" },
+    ]);
+    expect(mocks.prependHistory).toHaveBeenNthCalledWith(2, [
+      { id: "message-1" },
+    ]);
+    expect(result.current.hasPreviousMessages).toBe(false);
+    expect(result.current.messageTotal).toBe(5);
+  });
+
+  it("drops an in-flight history page when the viewer switches sessions", async () => {
+    let resolvePreviousPage = (_value: unknown): void => {
+      throw new Error("Previous page request was not initialized.");
+    };
+    mocks.fetchNcpSessionMessages
+      .mockResolvedValueOnce({
+        sessionId: "session-a",
+        status: "idle",
+        total: 2,
+        pageInfo: { startCursor: "cursor-2", hasPreviousPage: true },
+        messages: [{ id: "message-2" }],
+      })
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePreviousPage = resolve;
+          }),
+      );
+    const { result, rerender } = renderHook(
+      ({ sessionId }) => useNcpSessionConversation(sessionId),
+      { initialProps: { sessionId: "session-a" } },
+    );
+    const loadSeed = mocks.hydratedCalls[0]?.loadSeed as (
+      sessionId: string,
+      signal: AbortSignal,
+    ) => Promise<{ messages: unknown[]; status: string }>;
+    await act(async () => {
+      await loadSeed("session-a", new AbortController().signal);
+    });
+
+    let previousPagePromise: Promise<void> | null = null;
+    act(() => {
+      previousPagePromise = result.current.loadPreviousMessages();
+    });
+    rerender({ sessionId: "session-b" });
+    resolvePreviousPage({
+      sessionId: "session-a",
+      status: "idle",
+      total: 2,
+      pageInfo: { startCursor: "cursor-1", hasPreviousPage: false },
+      messages: [{ id: "message-1" }],
+    });
+    await act(async () => {
+      await previousPagePromise;
+    });
+
+    expect(mocks.prependHistory).not.toHaveBeenCalled();
+    expect(result.current.isLoadingPreviousMessages).toBe(false);
+  });
+
   it("retries hydration once the runtime becomes ready after a startup placeholder error", async () => {
     mocks.useHydratedNcpAgent.mockImplementation(() => ({
       snapshot: {
         messages: [],
         streamingMessage: null,
         activeRun: null,
-        error: new Error("ncp agent unavailable during startup") as Error | null,
+        error: new Error(
+          "ncp agent unavailable during startup",
+        ) as Error | null,
       },
       visibleMessages: [],
       activeRunId: null,
@@ -210,11 +343,14 @@ describe("useNcpSessionConversation", () => {
       send: vi.fn(),
       abort: vi.fn(),
       streamRun: vi.fn(),
+      prependHistory: mocks.prependHistory,
       isHydrating: false,
       hydrateError: null,
     }));
 
-    const { rerender } = renderHook(() => useNcpSessionConversation("session-a"));
+    const { rerender } = renderHook(() =>
+      useNcpSessionConversation("session-a"),
+    );
     const initialLoadSeed = mocks.hydratedCalls[0]?.loadSeed;
 
     act(() => {
@@ -226,6 +362,8 @@ describe("useNcpSessionConversation", () => {
     await waitFor(() => {
       expect(mocks.hydratedCalls.length).toBeGreaterThan(2);
     });
-    expect(mocks.hydratedCalls[mocks.hydratedCalls.length - 1]?.loadSeed).not.toBe(initialLoadSeed);
+    expect(
+      mocks.hydratedCalls[mocks.hydratedCalls.length - 1]?.loadSeed,
+    ).not.toBe(initialLoadSeed);
   });
 });

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

@@ -1,34 +1,31 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
-import { useHydratedNcpAgent, type NcpConversationSeed } from "@nextclaw/ncp-react";
-import { API_BASE, fetchNcpSessionMessages, type SessionContextWindowView } from "@/shared/lib/api";
+import { useHydratedNcpAgent } from "@nextclaw/ncp-react";
+import { API_BASE } from "@/shared/lib/api";
 import { createNcpAppClientFetch } from "@/features/chat/features/runtime/utils/ncp-app-client-fetch.utils";
+import {
+  DEFAULT_NCP_SESSION_MESSAGE_LIMIT,
+  useNcpSessionMessageHistory,
+} from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 import { useSystemStatus } from "@/features/system-status";
 
-const DEFAULT_MESSAGE_LIMIT = 300;
-const NCP_AGENT_UNAVAILABLE_DURING_STARTUP = "ncp agent unavailable during startup";
+const NCP_AGENT_UNAVAILABLE_DURING_STARTUP =
+  "ncp agent unavailable during startup";
+
+export { fetchNcpSessionConversationSeed } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
 type UseNcpSessionConversationOptions = {
   messageLimit?: number;
 };
 
-type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
-  contextWindow?: SessionContextWindowView | null;
-};
-
-function isMissingNcpSessionError(error: unknown): boolean {
-  if (!(error instanceof Error)) {
-    return false;
-  }
-  return error.message.includes("ncp session not found:");
-}
-
 export function isNcpAgentStartupUnavailableErrorMessage(
   message: string | null | undefined,
 ): boolean {
   return (
-    message?.trim().toLowerCase().includes(NCP_AGENT_UNAVAILABLE_DURING_STARTUP) ??
-    false
+    message
+      ?.trim()
+      .toLowerCase()
+      .includes(NCP_AGENT_UNAVAILABLE_DURING_STARTUP) ?? false
   );
 }
 
@@ -40,33 +37,6 @@ export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint
   });
 }
 
-export async function fetchNcpSessionConversationSeed(
-  sessionId: string,
-  signal: AbortSignal,
-  messageLimit = DEFAULT_MESSAGE_LIMIT,
-): Promise<NcpConversationSeedWithContextWindow> {
-  signal.throwIfAborted();
-
-  try {
-    const response = await fetchNcpSessionMessages(sessionId, messageLimit);
-    signal.throwIfAborted();
-    return {
-      messages: response.messages,
-      status: response.status ?? "idle",
-      contextWindow: response.contextWindow ?? null,
-    };
-  } catch (error) {
-    signal.throwIfAborted();
-    if (!isMissingNcpSessionError(error)) {
-      throw error;
-    }
-    return {
-      messages: [],
-      status: "idle",
-    };
-  }
-}
-
 function useSyncReadyRetryVersion(
   readyRetrySignature: string | null,
   bumpRetryVersion: () => void,
@@ -99,30 +69,25 @@ export function useNcpSessionConversation(
   const [client] = useState(() => createNcpSessionConversationClient());
   const systemStatus = useSystemStatus();
   const [hydrationRetryVersion, setHydrationRetryVersion] = useState(0);
-  const [seedContextWindow, setSeedContextWindow] = useState<SessionContextWindowView | null>(null);
-  const messageLimit = options.messageLimit ?? DEFAULT_MESSAGE_LIMIT;
-  useEffect(() => {
-    setSeedContextWindow(null);
-  }, [sessionId]);
-  const loadSeed = useCallback(
-    async (targetSessionId: string, signal: AbortSignal) => {
-      void hydrationRetryVersion;
-      const seed = await fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit);
-      if (!signal.aborted) {
-        setSeedContextWindow(seed.contextWindow ?? null);
-      }
-      return {
-        messages: seed.messages,
-        status: seed.status,
-      };
-    },
-    [hydrationRetryVersion, messageLimit],
-  );
+  const {
+    loadSeed,
+    loadPreviousMessages: loadPreviousHistory,
+    state: visibleHistoryState,
+  } = useNcpSessionMessageHistory({
+    sessionId,
+    messageLimit: options.messageLimit ?? DEFAULT_NCP_SESSION_MESSAGE_LIMIT,
+    hydrationRetryVersion,
+  });
   const agent = useHydratedNcpAgent({
     sessionId,
     client,
     loadSeed,
   });
+  const loadPreviousMessages = useCallback(
+    async (): Promise<void> =>
+      await loadPreviousHistory(agent.prependHistory),
+    [agent.prependHistory, loadPreviousHistory],
+  );
   const currentAgentError =
     agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
   const readyRetrySignature =
@@ -134,11 +99,20 @@ export function useNcpSessionConversation(
   useSyncReadyRetryVersion(readyRetrySignature, () => {
     setHydrationRetryVersion((current) => current + 1);
   });
-  return useMemo(() => ({
-    ...agent,
-    snapshot: {
-      ...agent.snapshot,
-      contextWindow: agent.snapshot.contextWindow ?? seedContextWindow,
-    },
-  }), [agent, seedContextWindow]);
+  return useMemo(
+    () => ({
+      ...agent,
+      snapshot: {
+        ...agent.snapshot,
+        contextWindow:
+          agent.snapshot.contextWindow ?? visibleHistoryState.contextWindow,
+      },
+      hasPreviousMessages: visibleHistoryState.hasPreviousPage,
+      historyError: visibleHistoryState.error,
+      isLoadingPreviousMessages: visibleHistoryState.isLoading,
+      loadPreviousMessages,
+      messageTotal: visibleHistoryState.total,
+    }),
+    [agent, loadPreviousMessages, visibleHistoryState],
+  );
 }

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

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { NcpMessage, NcpSessionMessagePageInfo } from "@nextclaw/ncp";
+import type { NcpConversationSeed } from "@nextclaw/ncp-react";
+import {
+  fetchNcpSessionMessages,
+  type SessionContextWindowView,
+} from "@/shared/lib/api";
+
+export const DEFAULT_NCP_SESSION_MESSAGE_LIMIT = 80;
+
+type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
+  contextWindow?: SessionContextWindowView | null;
+  total: number;
+  pageInfo: NcpSessionMessagePageInfo;
+};
+
+type SessionHistoryState = {
+  sessionId: string | null;
+  contextWindow: SessionContextWindowView | null;
+  total: number;
+  cursor: string | null;
+  hasPreviousPage: boolean;
+  isLoading: boolean;
+  error: Error | null;
+};
+
+const EMPTY_SESSION_HISTORY_STATE: SessionHistoryState = {
+  sessionId: null,
+  contextWindow: null,
+  total: 0,
+  cursor: null,
+  hasPreviousPage: false,
+  isLoading: false,
+  error: null,
+};
+
+function isMissingNcpSessionError(error: unknown): boolean {
+  return (
+    error instanceof Error && error.message.includes("ncp session not found:")
+  );
+}
+
+export async function fetchNcpSessionConversationSeed(
+  sessionId: string,
+  signal: AbortSignal,
+  messageLimit = DEFAULT_NCP_SESSION_MESSAGE_LIMIT,
+): Promise<NcpConversationSeedWithContextWindow> {
+  signal.throwIfAborted();
+  try {
+    const response = await fetchNcpSessionMessages(sessionId, {
+      limit: messageLimit,
+      signal,
+    });
+    signal.throwIfAborted();
+    return {
+      messages: response.messages,
+      status: response.status ?? "idle",
+      contextWindow: response.contextWindow ?? null,
+      total: response.total,
+      pageInfo: response.pageInfo,
+    };
+  } catch (error) {
+    signal.throwIfAborted();
+    if (!isMissingNcpSessionError(error)) {
+      throw error;
+    }
+    return {
+      messages: [],
+      status: "idle",
+      total: 0,
+      pageInfo: { startCursor: null, hasPreviousPage: false },
+    };
+  }
+}
+
+export function useNcpSessionMessageHistory(params: {
+  sessionId: string | undefined;
+  messageLimit: number;
+  hydrationRetryVersion: number;
+}) {
+  const { hydrationRetryVersion, messageLimit, sessionId } = params;
+  const [historyState, setHistoryState] = useState<SessionHistoryState>(
+    EMPTY_SESSION_HISTORY_STATE,
+  );
+  const historyStateRef = useRef<SessionHistoryState>(
+    EMPTY_SESSION_HISTORY_STATE,
+  );
+  const historyRequestRef = useRef<AbortController | null>(null);
+  const updateHistoryState = useCallback(
+    (
+      targetSessionId: string,
+      update: (current: SessionHistoryState) => SessionHistoryState,
+    ) => {
+      const current =
+        historyStateRef.current.sessionId === targetSessionId
+          ? historyStateRef.current
+          : { ...EMPTY_SESSION_HISTORY_STATE, sessionId: targetSessionId };
+      const next = update(current);
+      historyStateRef.current = next;
+      setHistoryState(next);
+    },
+    [],
+  );
+  useEffect(() => {
+    historyRequestRef.current?.abort();
+    historyRequestRef.current = null;
+    return () => historyRequestRef.current?.abort();
+  }, [sessionId]);
+  const loadSeed = useCallback(
+    async (targetSessionId: string, signal: AbortSignal) => {
+      void hydrationRetryVersion;
+      const seed = await fetchNcpSessionConversationSeed(
+        targetSessionId,
+        signal,
+        messageLimit,
+      );
+      if (!signal.aborted) {
+        updateHistoryState(targetSessionId, (current) => ({
+          ...current,
+          contextWindow: seed.contextWindow ?? null,
+          total: seed.total,
+          cursor: seed.pageInfo.startCursor,
+          hasPreviousPage: seed.pageInfo.hasPreviousPage,
+          error: null,
+        }));
+      }
+      return { messages: seed.messages, status: seed.status };
+    },
+    [hydrationRetryVersion, messageLimit, updateHistoryState],
+  );
+  const loadPreviousMessages = useCallback(
+    async (prependHistory: (messages: ReadonlyArray<NcpMessage>) => void) => {
+      const history = historyStateRef.current;
+      if (
+        !sessionId ||
+        history.sessionId !== sessionId ||
+        !history.hasPreviousPage ||
+        !history.cursor ||
+        historyRequestRef.current
+      ) {
+        return;
+      }
+      const controller = new AbortController();
+      historyRequestRef.current = controller;
+      updateHistoryState(sessionId, (current) => ({
+        ...current,
+        isLoading: true,
+        error: null,
+      }));
+      try {
+        const response = await fetchNcpSessionMessages(sessionId, {
+          limit: messageLimit,
+          cursor: history.cursor,
+          signal: controller.signal,
+        });
+        if (
+          controller.signal.aborted ||
+          historyRequestRef.current !== controller
+        ) {
+          return;
+        }
+        prependHistory(response.messages);
+        updateHistoryState(sessionId, (current) => ({
+          ...current,
+          contextWindow: response.contextWindow ?? current.contextWindow,
+          total: response.total,
+          cursor: response.pageInfo.startCursor,
+          hasPreviousPage: response.pageInfo.hasPreviousPage,
+        }));
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          updateHistoryState(sessionId, (current) => ({
+            ...current,
+            error: error instanceof Error ? error : new Error(String(error)),
+          }));
+        }
+      } finally {
+        if (historyRequestRef.current === controller) {
+          historyRequestRef.current = null;
+          updateHistoryState(sessionId, (current) => ({
+            ...current,
+            isLoading: false,
+          }));
+        }
+      }
+    },
+    [messageLimit, sessionId, updateHistoryState],
+  );
+  return {
+    loadSeed,
+    loadPreviousMessages,
+    state:
+      historyState.sessionId === sessionId
+        ? historyState
+        : EMPTY_SESSION_HISTORY_STATE,
+  };
+}

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

@@ -1,14 +1,21 @@
 import { render, screen } from '@testing-library/react';
-import { expect, it, vi } from 'vitest';
+import { beforeEach, expect, it, vi } from 'vitest';
 import { ChatSidebarSessionItem } from '@/features/chat/features/session/components/chat-sidebar-session-item';
 
-it('shows session actions only on hover or when an action owns focus', () => {
+beforeEach(() => {
   render(
     <ChatSidebarSessionItem
       sessionKey="session:current"
       active
       showUnreadDot={false}
-      context={{ icon: null, label: null }}
+      context={{
+        icon: {
+          kind: 'runtime-image',
+          src: '/runtime-icons/codex-openai.svg',
+          name: 'Codex',
+        },
+        label: null,
+      }}
       isPinned={false}
       title="Current Task"
       previewText="Preview"
@@ -24,7 +31,9 @@ it('shows session actions only on hover or when an action owns focus', () => {
       onTogglePinned={vi.fn()}
     />,
   );
+});
 
+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;
 
@@ -35,3 +44,12 @@ it('shows session actions only on hover or when an action owns focus', () => {
     'group-focus-within/session:opacity-100',
   );
 });
+
+it('sizes the runtime icon to the session title text', () => {
+  const runtimeIcon = screen.getByRole('img', { name: 'Codex logo' });
+
+  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');
+});

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

@@ -116,10 +116,10 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                         options={sessionTypeOptions}
                         selectedSessionType={preferredSessionType}
                         onSelect={(sessionType) => {
-                          presenter.chatSessionListManager.createSession(
+                          presenter.chatSessionListManager.createSession({
+                            projectRoot: group.projectRoot,
                             sessionType,
-                            group.projectRoot,
-                          );
+                          });
                           setOpenProjectRoot(null);
                         }}
                       />
@@ -130,10 +130,10 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     icon={<Plus className="h-3.5 w-3.5" />}
                     label={actionLabel}
                     onClick={() =>
-                      presenter.chatSessionListManager.createSession(
-                        preferredSessionType,
-                        group.projectRoot,
-                      )
+                      presenter.chatSessionListManager.createSession({
+                        projectRoot: group.projectRoot,
+                        sessionType: preferredSessionType,
+                      })
                     }
                   />
                 )}