@nextclaw/ui 0.15.3 → 0.15.5

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

@@ -6,8 +6,7 @@ import { ChatSessionHeaderActions } from '@/features/chat/features/session/compo
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
   onDeleteSession: vi.fn(),
-  onOpenChildSessions: vi.fn(),
-  onOpenSessionCronJobs: vi.fn(),
+  onToggleWorkspace: vi.fn(),
 }));
 
 vi.mock('@/features/chat/features/session/hooks/use-chat-session-project', () => ({
@@ -22,8 +21,7 @@ describe('ChatSessionHeaderActions', () => {
   beforeEach(() => {
     mocks.updateSessionProject.mockReset();
     mocks.onDeleteSession.mockReset();
-    mocks.onOpenChildSessions.mockReset();
-    mocks.onOpenSessionCronJobs.mockReset();
+    mocks.onToggleWorkspace.mockReset();
   });
 
   it('keeps only the set-project action in the more-actions menu when a project is already attached', async () => {
@@ -35,8 +33,8 @@ describe('ChatSessionHeaderActions', () => {
         canDeleteSession
         isDeletePending={false}
         projectRoot="/tmp/project-alpha"
-        childSessionCount={0}
-        onOpenChildSessions={mocks.onOpenChildSessions}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -58,8 +56,8 @@ describe('ChatSessionHeaderActions', () => {
         canDeleteSession={false}
         isDeletePending={false}
         projectRoot={null}
-        childSessionCount={0}
-        onOpenChildSessions={mocks.onOpenChildSessions}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -84,6 +82,8 @@ describe('ChatSessionHeaderActions', () => {
           codex_thread_id: 'thread-123',
           runtime: 'codex',
         }}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -98,7 +98,7 @@ describe('ChatSessionHeaderActions', () => {
     expect(screen.getByText(/thread-123/)).toBeTruthy();
   });
 
-  it('shows a dedicated child-session entry button when the current session has child sessions', async () => {
+  it('opens the session workspace from one stable header action', async () => {
     const user = userEvent.setup();
 
     render(
@@ -107,28 +107,28 @@ describe('ChatSessionHeaderActions', () => {
         canDeleteSession
         isDeletePending={false}
         projectRoot={null}
-        childSessionCount={2}
-        onOpenChildSessions={mocks.onOpenChildSessions}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
 
-    await user.click(screen.getByRole('button', { name: 'View child sessions' }));
+    await user.click(screen.getByRole('button', { name: 'Open session workspace' }));
 
-    expect(mocks.onOpenChildSessions).toHaveBeenCalledTimes(1);
+    expect(mocks.onToggleWorkspace).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole('button', { name: 'View child sessions' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'View session cron jobs' })).toBeNull();
   });
 
-  it('uses a shared spaced action group for child, cron, and menu buttons', () => {
+  it('uses the shared compact action density for workspace and menu buttons', () => {
     render(
       <ChatSessionHeaderActions
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
         projectRoot={null}
-        childSessionCount={1}
-        sessionCronJobCount={1}
-        onOpenChildSessions={mocks.onOpenChildSessions}
-        onOpenSessionCronJobs={mocks.onOpenSessionCronJobs}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
       />
     );
@@ -136,7 +136,52 @@ describe('ChatSessionHeaderActions', () => {
     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');
+    expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('h-7');
+    expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('w-7');
+  });
+
+  it('places the workspace toggle at the far right of the visible header actions', () => {
+    render(
+      <ChatSessionHeaderActions
+        sessionKey="session-actions"
+        canDeleteSession
+        isDeletePending={false}
+        projectRoot={null}
+        isWorkspaceOpen={false}
+        onToggleWorkspace={mocks.onToggleWorkspace}
+        onDeleteSession={mocks.onDeleteSession}
+      />
+    );
+
+    const menuButton = screen.getByRole('button', { name: 'More actions' });
+    const workspaceButton = screen.getByRole('button', { name: 'Open session workspace' });
+
+    expect(menuButton.compareDocumentPosition(workspaceButton)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  });
+
+  it('changes to a pressed close action while the workspace is open', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ChatSessionHeaderActions
+        sessionKey="session-actions"
+        canDeleteSession
+        isDeletePending={false}
+        projectRoot={null}
+        isWorkspaceOpen
+        onToggleWorkspace={mocks.onToggleWorkspace}
+        onDeleteSession={mocks.onDeleteSession}
+      />
+    );
+
+    const closeButton = screen.getByRole('button', {
+      name: 'Close session workspace',
+    });
+
+    expect(closeButton.getAttribute('aria-pressed')).toBe('true');
+    await user.click(closeButton);
+    expect(mocks.onToggleWorkspace).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { AlarmClock, Braces, FolderOpen, GitBranch, MoreVertical, Trash2 } from 'lucide-react';
+import { Braces, FolderOpen, MoreVertical, PanelRightClose, PanelRightOpen, Trash2 } from 'lucide-react';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
 import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionMetadataDialog } from './chat-session-metadata-dialog';
@@ -16,10 +17,8 @@ type ChatSessionHeaderActionsProps = {
   isDeletePending: boolean;
   projectRoot?: string | null;
   metadata?: Record<string, unknown> | null;
-  childSessionCount?: number;
-  sessionCronJobCount?: number;
-  onOpenChildSessions?: () => void;
-  onOpenSessionCronJobs?: () => void;
+  isWorkspaceOpen: boolean;
+  onToggleWorkspace: () => void;
   onDeleteSession: () => void;
 };
 
@@ -29,10 +28,8 @@ export function ChatSessionHeaderActions({
   isDeletePending,
   projectRoot,
   metadata,
-  childSessionCount = 0,
-  sessionCronJobCount = 0,
-  onOpenChildSessions,
-  onOpenSessionCronJobs,
+  isWorkspaceOpen,
+  onToggleWorkspace,
   onDeleteSession,
 }: ChatSessionHeaderActionsProps) {
   const updateSessionProject = useChatSessionProject();
@@ -60,22 +57,6 @@ export function ChatSessionHeaderActions({
 
   return (
     <div className={SESSION_HEADER_ACTION_GROUP_CLASS}>
-      {childSessionCount > 0 && onOpenChildSessions ? (
-        <IconActionButton
-          icon={<GitBranch className="h-4 w-4" />}
-          label={t('chatSessionOpenChildSessions')}
-          onClick={onOpenChildSessions}
-          disabled={isBusy}
-        />
-      ) : null}
-      {sessionCronJobCount > 0 && onOpenSessionCronJobs ? (
-        <IconActionButton
-          icon={<AlarmClock className="h-4 w-4" />}
-          label={t('chatSessionOpenCronJobs')}
-          onClick={onOpenSessionCronJobs}
-          disabled={isBusy}
-        />
-      ) : null}
       <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
         <PopoverTrigger asChild>
           <IconActionButton
@@ -85,7 +66,7 @@ export function ChatSessionHeaderActions({
             disabled={isBusy}
           />
         </PopoverTrigger>
-        <PopoverContent align="end" className="w-56 p-2">
+        <ChatPopoverContent align="end" className="w-56 p-2">
           <div className="space-y-1">
             <ChatSessionHeaderMenuItem
               icon={FolderOpen}
@@ -116,8 +97,25 @@ export function ChatSessionHeaderActions({
               destructive
             />
           </div>
-        </PopoverContent>
+        </ChatPopoverContent>
       </Popover>
+      <IconActionButton
+        icon={
+          isWorkspaceOpen ? (
+            <PanelRightClose className="h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="h-4 w-4" />
+          )
+        }
+        label={t(
+          isWorkspaceOpen
+            ? 'chatSessionCloseWorkspace'
+            : 'chatSessionOpenWorkspace',
+        )}
+        aria-pressed={isWorkspaceOpen}
+        onClick={onToggleWorkspace}
+        disabled={isBusy}
+      />
 
       <ChatSessionProjectDialog
         open={isDialogOpen}

package/src/features/chat/features/session/components/session-header/chat-session-project-badge.tsx

@@ -5,10 +5,10 @@ import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
   createPopoverAvailableHeightLimit,
 } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
 import { t } from '@/shared/lib/i18n';
 
 type ChatSessionProjectBadgeProps = {
@@ -66,7 +66,7 @@ export function ChatSessionProjectBadge({
             </span>
           </button>
         </PopoverTrigger>
-        <PopoverContent
+        <ChatPopoverContent
           align="start"
           className="w-72 p-2"
           style={SESSION_PROJECT_MENU_STYLE}
@@ -100,7 +100,7 @@ export function ChatSessionProjectBadge({
               disabled={isProjectPending}
             />
           </div>
-        </PopoverContent>
+        </ChatPopoverContent>
       </Popover>
 
       <ChatSessionProjectDialog

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -32,9 +32,9 @@ import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
 import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
@@ -217,7 +217,7 @@ function ChatSessionTitleSwitcherPopover({
           />
         </button>
       </PopoverTrigger>
-      <PopoverContent
+      <ChatPopoverContent
         align="start"
         className="w-[22rem] max-w-[calc(100vw-2rem)] p-0"
       >
@@ -263,7 +263,7 @@ function ChatSessionTitleSwitcherPopover({
             />
           )}
         </div>
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }

package/src/features/chat/features/welcome/components/chat-welcome-project-picker.tsx

@@ -3,10 +3,10 @@ import { ChevronDown, FolderOpen } from 'lucide-react';
 import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/utils/chat-welcome-project-options.utils';
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
   createPopoverAvailableHeightLimit,
 } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
 import { t } from '@/shared/lib/i18n';
 import { getSessionProjectName } from '@/shared/lib/session-project';
 
@@ -64,7 +64,7 @@ export function ChatWelcomeProjectPicker({
           <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
-      <PopoverContent
+      <ChatPopoverContent
         align="start"
         className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-0 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
         style={{ maxHeight: PROJECT_PICKER_MAX_HEIGHT }}
@@ -121,7 +121,7 @@ export function ChatWelcomeProjectPicker({
             <span>{t('chatWelcomeProjectOpenFolder')}</span>
           </button>
         </div>
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -5,10 +5,10 @@ import { ChatSessionTypeOptionItem } from '@/features/chat/features/session-type
 import type { ChatSessionTypeOption } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 import {
   Popover,
-  PopoverContent,
   PopoverTrigger,
   createPopoverAvailableHeightLimit,
 } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
 import { t } from '@/shared/lib/i18n';
 
 type SessionTypeOption = ChatSessionTypeOption;
@@ -59,7 +59,7 @@ export function ChatWelcomeSessionTypePicker({
           <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
-      <PopoverContent
+      <ChatPopoverContent
         align="start"
         className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
         style={{ maxHeight: SESSION_TYPE_PICKER_MAX_HEIGHT }}
@@ -76,7 +76,7 @@ export function ChatWelcomeSessionTypePicker({
             />
           ))}
         </div>
-      </PopoverContent>
+      </ChatPopoverContent>
     </Popover>
   );
 }