@nextclaw/ui 0.12.24 → 0.12.25

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, MoreHorizontal, 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,12 +71,26 @@ 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}
           >
@@ -108,6 +129,6 @@ export function ChatSessionHeaderActions({
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}
       />
-    </>
+    </div>
   );
 }

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -0,0 +1,174 @@
+import { NavLink } from 'react-router-dom';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/shared/components/ui/select';
+import { t, type I18nLanguage } from '@/shared/lib/i18n';
+import type { UiTheme } from '@/shared/lib/theme';
+import {
+  BookOpen,
+  ChevronRight,
+  Languages,
+  Palette,
+  Settings,
+  type LucideIcon,
+} from 'lucide-react';
+
+type ChatSidebarUtilityOption<Value extends string> = {
+  value: Value;
+  label: string;
+};
+
+type ChatSidebarUtilityMenuProps = {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentTheme: UiTheme;
+  currentThemeLabel: string;
+  themeOptions: ChatSidebarUtilityOption<UiTheme>[];
+  onSelectTheme: (theme: UiTheme) => void;
+  currentLanguage: I18nLanguage;
+  currentLanguageLabel: string;
+  languageOptions: ChatSidebarUtilityOption<I18nLanguage>[];
+  onSelectLanguage: (language: I18nLanguage) => void;
+  onOpenDocs: () => void;
+};
+
+export function ChatSidebarUtilityMenu({
+  isOpen,
+  onOpenChange,
+  currentTheme,
+  currentThemeLabel,
+  themeOptions,
+  onSelectTheme,
+  currentLanguage,
+  currentLanguageLabel,
+  languageOptions,
+  onSelectLanguage,
+  onOpenDocs,
+}: ChatSidebarUtilityMenuProps) {
+  const handleOpenDocs = () => {
+    onOpenDocs();
+    onOpenChange(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={currentLanguage === 'zh' ? '设置菜单' : 'Settings menu'}
+          className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800"
+        >
+          <Settings className="h-4 w-4 shrink-0 text-gray-400" />
+          <span className="min-w-0 flex-1 text-left">{t('settings')}</span>
+          <span className="max-w-[112px] truncate text-[13px] text-gray-500">
+            {currentThemeLabel} / {currentLanguageLabel}
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="top" align="start" className="w-64 p-2">
+        <div className="space-y-1">
+          <NavLink
+            to="/settings"
+            onClick={() => onOpenChange(false)}
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
+          >
+            <Settings className="h-4 w-4 text-gray-400" />
+            <span className="flex-1 text-left">{t('settings')}</span>
+          </NavLink>
+          <button
+            type="button"
+            onClick={handleOpenDocs}
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-700 transition-colors hover:bg-gray-100"
+          >
+            <BookOpen className="h-4 w-4 text-gray-400" />
+            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+          </button>
+        </div>
+
+        <div className="my-2 h-px bg-gray-200/70" />
+
+        <ChatSidebarUtilitySelect
+          icon={Palette}
+          label={t('theme')}
+          options={themeOptions}
+          value={currentTheme}
+          valueLabel={currentThemeLabel}
+          onSelect={onSelectTheme}
+          onCloseMenu={() => onOpenChange(false)}
+        />
+
+        <ChatSidebarUtilitySelect
+          icon={Languages}
+          label={t('language')}
+          options={languageOptions}
+          value={currentLanguage}
+          valueLabel={currentLanguageLabel}
+          onSelect={onSelectLanguage}
+          onCloseMenu={() => onOpenChange(false)}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ChatSidebarUtilitySelect<Value extends string>({
+  icon: Icon,
+  label,
+  options,
+  value,
+  valueLabel,
+  onSelect,
+  onCloseMenu,
+}: {
+  icon: LucideIcon;
+  label: string;
+  options: ChatSidebarUtilityOption<Value>[];
+  value: Value;
+  valueLabel: string;
+  onSelect: (value: Value) => void;
+  onCloseMenu: () => void;
+}) {
+  return (
+    <Select
+      value={value}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCloseMenu();
+        }
+      }}
+      onValueChange={(nextValue) => onSelect(nextValue as Value)}
+    >
+      <SelectTrigger
+        aria-label={label}
+        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-gray-700 shadow-none hover:bg-gray-100 focus:ring-0"
+        indicator={<ChevronRight className="h-4 w-4 text-gray-400" />}
+      >
+        <div className="flex min-w-0 items-center gap-2.5">
+          <Icon className="h-4 w-4 shrink-0 text-gray-400" />
+          <span className="text-left">{label}</span>
+        </div>
+        <span className="ml-auto max-w-[96px] truncate text-[13px] text-gray-500">
+          {valueLabel}
+        </span>
+      </SelectTrigger>
+      <SelectContent
+        side="right"
+        align="center"
+        sideOffset={6}
+        className="z-[var(--z-tooltip)] min-w-[7rem] rounded-lg"
+        viewportClassName="h-auto min-w-[7rem] w-auto"
+      >
+        {options.map((option) => {
+          return (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="text-[13px]"
+            >
+              {option.label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/features/chat/components/layout/chat-sidebar.test.tsx

@@ -9,11 +9,14 @@ import { useChatSessionListStore } from '@/features/chat/stores/chat-session-lis
 const mocks = vi.hoisted(() => ({
   createSession: vi.fn(() => 'draft-session-key'),
   goToSession: vi.fn(),
+  goToChatRoot: vi.fn(),
   setQuery: vi.fn(),
   setListMode: vi.fn(),
   selectSession: vi.fn(),
   openChildSessionPanel: vi.fn(),
   docOpen: vi.fn(),
+  setLanguage: vi.fn(),
+  setTheme: vi.fn(),
   updateNcpSession: vi.fn(),
   agents: [] as Array<{ id: string; displayName?: string; avatarUrl?: string | null }>,
   sessionItems: [] as NcpSessionListItemView[],
@@ -31,6 +34,7 @@ vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
   usePresenter: () => ({
     chatUiManager: {
       goToSession: mocks.goToSession,
+      goToChatRoot: mocks.goToChatRoot,
     },
     chatSessionListManager: {
       createSession: mocks.createSession,
@@ -100,14 +104,14 @@ vi.mock('@/shared/hooks/use-agents', () => ({
 vi.mock('@/app/components/i18n-provider', () => ({
   useI18n: () => ({
     language: 'en',
-    setLanguage: vi.fn()
+    setLanguage: mocks.setLanguage
   })
 }));
 
 vi.mock('@/app/components/theme-provider', () => ({
   useTheme: () => ({
     theme: 'warm',
-    setTheme: vi.fn()
+    setTheme: mocks.setTheme
   })
 }));
 
@@ -121,11 +125,14 @@ function resetSidebarTestState() {
   mocks.createSession.mockReset();
   mocks.createSession.mockReturnValue('draft-session-key');
   mocks.goToSession.mockReset();
+  mocks.goToChatRoot.mockReset();
   mocks.setQuery.mockReset();
   mocks.setListMode.mockReset();
   mocks.selectSession.mockReset();
   mocks.openChildSessionPanel.mockReset();
   mocks.docOpen.mockReset();
+  mocks.setLanguage.mockReset();
+  mocks.setTheme.mockReset();
   mocks.updateNcpSession.mockReset();
   mocks.updateNcpSession.mockResolvedValue({});
   mocks.agents = [];
@@ -166,7 +173,7 @@ describe('ChatSidebar create and list basics', () => {
     fireEvent.click(screen.getByLabelText('Session Type'));
     fireEvent.click(screen.getByText('Codex'));
 
-    expect(mocks.createSession).toHaveBeenCalledWith('codex');
+    expect(mocks.createSession).toHaveBeenCalledWith('codex', undefined);
     await waitFor(() => {
       expect(screen.queryByText('Codex')).toBeNull();
     });
@@ -233,8 +240,38 @@ describe('ChatSidebar create and list basics', () => {
     fireEvent.click(screen.getByText('Codex'));
 
     expect(mocks.setQuery).toHaveBeenCalledWith('release notes');
-    expect(mocks.createSession).toHaveBeenCalledWith('codex');
-    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
+    expect(mocks.createSession).toHaveBeenCalledWith('codex', undefined);
+    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
+  });
+
+  it('keeps low-frequency utility choices behind nested selectors', () => {
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByRole('button', { name: 'Help Docs' })).toBeNull();
+    expect(screen.queryByText('Language')).toBeNull();
+    expect(screen.queryByRole('option', { name: 'Cool' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Settings menu' }));
+    expect(screen.getByText('Theme')).not.toBeNull();
+    expect(screen.queryByRole('option', { name: 'Cool' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Help Docs' }));
+
+    expect(mocks.docOpen).toHaveBeenCalledWith(undefined, {
+      kind: 'docs',
+      newTab: true,
+      title: 'Docs',
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Settings menu' }));
+    fireEvent.click(screen.getByRole('combobox', { name: 'Theme' }));
+    fireEvent.click(screen.getByRole('option', { name: 'Cool' }));
+
+    expect(mocks.setTheme).toHaveBeenCalledWith('cool');
   });
 
   it('creates the default session directly from the compact mobile add button when no menu is needed', () => {
@@ -254,8 +291,8 @@ describe('ChatSidebar create and list basics', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'New Task' }));
 
-    expect(mocks.createSession).toHaveBeenCalledWith('native');
-    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
+    expect(mocks.createSession).toHaveBeenCalledWith('native', undefined);
+    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
   });
 
   it('shows a session type badge for non-native sessions in the list', () => {
@@ -564,7 +601,7 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByText('Codex'));
 
     expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-mobile');
-    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
+    expect(mocks.goToChatRoot).toHaveBeenCalledWith();
   });
 });
 

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react';
 import type { SessionEntryView } from '@/shared/lib/api';
 import { BrandHeader } from '@/shared/components/common/brand-header';
 import { StatusBadge } from '@/shared/components/common/status-badge';
-import { SelectItem } from '@/shared/components/ui/select';
 import { ChatSidebarListModeSwitch, ChatSidebarProjectGroups, type ChatSidebarProjectGroup } from '@/features/chat';
 import { useChatSidebarSessionLabelEditor } from '@/features/chat/hooks/use-chat-sidebar-session-label-editor';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
@@ -14,26 +13,24 @@ import { useAgents } from '@/shared/hooks/use-agents';
 import { getSessionProjectName } from '@/shared/lib/session-project';
 import { cn } from '@/shared/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/shared/lib/i18n';
-import { THEME_OPTIONS, type UiTheme } from '@/shared/lib/theme';
+import { THEME_OPTIONS } from '@/shared/lib/theme';
 import { useI18n } from '@/app/components/i18n-provider';
 import { useTheme } from '@/app/components/theme-provider';
 import { useDocBrowser } from '@/shared/components/doc-browser';
-import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/app/components/layout/sidebar-items';
+import { SidebarNavLinkItem } from '@/app/components/layout/sidebar-items';
 import {
   AlarmClock,
   Bot,
-  BookOpen,
   BrainCircuit,
-  Languages,
   MessageSquareText,
-  Palette,
-  Settings
 } from 'lucide-react';
 import { ChatSidebarSessionEntry } from '@/features/chat/components/layout/chat-sidebar-session-entry';
 import {
   ChatSidebarDesktopToolbar,
   ChatSidebarMobileToolbar,
 } from '@/features/chat/components/layout/chat-sidebar-toolbar';
+import { ChatSidebarUtilityMenu } from '@/features/chat/components/layout/chat-sidebar-utility-menu';
+import { isMacDesktopHost, isWindowsDesktopHost } from '@/platforms/desktop';
 
 type DateGroup = {
   label: string;
@@ -186,6 +183,7 @@ export function ChatSidebar({
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
   const systemStatus = useSystemStatus();
@@ -195,6 +193,14 @@ export function ChatSidebar({
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
+  const utilityThemeOptions = useMemo(
+    () => THEME_OPTIONS.map((option) => ({ value: option.value, label: t(option.labelKey) })),
+    [],
+  );
+  const utilityLanguageOptions = useMemo(
+    () => LANGUAGE_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+    [],
+  );
   const agentsById = useMemo(
     () => new Map((agentsQuery.data?.agents ?? []).map((agent) => [agent.id, agent])),
     [agentsQuery.data?.agents]
@@ -262,10 +268,10 @@ export function ChatSidebar({
           : 'w-[280px] shrink-0 border-r border-gray-200/60',
       )}
     >
-      {!isMobileVariant ? (
-        <div className="px-5 pt-5 pb-3">
+      {!isMobileVariant && !isWindowsDesktopHost() ? (
+        <div className={cn('px-5 pb-3', isMacDesktopHost() ? 'pt-1.5' : 'pt-5')}>
           <BrandHeader
-            className="flex items-center gap-2.5 min-w-0"
+            className="flex min-w-0 items-center gap-2"
             suffix={<StatusBadge status={systemStatus.connectionStatus} />}
           />
         </div>
@@ -361,43 +367,20 @@ export function ChatSidebar({
       </div>
 
       {!isMobileVariant ? (
-        <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
-          <SidebarNavLinkItem
-            to="/settings"
-            label={t('settings')}
-            icon={Settings}
-            density="compact"
+        <div className="px-3 py-3 border-t border-gray-200/60">
+          <ChatSidebarUtilityMenu
+            isOpen={isUtilityMenuOpen}
+            onOpenChange={setIsUtilityMenuOpen}
+            currentTheme={theme}
+            currentThemeLabel={currentThemeLabel}
+            themeOptions={utilityThemeOptions}
+            onSelectTheme={setTheme}
+            currentLanguage={language}
+            currentLanguageLabel={currentLanguageLabel}
+            languageOptions={utilityLanguageOptions}
+            onSelectLanguage={handleLanguageSwitch}
+            onOpenDocs={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
           />
-          <SidebarActionItem
-            onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-            icon={BookOpen}
-            label={t('docBrowserHelp')}
-            density="compact"
-          />
-          <SidebarSelectItem
-            value={theme}
-            onValueChange={(value) => setTheme(value as UiTheme)}
-            icon={Palette}
-            label={t('theme')}
-            valueLabel={currentThemeLabel}
-            density="compact"
-          >
-            {THEME_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
-            ))}
-          </SidebarSelectItem>
-          <SidebarSelectItem
-            value={language}
-            onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
-            icon={Languages}
-            label={t('language')}
-            valueLabel={currentLanguageLabel}
-            density="compact"
-          >
-            {LANGUAGE_OPTIONS.map((option) => (
-              <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
-            ))}
-          </SidebarSelectItem>
         </div>
       ) : null}
     </aside>

package/src/features/chat/components/providers/chat-presenter.provider.tsx

@@ -33,6 +33,7 @@ export type ChatThreadManagerLike = {
   createSession: () => void;
   goToProviders: () => void;
   openChildSessionPanel: (params: { parentSessionKey: string; activeChildSessionKey?: string | null }) => void;
+  openSessionCronPanel: (sessionKey: string) => void;
   openFilePreview: (action: ChatFileOpenActionViewModel) => void;
   openSessionFromToolAction: (action: ChatToolActionViewModel) => void;
   selectChildSessionDetail: (sessionKey: string) => void;
@@ -48,6 +49,7 @@ export type ChatPresenterLike = {
   chatInputManager: ChatInputManagerLike;
   chatSessionListManager: ChatSessionListManager;
   chatThreadManager: ChatThreadManagerLike;
+  startAgentCreationDraft: (prompt: string) => void;
 };
 
 const ChatPresenterContext = createContext<ChatPresenterLike | null>(null);

package/src/features/chat/components/workspace/session-cron-job-content.tsx

@@ -0,0 +1,103 @@
+import { Trash2 } from "lucide-react";
+import type { CronJobView } from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import { useDeleteCronJob } from "@/shared/hooks/use-config";
+import {
+  describeCronDelivery,
+  describeCronSchedule,
+  formatCronDate,
+} from "@/shared/lib/cron";
+import { t } from "@/shared/lib/i18n";
+
+export function SessionCronJobContent({ jobs }: { jobs: readonly CronJobView[] }) {
+  const deleteCronJob = useDeleteCronJob();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+
+  const handleDelete = async (job: CronJobView) => {
+    const confirmed = await confirm({
+      title: `${t("cronDeleteConfirm")}?`,
+      description: job.name ? `${job.name} (${job.id})` : job.id,
+      confirmLabel: t("delete"),
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteCronJob.mutate({ id: job.id });
+  };
+
+  return (
+    <div className="h-full overflow-y-auto custom-scrollbar px-4 py-4">
+      <div className="mb-4">
+        <div className="text-sm font-semibold text-gray-900">
+          {t("chatWorkspaceSessionCronJobs")}
+        </div>
+        <div className="mt-1 text-xs text-gray-500">
+          {t("cronTotalLabel")}: {jobs.length}
+        </div>
+      </div>
+      {jobs.length === 0 ? (
+        <div className="py-8 text-center text-sm text-gray-500">
+          {t("chatWorkspaceCronJobEmpty")}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {jobs.map((job) => (
+            <div
+              key={job.id}
+              className="rounded-lg border border-gray-200 bg-white px-3 py-3"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-semibold text-gray-900">
+                    {job.name || job.id}
+                  </div>
+                  <div className="mt-1 text-[11px] text-gray-400">
+                    {job.id}
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="subtle"
+                  size="sm"
+                  className="h-7 gap-1 rounded-lg px-2"
+                  onClick={() => void handleDelete(job)}
+                  disabled={deleteCronJob.isPending}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                  {t("delete")}
+                </Button>
+              </div>
+              <div className="mt-3 space-y-1.5 text-xs text-gray-500">
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronScheduleLabel")}:</span>{" "}
+                  {describeCronSchedule(job)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronNextRun")}:</span>{" "}
+                  {formatCronDate(job.state.nextRunAt)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronLastRun")}:</span>{" "}
+                  {formatCronDate(job.state.lastRunAt)}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronLastStatus")}:</span>{" "}
+                  {job.state.lastStatus ?? "-"}
+                </div>
+                <div>
+                  <span className="font-medium text-gray-700">{t("cronDeliverTo")}:</span>{" "}
+                  {describeCronDelivery(job)}
+                </div>
+              </div>
+              <div className="mt-3 whitespace-pre-wrap break-words text-sm text-gray-700">
+                {job.payload.message}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      <ConfirmDialog />
+    </div>
+  );
+}

package/src/features/chat/hooks/use-ncp-agent-runtime.test.tsx

@@ -176,4 +176,18 @@ describe("useNcpAgentRuntime", () => {
       "assistant-1",
     ]);
   });
+
+  it("aborts by session id even before a hydrated active run reaches local state", async () => {
+    const client = new DeferredSendClient();
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({ sessionId: "session-running", client, manager: manager as never }),
+    );
+
+    await act(async () => {
+      await result.current.abort();
+    });
+
+    expect(client.abort).toHaveBeenCalledWith({ sessionId: "session-running" });
+  });
 });