@nextclaw/ui 0.20.1 → 0.20.3

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

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

@@ -1,14 +1,23 @@
-import { AgentAvatar } from '@/shared/components/common/agent-avatar';
-import { SessionContextIconNode } from '@/features/chat/features/session/components/session-context-icon';
-import { SessionRunBadge } from '@/features/chat/features/session/components/session-run-badge';
-import { ChatSessionMoreActionsMenu } from '@/features/chat/features/session/components/session-header/chat-session-more-actions-menu';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
-import { Input } from '@/shared/components/ui/input';
-import { type SessionContextView } from '@/features/chat/features/session/utils/session-context.utils';
-import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
-import { cn } from '@/shared/lib/utils';
-import { t } from '@/shared/lib/i18n';
-import { Check, GitBranch, Pencil, Pin, X } from 'lucide-react';
+import { AgentAvatar } from "@/shared/components/common/agent-avatar";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import { ChatSessionMoreActionsMenu } from "@/features/chat/features/session/components/session-header/chat-session-more-actions-menu";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { Input } from "@/shared/components/ui/input";
+import { type SessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
+import { cn } from "@/shared/lib/utils";
+import { t } from "@/shared/lib/i18n";
+import {
+  AlarmClock,
+  Check,
+  Folder,
+  GitBranch,
+  Pencil,
+  Pin,
+  X,
+} from "lucide-react";
+import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -24,11 +33,12 @@ type ChatSidebarSessionItemProps = {
   agentLabel?: string | null;
   agentAvatarUrl?: string | null;
   childSessionCount?: number;
+  cronJobCount?: number;
+  projectName?: string | null;
   isEditing: boolean;
   draftLabel: string;
   isSaving: boolean;
   onSelect: () => void;
-  onOpenChildSessions?: () => void;
   onStartEditing: () => void;
   onDraftLabelChange: (value: string) => void;
   onSave: () => void | Promise<void>;
@@ -38,7 +48,12 @@ type ChatSidebarSessionItemProps = {
 
 type ChatSidebarSessionEditingViewProps = Pick<
   ChatSidebarSessionItemProps,
-  'sessionKey' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+  | "sessionKey"
+  | "draftLabel"
+  | "isSaving"
+  | "onDraftLabelChange"
+  | "onSave"
+  | "onCancel"
 >;
 
 function ChatSidebarSessionEditingView({
@@ -47,7 +62,7 @@ function ChatSidebarSessionEditingView({
   isSaving,
   onDraftLabelChange,
   onSave,
-  onCancel
+  onCancel,
 }: ChatSidebarSessionEditingViewProps) {
   return (
     <div className="space-y-2">
@@ -55,32 +70,34 @@ function ChatSidebarSessionEditingView({
         value={draftLabel}
         onChange={(event) => onDraftLabelChange(event.target.value)}
         onKeyDown={(event) => {
-          if (event.key === 'Enter') {
+          if (event.key === "Enter") {
             event.preventDefault();
             void onSave();
-          } else if (event.key === 'Escape') {
+          } else if (event.key === "Escape") {
             event.preventDefault();
             onCancel();
           }
         }}
-        placeholder={t('sessionsLabelPlaceholder')}
+        placeholder={t("sessionsLabelPlaceholder")}
         className="h-8 rounded-lg border-border bg-background text-xs"
         autoFocus
         disabled={isSaving}
       />
       <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 truncate text-[11px] text-muted-foreground/65">{sessionKey}</div>
+        <div className="min-w-0 truncate text-[11px] text-muted-foreground/65">
+          {sessionKey}
+        </div>
         <div className="flex items-center gap-1">
           <IconActionButton
             icon={<Check className="h-3.5 w-3.5" />}
-            label={t('save')}
+            label={t("save")}
             tooltip={false}
             onClick={() => void onSave()}
             disabled={isSaving}
           />
           <IconActionButton
             icon={<X className="h-3.5 w-3.5" />}
-            label={t('cancel')}
+            label={t("cancel")}
             tooltip={false}
             onClick={onCancel}
             disabled={isSaving}
@@ -93,8 +110,15 @@ function ChatSidebarSessionEditingView({
 
 type ChatSidebarSessionDisplayViewProps = Omit<
   ChatSidebarSessionItemProps,
-  'sessionKey' | 'isEditing' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
-> & Pick<ChatSidebarSessionItemProps, 'sessionKey'>;
+  | "sessionKey"
+  | "isEditing"
+  | "draftLabel"
+  | "isSaving"
+  | "onDraftLabelChange"
+  | "onSave"
+  | "onCancel"
+> &
+  Pick<ChatSidebarSessionItemProps, "sessionKey">;
 
 function ChatSidebarSessionDisplayView({
   sessionKey,
@@ -110,93 +134,113 @@ function ChatSidebarSessionDisplayView({
   agentLabel,
   agentAvatarUrl,
   childSessionCount = 0,
+  cronJobCount = 0,
+  projectName,
   onSelect,
-  onOpenChildSessions,
   onStartEditing,
-  onTogglePinned
+  onTogglePinned,
 }: ChatSidebarSessionDisplayViewProps) {
-  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-32' : 'pr-20';
-
   return (
     <div className="group/session relative">
-      <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className={cn('flex min-h-6 min-w-0 items-center', trailingControlsClassName)}>
-          <span className="flex min-w-0 items-center gap-1.5">
-            {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
-              <AgentAvatar
-                agentId={agentId}
-                displayName={agentLabel}
-                avatarUrl={agentAvatarUrl}
-                className="h-5 w-5 shrink-0"
-              />
-            ) : null}
-            <span className="truncate leading-6 font-medium">{title}</span>
-            {context.label ? (
+      <ChatSidebarContextCard
+        title={title}
+        metrics={[
+          {
+            icon: <Folder className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextProject"),
+            value: projectName,
+          },
+          {
+            icon: <GitBranch className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextChildSessions"),
+            value: childSessionCount,
+          },
+          {
+            icon: <AlarmClock className="h-3.5 w-3.5" />,
+            label: t("chatSidebarContextScheduledTasks"),
+            value: cronJobCount,
+          },
+        ]}
+      >
+        <button type="button" onClick={onSelect} className="w-full text-left">
+          <div
+            className={cn(
+              "flex min-h-6 min-w-0 items-center",
+              runStatus && "pr-6",
+              "group-hover/session:pr-20 group-has-[[data-session-actions]:focus-within]/session:pr-20",
+            )}
+          >
+            <span className="flex min-w-0 items-center gap-1.5">
+              {agentId?.trim() && agentId.trim().toLowerCase() !== "main" ? (
+                <AgentAvatar
+                  agentId={agentId}
+                  displayName={agentLabel}
+                  avatarUrl={agentAvatarUrl}
+                  className="h-5 w-5 shrink-0"
+                />
+              ) : null}
+              <span className="truncate leading-6 font-medium">{title}</span>
+              {context.label ? (
+                <span
+                  className={cn(
+                    "shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none",
+                    active
+                      ? "border-border/70 bg-background/80 text-foreground/75"
+                      : "border-transparent bg-muted/70 text-muted-foreground",
+                  )}
+                >
+                  {context.label}
+                </span>
+              ) : null}
+              {context.icon ? (
+                <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
+                  <SessionContextIconNode
+                    icon={context.icon}
+                    className={cn(
+                      "h-[13px] w-[13px]",
+                      active ? "text-foreground/75" : "text-muted-foreground",
+                    )}
+                  />
+                </span>
+              ) : null}
+            </span>
+          </div>
+          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground/65">
+            <span className="min-w-0 truncate">{previewText}</span>
+            {showUnreadDot ? (
               <span
-                className={cn(
-                  'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
-                  active
-                    ? 'border-border/70 bg-background/80 text-foreground/75'
-                    : 'border-transparent bg-muted/70 text-muted-foreground'
-                )}
-              >
-                {context.label}
-              </span>
-            ) : null}
-            {context.icon ? (
-              <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                <SessionContextIconNode icon={context.icon} className={cn('h-[13px] w-[13px]', active ? 'text-foreground/75' : 'text-muted-foreground')} />
-              </span>
-            ) : null}
-          </span>
-        </div>
-        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground/65">
-          <span className="min-w-0 truncate">
-            {previewText}
-          </span>
-          {showUnreadDot ? (
-            <span
-              aria-label={t('chatSessionUnread')}
-              className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
-            />
-          ) : (
-            <span className="ml-auto shrink-0">{trailingText}</span>
-          )}
-        </div>
-      </button>
-      {childSessionCount > 0 && onOpenChildSessions ? (
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation();
-            onOpenChildSessions();
-          }}
-          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-background/80 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
-          aria-label={t('chatSessionOpenChildSessions')}
-          title={t('chatSessionOpenChildSessions')}
-        >
-          <GitBranch className="h-3.5 w-3.5" />
-          <span>{childSessionCount}</span>
+                aria-label={t("chatSessionUnread")}
+                className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
+              />
+            ) : (
+              <span className="ml-auto shrink-0">{trailingText}</span>
+            )}
+          </div>
         </button>
-      ) : null}
+      </ChatSidebarContextCard>
       {runStatus ? (
         <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <div className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+      <div
+        data-session-actions
+        className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100"
+      >
         <IconActionButton
           size="sm"
           tone="strong"
           icon={
             <Pin
               className={cn(
-                'h-3.5 w-3.5',
-                isPinned && 'fill-current text-foreground',
+                "h-3.5 w-3.5",
+                isPinned && "fill-current text-foreground",
               )}
             />
           }
-          label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')}
+          label={t(
+            isPinned ? "chatSidebarUnpinSession" : "chatSidebarPinSession",
+          )}
           tooltipSide="right"
           onClick={(event) => {
             event.stopPropagation();
@@ -207,7 +251,7 @@ function ChatSidebarSessionDisplayView({
           size="sm"
           tone="strong"
           icon={<Pencil className="h-3.5 w-3.5" />}
-          label={t('edit')}
+          label={t("edit")}
           tooltipSide="right"
           onClick={(event) => {
             event.stopPropagation();
@@ -238,24 +282,25 @@ export function ChatSidebarSessionItem({
   agentLabel,
   agentAvatarUrl,
   childSessionCount,
+  cronJobCount,
+  projectName,
   isEditing,
   draftLabel,
   isSaving,
   onSelect,
-  onOpenChildSessions,
   onStartEditing,
   onDraftLabelChange,
   onSave,
   onCancel,
-  onTogglePinned
+  onTogglePinned,
 }: ChatSidebarSessionItemProps) {
   return (
     <div
       className={cn(
-        'w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors',
+        "w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors",
         active
-          ? 'bg-background/90 font-medium text-foreground'
-          : 'text-foreground/80 hover:bg-background/65 hover:text-foreground'
+          ? "bg-background/90 font-medium text-foreground"
+          : "text-foreground/80 hover:bg-background/65 hover:text-foreground",
       )}
     >
       {isEditing ? (
@@ -283,7 +328,8 @@ export function ChatSidebarSessionItem({
           agentAvatarUrl={agentAvatarUrl}
           onSelect={onSelect}
           childSessionCount={childSessionCount}
-          onOpenChildSessions={onOpenChildSessions}
+          cronJobCount={cronJobCount}
+          projectName={projectName}
           onStartEditing={onStartEditing}
           onTogglePinned={onTogglePinned}
         />

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

@@ -16,6 +16,7 @@ type ChatSidebarSessionListProps = {
   isProjectFirstView: boolean;
   groups: ChatSidebarDateGroup[];
   projectGroups: ChatSidebarProjectGroup[];
+  projectCronJobCountByRoot: ReadonlyMap<string, number>;
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
@@ -36,11 +37,16 @@ export function ChatSidebarSessionList({
   isLoading,
   isProjectFirstView,
   projectGroups,
+  projectCronJobCountByRoot,
   renderSessionItem,
   sessionTypeOptions,
 }: ChatSidebarSessionListProps) {
   if (isLoading) {
-    return <div className="p-3 text-xs text-muted-foreground">{t("sessionsLoading")}</div>;
+    return (
+      <div className="p-3 text-xs text-muted-foreground">
+        {t("sessionsLoading")}
+      </div>
+    );
   }
 
   if (isProjectFirstView) {
@@ -49,6 +55,7 @@ export function ChatSidebarSessionList({
     ) : (
       <ChatSidebarProjectGroups
         groups={projectGroups}
+        projectCronJobCountByRoot={projectCronJobCountByRoot}
         defaultSessionType={defaultSessionType}
         sessionTypeOptions={sessionTypeOptions}
         renderSessionItem={renderSessionItem}
@@ -67,7 +74,9 @@ export function ChatSidebarSessionList({
           <div className="px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65">
             {group.label}
           </div>
-          <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>
+          <div className="space-y-0.5">
+            {group.items.map(renderSessionItem)}
+          </div>
         </div>
       ))}
     </div>

package/src/features/chat/features/session/hooks/use-chat-sidebar-context-counts.ts

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { useCronJobs } from "@/features/cron";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+
+export function useChatSidebarContextCounts(
+  allItems: readonly NcpSessionListItemView[],
+) {
+  const cronQuery = useCronJobs({ all: true });
+
+  return useMemo(() => {
+    const projectRootBySessionKey = new Map(
+      allItems.flatMap(({ session }) => {
+        const projectRoot = session.projectRoot?.trim();
+        return projectRoot ? [[session.key, projectRoot] as const] : [];
+      }),
+    );
+    const cronJobCountBySessionKey = new Map<string, number>();
+    const cronJobCountByProjectRoot = new Map<string, number>();
+
+    for (const job of cronQuery.data?.jobs ?? []) {
+      const sessionKey = job.payload.sessionId?.trim();
+      if (!sessionKey) {
+        continue;
+      }
+      cronJobCountBySessionKey.set(
+        sessionKey,
+        (cronJobCountBySessionKey.get(sessionKey) ?? 0) + 1,
+      );
+      const projectRoot = projectRootBySessionKey.get(sessionKey);
+      if (projectRoot) {
+        cronJobCountByProjectRoot.set(
+          projectRoot,
+          (cronJobCountByProjectRoot.get(projectRoot) ?? 0) + 1,
+        );
+      }
+    }
+
+    return { cronJobCountByProjectRoot, cronJobCountBySessionKey };
+  }, [allItems, cronQuery.data?.jobs]);
+}

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

@@ -66,12 +66,15 @@ beforeEach(() => {
   mocks.query.isError = false;
 });
 
-it('shows totals, cache hit rate, and usage grouped by model', () => {
+it('shows totals, model calls, cache read ratio, and usage grouped by model', () => {
   render(<ChatSessionTokenUsage sessionKey="parent-1" />);
 
   expect(screen.getByText('Token usage')).toBeTruthy();
   expect(screen.getByText('1,490')).toBeTruthy();
   expect(screen.getAllByText('40%').length).toBeGreaterThan(0);
+  expect(screen.getByText('Model calls')).toBeTruthy();
+  expect(screen.getByText('Reported calls')).toBeTruthy();
+  expect(screen.getByText('2 agent rounds · 3 model calls · Cache read ratio: 40%')).toBeTruthy();
   expect(screen.getByText('openai/gpt-5')).toBeTruthy();
   expect(screen.getByText('anthropic/claude-sonnet-4')).toBeTruthy();
   expect(screen.getAllByText('Partial usage')).toHaveLength(2);