@nextclaw/ui 0.20.0 → 0.20.2

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"
                       }
                     />
                   }

package/src/features/chat/features/session/components/chat-sidebar-session-entry.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/features/chat/features/session/utils/chat-session-display.utils";
 import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { t } from "@/shared/lib/i18n";
 
 export function ChatSidebarSessionEntry(props: {
   item: NcpSessionListItemView;
@@ -18,6 +19,7 @@ export function ChatSidebarSessionEntry(props: {
     { displayName?: string | null; avatarUrl?: string | null }
   >;
   childSessionsByParentKey: Map<string, NcpSessionListItemView[]>;
+  cronJobCount: number;
   editingSessionKey: string | null;
   draftLabel: string;
   savingSessionKey: string | null;
@@ -25,10 +27,6 @@ export function ChatSidebarSessionEntry(props: {
   isPinned: boolean;
   sessionTitle: (session: SessionEntryView) => string;
   onSelectSession: (sessionKey: string) => void;
-  onOpenChildSessions: (
-    parentSessionKey: string,
-    activeChildSessionKey: string | null,
-  ) => void;
   onStartEditingSessionLabel: (session: SessionEntryView) => void;
   onDraftLabelChange: (value: string) => void;
   onSaveSessionLabel: (session: SessionEntryView) => void;
@@ -41,6 +39,7 @@ export function ChatSidebarSessionEntry(props: {
     optimisticReadAtBySessionKey,
     agentsById,
     childSessionsByParentKey,
+    cronJobCount,
     editingSessionKey,
     draftLabel,
     savingSessionKey,
@@ -48,7 +47,6 @@ export function ChatSidebarSessionEntry(props: {
     isPinned,
     sessionTitle,
     onSelectSession,
-    onOpenChildSessions,
     onStartEditingSessionLabel,
     onDraftLabelChange,
     onSaveSessionLabel,
@@ -98,13 +96,16 @@ export function ChatSidebarSessionEntry(props: {
           : null
       }
       childSessionCount={childSessions.length}
+      cronJobCount={cronJobCount}
+      projectName={
+        session.projectName?.trim() ||
+        session.projectRoot?.trim().split(/[\\/]/).filter(Boolean).at(-1) ||
+        t("chatSidebarContextNoProject")
+      }
       isEditing={editingSessionKey === session.key}
       draftLabel={draftLabel}
       isSaving={savingSessionKey === session.key}
       onSelect={() => onSelectSession(session.key)}
-      onOpenChildSessions={() =>
-        onOpenChildSessions(session.key, childSessions[0]?.session.key ?? null)
-      }
       onStartEditing={() => onStartEditingSessionLabel(session)}
       onDraftLabelChange={onDraftLabelChange}
       onSave={() => onSaveSessionLabel(session)}