@nextclaw/ui 0.26.3 → 0.26.4

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

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useId, useRef, useState } from 'react';
+import { ChatSidebarListModeSwitch } from '@/features/chat/components/chat-sidebar-list-mode-switch';
 import { Link } from 'react-router-dom';
 import { AlarmClock, ChevronDown, Clock3, Folder, FolderPlus, Plus, Search, X } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
@@ -19,7 +20,7 @@ type ChatSidebarToolbarProps = {
   collapsed?: boolean;
 };
 
-export function ChatSidebarDesktopToolbar({ query, onQueryChange, onCreateSession, collapsed }: ChatSidebarToolbarProps) {
+export function ChatSidebarDesktopToolbar({ onCreateSession, collapsed }: Pick<ChatSidebarToolbarProps, 'onCreateSession' | 'collapsed'>) {
   if (collapsed) {
     return <div className="px-2 pb-2">
       <IconActionButton icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />} label={t('chatSidebarNewTask')}
@@ -32,14 +33,44 @@ export function ChatSidebarDesktopToolbar({ query, onQueryChange, onCreateSessio
         <Plus className="mr-1.5 h-4 w-4" />{t('chatSidebarNewTask')}
       </Button>
     </div>
-    <div className="px-4 pb-2">
+  </>;
+}
+
+export function ChatSidebarListToolbar({ query, onQueryChange, isProjectFirstView, onSelectMode, onAddProject }: {
+  query: string;
+  onQueryChange: (query: string) => void;
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+  onAddProject: () => void;
+}) {
+  const [searchOpen, setSearchOpen] = useState(Boolean(query));
+  const searchButtonRef = useRef<HTMLButtonElement>(null);
+  const searchId = useId();
+  const closeSearch = () => {
+    onQueryChange('');
+    setSearchOpen(false);
+    searchButtonRef.current?.focus();
+  };
+  return <div className="shrink-0 px-3">
+    <div className="flex h-8 items-center justify-between gap-1">
+      <ChatSidebarListModeSwitch isProjectFirstView={isProjectFirstView} onSelectMode={onSelectMode} />
+      <IconActionGroup>
+        {isProjectFirstView ? <IconActionButton icon={<FolderPlus className="h-3.5 w-3.5" />} label={t('chatProjectAdd')} onClick={onAddProject} /> : null}
+        <IconActionButton ref={searchButtonRef} icon={<Search className="h-3.5 w-3.5" />} label={t('chatSidebarSearchPlaceholder')}
+          aria-expanded={searchOpen} aria-controls={searchId} onClick={() => { if (searchOpen) closeSearch(); else setSearchOpen(true); }} />
+      </IconActionGroup>
+    </div>
+    {searchOpen ? <div id={searchId} className="pb-2 pt-1">
       <div className="relative">
         <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
-        <Input data-theme-control="chat-search" value={query} onChange={event => onQueryChange(event.target.value)}
-          placeholder={t('chatSidebarSearchPlaceholder')} className="h-8 rounded-lg border-0 bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75" />
+        <Input autoFocus data-theme-control="chat-search" density="compact" value={query} onChange={event => onQueryChange(event.target.value)}
+          onKeyDown={event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeSearch(); } }}
+          aria-label={t('chatSidebarSearchPlaceholder')} placeholder={t('chatSidebarSearchPlaceholder')} className="h-8 rounded-lg border-0 bg-background/55 pl-8 pr-9 shadow-none hover:bg-[var(--interaction-hover)]" />
+        <IconActionButton icon={<X className="h-3.5 w-3.5" />} label={t('chatSidebarCloseSearch')} size="sm"
+          className="absolute right-1 top-1/2 -translate-y-1/2" onClick={closeSearch} />
       </div>
-    </div>
-  </>;
+    </div> : null}
+  </div>;
 }
 
 export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {

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

@@ -102,7 +102,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-background/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
@@ -118,7 +118,7 @@ export function ChatSidebarUtilityMenu({
           <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-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
           >
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
@@ -134,7 +134,7 @@ export function ChatSidebarUtilityMenu({
                 action();
                 onOpenChange(false);
               }}
-              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
+              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
             >
               <Icon className="h-4 w-4 text-muted-foreground/70" />
               <span className="flex-1 text-left">{label}</span>
@@ -197,7 +197,7 @@ function ChatSidebarUtilitySelect<Value extends string>({
     >
       <SelectTrigger
         aria-label={label}
-        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0"
+        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-gray-900 focus:ring-0"
         indicator={<ChevronRight className="h-4 w-4 text-muted-foreground/70" />}
       >
         <div className="flex min-w-0 items-center gap-2.5">

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

@@ -304,9 +304,7 @@ export function ChatSidebar({
         />
       ) : (
         <ChatSidebarDesktopToolbar
-          query={listSnapshot.query}
           onCreateSession={createSessionAndOpenIfNeeded}
-          onQueryChange={presenter.chatSessionListManager.setQuery}
           collapsed={shouldCollapse}
         />
       )}
@@ -316,6 +314,8 @@ export function ChatSidebar({
       ) : null}
 
       <ChatSidebarSessionArea
+        query={listSnapshot.query}
+        onQueryChange={presenter.chatSessionListManager.setQuery}
         variant={variant}
         defaultSessionType={newSessionTypePreference.selectedSessionType}
         groups={groups}

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

@@ -91,7 +91,7 @@ function QueuedInputIconButton({
             aria-label={label}
             disabled={disabled}
             onClick={onClick}
-            className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:text-muted-foreground/50"
+            className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:text-muted-foreground/50"
           >
             {children}
           </button>

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

@@ -89,6 +89,7 @@ type ChatMessageListContainerProps = {
   onLoadMessageDetails?: (messageId: string) => Promise<void>;
   sessionKey: string | null;
   scrollRef: RefObject<HTMLDivElement | null>;
+  turnAnchorRef?: RefObject<HTMLDivElement>;
   className?: string;
 };
 
@@ -231,6 +232,10 @@ function isAwaitingAssistantOutputRow(
   return item.kind === "typing" || item.key === activeRowKey;
 }
 
+function resolveTurnAnchor(item: ChatTimelineItem, messageId: string | undefined, ref?: RefObject<HTMLDivElement>) {
+  return item.kind === "message" && item.message.id === messageId ? ref : undefined;
+}
+
 export function ChatMessageListContainer({
   canContinue = false,
   messages: rawMessages,
@@ -241,6 +246,7 @@ export function ChatMessageListContainer({
   onEditMessage,
   onLoadMessageDetails,
   scrollRef,
+  turnAnchorRef,
   sessionKey,
   className,
 }: ChatMessageListContainerProps) {
@@ -386,11 +392,13 @@ export function ChatMessageListContainer({
   );
   const [focusedRowKey, setFocusedRowKey] = useState<string | null>(null);
   const activeRowKey = activeAssistantMessage ? `message:${activeAssistantMessage.id}` : null;
+  const turnMessageId = messages.findLast((message) => message.role === "user")?.id;
   const { containerRef, virtualizer } = useChatMessageVirtualizer({
     rows: virtualRows,
     scrollRef,
     activeRowKey,
     focusedRowKey,
+    anchorRowKey: turnAnchorRef && turnMessageId ? `message:${turnMessageId}` : null,
   });
   const { handleAttachmentOpen, handleInlineTokenClick } =
     useChatInlineTokenActions({ selectedSession, sessionKey });
@@ -448,7 +456,10 @@ export function ChatMessageListContainer({
             ) : item.kind === "observation-event" ? (
               <ChatMessageObservationEvent event={item.event} />
             ) : (
-              <div className={item.kind === "message" ? "pb-5" : undefined}>
+              <div
+                className={item.kind === "message" ? "pb-5" : undefined}
+                ref={resolveTurnAnchor(item, turnMessageId, turnAnchorRef)}
+              >
                 <ChatMessageList
                   assistantAvatarIcon={assistantAvatarIcon}
                   showAssistantHeader={showAssistantHeader}

package/src/features/chat/features/message/components/chat-tool-call-stress-harness.tsx

@@ -1,5 +1,5 @@
 import { Profiler, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ChatMessageList, type ChatMessageTexts } from "@nextclaw/agent-chat-ui";
+import { ChatMessageList, type ChatMessageTexts, type ChatMessageListProps } from "@nextclaw/agent-chat-ui";
 import {
   createChatToolCallStressViewModel,
   DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG,
@@ -40,6 +40,8 @@ const STRESS_TEXTS: ChatMessageTexts = {
   },
   toolActivityFailedLabel: "failed",
   toolActivityCancelledLabel: "cancelled",
+  toolPayloadLoadingLabel: "正在加载详情",
+  toolPayloadLoadFailedLabel: "详情加载失败，点击重试",
 };
 
 function readBoundedNumber(value: string, fallback: number, maximum: number): number {
@@ -53,6 +55,18 @@ export function ChatToolCallStressHarness() {
   const [config, setConfig] = useState(DEFAULT_CHAT_TOOL_CALL_STRESS_CONFIG);
   const [renderVersion, setRenderVersion] = useState(0);
   const [metric, setMetric] = useState<StressMetric | null>(null);
+  const [detailState, setDetailState] = useState<
+    ReturnType<NonNullable<ChatMessageListProps["resolveMessageToolPayloadState"]>>
+  >("ready");
+  const detailTimer = useRef<ReturnType<typeof setTimeout>>();
+  const failNextRequest = useRef(false);
+  useEffect(() => () => clearTimeout(detailTimer.current), []);
+  const resetDetails = (fail: boolean) => {
+    clearTimeout(detailTimer.current);
+    failNextRequest.current = fail;
+    setDetailState("summary");
+    setRenderVersion((value) => value + 1);
+  };
   const pendingMeasurement = useRef<{ action: string; startedAt: number } | null>(null);
   const viewModel = useMemo(
     () => createChatToolCallStressViewModel(config, `chat-tool-call-stress-message-${renderVersion}`),
@@ -104,6 +118,12 @@ export function ChatToolCallStressHarness() {
           ))}
         </div>
         <div className="flex flex-wrap gap-2">
+          <button type="button" className="rounded border border-border px-3 py-1.5 text-sm" onClick={() => resetDetails(false)}>
+            演练慢加载（5 秒）
+          </button>
+          <button type="button" className="rounded border border-border px-3 py-1.5 text-sm" onClick={() => resetDetails(true)}>
+            演练失败后重试
+          </button>
           <button
             type="button"
             className="rounded bg-primary px-3 py-1.5 text-sm text-primary-foreground"
@@ -165,10 +185,20 @@ export function ChatToolCallStressHarness() {
         >
           <section data-stress-message="true" className="rounded-lg border border-border p-4">
             <ChatMessageList
-              messages={[viewModel]}
+              layout="flat"
+              messages={[{ ...viewModel, processSummary: { label: "已处理 2分钟58秒" } }]}
               isSending={false}
               hasAssistantDraft={false}
               texts={STRESS_TEXTS}
+              resolveMessageToolPayloadState={() => detailState}
+              onMessageToolPayloadRequest={() => {
+                if (detailState === "loading" || detailState === "ready") return;
+                setDetailState("loading");
+                detailTimer.current = setTimeout(() => {
+                  setDetailState(failNextRequest.current ? "error" : "ready");
+                  failNextRequest.current = false;
+                }, 5_000);
+              }}
             />
           </section>
         </Profiler>

package/src/features/chat/features/message/hooks/__tests__/use-chat-message-virtualizer.test.tsx

@@ -207,9 +207,11 @@ describe("useChatMessageVirtualizer", () => {
     expect(scrollElement.scrollTop - (anchored?.start ?? 0)).toBe(anchorOffset);
   });
 
-  it.each([11, 20])(
-    "does not reclaim sticky escape when the active row grows %d px from the bottom",
-    async (escapeDistance) => {
+  it.each([-200, 0, 11, 20].flatMap((distance) => [
+    [distance, 100], [distance, -105],
+  ]))(
+    "leaves bottom following to the scroll owner at distance %d with height delta %d",
+    async (escapeDistance, delta) => {
       const scrollElement = document.createElement("div");
       Object.defineProperties(scrollElement, {
         clientHeight: { configurable: true, value: 800 },
@@ -248,14 +250,14 @@ describe("useChatMessageVirtualizer", () => {
         expect(result.current.virtualizer.scrollOffset).toBe(escapedScrollTop),
       );
 
-      act(() => result.current.virtualizer.resizeItem(9, 1_100));
+      act(() => result.current.virtualizer.resizeItem(9, 1_000 + delta));
 
       expect(scrollElement.scrollTop).toBe(escapedScrollTop);
       expect(
         result.current.virtualizer.getTotalSize() -
           scrollElement.scrollTop -
           scrollElement.clientHeight,
-      ).toBe(escapeDistance + 100);
+      ).toBe(escapeDistance + delta);
     },
   );
 });

package/src/features/chat/features/message/hooks/use-chat-message-virtualizer.ts

@@ -12,14 +12,15 @@ export function useChatMessageVirtualizer(params: {
   scrollRef: RefObject<HTMLDivElement | null>;
   activeRowKey?: string | null;
   focusedRowKey?: string | null;
+  anchorRowKey?: string | null;
 }) {
-  const { activeRowKey, focusedRowKey, rows, scrollRef } = params;
+  const { activeRowKey, focusedRowKey, anchorRowKey, rows, scrollRef } = params;
   const pinnedIndexes = useMemo(
     () =>
       rows.flatMap((row, index) =>
-        row.key === activeRowKey || row.key === focusedRowKey ? [index] : [],
+        row.key === activeRowKey || row.key === focusedRowKey || row.key === anchorRowKey ? [index] : [],
       ),
-    [activeRowKey, focusedRowKey, rows],
+    [activeRowKey, focusedRowKey, anchorRowKey, rows],
   );
   const rangeExtractor = useCallback(
     (range: Parameters<typeof defaultRangeExtractor>[0]) =>
@@ -35,6 +36,9 @@ export function useChatMessageVirtualizer(params: {
   // eslint-disable-next-line react-hooks/incompatible-library
   const virtualizer = useVirtualizer({
     anchorTo: "end",
+    // Preserve prepend anchoring, but let useStickyBottomScroll own end following.
+    // Virtual content excludes the reserved turn space and cannot detect its bottom.
+    scrollEndThreshold: -1,
     count: rows.length,
     directDomUpdates: true,
     estimateSize: () => ESTIMATED_CHAT_MESSAGE_ROW_HEIGHT,

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

@@ -113,7 +113,7 @@ describe("ChatSidebarProjectGroups", () => {
     const projectRow = projectLink.parentElement?.parentElement;
     expect(container.firstElementChild?.className).toBe("space-y-0.5");
     expect(projectRow?.className).toContain("h-8");
-    expect(projectRow?.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
+    expect(projectRow?.className).toContain("hover:bg-[var(--sidebar-interaction-hover)]");
     const projectContent = projectLink.parentElement;
     expect(projectContent?.classList.contains("pr-14")).toBe(false);
     expect(projectContent?.className).toContain("group-hover/project:pr-20");

package/src/features/chat/features/session/components/chat-mobile-session-row.tsx

@@ -28,7 +28,7 @@ export function ChatMobileSessionRow(props: ChatSidebarSessionItemProps) {
     onStartEditing, onTogglePinned, onDelete } = props;
   return (
     <div className="relative flex min-w-0 items-center">
-      <button type="button" onClick={onSelect} className="flex min-h-[76px] min-w-0 flex-1 items-center gap-3 py-3 pl-4 pr-1 text-left active:bg-muted">
+      <button type="button" onClick={onSelect} className="flex min-h-[76px] min-w-0 flex-1 items-center gap-3 py-3 pl-4 pr-1 text-left active:bg-[var(--interaction-hover)]">
         <span className="relative shrink-0">
           {agentAvatarUrl || (agentId && agentId.toLowerCase() !== 'main') ? (
             <AgentAvatar agentId={agentId || 'main'} displayName={agentLabel} avatarUrl={agentAvatarUrl} className="h-12 w-12 rounded-xl text-lg" />

package/src/features/chat/features/session/components/chat-sidebar-context-card.tsx

@@ -30,7 +30,7 @@ export function ChatSidebarContextCard({
           align="start"
           sideOffset={10}
           collisionPadding={12}
-          className="pointer-events-none w-64 rounded-xl border-border/80 bg-popover p-3 text-popover-foreground shadow-[0_18px_48px_-24px_rgba(15,23,42,0.45)]"
+          className="pointer-events-none w-64 p-3"
         >
           <div className="truncate text-sm font-semibold leading-5">
             {title}

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

@@ -233,7 +233,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     />
                   }
                   label={pinLabel}
-                  tooltipSide="right"
+                  tooltipSide="top"
                   onClick={() =>
                     presenter.chatSessionListManager.toggleProjectPinned(
                       group.projectRoot,

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

@@ -73,6 +73,7 @@ function ChatSidebarSessionEditingView({
   return (
     <div className="space-y-2">
       <Input
+        density="compact"
         value={draftLabel}
         onChange={(event) => onDraftLabelChange(event.target.value)}
         onKeyDown={(event) => {
@@ -85,7 +86,7 @@ function ChatSidebarSessionEditingView({
           }
         }}
         placeholder={t("sessionsLabelPlaceholder")}
-        className="h-8 rounded-lg border-border bg-background text-xs"
+        className="h-8 rounded-lg border-border bg-background"
         autoFocus
         disabled={isSaving}
       />
@@ -248,7 +249,7 @@ function ChatSidebarSessionDisplayView({
           label={t(
             isPinned ? "chatSidebarUnpinSession" : "chatSidebarPinSession",
           )}
-          tooltipSide="right"
+          tooltipSide="top"
           onClick={(event) => {
             event.stopPropagation();
             onTogglePinned();
@@ -259,7 +260,7 @@ function ChatSidebarSessionDisplayView({
           tone="strong"
           icon={<Pencil className="h-3.5 w-3.5" />}
           label={t("edit")}
-          tooltipSide="right"
+          tooltipSide="top"
           onClick={(event) => {
             event.stopPropagation();
             onStartEditing();
@@ -270,6 +271,7 @@ function ChatSidebarSessionDisplayView({
           sessionTitle={title}
           triggerSize="sm"
           triggerTone="strong"
+          triggerTooltipSide="top"
         >
           <ChatSessionHeaderMenuItem
             icon={Trash2}
@@ -319,8 +321,8 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
           ? 'w-full border-b border-border/50 bg-background text-left'
           : cn("w-full px-3 py-2 text-left text-[13px]", SIDEBAR_ITEM_SURFACE_CLASS, active && SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS),
         variant === 'mobile' && (active
-          ? "bg-background/90 font-medium text-foreground"
-          : "text-foreground/80 hover:bg-background/65 hover:text-foreground"),
+          ? "bg-[var(--session-interaction-selection)] font-medium text-foreground"
+          : "text-foreground/80 hover:bg-[var(--session-interaction-hover)] hover:text-foreground"),
         active && "font-medium",
       )}
     >

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

@@ -1,5 +1,6 @@
-import type { ReactNode } from "react";
-import { MessageSquareText } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { ChatCollapsibleContent } from "@nextclaw/agent-chat-ui";
+import { ChevronRight, MessageSquareText } from "lucide-react";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import type {
   ChatSidebarDateGroup,
@@ -8,6 +9,7 @@ import type {
 import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatSessionTypeOption;
 
@@ -32,6 +34,41 @@ function ChatSidebarEmptyState({ label }: { label: string }) {
   );
 }
 
+function ChatSidebarSessionGroup({ group, variant, renderSessionItem }: {
+  group: ChatSidebarDateGroup;
+  variant: 'desktop' | 'mobile';
+  renderSessionItem: ChatSidebarSessionListProps['renderSessionItem'];
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className={cn(
+          'group/session-heading flex w-full cursor-pointer items-center justify-between gap-2 rounded-xl text-left text-xs font-medium text-muted-foreground outline-none transition-colors duration-base hover:bg-[var(--interaction-hover)] hover:text-foreground',
+          variant === 'mobile' ? 'min-h-9 px-4' : 'min-h-7 px-2',
+        )}
+      >
+        <span className="truncate">{group.label}</span>
+        <ChevronRight
+          aria-hidden="true"
+          className={cn(
+            'h-3 w-3 shrink-0 opacity-0 transition-[opacity,transform] duration-200 group-hover/session-heading:opacity-100 motion-reduce:transition-none',
+            open && 'rotate-90',
+          )}
+        />
+      </button>
+      <ChatCollapsibleContent open={open}>{() => (
+        <div className={variant === 'mobile' ? undefined : 'space-y-0.5'}>
+          {group.items.map(renderSessionItem)}
+        </div>
+      )}</ChatCollapsibleContent>
+    </div>
+  );
+}
+
 export function ChatSidebarSessionList({
   variant = 'desktop',
   defaultSessionType,
@@ -72,14 +109,12 @@ export function ChatSidebarSessionList({
   return (
     <div className={variant === 'mobile' ? undefined : 'space-y-2'}>
       {groups.map((group) => (
-        <div key={group.label}>
-          <div className={variant === 'mobile' ? 'px-4 py-1 text-[11px] text-muted-foreground' : 'px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65'}>
-            {group.label}
-          </div>
-          <div className={variant === 'mobile' ? undefined : 'space-y-0.5'}>
-            {group.items.map(renderSessionItem)}
-          </div>
-        </div>
+        <ChatSidebarSessionGroup
+          key={group.label}
+          group={group}
+          variant={variant}
+          renderSessionItem={renderSessionItem}
+        />
       ))}
     </div>
   );

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

@@ -22,6 +22,7 @@ type ChatSessionMoreActionsMenuProps = {
   disabled?: boolean;
   triggerSize?: IconActionButtonSize;
   triggerTone?: IconActionButtonTone;
+  triggerTooltipSide?: 'top' | 'bottom';
   className?: string;
 };
 
@@ -39,6 +40,7 @@ export function ChatSessionMoreActionsMenu({
   disabled = false,
   triggerSize = 'md',
   triggerTone = 'default',
+  triggerTooltipSide = 'bottom',
   className,
 }: ChatSessionMoreActionsMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -59,6 +61,7 @@ export function ChatSessionMoreActionsMenu({
           label={t('chatSessionMoreActions')}
           size={triggerSize}
           tone={triggerTone}
+          tooltipSide={triggerTooltipSide}
           className={className}
           disabled={disabled}
           onClick={(event) => event.stopPropagation()}

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

@@ -66,9 +66,9 @@ 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-1 focus-visible:ring-border",
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
-          ? "bg-accent text-accent-foreground"
+          ? "bg-accent/60 text-accent-foreground"
           : "text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
       )}
       onClick={() => onSelect(session.key)}
@@ -101,7 +101,7 @@ function ChatSessionSwitchItem({
             </span>
           ) : null}
         </span>
-        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground/75">
           <span className="min-w-0 truncate">{previewText}</span>
           <span className="shrink-0">{trailingText}</span>
         </span>
@@ -177,12 +177,12 @@ function ChatSessionSwitchProjectGroup({
         aria-controls={contentId}
         aria-expanded={!isCollapsed}
         aria-label={actionLabel}
-        className="group flex h-10 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        className="group flex h-8 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         onClick={() => onToggleCollapsed(group.projectRoot)}
       >
         <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
         <span
-          className="min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wider"
+          className="min-w-0 flex-1 truncate text-[13px] font-medium"
           title={group.projectRoot}
         >
           {group.projectName}
@@ -222,7 +222,7 @@ export function ChatSessionSwitcherGroups({
   projectGroups: ChatSidebarProjectGroup[];
 }) {
   return (
-    <div className="space-y-3">
+    <div className="space-y-0.5">
       {isProjectFirstView
         ? projectGroups.map((group) => (
             <ChatSessionSwitchProjectGroup

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

@@ -165,9 +165,9 @@ function ChatSessionTitleSwitcherPopover({
       </PopoverTrigger>
       <ChatPopoverContent
         align="start"
-        className="w-[22rem] max-w-[calc(100vw-2rem)] p-0"
+        className="flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden p-0"
       >
-        <div className="space-y-2 border-b border-border px-3 py-2">
+        <div className="shrink-0 space-y-2 border-b border-border/40 px-3 py-2">
           <div className="flex items-center justify-between gap-3">
             <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
               {t("chatSessionSwitcherTitle")}
@@ -180,16 +180,17 @@ function ChatSessionTitleSwitcherPopover({
           <div className="relative">
             <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/65" />
             <Input
+              density="compact"
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
               placeholder={t("chatSearchSessionPlaceholder")}
               aria-label={t("chatSearchSessionPlaceholder")}
-              className="h-8 rounded-lg bg-background pl-8 pr-2 text-xs"
+              className="h-8 rounded-lg border-0 bg-muted/50 pl-8 pr-2"
               autoFocus
             />
           </div>
         </div>
-        <div className="max-h-80 overflow-y-auto p-1.5">
+        <div className="min-h-0 max-h-80 overflow-y-auto overscroll-contain p-1.5">
           {isLoading ? (
             <ChatSessionTitleSwitcherLoadingState />
           ) : hasVisibleGroups ? (

package/src/features/chat/features/session-type/components/chat-session-type-option-item.tsx

@@ -27,7 +27,7 @@ export function ChatSessionTypeOptionItem(props: {
       onClick={onSelect}
       className={cn(
         "w-full rounded-2xl px-3 py-2.5 text-left transition-colors",
-        selected ? "bg-gray-50" : "hover:bg-gray-50",
+        selected ? "bg-[var(--interaction-selection)]" : "hover:bg-[var(--interaction-hover)]",
         disabled ? "cursor-not-allowed opacity-70" : null,
       )}
     >

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

@@ -48,7 +48,6 @@ export function ChatWelcomeAgentPicker({
         </div>
       </SelectTrigger>
       <SelectContent
-        className="rounded-xl border-border shadow-lg"
         style={{ maxHeight: AGENT_PICKER_MAX_HEIGHT }}
       >
         {agents.map((agent) => (

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

@@ -55,7 +55,7 @@ export function ChatWelcomeProjectPicker({
       </PopoverTrigger>
       <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)]"
+        className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden p-0"
         style={{ maxHeight: PROJECT_PICKER_MAX_HEIGHT }}
       >
         <div className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">

package/src/features/chat/features/welcome/components/chat-welcome-prompt-suggestions.tsx

@@ -27,7 +27,7 @@ export function ChatWelcomePromptSuggestions({
           key={suggestion.labelKey}
           type="button"
           onClick={() => onSelectPrompt(t(suggestion.promptKey))}
-          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
           {t(suggestion.labelKey)}
         </button>