@nextclaw/ui 0.26.2 → 0.26.4

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -66,21 +66,21 @@ export function ChatConversationHeader({
         "bg-background/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
         shouldShow ? "opacity-100" : "h-0 py-0 opacity-0",
-        shouldShow && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
+        shouldShow && (isMobileLayout ? "min-h-[var(--mobile-header-height)] pb-0.5 pt-0.5" : "h-[52px]"),
       )}
       style={
         isMobileLayout && shouldShow
-          ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }
+          ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.125rem)" }
           : undefined
       }
     >
-      <div className="min-w-0 flex-1 flex items-center gap-2">
+      <div className="min-w-0 flex-1 flex items-center gap-2 max-md:gap-0">
         {isMobileLayout && onBackToList ? (
           <IconActionButton
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+            size="lg"
           />
         ) : null}
         {leading}

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

@@ -8,6 +8,8 @@ function renderSessionArea(isProjectFirstView: boolean, onScrollNearEnd = vi.fn(
 
   render(
     <ChatSidebarSessionArea
+      query=""
+      onQueryChange={vi.fn()}
       defaultSessionType="native"
       groups={[]}
       isCollapsed={false}
@@ -50,9 +52,9 @@ describe("ChatSidebarSessionArea", () => {
     expect(projectButton.className).toContain("rounded-full");
     expect(timeButton.querySelector("svg")).not.toBeNull();
     expect(projectButton.querySelector("svg")).not.toBeNull();
-    expect(modeGroup.parentElement?.className).toContain("justify-end");
+    expect(modeGroup.parentElement?.className).toContain("justify-between");
     expect(modeGroup.parentElement?.className).toContain("h-8");
-    expect(modeGroup.parentElement?.lastElementChild).toBe(modeGroup);
+    expect(modeGroup.parentElement?.firstElementChild).toBe(modeGroup);
 
     fireEvent.click(projectButton);
 
@@ -73,7 +75,7 @@ describe("ChatSidebarSessionArea", () => {
         .querySelector("svg")
         ?.classList.contains("lucide-folder-plus"),
     ).toBe(true);
-    expect(addProjectButton.className).toContain("hover:bg-gray-200/60");
+    expect(addProjectButton.className).toContain("hover:before:bg-[var(--interaction-hover)]");
     expect(modeIndicator?.className).toContain("translate-x-full");
     expect(modeIndicator?.className).toContain("motion-reduce:transition-none");
     expect(
@@ -81,7 +83,7 @@ describe("ChatSidebarSessionArea", () => {
         .getByRole("button", { name: "Project" })
         .getAttribute("aria-pressed"),
     ).toBe("true");
-    expect(modeIndicator?.parentElement?.previousElementSibling).toBe(
+    expect(screen.getByRole("button", { name: "Search conversations..." }).previousElementSibling).toBe(
       addProjectButton,
     );
     fireEvent.click(addProjectButton);

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from "vitest";
 import {
   ChatSidebarDesktopToolbar,
+  ChatSidebarListToolbar,
   ChatSidebarMobileToolbar,
 } from "@/features/chat/components/layout/chat-sidebar-toolbar";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
@@ -34,8 +35,18 @@ function searchIconClassName() {
 }
 
 describe("ChatSidebarToolbar", () => {
-  it("keeps desktop search icon transparent to pointer input", () => {
+  it("does not reserve a search row in the desktop header", () => {
     render(<ChatSidebarDesktopToolbar {...toolbarProps} />);
+    expect(screen.queryByRole("textbox")).toBeNull();
+  });
+  it("reveals desktop search below the list controls and clears it on close", async () => {
+    const user = userEvent.setup();
+    const onQueryChange = vi.fn();
+    render(<ChatSidebarListToolbar {...toolbarProps} onQueryChange={onQueryChange} isProjectFirstView={false} onSelectMode={vi.fn()} onAddProject={vi.fn()} />);
+    expect(screen.queryByRole("textbox")).toBeNull();
+    const trigger = screen.getByRole("button", { name: "Search conversations..." });
+    await user.click(trigger);
+    expect(document.activeElement).toBe(screen.getByRole("textbox"));
 
     expect(searchIconClassName()).toContain("pointer-events-none");
     expect(
@@ -46,6 +57,16 @@ describe("ChatSidebarToolbar", () => {
         .getByPlaceholderText("Search conversations...")
         .getAttribute("data-theme-control"),
     ).toBe("chat-search");
+    await user.type(screen.getByRole("textbox"), "a");
+    expect(onQueryChange).toHaveBeenLastCalledWith("a");
+    await user.click(screen.getByRole("button", { name: "Close search" }));
+    expect(onQueryChange).toHaveBeenLastCalledWith("");
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+    await user.click(trigger);
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("textbox")).toBeNull();
+    expect(document.activeElement).toBe(trigger);
   });
 
   it('reveals mobile search on demand and clears the filter when closed', async () => {

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -55,7 +55,7 @@ function ManagementPageContent({ view }: ChatPageProps) {
     case 'resource': return <ResourcePage />;
     case 'projects': return <Suspense fallback={<div className="h-full animate-pulse bg-card/30" />}><ProjectsPage /></Suspense>;
     case 'panel-app': return <PanelAppMainPage />;
-    case 'inbox': return <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}><InboxPage /></div>;
+    case 'inbox': return <div className={`mx-auto flex h-full min-h-0 w-full flex-col md:px-6 md:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}><InboxPage /></div>;
     case 'cron':
     case 'agents': return <div ref={scrollRef} onScroll={onScroll} className="h-full overflow-auto custom-scrollbar">
       <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>

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

@@ -1,6 +1,6 @@
 import { BrandHeader } from "@/shared/components/common/brand-header";
 import { StatusBadge } from "@/shared/components/common/status-badge";
-import { ChatSidebarListModeSwitch } from "@/features/chat/components/chat-sidebar-list-mode-switch";
+import { ChatSidebarListToolbar } from "@/features/chat/components/layout/chat-sidebar-toolbar";
 import type {
   groupSessionsByDate,
   groupSessionsByProject,
@@ -20,7 +20,6 @@ import {
   Inbox,
   PanelLeftClose,
   PanelLeftOpen,
-  FolderPlus,
 } from "lucide-react";
 import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
@@ -148,6 +147,8 @@ export function ChatSidebarDesktopNav({
 }
 
 export function ChatSidebarSessionArea({
+  query,
+  onQueryChange,
   variant = 'desktop',
   defaultSessionType,
   groups,
@@ -162,6 +163,8 @@ export function ChatSidebarSessionArea({
   renderSessionItem,
   sessionTypeOptions,
 }: {
+  query: string;
+  onQueryChange: (query: string) => void;
   variant?: 'desktop' | 'mobile';
   defaultSessionType: string;
   groups: ReturnType<typeof groupSessionsByDate>;
@@ -189,20 +192,13 @@ export function ChatSidebarSessionArea({
 
   return (
     <>
-      <div className={variant === 'mobile' ? 'hidden' : 'flex h-8 items-center justify-end gap-1 px-3'}>
-        {isProjectFirstView ? (
-          <IconActionButton
-            icon={<FolderPlus className="h-3.5 w-3.5" />}
-            label={t("chatProjectAdd")}
-            tone="surface"
-            onClick={onAddProject}
-          />
-        ) : null}
-        <ChatSidebarListModeSwitch
+      {variant === 'desktop' ? <ChatSidebarListToolbar
+          query={query}
+          onQueryChange={onQueryChange}
           isProjectFirstView={isProjectFirstView}
           onSelectMode={onSelectMode}
-        />
-      </div>
+          onAddProject={onAddProject}
+        /> : null}
 
       <div
         ref={scrollRef}

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

@@ -1,7 +1,10 @@
-import { useState } from 'react';
-import { ChevronDown, Clock3, Folder, FolderPlus, Plus, Search, X } from 'lucide-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';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { Input } from '@/shared/components/ui/input';
 import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
 import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
@@ -17,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')}
@@ -30,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 & {
@@ -50,7 +83,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
   const [viewMenuOpen, setViewMenuOpen] = useState(false);
   return (
     <div className="shrink-0 border-b border-border/50 bg-background px-3 text-foreground" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
-      <div className="flex h-14 items-center gap-1">
+      <div className="flex h-[var(--mobile-header-height)] items-center gap-1">
         <Popover open={viewMenuOpen} onOpenChange={setViewMenuOpen}>
           <h1>
             <PopoverTrigger asChild>
@@ -65,14 +98,19 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
               <ChatSessionHeaderMenuItem icon={Clock3} label={t('chatSidebarViewTime')} onClick={() => onSelectMode('time-first')} />
               <ChatSessionHeaderMenuItem icon={Folder} label={t('chatSidebarViewProject')} onClick={() => onSelectMode('project-first')} />
               <ChatSessionHeaderMenuItem icon={FolderPlus} label={t('chatProjectAdd')} onClick={onAddProject} />
+              <Link to="/cron" className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}>
+                <AlarmClock className="h-4 w-4 text-muted-foreground" />{t('cron')}
+              </Link>
             </div>
           </ChatPopoverContent>
         </Popover>
         <div className="flex-1" />
+        <IconActionGroup>
         <IconActionButton icon={searchOpen ? <X className="h-5 w-5" /> : <Search className="h-5 w-5" />}
-          label={t(searchOpen ? 'chatSidebarCloseSearch' : 'chatSidebarSearchPlaceholder')} className="h-11 w-11" tooltip={false}
+          label={t(searchOpen ? 'chatSidebarCloseSearch' : 'chatSidebarSearchPlaceholder')} tooltip={false}
           onClick={() => { setSearchOpen(!searchOpen); if (searchOpen) onQueryChange(''); }} />
-        <IconActionButton icon={<Plus className="h-5 w-5" />} label={t('chatSidebarNewTask')} className="h-11 w-11" tooltip={false} onClick={onCreateSession} />
+        <IconActionButton icon={<Plus className="h-5 w-5" />} label={t('chatSidebarNewTask')} tooltip={false} onClick={onCreateSession} />
+        </IconActionGroup>
       </div>
       {searchOpen ? <div className="pb-2">
         <Input autoFocus value={query} onChange={event => onQueryChange(event.target.value)} placeholder={t('chatSidebarSearchPlaceholder')}

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" />
@@ -51,7 +51,7 @@ export function ChatMobileSessionRow(props: ChatSidebarSessionItemProps) {
           </span>
         </span>
       </button>
-      <ChatSessionMoreActionsMenu sessionKey={sessionKey} sessionTitle={title} className="h-11 w-9 shrink-0 rounded-none text-muted-foreground">
+      <ChatSessionMoreActionsMenu sessionKey={sessionKey} sessionTitle={title}>
         <ChatSessionHeaderMenuItem icon={Pin} label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')} onClick={onTogglePinned} />
         <ChatSessionHeaderMenuItem icon={Pencil} label={t('edit')} onClick={onStartEditing} />
         <ChatSessionHeaderMenuItem icon={Trash2} label={t('delete')} onClick={onDelete} destructive />

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",
       )}
     >