@nextclaw/ui 0.15.2 → 0.15.4

package/src/features/chat/features/message/utils/chat-message-texts.utils.ts

@@ -32,6 +32,71 @@ export function buildChatMessageAdapterTexts(
   };
 }
 
+function buildBuiltInToolStatusLabels() {
+  return {
+    directory: {
+      running: t("chatToolDirectoryRunning"),
+      success: t("chatToolDirectorySuccess"),
+      error: t("chatToolDirectoryError"),
+      cancelled: t("chatToolDirectoryCancelled"),
+    },
+    web: {
+      running: t("chatToolWebRunning"),
+      success: t("chatToolWebSuccess"),
+      error: t("chatToolWebError"),
+      cancelled: t("chatToolWebCancelled"),
+    },
+    message: {
+      running: t("chatToolMessageRunning"),
+      success: t("chatToolMessageSuccess"),
+      error: t("chatToolMessageError"),
+      cancelled: t("chatToolMessageCancelled"),
+    },
+    session: {
+      running: t("chatToolSessionRunning"),
+      success: t("chatToolSessionSuccess"),
+      error: t("chatToolSessionError"),
+      cancelled: t("chatToolSessionCancelled"),
+    },
+    agent: {
+      running: t("chatToolAgentRunning"),
+      success: t("chatToolAgentSuccess"),
+      error: t("chatToolAgentError"),
+      cancelled: t("chatToolAgentCancelled"),
+    },
+    memory: {
+      running: t("chatToolMemoryRunning"),
+      success: t("chatToolMemorySuccess"),
+      error: t("chatToolMemoryError"),
+      cancelled: t("chatToolMemoryCancelled"),
+    },
+    schedule: {
+      running: t("chatToolScheduleRunning"),
+      success: t("chatToolScheduleSuccess"),
+      error: t("chatToolScheduleError"),
+      cancelled: t("chatToolScheduleCancelled"),
+    },
+    system: {
+      running: t("chatToolSystemRunning"),
+      success: t("chatToolSystemSuccess"),
+      error: t("chatToolSystemError"),
+      cancelled: t("chatToolSystemCancelled"),
+    },
+    image: {
+      running: t("chatToolImageRunning"),
+      success: t("chatToolImageSuccess"),
+      error: t("chatToolImageError"),
+      cancelled: t("chatToolImageCancelled"),
+    },
+    display: {
+      running: t("chatToolDisplayRunning"),
+      success: t("chatToolDisplaySuccess"),
+      error: t("chatToolDisplayError"),
+      cancelled: t("chatToolDisplayCancelled"),
+    },
+  };
+}
+
 export function buildChatMessageTexts(
   language: string,
 ): ChatMessageTexts {
@@ -42,8 +107,41 @@ export function buildChatMessageTexts(
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
     typingLabel: t("chatTyping"),
+    reasoningCharacterCountTemplates: {
+      inProgress: t("chatReasoningInProgressCharacterCount"),
+      completed: t("chatReasoningCompletedCharacterCount"),
+    },
+    toolStatusLabels: {
+      terminal: {
+        running: t("chatToolTerminalRunning"),
+        success: t("chatToolTerminalSuccess"),
+        error: t("chatToolTerminalError"),
+        cancelled: t("chatToolTerminalCancelled"),
+      },
+      fileRead: {
+        running: t("chatToolFileReadRunning"),
+        success: t("chatToolFileReadSuccess"),
+        error: t("chatToolFileReadError"),
+        cancelled: t("chatToolFileReadCancelled"),
+      },
+      fileEdit: {
+        running: t("chatToolFileEditRunning"),
+        success: t("chatToolFileEditSuccess"),
+        error: t("chatToolFileEditError"),
+        cancelled: t("chatToolFileEditCancelled"),
+      },
+      search: {
+        running: t("chatToolSearchRunning"),
+        success: t("chatToolSearchSuccess"),
+        error: t("chatToolSearchError"),
+        cancelled: t("chatToolSearchCancelled"),
+      },
+      builtIn: buildBuiltInToolStatusLabels(),
+    },
     attachmentOpenLabel: t("chatAttachmentOpen"),
     attachmentAttachedLabel: t("chatAttachmentAttached"),
+    attachmentExpandLabel: t("chatAttachmentExpand"),
+    attachmentCloseLabel: t("chatAttachmentClosePreview"),
     attachmentCategoryLabels: {
       archive: t("chatAttachmentCategoryArchive"),
       audio: t("chatAttachmentCategoryAudio"),
@@ -56,5 +154,45 @@ export function buildChatMessageTexts(
       sheet: t("chatAttachmentCategorySheet"),
       video: t("chatAttachmentCategoryVideo"),
     },
+    toolActivitySegmentTemplates: {
+      read: {
+        one: t("chatToolActivityReadOne"),
+        other: t("chatToolActivityReadOther"),
+      },
+      edit: {
+        one: t("chatToolActivityEditOne"),
+        other: t("chatToolActivityEditOther"),
+      },
+      directory: {
+        one: t("chatToolActivityDirectoryOne"),
+        other: t("chatToolActivityDirectoryOther"),
+      },
+      search: {
+        one: t("chatToolActivitySearchOne"),
+        other: t("chatToolActivitySearchOther"),
+      },
+      bash: {
+        one: t("chatToolActivityBashOne"),
+        other: t("chatToolActivityBashOther"),
+      },
+      web: {
+        one: t("chatToolActivityWebOne"),
+        other: t("chatToolActivityWebOther"),
+      },
+      agent: {
+        one: t("chatToolActivityAgentOne"),
+        other: t("chatToolActivityAgentOther"),
+      },
+      panel: {
+        one: t("chatToolActivityPanelOne"),
+        other: t("chatToolActivityPanelOther"),
+      },
+      other: {
+        one: t("chatToolActivityOtherOne"),
+        other: t("chatToolActivityOtherOther"),
+      },
+    },
+    toolActivityFailedLabel: t("chatProcessSummaryFailed"),
+    toolActivityCancelledLabel: t("chatProcessSummaryCancelled"),
   };
 }

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';
@@ -64,7 +65,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     ? 'chatSidebarExpandProject'
                     : 'chatSidebarCollapseProject',
                 )}
-                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() =>
                   presenter.chatSessionListManager.toggleProjectCollapsed(
                     group.projectRoot,
@@ -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,15 +32,15 @@ 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";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (
@@ -111,7 +111,7 @@ function ChatSessionSwitchItem({
       type="button"
       aria-current={active ? "page" : undefined}
       className={cn(
-        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
           ? "bg-accent text-accent-foreground"
           : "text-popover-foreground hover:bg-accent/70",
@@ -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';
 
@@ -49,7 +49,7 @@ export function ChatWelcomeProjectPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}
@@ -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;
@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (
@@ -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>
   );
 }