@nextclaw/ui 0.15.3 → 0.15.4

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -49,6 +49,8 @@ import {
 } from '@/features/chat/managers/chat-recent-skills.manager';
 
 import { useSessionConversationInputAttachments } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-attachments';
+import { ChatConversationTrack } from '@/features/chat/components/conversation/chat-conversation-track';
+import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-layout.store';
 import type { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
 import type {
   SessionConversationQueuedInput,
@@ -187,6 +189,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   } = props;
   const presenter = usePresenter();
   const { language } = useI18n();
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
   const { isMobile } = useViewportLayout();
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -389,62 +392,74 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     selectedSkills: inputSnapshot.selectedSkills,
   });
 
+  const useReadingTrack = surface === 'default' && messageLayout === 'flat';
+  const inputBar = (
+    <ChatInputBar
+      ref={inputBarRef}
+      surface={useReadingTrack ? 'embedded' : surface}
+      sendError={inputSnapshot.sendError}
+      sendErrorDetailsLabel={t('chatErrorDetails', language)}
+      topSlot={controller.queuedInputs.length > 0
+        ? <SessionQueuedInputRows controller={controller} />
+        : null}
+      composer={{
+        nodes: [...inputSnapshot.nodes],
+        placeholder: textareaPlaceholder,
+        disabled: inputDisabled,
+        onNodesChange: handleNodesChange,
+        onFilesAdd: handleFilesAdd,
+        inputSurfaceTriggerSpecs: inputSurfaceState.triggerSpecs,
+        onInputSurfaceTriggerChange: setInputSurfaceTrigger,
+      }}
+      inputSurface={inputSurfaceState.panel ?? undefined}
+      hint={buildModelStateHint({
+        isModelOptionsLoading,
+        isModelOptionsEmpty,
+        onGoToProviders: presenter.chatUiManager.goToProviders,
+        texts: {
+          noModelOptionsLabel: t('chatModelNoOptions'),
+          configureProviderLabel: t('chatGoConfigureProvider'),
+        },
+      })}
+      toolbar={{
+        selects: [],
+        trailingSelects: toolbarSelects,
+        accessories: [
+          {
+            key: 'attach',
+            label: t('chatInputAttach'),
+            icon: 'paperclip' as const,
+            iconOnly: true,
+            disabled: !attachmentSupported || inputDisabled,
+            onClick: () => fileInputRef.current?.click(),
+          },
+        ],
+        skillPicker,
+        actions: {
+          isSending: controller.isSending,
+          canStopGeneration: controller.canStopGeneration,
+          sendDisabled: controller.sendDisabled,
+          stopDisabled: controller.stopDisabled,
+          stopHint: t('chatStopUnavailable'),
+          sendButtonLabel: controller.isSending ? t('chatQueueSend') : t('chatSend'),
+          stopButtonLabel: t('chatStop'),
+          contextWindow,
+          onSend: controller.send,
+          onStop: controller.stop,
+        },
+      }}
+    />
+  );
+
   return (
     <>
-      <ChatInputBar
-        ref={inputBarRef}
-        surface={surface}
-        topSlot={controller.queuedInputs.length > 0
-          ? <SessionQueuedInputRows controller={controller} />
-          : null}
-        composer={{
-          nodes: [...inputSnapshot.nodes],
-          placeholder: textareaPlaceholder,
-          disabled: inputDisabled,
-          onNodesChange: handleNodesChange,
-          onFilesAdd: handleFilesAdd,
-          inputSurfaceTriggerSpecs: inputSurfaceState.triggerSpecs,
-          onInputSurfaceTriggerChange: setInputSurfaceTrigger,
-        }}
-        inputSurface={inputSurfaceState.panel ?? undefined}
-        hint={buildModelStateHint({
-          isModelOptionsLoading,
-          isModelOptionsEmpty,
-          onGoToProviders: presenter.chatUiManager.goToProviders,
-          texts: {
-            noModelOptionsLabel: t('chatModelNoOptions'),
-            configureProviderLabel: t('chatGoConfigureProvider'),
-          },
-        })}
-        toolbar={{
-          selects: [],
-          trailingSelects: toolbarSelects,
-          accessories: [
-            {
-              key: 'attach',
-              label: t('chatInputAttach'),
-              icon: 'paperclip' as const,
-              iconOnly: true,
-              disabled: !attachmentSupported || inputDisabled,
-              onClick: () => fileInputRef.current?.click(),
-            },
-          ],
-          skillPicker,
-          actions: {
-            sendError: inputSnapshot.sendError,
-            isSending: controller.isSending,
-            canStopGeneration: controller.canStopGeneration,
-            sendDisabled: controller.sendDisabled,
-            stopDisabled: controller.stopDisabled,
-            stopHint: t('chatStopUnavailable'),
-            sendButtonLabel: controller.isSending ? t('chatQueueSend') : t('chatSend'),
-            stopButtonLabel: t('chatStop'),
-            contextWindow,
-            onSend: controller.send,
-            onStop: controller.stop,
-          },
-        }}
-      />
+      {useReadingTrack ? (
+        <ChatConversationTrack className="pb-4 pt-2" width="composer">
+          {inputBar}
+        </ChatConversationTrack>
+      ) : (
+        inputBar
+      )}
       <input
         ref={fileInputRef}
         type="file"

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -25,7 +25,11 @@ import {
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
+import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useI18n } from "@/app/components/i18n-provider";
+import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 
 type ChatMessageListContainerProps = {
@@ -58,7 +62,6 @@ function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
     />
   );
 }
-
 type ContextInheritanceTimelineView = {
   sourceSessionId: string;
   inheritedMessageCount: number;
@@ -286,6 +289,16 @@ export function ChatMessageListContainer({
 }: ChatMessageListContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
+  const selectedSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
+  );
+  const selectedSession = useNcpChatSelectedSession(selectedSessionKey);
+  const localFileBasePath = selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null;
+  const resolveFileContentUrl = useCallback(
+    (action: { path: string }) => buildServerPathContentUrl(action.path, localFileBasePath),
+    [localFileBasePath],
+  );
   const texts = useMemo(
     () => buildChatMessageAdapterTexts(language),
     [language],
@@ -396,6 +409,7 @@ export function ChatMessageListContainer({
         ) : (
           <ChatMessageList
             key={item.key}
+            layout={messageLayout}
             messages={item.messages}
             isSending={index === timelineItems.length - 1 ? isSending : false}
             hasAssistantDraft={hasAssistantDraft}
@@ -404,6 +418,7 @@ export function ChatMessageListContainer({
             onFileOpen={presenter.chatThreadManager.openFilePreview}
             onAttachmentOpen={handleAttachmentOpen}
             onInlineTokenClick={handleInlineTokenClick}
+            resolveFileContentUrl={resolveFileContentUrl}
             renderInlineDisplay={renderChatInlineDisplay}
             renderToolAgent={(agentId) => (
               <AgentIdentityAvatar

package/src/features/chat/features/message/utils/__tests__/chat-message-file-operation.utils.test.ts

@@ -63,6 +63,36 @@ it("builds edit-file previews from structured args before the tool finishes", ()
   expect(editLines[1]).not.toHaveProperty("newLineNumber");
 });
 
+it("keeps incomplete edit-file arguments available before preview fields arrive", () => {
+  const partialArgs = '{"path":"src/app.ts","oldText":';
+  const adapted = adapt([
+    {
+      id: "assistant-partial-edit-input",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.PARTIAL_CALL,
+            toolCallId: "edit-partial-1",
+            toolName: "edit_file",
+            args: partialArgs,
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toMatchObject({
+    type: "tool-card",
+    card: {
+      toolName: "edit_file",
+      input: partialArgs,
+      statusTone: "running",
+    },
+  });
+});
+
 it("uses structured edit-file result line numbers after the tool finishes", () => {
   const adapted = adapt([
     {

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

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { ChatSidebarSessionItem } from '@/features/chat/features/session/components/chat-sidebar-session-item';
+
+it('shows session actions only on hover or when an action owns focus', () => {
+  render(
+    <ChatSidebarSessionItem
+      sessionKey="session:current"
+      active
+      showUnreadDot={false}
+      context={{ icon: null, label: null }}
+      isPinned={false}
+      title="Current Task"
+      previewText="Preview"
+      trailingText="Now"
+      isEditing={false}
+      draftLabel="Current Task"
+      isSaving={false}
+      onSelect={vi.fn()}
+      onStartEditing={vi.fn()}
+      onDraftLabelChange={vi.fn()}
+      onSave={vi.fn()}
+      onCancel={vi.fn()}
+      onTogglePinned={vi.fn()}
+    />,
+  );
+
+  screen.getByText('Current Task').closest('button')?.focus();
+  const actions = screen.getByLabelText('Pin session').parentElement;
+
+  expect(actions?.className).toContain('opacity-0');
+  expect(actions?.className).toContain('group-hover/session:opacity-100');
+  expect(actions?.className).toContain('focus-within:opacity-100');
+  expect(actions?.className).not.toContain(
+    'group-focus-within/session:opacity-100',
+  );
+});

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState, type ReactNode } from 'react';
 import { ChevronDown, ChevronRight, Folder, Pin, Plus } from 'lucide-react';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-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 { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
@@ -107,7 +108,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                         label={actionLabel}
                       />
                     </PopoverTrigger>
-                    <PopoverContent
+                    <ChatPopoverContent
                       align="end"
                       className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
                     >
@@ -122,7 +123,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                           setOpenProjectRoot(null);
                         }}
                       />
-                    </PopoverContent>
+                    </ChatPopoverContent>
                   </Popover>
                 ) : (
                   <IconActionButton

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

@@ -169,12 +169,7 @@ function ChatSidebarSessionDisplayView({
             event.stopPropagation();
             onOpenChildSessions();
           }}
-          className={cn(
-            'absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-black/10 hover:text-foreground',
-            active
-              ? 'opacity-100'
-              : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
-          )}
+          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-black/10 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
           aria-label={t('chatSessionOpenChildSessions')}
           title={t('chatSessionOpenChildSessions')}
         >
@@ -183,11 +178,11 @@ function ChatSidebarSessionDisplayView({
         </button>
       ) : null}
       {runStatus ? (
-        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <div className="absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:opacity-100 group-focus-within/session:opacity-100">
+      <div className="pointer-events-none absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
         <IconActionButton
           size="sm"
           tone="strong"

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>
   );
 }