@nextclaw/ui 0.12.24 → 0.12.26

package/src/features/chat/components/chat-session-workspace-panel.tsx

@@ -4,6 +4,7 @@ import type {
   ChatFileOpenActionViewModel,
   ChatToolActionViewModel,
 } from "@nextclaw/agent-chat-ui";
+import type { CronJobView } from "@/shared/lib/api";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
 import {
@@ -28,23 +29,20 @@ import {
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { SessionCronJobContent } from "@/features/chat/components/workspace/session-cron-job-content";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type ChatSessionWorkspacePanelProps = {
+  sessionKey: string | null;
   childSessionTabs: readonly ChatChildSessionTab[];
   activeChildSessionKey: string | null;
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
   activeWorkspaceFileKey: string | null;
+  activePanelKind?: "child-session" | "file" | "cron" | null;
+  sessionCronJobs?: readonly CronJobView[];
   sessionProjectRoot: string | null;
   displayMode?: "docked" | "overlay";
-  onSelectSession: (sessionKey: string) => void;
-  onSelectFile: (fileKey: string) => void;
-  onCloseFile: (fileKey: string) => void;
-  onClose: () => void;
-  onBackToParent: () => void;
-  onToolAction?: (action: ChatToolActionViewModel) => void;
-  onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
 function ChildSessionContent({
@@ -141,11 +139,7 @@ function ChildSessionMetaStrip({ tab }: { tab: ResolvedChildSessionTab }) {
   );
 }
 
-function WorkspaceActiveChildHeader({
-  tab,
-}: {
-  tab: ResolvedChildSessionTab;
-}) {
+function WorkspaceActiveChildHeader({ tab }: { tab: ResolvedChildSessionTab }) {
   return (
     <div className="border-b border-gray-200/70 px-4 py-3">
       <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-gray-900">
@@ -167,20 +161,24 @@ function WorkspaceActiveChildHeader({
 function buildWorkspaceTabsViewModel(params: {
   resolvedChildTabs: ResolvedChildSessionTab[];
   workspaceFileTabs: readonly ChatWorkspaceFileTab[];
+  sessionCronJobCount: number;
   activeSelection: ReturnType<typeof resolveWorkspaceSelection>;
   optimisticReadAtBySessionKey: Record<string, string>;
   onSelectSession: (sessionKey: string) => void;
   onSelectFile: (fileKey: string) => void;
   onCloseFile: (fileKey: string) => void;
+  onSelectCronJobs: () => void;
 }): WorkspaceTabViewModel[] {
   const {
     resolvedChildTabs,
     workspaceFileTabs,
+    sessionCronJobCount,
     activeSelection,
     optimisticReadAtBySessionKey,
     onSelectSession,
     onSelectFile,
     onCloseFile,
+    onSelectCronJobs,
   } = params;
 
   const childTabs = resolvedChildTabs.map((tab) => {
@@ -190,7 +188,7 @@ function buildWorkspaceTabsViewModel(params: {
         ? optimisticReadAt.localeCompare(tab.readAt) > 0
           ? optimisticReadAt
           : tab.readAt
-        : optimisticReadAt ?? tab.readAt;
+        : (optimisticReadAt ?? tab.readAt);
     return {
       key: `child:${tab.sessionKey}`,
       kind: "child-session" as const,
@@ -219,29 +217,38 @@ function buildWorkspaceTabsViewModel(params: {
     tooltip: file.path,
     viewMode: file.viewMode,
     active:
-      activeSelection?.kind === "file" &&
-      activeSelection.file.key === file.key,
+      activeSelection?.kind === "file" && activeSelection.file.key === file.key,
     onSelect: () => onSelectFile(file.key),
     onClose: () => onCloseFile(file.key),
   }));
 
-  return [...childTabs, ...fileTabs];
+  const cronTab =
+    sessionCronJobCount > 0
+      ? [
+          {
+            key: "cron:session",
+            kind: "cron" as const,
+            title: t("chatWorkspaceSessionCronJobs"),
+            tooltip: t("chatWorkspaceSessionCronJobs"),
+            active: activeSelection?.kind === "cron",
+            onSelect: onSelectCronJobs,
+          },
+        ]
+      : [];
+
+  return [...childTabs, ...fileTabs, ...cronTab];
 }
 
 export function ChatSessionWorkspacePanel({
+  sessionKey,
   childSessionTabs,
   activeChildSessionKey,
   workspaceFileTabs,
   activeWorkspaceFileKey,
+  activePanelKind,
+  sessionCronJobs = [],
   sessionProjectRoot,
   displayMode = "docked",
-  onSelectSession,
-  onSelectFile,
-  onCloseFile,
-  onClose,
-  onBackToParent,
-  onToolAction,
-  onFileOpen,
 }: ChatSessionWorkspacePanelProps) {
   const presenter = usePresenter();
   const resolvedChildTabs = useNcpChildSessionTabsView(childSessionTabs);
@@ -251,8 +258,10 @@ export function ChatSessionWorkspacePanel({
   const activeSelection = resolveWorkspaceSelection({
     activeChildSessionKey,
     activeWorkspaceFileKey,
+    activePanelKind,
     childSessionTabs: resolvedChildTabs,
     workspaceFileTabs,
+    sessionCronJobCount: sessionCronJobs.length,
   });
   const hasParentSession = resolvedChildTabs.some((tab) =>
     Boolean(tab.parentSessionKey),
@@ -278,20 +287,25 @@ export function ChatSessionWorkspacePanel({
       buildWorkspaceTabsViewModel({
         resolvedChildTabs,
         workspaceFileTabs,
+        sessionCronJobCount: sessionCronJobs.length,
         activeSelection,
         optimisticReadAtBySessionKey,
-        onSelectSession,
-        onSelectFile,
-        onCloseFile,
+        onSelectSession: presenter.chatThreadManager.selectChildSessionDetail,
+        onSelectFile: presenter.chatThreadManager.selectWorkspaceFile,
+        onCloseFile: presenter.chatThreadManager.closeWorkspaceFile,
+        onSelectCronJobs: () => {
+          if (sessionKey)
+            presenter.chatThreadManager.openSessionCronPanel(sessionKey);
+        },
       }),
     [
       activeSelection,
-      onCloseFile,
-      onSelectFile,
-      onSelectSession,
       optimisticReadAtBySessionKey,
+      presenter.chatThreadManager,
       resolvedChildTabs,
+      sessionKey,
       workspaceFileTabs,
+      sessionCronJobs.length,
     ],
   );
 
@@ -311,7 +325,7 @@ export function ChatSessionWorkspacePanel({
         <div className="flex items-center justify-between gap-3 border-b border-gray-200/70 px-4 py-2.5">
           <button
             type="button"
-            onClick={onBackToParent}
+            onClick={presenter.chatThreadManager.goToParentSession}
             className={cn(
               "inline-flex items-center gap-1 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900",
               !hasParentSession && "pointer-events-none opacity-0",
@@ -322,7 +336,7 @@ export function ChatSessionWorkspacePanel({
           </button>
           <button
             type="button"
-            onClick={onClose}
+            onClick={presenter.chatThreadManager.closeWorkspacePanel}
             className="rounded-full border border-gray-200/80 p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900"
             aria-label={t("chatWorkspaceClosePanel")}
           >
@@ -339,17 +353,21 @@ export function ChatSessionWorkspacePanel({
               <div className="flex-1 min-h-0">
                 <ChildSessionContent
                   sessionKey={activeSelection.tab.sessionKey}
-                  onToolAction={onToolAction}
-                  onFileOpen={onFileOpen}
+                  onToolAction={
+                    presenter.chatThreadManager.openSessionFromToolAction
+                  }
+                  onFileOpen={presenter.chatThreadManager.openFilePreview}
                 />
               </div>
             </>
-          ) : (
+          ) : activeSelection.kind === "file" ? (
             <ChatSessionWorkspaceFilePreview
               file={activeSelection.file}
               sessionProjectRoot={sessionProjectRoot}
-              onFileOpen={onFileOpen}
+              onFileOpen={presenter.chatThreadManager.openFilePreview}
             />
+          ) : (
+            <SessionCronJobContent jobs={sessionCronJobs} />
           )}
         </div>
       </div>

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

@@ -5,9 +5,13 @@ import { SessionRunBadge } from '@/features/chat/components/session/session-run-
 import { Button } from '@/shared/components/ui/button';
 import { Input } from '@/shared/components/ui/input';
 import { type SessionContextView } from '@/features/chat/utils/session-context.utils';
+import {
+  formatSessionListTime,
+  sessionActivityPreviewText
+} from '@/features/chat/utils/chat-session-display.utils';
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 import { cn } from '@/shared/lib/utils';
-import { formatDateShort, t } from '@/shared/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
@@ -116,11 +120,13 @@ function ChatSidebarSessionDisplayView({
   onStartEditing
 }: ChatSidebarSessionDisplayViewProps) {
   const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-14' : 'pr-6';
+  const previewText = sessionActivityPreviewText(session);
+  const fallbackPreviewText = `${agentLabel?.trim() ? `${agentLabel} · ` : ''}${session.messageCount}`;
 
   return (
     <div className="group/session relative">
       <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className={cn('grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2', trailingControlsClassName)}>
+        <div className={cn('flex min-w-0 items-start', trailingControlsClassName)}>
           <span className="flex min-w-0 items-center gap-1.5">
             {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
               <AgentAvatar
@@ -149,15 +155,10 @@ function ChatSidebarSessionDisplayView({
               </span>
             ) : null}
           </span>
-          {runStatus ? (
-            <span className="inline-flex shrink-0 items-center justify-end gap-1.5 pt-0.5">
-              <SessionRunBadge status={runStatus} />
-            </span>
-          ) : null}
         </div>
         <div className="mt-1 flex items-center gap-2 text-[11px] text-gray-400">
           <span className="min-w-0 truncate">
-            {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount}
+            {previewText ?? fallbackPreviewText}
           </span>
           {showUnreadDot ? (
             <span
@@ -165,7 +166,7 @@ function ChatSidebarSessionDisplayView({
               className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
             />
           ) : (
-            <span className="ml-auto shrink-0">{formatDateShort(session.lastMessageAt ?? session.createdAt)}</span>
+            <span className="ml-auto shrink-0">{formatSessionListTime(session.lastMessageAt ?? session.createdAt)}</span>
           )}
         </div>
       </button>
@@ -189,6 +190,11 @@ function ChatSidebarSessionDisplayView({
           <span>{childSessionCount}</span>
         </button>
       ) : null}
+      {runStatus ? (
+        <span className="absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+          <SessionRunBadge status={runStatus} />
+        </span>
+      ) : null}
       <button
         type="button"
         onClick={(event) => {
@@ -197,9 +203,7 @@ function ChatSidebarSessionDisplayView({
         }}
         className={cn(
           'absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-md text-gray-400 transition-all hover:bg-white hover:text-gray-900',
-          active
-            ? 'opacity-100'
-            : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
+          'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
         )}
         aria-label={t('edit')}
       >

package/src/features/chat/components/conversation/chat-conversation-header.test.tsx

@@ -0,0 +1,74 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+
+vi.mock("@/shared/components/common/agent-avatar", () => ({
+  AgentAvatar: ({ agentId }: { agentId: string }) => (
+    <div data-testid="agent-avatar">{agentId}</div>
+  ),
+}));
+
+function renderHeader(
+  snapshotPatch: Partial<ReturnType<typeof useChatThreadStore.getState>["snapshot"]>,
+) {
+  const queryClient = new QueryClient();
+  const snapshot = {
+    ...useChatThreadStore.getState().snapshot,
+    isProviderStateResolved: true,
+    modelOptions: [],
+    sessionTypeLabel: "Codex",
+    sessionKey: null,
+    agentId: "main",
+    canDeleteSession: false,
+    messages: [],
+    ...snapshotPatch,
+  };
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ChatConversationHeader
+        snapshot={snapshot}
+        childSessionCount={0}
+        sessionCronJobCount={0}
+        layoutMode="desktop"
+        normalizedAgentId={snapshot.agentId ?? ""}
+        sessionHeaderTitle={snapshot.sessionDisplayName ?? "New Task"}
+        shouldShowHeaderAgentAvatar={false}
+        shouldShowSessionHeader={Boolean(
+          snapshot.sessionKey || snapshot.sessionTypeLabel,
+        )}
+        onOpenChildSessions={vi.fn()}
+        onOpenSessionCronJobs={vi.fn()}
+        onDeleteSession={vi.fn()}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe("ChatConversationHeader", () => {
+  it("uses a stable desktop height before and after session materialization", () => {
+    renderHeader({});
+
+    const header = screen.getByText("New Task").closest(".border-b");
+
+    expect(header?.className).toContain("h-[52px]");
+    expect(header?.className).not.toContain("transition-all");
+  });
+
+  it("uses the standard session-header action button density after the session is materialized", () => {
+    renderHeader({
+      sessionKey: "session-1",
+      canDeleteSession: true,
+      sessionDisplayName: "First message",
+    });
+
+    const moreActions = screen.getByRole("button", { name: "More actions" });
+    const header = screen.getByText("First message").closest(".border-b");
+
+    expect(header?.className).toContain("h-[52px]");
+    expect(moreActions.className).toContain("h-7");
+    expect(moreActions.className).toContain("w-7");
+  });
+});

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -44,6 +44,7 @@ export function ChatParentSessionBanner({
 export function ChatConversationHeader({
   snapshot,
   childSessionCount,
+  sessionCronJobCount,
   layoutMode,
   normalizedAgentId,
   sessionHeaderTitle,
@@ -51,10 +52,12 @@ export function ChatConversationHeader({
   shouldShowSessionHeader,
   onBackToList,
   onOpenChildSessions,
+  onOpenSessionCronJobs,
   onDeleteSession,
 }: {
   snapshot: ChatThreadSnapshot;
   childSessionCount: number;
+  sessionCronJobCount: number;
   layoutMode: "desktop" | "mobile";
   normalizedAgentId: string;
   sessionHeaderTitle: string;
@@ -62,6 +65,7 @@ export function ChatConversationHeader({
   shouldShowSessionHeader: boolean;
   onBackToList?: () => void;
   onOpenChildSessions: () => void;
+  onOpenSessionCronJobs: () => void;
   onDeleteSession: ChatHeaderDeleteHandler;
 }) {
   const isMobileLayout = layoutMode === "mobile";
@@ -69,10 +73,10 @@ export function ChatConversationHeader({
   return (
     <div
       className={cn(
-        "border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
+        "border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
         shouldShowSessionHeader ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
-        shouldShowSessionHeader && (isMobileLayout ? "pb-2 pt-2" : "py-3"),
+        shouldShowSessionHeader && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
       )}
       style={
         isMobileLayout && shouldShowSessionHeader
@@ -137,7 +141,9 @@ export function ChatConversationHeader({
           isDeletePending={snapshot.isDeletePending}
           projectRoot={snapshot.sessionProjectRoot}
           childSessionCount={childSessionCount}
+          sessionCronJobCount={sessionCronJobCount}
           onOpenChildSessions={onOpenChildSessions}
+          onOpenSessionCronJobs={onOpenSessionCronJobs}
           onDeleteSession={onDeleteSession}
         />
       ) : null}