@nextclaw/ui 0.12.24 → 0.12.26

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

@@ -1,6 +1,5 @@
-import { type ComponentProps, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
-import type { ChatFileOpenActionViewModel } from "@nextclaw/agent-chat-ui";
 import { ChatInputBarContainer } from "@/features/chat/components/conversation/chat-input-bar.container";
 import { ChatMessageListContainer } from "@/features/chat/components/conversation/chat-message-list.container";
 import {
@@ -8,11 +7,13 @@ import {
   ChatParentSessionBanner,
 } from "@/features/chat/components/conversation/chat-conversation-header";
 import { ChatWelcome } from "@/features/chat/components/chat-welcome";
-import { ChatSessionWorkspacePanel } from "@/features/chat";
+import { ChatSessionWorkspacePanel } from "@/features/chat/components/chat-session-workspace-panel";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { resolveAgentRuntimeSessionType } from "@/features/chat/hooks/use-chat-session-type-state";
 import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import { useCronJobs } from "@/shared/hooks/use-config";
+import { isCronJobForSession } from "@/shared/lib/cron";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
@@ -101,26 +102,17 @@ function ChatConversationSkeleton() {
   );
 }
 
-type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>["snapshot"];
-type ChatToolActionHandler = ComponentProps<
-  typeof ChatMessageListContainer
->["onToolAction"];
-type ChatFileOpenHandler = ComponentProps<
-  typeof ChatMessageListContainer
->["onFileOpen"];
+type ChatThreadSnapshot = ReturnType<
+  typeof useChatThreadStore.getState
+>["snapshot"];
+type ChatConversationLayoutMode = "desktop" | "mobile";
+
+function ChatConversationAlerts() {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const shouldShowProviderHint =
+    snapshot.isProviderStateResolved && snapshot.modelOptions.length === 0;
 
-type ChatConversationAlertsProps = {
-  shouldShowProviderHint: boolean;
-  sessionTypeUnavailable: boolean;
-  sessionTypeUnavailableMessage: string | null;
-  onGoToProviders: () => void;
-};
-function ChatConversationAlerts({
-  shouldShowProviderHint,
-  sessionTypeUnavailable,
-  sessionTypeUnavailableMessage,
-  onGoToProviders,
-}: ChatConversationAlertsProps) {
   return (
     <>
       {shouldShowProviderHint ? (
@@ -130,17 +122,18 @@ function ChatConversationAlerts({
           </span>
           <button
             type="button"
-            onClick={onGoToProviders}
+            onClick={presenter.chatThreadManager.goToProviders}
             className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
           >
             {t("chatGoConfigureProvider")}
           </button>
         </div>
       ) : null}
-      {sessionTypeUnavailable && sessionTypeUnavailableMessage?.trim() ? (
+      {snapshot.sessionTypeUnavailable &&
+      snapshot.sessionTypeUnavailableMessage?.trim() ? (
         <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0 sm:px-5">
           <span className="text-xs text-amber-800">
-            {sessionTypeUnavailableMessage}
+            {snapshot.sessionTypeUnavailableMessage}
           </span>
         </div>
       ) : null}
@@ -148,31 +141,60 @@ function ChatConversationAlerts({
   );
 }
 
-type ChatConversationContentProps = {
-  snapshot: ChatThreadSnapshot;
-  availableAgents: NonNullable<ChatThreadSnapshot["availableAgents"]>;
-  hideEmptyHint: boolean;
-  showWelcome: boolean;
-  threadRef: ComponentProps<"div">["ref"];
-  onScroll: ComponentProps<"div">["onScroll"];
-  onCreateSession: () => void;
-  onSelectAgent: (agentId: string) => void;
-  onToolAction: ChatToolActionHandler;
-  onFileOpen: ChatFileOpenHandler;
-};
-
 function ChatConversationContent({
-  snapshot,
-  availableAgents,
-  hideEmptyHint,
-  showWelcome,
-  threadRef,
-  onScroll,
-  onCreateSession,
-  onSelectAgent,
-  onToolAction,
-  onFileOpen,
-}: ChatConversationContentProps) {
+  layoutMode,
+}: {
+  layoutMode: ChatConversationLayoutMode;
+}) {
+  const presenter = usePresenter();
+  const defaultSessionType = useChatInputStore(
+    (state) => state.snapshot.defaultSessionType,
+  );
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
+  const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+  const availableAgents = snapshot.availableAgents ?? [];
+  const showWelcome =
+    !snapshot.canDeleteSession &&
+    !snapshot.hasSubmittedDraftMessage &&
+    snapshot.messages.length === 0 &&
+    !snapshot.isSending;
+  const hideEmptyHint =
+    snapshot.isHistoryLoading &&
+    snapshot.messages.length === 0 &&
+    !snapshot.isSending &&
+    !snapshot.isAwaitingAssistantOutput;
+  const resolveDraftAgent = (agentId: string) =>
+    availableAgents.find((agent) => agent.id === agentId) ?? null;
+  const createDraftSessionForAgent = () => {
+    const sessionType = resolveAgentRuntimeSessionType(
+      resolveDraftAgent(snapshot.agentId ?? "main"),
+      defaultSessionType,
+    );
+    presenter.chatSessionListManager.createSession(sessionType);
+    if (layoutMode === "mobile") presenter.chatUiManager.goToChatRoot();
+  };
+  const selectDraftAgent = (agentId: string) => {
+    presenter.chatSessionListManager.setSelectedAgentId(agentId);
+    presenter.chatInputManager.setPendingSessionType(
+      resolveAgentRuntimeSessionType(
+        resolveDraftAgent(agentId),
+        defaultSessionType,
+      ),
+    );
+  };
+  const { onScroll } = useStickyBottomScroll({
+    scrollRef: threadRef,
+    resetKey: snapshot.sessionKey,
+    isLoading: snapshot.isHistoryLoading,
+    hasContent: snapshot.messages.length > 0,
+    contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
+  });
+  const hasMessages = snapshot.messages.length > 0;
+  const isAwaitingAssistantOutput =
+    hasMessages && snapshot.isSending && snapshot.isAwaitingAssistantOutput;
+  const shouldShowMessages = hasMessages;
+
   return (
     <div
       ref={threadRef}
@@ -181,23 +203,18 @@ function ChatConversationContent({
     >
       {showWelcome ? (
         <ChatWelcome
-          onCreateSession={onCreateSession}
+          onCreateSession={createDraftSessionForAgent}
           agents={availableAgents}
           selectedAgentId={snapshot.agentId ?? "main"}
-          onSelectAgent={onSelectAgent}
+          onSelectAgent={selectDraftAgent}
         />
-      ) : hideEmptyHint ? null : snapshot.messages.length === 0 ? (
-        <div className="px-4 py-4 text-sm text-gray-500 sm:px-5 sm:py-5">
-          {t("chatNoMessages")}
-        </div>
-      ) : (
+      ) : hideEmptyHint || !shouldShowMessages ? null : (
         <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
           <ChatMessageListContainer
-            key={snapshot.sessionKey ?? "draft"}
             messages={snapshot.messages}
-            isSending={snapshot.isSending && snapshot.isAwaitingAssistantOutput}
-            onToolAction={onToolAction}
-            onFileOpen={onFileOpen}
+            isSending={isAwaitingAssistantOutput}
+            onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
+            onFileOpen={presenter.chatThreadManager.openFilePreview}
           />
         </div>
       )}
@@ -209,82 +226,90 @@ function shouldShowWorkspacePanel(
   snapshot: ChatThreadSnapshot,
   childSessionTabs: ChatThreadSnapshot["childSessionTabs"],
   workspaceFileTabs: ChatThreadSnapshot["workspaceFileTabs"],
+  sessionCronJobCount: number,
 ) {
   if (snapshot.workspacePanelParentKey !== snapshot.sessionKey) {
     return false;
   }
-  return childSessionTabs.length > 0 || workspaceFileTabs.length > 0;
+  return (
+    childSessionTabs.length > 0 ||
+    workspaceFileTabs.length > 0 ||
+    sessionCronJobCount > 0
+  );
 }
 
-export function ChatConversationPanel({
-  layoutMode = "desktop",
-  onBackToList,
-}: {
-  layoutMode?: "desktop" | "mobile";
-  onBackToList?: () => void;
-}) {
-  const presenter = usePresenter();
-  const defaultSessionType = useChatInputStore(
-    (state) => state.snapshot.defaultSessionType,
+function useSessionWorkspaceState(snapshot: ChatThreadSnapshot) {
+  const childSessionTabs = useMemo(
+    () =>
+      snapshot.childSessionTabs.filter(
+        (tab) => tab.parentSessionKey === snapshot.sessionKey,
+      ),
+    [snapshot.childSessionTabs, snapshot.sessionKey],
   );
-  const snapshot = useChatThreadStore((state) => state.snapshot);
-  const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
-  const threadRef = snapshot.threadRef ?? fallbackThreadRef;
-  const childSessionTabs = snapshot.childSessionTabs.filter(
-    (tab) => tab.parentSessionKey === snapshot.sessionKey,
+  const workspaceFileTabs = useMemo(
+    () =>
+      snapshot.workspaceFileTabs.filter(
+        (tab) => tab.parentSessionKey === snapshot.sessionKey,
+      ),
+    [snapshot.sessionKey, snapshot.workspaceFileTabs],
   );
-  const workspaceFileTabs = snapshot.workspaceFileTabs.filter(
-    (tab) => tab.parentSessionKey === snapshot.sessionKey,
+  const cronQuery = useCronJobs({ all: true });
+  const sessionCronJobs = useMemo(
+    () =>
+      (cronQuery.data?.jobs ?? []).filter((job) =>
+        isCronJobForSession(job, snapshot.sessionKey),
+      ),
+    [cronQuery.data?.jobs, snapshot.sessionKey],
   );
-  const showWorkspacePanel = shouldShowWorkspacePanel(
-    snapshot,
+  return {
     childSessionTabs,
     workspaceFileTabs,
+    sessionCronJobs,
+    showWorkspacePanel: shouldShowWorkspacePanel(
+      snapshot,
+      childSessionTabs,
+      workspaceFileTabs,
+      sessionCronJobs.length,
+    ),
+  };
+}
+
+function ChatParentSessionBannerContainer() {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  return (
+    <ChatParentSessionBanner
+      parentSessionLabel={
+        snapshot.parentSessionKey ? (snapshot.parentSessionLabel ?? null) : null
+      }
+      onGoToParentSession={presenter.chatThreadManager.goToParentSession}
+    />
   );
+}
+
+function ChatConversationHeaderContainer({
+  layoutMode,
+  onBackToList,
+}: {
+  layoutMode: ChatConversationLayoutMode;
+  onBackToList?: () => void;
+}) {
+  const presenter = usePresenter();
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const { childSessionTabs, sessionCronJobs } =
+    useSessionWorkspaceState(snapshot);
   const shouldShowSessionHeader = Boolean(
     snapshot.sessionKey || snapshot.sessionTypeLabel,
   );
   const sessionHeaderTitle =
     snapshot.sessionDisplayName ||
-    (snapshot.canDeleteSession && snapshot.sessionKey ? snapshot.sessionKey : null) ||
+    (snapshot.canDeleteSession && snapshot.sessionKey
+      ? snapshot.sessionKey
+      : null) ||
     t("chatSidebarNewTask");
   const normalizedAgentId = snapshot.agentId?.trim() ?? "";
   const shouldShowHeaderAgentAvatar =
-    normalizedAgentId.length > 0 &&
-    normalizedAgentId.toLowerCase() !== "main";
-
-  const showWelcome =
-    !snapshot.canDeleteSession &&
-    snapshot.messages.length === 0 &&
-    !snapshot.isSending;
-  const hasConfiguredModel = snapshot.modelOptions.length > 0;
-  const shouldShowProviderHint =
-    snapshot.isProviderStateResolved && !hasConfiguredModel;
-  const hideEmptyHint =
-    snapshot.isHistoryLoading &&
-    snapshot.messages.length === 0 &&
-    !snapshot.isSending &&
-    !snapshot.isAwaitingAssistantOutput;
-  const availableAgents = snapshot.availableAgents ?? [];
-  const resolveDraftAgent = (agentId: string) =>
-    availableAgents.find((agent) => agent.id === agentId) ?? null;
-  const createDraftSessionForAgent = () => {
-    const sessionType = resolveAgentRuntimeSessionType(
-      resolveDraftAgent(snapshot.agentId ?? "main"),
-      defaultSessionType,
-    );
-    presenter.chatSessionListManager.createSession(sessionType);
-    if (layoutMode === "mobile") presenter.chatUiManager.goToChatRoot();
-  };
-  const selectDraftAgent = (agentId: string) => {
-    presenter.chatSessionListManager.setSelectedAgentId(agentId);
-    presenter.chatInputManager.setPendingSessionType(
-      resolveAgentRuntimeSessionType(resolveDraftAgent(agentId), defaultSessionType),
-    );
-  };
-  const openFilePreview = (action: ChatFileOpenActionViewModel) => {
-    presenter.chatThreadManager.openFilePreview(action);
-  };
+    normalizedAgentId.length > 0 && normalizedAgentId.toLowerCase() !== "main";
   const openChildSessions = () => {
     if (!snapshot.sessionKey) {
       return;
@@ -294,14 +319,71 @@ export function ChatConversationPanel({
       activeChildSessionKey: childSessionTabs[0]?.sessionKey ?? null,
     });
   };
+  const openSessionCronJobs = () => {
+    if (!snapshot.sessionKey || sessionCronJobs.length === 0) {
+      return;
+    }
+    presenter.chatThreadManager.openSessionCronPanel(snapshot.sessionKey);
+  };
 
-  const { onScroll: handleScroll } = useStickyBottomScroll({
-    scrollRef: threadRef,
-    resetKey: snapshot.sessionKey,
-    isLoading: snapshot.isHistoryLoading,
-    hasContent: snapshot.messages.length > 0,
-    contentVersion: snapshot.messages[snapshot.messages.length - 1] ?? null,
-  });
+  return (
+    <ChatConversationHeader
+      snapshot={snapshot}
+      childSessionCount={childSessionTabs.length}
+      sessionCronJobCount={sessionCronJobs.length}
+      layoutMode={layoutMode}
+      normalizedAgentId={normalizedAgentId}
+      sessionHeaderTitle={sessionHeaderTitle}
+      shouldShowHeaderAgentAvatar={shouldShowHeaderAgentAvatar}
+      shouldShowSessionHeader={shouldShowSessionHeader}
+      onBackToList={onBackToList}
+      onOpenChildSessions={openChildSessions}
+      onOpenSessionCronJobs={openSessionCronJobs}
+      onDeleteSession={presenter.chatThreadManager.deleteSession}
+    />
+  );
+}
+
+function ChatSessionWorkspacePanelContainer({
+  layoutMode,
+}: {
+  layoutMode: ChatConversationLayoutMode;
+}) {
+  const snapshot = useChatThreadStore((state) => state.snapshot);
+  const {
+    childSessionTabs,
+    workspaceFileTabs,
+    sessionCronJobs,
+    showWorkspacePanel,
+  } = useSessionWorkspaceState(snapshot);
+
+  if (!showWorkspacePanel) {
+    return null;
+  }
+
+  return (
+    <ChatSessionWorkspacePanel
+      sessionKey={snapshot.sessionKey}
+      childSessionTabs={childSessionTabs}
+      activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
+      workspaceFileTabs={workspaceFileTabs}
+      activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
+      activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
+      sessionCronJobs={sessionCronJobs}
+      sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
+      displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
+    />
+  );
+}
+
+export function ChatConversationPanel({
+  layoutMode = "desktop",
+  onBackToList,
+}: {
+  layoutMode?: ChatConversationLayoutMode;
+  onBackToList?: () => void;
+}) {
+  const snapshot = useChatThreadStore((state) => state.snapshot);
 
   if (!snapshot.isProviderStateResolved) {
     return <ChatConversationSkeleton />;
@@ -310,63 +392,17 @@ export function ChatConversationPanel({
   return (
     <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-        <ChatParentSessionBanner
-          parentSessionLabel={
-            snapshot.parentSessionKey ? (snapshot.parentSessionLabel ?? null) : null
-          }
-          onGoToParentSession={presenter.chatThreadManager.goToParentSession}
-        />
-        <ChatConversationHeader
-          snapshot={snapshot}
-          childSessionCount={childSessionTabs.length}
+        <ChatParentSessionBannerContainer />
+        <ChatConversationHeaderContainer
           layoutMode={layoutMode}
-          normalizedAgentId={normalizedAgentId}
-          sessionHeaderTitle={sessionHeaderTitle}
-          shouldShowHeaderAgentAvatar={shouldShowHeaderAgentAvatar}
-          shouldShowSessionHeader={shouldShowSessionHeader}
           onBackToList={onBackToList}
-          onOpenChildSessions={openChildSessions}
-          onDeleteSession={presenter.chatThreadManager.deleteSession}
-        />
-        <ChatConversationAlerts
-          shouldShowProviderHint={shouldShowProviderHint}
-          sessionTypeUnavailable={snapshot.sessionTypeUnavailable}
-          sessionTypeUnavailableMessage={snapshot.sessionTypeUnavailableMessage ?? null}
-          onGoToProviders={presenter.chatThreadManager.goToProviders}
         />
-        <ChatConversationContent
-          snapshot={snapshot}
-          availableAgents={availableAgents}
-          hideEmptyHint={hideEmptyHint}
-          showWelcome={showWelcome}
-          threadRef={threadRef}
-          onScroll={handleScroll}
-          onCreateSession={createDraftSessionForAgent}
-          onSelectAgent={selectDraftAgent}
-          onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
-          onFileOpen={openFilePreview}
-        />
-
+        <ChatConversationAlerts />
+        <ChatConversationContent layoutMode={layoutMode} />
         <ChatInputBarContainer />
       </div>
 
-      {showWorkspacePanel ? (
-        <ChatSessionWorkspacePanel
-          childSessionTabs={childSessionTabs}
-          activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
-          workspaceFileTabs={workspaceFileTabs}
-          activeWorkspaceFileKey={snapshot.activeWorkspaceFileKey ?? null}
-          sessionProjectRoot={snapshot.sessionProjectRoot ?? null}
-          displayMode={layoutMode === "mobile" ? "overlay" : "docked"}
-          onSelectSession={presenter.chatThreadManager.selectChildSessionDetail}
-          onSelectFile={presenter.chatThreadManager.selectWorkspaceFile}
-          onCloseFile={presenter.chatThreadManager.closeWorkspaceFile}
-          onClose={presenter.chatThreadManager.closeWorkspacePanel}
-          onBackToParent={presenter.chatThreadManager.goToParentSession}
-          onToolAction={presenter.chatThreadManager.openSessionFromToolAction}
-          onFileOpen={openFilePreview}
-        />
-      ) : null}
+      <ChatSessionWorkspacePanelContainer layoutMode={layoutMode} />
     </section>
   );
 }

package/src/features/chat/components/conversation/chat-input-bar.container.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState, type ChangeEvent, type RefObject } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type RefObject } from 'react';
 import { ChatInputBar, type ChatInputBarHandle } from '@nextclaw/agent-chat-ui';
 import { DEFAULT_NCP_ATTACHMENT_MAX_BYTES, uploadFilesAsNcpDraftAttachments } from '@nextclaw/ncp-react';
 import { uploadNcpAssets } from '@/shared/lib/api';
@@ -234,6 +234,16 @@ export function ChatInputBarContainer() {
     ? t('chatStopPreparing')
     : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
   const { handleFilesAdd, handleFileInputChange } = useChatInputBarAttachments({ attachmentSupported, inputBarRef, presenter });
+  useEffect(() => {
+    const request = snapshot.composerFocusRequest;
+    if (!request) {
+      return;
+    }
+    if (request.placement === 'end') {
+      inputBarRef.current?.focusComposerAtEnd();
+    }
+    presenter.chatInputManager.consumeComposerFocusRequest(request.id);
+  }, [presenter.chatInputManager, snapshot.composerFocusRequest]);
   const toolbarSelects = buildToolbarSelects({
     allModelsLabel: labels.allModelsLabel,
     hasModelOptions,

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

@@ -7,6 +7,7 @@ const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
   onDeleteSession: vi.fn(),
   onOpenChildSessions: vi.fn(),
+  onOpenSessionCronJobs: vi.fn(),
 }));
 
 vi.mock('@/features/chat/hooks/use-chat-session-project', () => ({
@@ -22,6 +23,7 @@ describe('ChatSessionHeaderActions', () => {
     mocks.updateSessionProject.mockReset();
     mocks.onDeleteSession.mockReset();
     mocks.onOpenChildSessions.mockReset();
+    mocks.onOpenSessionCronJobs.mockReset();
   });
 
   it('keeps only the set-project action in the more-actions menu when a project is already attached', async () => {
@@ -86,4 +88,26 @@ describe('ChatSessionHeaderActions', () => {
 
     expect(mocks.onOpenChildSessions).toHaveBeenCalledTimes(1);
   });
+
+  it('uses a shared spaced action group for child, cron, and menu buttons', () => {
+    render(
+      <ChatSessionHeaderActions
+        sessionKey="session-actions"
+        canDeleteSession
+        isDeletePending={false}
+        projectRoot={null}
+        childSessionCount={1}
+        sessionCronJobCount={1}
+        onOpenChildSessions={mocks.onOpenChildSessions}
+        onOpenSessionCronJobs={mocks.onOpenSessionCronJobs}
+        onDeleteSession={mocks.onDeleteSession}
+      />
+    );
+
+    const actionGroup = screen.getByRole('button', { name: 'More actions' }).parentElement;
+
+    expect(actionGroup?.className).toContain('gap-1.5');
+    expect(screen.getByRole('button', { name: 'View child sessions' }).className).toContain('h-7');
+    expect(screen.getByRole('button', { name: 'View session cron jobs' }).className).toContain('w-7');
+  });
 });

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { FolderOpen, GitBranch, MoreHorizontal, Trash2 } from 'lucide-react';
+import { AlarmClock, FolderOpen, GitBranch, MoreVertical, Trash2 } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
@@ -7,13 +7,18 @@ import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
+const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
+const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 rounded-lg shrink-0 text-gray-400 hover:text-gray-700';
+
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
   projectRoot?: string | null;
   childSessionCount?: number;
+  sessionCronJobCount?: number;
   onOpenChildSessions?: () => void;
+  onOpenSessionCronJobs?: () => void;
   onDeleteSession: () => void;
 };
 
@@ -23,7 +28,9 @@ export function ChatSessionHeaderActions({
   isDeletePending,
   projectRoot,
   childSessionCount = 0,
+  sessionCronJobCount = 0,
   onOpenChildSessions,
+  onOpenSessionCronJobs,
   onDeleteSession,
 }: ChatSessionHeaderActionsProps) {
   const updateSessionProject = useChatSessionProject();
@@ -49,13 +56,13 @@ export function ChatSessionHeaderActions({
   };
 
   return (
-    <>
+    <div className={SESSION_HEADER_ACTION_GROUP_CLASS}>
       {childSessionCount > 0 && onOpenChildSessions ? (
         <Button
           type="button"
           variant="ghost"
           size="icon"
-          className="rounded-lg shrink-0 text-gray-400 hover:text-gray-700"
+          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
           aria-label={t('chatSessionOpenChildSessions')}
           title={t('chatSessionOpenChildSessions')}
           onClick={onOpenChildSessions}
@@ -64,16 +71,30 @@ export function ChatSessionHeaderActions({
           <GitBranch className="h-4 w-4" />
         </Button>
       ) : null}
+      {sessionCronJobCount > 0 && onOpenSessionCronJobs ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
+          aria-label={t('chatSessionOpenCronJobs')}
+          title={t('chatSessionOpenCronJobs')}
+          onClick={onOpenSessionCronJobs}
+          disabled={isBusy}
+        >
+          <AlarmClock className="h-4 w-4" />
+        </Button>
+      ) : null}
       <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
         <PopoverTrigger asChild>
           <Button
             variant="ghost"
             size="icon"
-            className="rounded-lg shrink-0 text-gray-400 hover:text-gray-700"
+            className={SESSION_HEADER_ACTION_BUTTON_CLASS}
             aria-label={t('chatSessionMoreActions')}
             disabled={isBusy}
           >
-            <MoreHorizontal className="h-4 w-4" />
+            <MoreVertical className="h-4 w-4" />
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-56 p-2">
@@ -108,6 +129,6 @@ export function ChatSessionHeaderActions({
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}
       />
-    </>
+    </div>
   );
 }