@nextclaw/ui 0.12.23 → 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', () => {
@@ -341,6 +378,80 @@ describe('ChatSidebar create and list basics', () => {
   });
 });
 
+describe('ChatSidebar activity ordering', () => {
+  beforeEach(resetSidebarTestState);
+
+  it('orders sessions by last message time and ignores metadata updatedAt changes', () => {
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:message-newer',
+        createdAt: '2026-03-19T08:00:00.000Z',
+        updatedAt: '2026-03-19T09:00:00.000Z',
+        lastMessageAt: '2026-03-19T09:00:00.000Z',
+        label: 'Message Newer',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }),
+      createSessionItem({
+        key: 'session:metadata-newer',
+        createdAt: '2026-03-19T07:00:00.000Z',
+        updatedAt: '2026-03-19T12:00:00.000Z',
+        lastMessageAt: '2026-03-19T08:00:00.000Z',
+        label: 'Metadata Newer',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    const messageNewer = screen.getByText('Message Newer');
+    const metadataNewer = screen.getByText('Metadata Newer');
+
+    expect(messageNewer.compareDocumentPosition(metadataNewer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it('uses createdAt for sorting sessions without messages', () => {
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:created-older',
+        createdAt: '2026-03-19T08:00:00.000Z',
+        updatedAt: '2026-03-19T12:00:00.000Z',
+        label: 'Created Older',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 0
+      }),
+      createSessionItem({
+        key: 'session:created-newer',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T10:00:00.000Z',
+        label: 'Created Newer',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 0
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    const createdNewer = screen.getByText('Created Newer');
+    const createdOlder = screen.getByText('Created Older');
+
+    expect(createdNewer.compareDocumentPosition(createdOlder) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
 describe('ChatSidebar project-first mode', () => {
   beforeEach(resetSidebarTestState);
 
@@ -490,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();
   });
 });