@nextclaw/ui 0.20.1 → 0.20.3

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

@@ -9,12 +9,20 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-queries", () => ({
-  useNcpSessions: () => ({
+  useInfiniteNcpSessions: () => ({
     data: {
-      sessions: mocks.sessions,
-      total: mocks.sessions.length,
+      pages: [{
+        sessions: mocks.sessions,
+        total: mocks.sessions.length,
+        page: 1,
+        pageSize: 100,
+        hasMore: false,
+      }],
     },
     isLoading: false,
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
   }),
 }));
 
@@ -62,13 +70,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 { useDeferredValue, 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 { useInfiniteNcpSessions } 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,46 @@ 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 deferredQuery = useDeferredValue(query);
+  const sessionsQuery = useInfiniteNcpSessions({
+    pageSize: params.limit ?? 100,
+    query: deferredQuery,
+  });
 
+  const allItems = useMemo<NcpSessionListItemView[]>(() => {
+    const summaries = sessionsQuery.data?.pages.flatMap((page) => page.sessions) ?? [];
+    return adaptNcpSessionSummaries(summaries).map((session) => ({
+      session,
+      runStatus: session.status === "running" ? "running" : undefined,
+    }));
+  }, [sessionsQuery.data?.pages]);
   const items = useMemo<NcpSessionListItemView[]>(() => {
-    const summaries = sessionsQuery.data?.sessions ?? [];
-    const sessions = adaptNcpSessionSummaries(summaries).filter(
-      shouldShowSessionInSidebar,
+    const visibleItems = allItems.filter(({ session }) =>
+      shouldShowSessionInSidebar(session),
+    );
+    const matchingSessionKeys = new Set(
+      filterSessionsByQuery(
+        visibleItems.map(({ session }) => session),
+        query,
+      ).map((session) => session.key),
     );
-    const filteredSessions = filterSessionsByQuery(sessions, query);
 
-    return filteredSessions.map((session) => ({
-      session,
-      runStatus: session.status === 'running' ? 'running' : undefined
-    }));
-  }, [query, sessionsQuery.data?.sessions]);
+    return visibleItems.filter(({ session }) =>
+      matchingSessionKeys.has(session.key),
+    );
+  }, [allItems, query]);
 
   return {
+    allItems,
     isLoading: sessionsQuery.isLoading,
-    items
+    items,
+    hasMore: sessionsQuery.hasNextPage,
+    isLoadingMore: sessionsQuery.isFetchingNextPage,
+    loadMore: sessionsQuery.fetchNextPage,
   };
 }

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

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   fetchNcpSessionObservations,
   fetchNcpSessionSkills,
@@ -21,6 +21,20 @@ export function useNcpSessions(params?: { limit?: number; peerId?: string }) {
   });
 }
 
+export function useInfiniteNcpSessions(params: { pageSize: number; query?: string }) {
+  return useInfiniteQuery({
+    queryKey: ['ncp-session-pages', params.pageSize, params.query?.trim() || null],
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) => fetchNcpSessions({
+      page: pageParam,
+      pageSize: params.pageSize,
+      ...(params.query?.trim() ? { query: params.query.trim() } : {}),
+    }),
+    getNextPageParam: (lastPage) => lastPage.hasMore ? (lastPage.page ?? 1) + 1 : undefined,
+    ...ncpSessionQueryDefaults,
+  });
+}
+
 export function useNcpSessionSkills(params: {
   sessionId: string | null;
   projectRoot?: string | null;

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>
+  );
+}

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

@@ -1,15 +1,24 @@
-import { useMemo, useState, type ReactNode } from 'react';
-import { ChevronDown, ChevronRight, Folder, Pin, Plus } from 'lucide-react';
-import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  AlarmClock,
+  ChevronDown,
+  ChevronRight,
+  Folder,
+  MessageSquareText,
+  Pin,
+  Plus,
+} from "lucide-react";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
-import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
-import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
-import type { ChatSidebarProjectGroup } from '@/features/chat/features/session/utils/chat-sidebar-session-groups.utils';
-import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
-import { t } from '@/shared/lib/i18n';
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import type { ChatSidebarProjectGroup } from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { t } from "@/shared/lib/i18n";
+import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
 
 export type { ChatSidebarProjectGroup };
 
@@ -20,80 +29,112 @@ type ChatSidebarProjectGroupsProps = {
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
+  projectCronJobCountByRoot: ReadonlyMap<string, number>;
 };
 
 function resolveProjectGroupDefaultSessionType(
   defaultSessionType: string,
-  sessionTypeOptions: SessionTypeOption[]
+  sessionTypeOptions: SessionTypeOption[],
 ): string {
-  if (sessionTypeOptions.some((option) => option.value === defaultSessionType)) {
+  if (
+    sessionTypeOptions.some((option) => option.value === defaultSessionType)
+  ) {
     return defaultSessionType;
   }
   return sessionTypeOptions[0]?.value ?? defaultSessionType;
 }
 
 export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
-  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem } = props;
+  const {
+    groups,
+    defaultSessionType,
+    sessionTypeOptions,
+    renderSessionItem,
+    projectCronJobCountByRoot,
+  } = props;
   const presenter = usePresenter();
   const collapsedProjectRoots = useChatSessionListStore(
     (state) => state.snapshot.collapsedProjectRoots,
   );
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
   const preferredSessionType = useMemo(
-    () => resolveProjectGroupDefaultSessionType(defaultSessionType, sessionTypeOptions),
-    [defaultSessionType, sessionTypeOptions]
+    () =>
+      resolveProjectGroupDefaultSessionType(
+        defaultSessionType,
+        sessionTypeOptions,
+      ),
+    [defaultSessionType, sessionTypeOptions],
   );
   const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
 
   return (
     <div className="space-y-0.5">
       {groups.map((group) => {
-        const actionLabel = `${t('chatSidebarNewTask')} · ${group.projectName}`;
+        const actionLabel = `${t("chatSidebarNewTask")} · ${group.projectName}`;
         const isCollapsed = collapsedProjectRoots.includes(group.projectRoot);
         const pinLabel = t(
-          group.isPinned ? 'chatSidebarUnpinProject' : 'chatSidebarPinProject',
+          group.isPinned ? "chatSidebarUnpinProject" : "chatSidebarPinProject",
         );
 
         return (
           <div key={group.projectRoot}>
             <div className="group/project relative h-8 rounded-lg px-2 text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900">
-              <button
-                type="button"
-                aria-expanded={!isCollapsed}
-                aria-label={t(
-                  isCollapsed
-                    ? 'chatSidebarExpandProject'
-                    : 'chatSidebarCollapseProject',
-                )}
-                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-                onClick={() =>
-                  presenter.chatSessionListManager.toggleProjectCollapsed(
-                    group.projectRoot,
-                  )
-                }
+              <ChatSidebarContextCard
+                title={group.projectName}
+                metrics={[
+                  {
+                    icon: <Folder className="h-3.5 w-3.5" />,
+                    label: t("chatSidebarContextPath"),
+                    value: group.projectRoot,
+                  },
+                  {
+                    icon: <MessageSquareText className="h-3.5 w-3.5" />,
+                    label: t("chatSidebarContextSessions"),
+                    value: group.items.length,
+                  },
+                  {
+                    icon: <AlarmClock className="h-3.5 w-3.5" />,
+                    label: t("chatSidebarContextScheduledTasks"),
+                    value:
+                      projectCronJobCountByRoot.get(group.projectRoot) ?? 0,
+                  },
+                ]}
               >
-                <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
-                <span
-                  className="truncate text-[11px] font-medium uppercase tracking-wider"
-                  title={group.projectRoot}
+                <button
+                  type="button"
+                  aria-expanded={!isCollapsed}
+                  aria-label={t(
+                    isCollapsed
+                      ? "chatSidebarExpandProject"
+                      : "chatSidebarCollapseProject",
+                  )}
+                  className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  onClick={() =>
+                    presenter.chatSessionListManager.toggleProjectCollapsed(
+                      group.projectRoot,
+                    )
+                  }
                 >
-                  {group.projectName}
-                </span>
-                {isCollapsed ? (
-                  <ChevronRight
-                    className="h-3.5 w-3.5 shrink-0"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <ChevronDown
-                    className="h-3.5 w-3.5 shrink-0"
-                    aria-hidden="true"
-                  />
-                )}
-                <span className="shrink-0 text-[10px] text-muted-foreground/70">
-                  {group.items.length}
-                </span>
-              </button>
+                  <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+                  <span
+                    className="truncate text-[11px] font-medium uppercase tracking-wider"
+                    title={group.projectRoot}
+                  >
+                    {group.projectName}
+                  </span>
+                  {isCollapsed ? (
+                    <ChevronRight
+                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <ChevronDown
+                      className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-within/project:opacity-100"
+                      aria-hidden="true"
+                    />
+                  )}
+                </button>
+              </ChatSidebarContextCard>
               <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center opacity-0 transition-opacity group-hover/project:pointer-events-auto group-hover/project:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
                 {supportsSessionTypeChoice ? (
                   <Popover
@@ -142,8 +183,8 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     <Pin
                       className={
                         group.isPinned
-                          ? 'h-3.5 w-3.5 fill-current text-foreground'
-                          : 'h-3.5 w-3.5'
+                          ? "h-3.5 w-3.5 fill-current text-foreground"
+                          : "h-3.5 w-3.5"
                       }
                     />
                   }