@nextclaw/ui 0.26.3 → 0.26.5

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,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;
 };
 
@@ -121,8 +122,6 @@ class ChatMessageViewModelAdapter {
         message,
         processedLabel,
         language,
-        failedLabel: t("chatProcessSummaryError", language),
-        stoppedLabel: t("chatProcessSummaryStopped", language),
       });
       const processSummaryLabel = processSummary?.label ?? null;
       const executionPresentation = buildChatMessageExecutionPresentation({
@@ -231,6 +230,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 +244,7 @@ export function ChatMessageListContainer({
   onEditMessage,
   onLoadMessageDetails,
   scrollRef,
+  turnAnchorRef,
   sessionKey,
   className,
 }: ChatMessageListContainerProps) {
@@ -386,11 +390,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 +454,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/message/utils/__tests__/chat-message-process-summary.utils.test.ts

@@ -31,8 +31,6 @@ const baseAssistantMessage = {
 
 const summaryLabels = {
   processedLabel: "已处理",
-  failedLabel: "处理失败",
-  stoppedLabel: "已停止",
   language: "zh" as const,
 };
 
@@ -135,8 +133,8 @@ describe("buildChatMessageProcessSummary", () => {
   });
 
   it.each([
-    ["failed", "处理失败"], ["aborted", "已停止"], ["completed", "已处理"],
-  ] as const)("uses the recorded %s outcome", (outcome, expected) => {
+    ["failed", "已处理"], ["aborted", "已处理"], ["completed", "已处理"],
+  ] as const)("keeps the process summary neutral for a %s outcome", (outcome, expected) => {
     const message: NcpMessage = {
       ...baseAssistantMessage,
       metadata: { ai_execution: createUnavailableNcpAiExecutionMetadata({
@@ -146,9 +144,9 @@ describe("buildChatMessageProcessSummary", () => {
     expect(buildChatMessageProcessSummary({ ...summaryLabels, message })?.label).toBe(expected);
   });
 
-  it("shows failure for an error message without execution metadata", () => {
+  it("keeps the process summary neutral for an error message", () => {
     expect(buildChatMessageProcessSummary({
       ...summaryLabels, message: { ...baseAssistantMessage, status: "error" },
-    })?.label).toBe("处理失败");
+    })?.label).toBe("已处理");
   });
 });

package/src/features/chat/features/message/utils/chat-message-process-summary.utils.ts

@@ -1,12 +1,10 @@
-import { readNcpAiExecutionMetadata, type NcpMessage } from "@nextclaw/ncp";
+import type { NcpMessage } from "@nextclaw/ncp";
 import type { ChatMessageProcessSummarySource } from "@/features/chat/types/chat-message.types";
 import { t, type I18nLanguage } from "@/shared/lib/i18n";
 
 type BuildChatMessageProcessSummaryParams = {
   message: NcpMessage;
   processedLabel: string;
-  failedLabel: string;
-  stoppedLabel: string;
   language: I18nLanguage;
 };
 
@@ -78,8 +76,6 @@ function formatLifecycleDuration(message: NcpMessage, language: I18nLanguage): s
  * and must not be mixed into this summary.
  */
 export function buildChatMessageProcessSummary({
-  failedLabel,
-  stoppedLabel,
   message,
   processedLabel,
   language,
@@ -88,11 +84,7 @@ export function buildChatMessageProcessSummary({
     return undefined;
   }
   const duration = formatLifecycleDuration(message, language);
-  const outcome = readNcpAiExecutionMetadata(message.metadata)?.outcome;
-  const statusLabel = message.status === "error" || outcome === "failed"
-    ? failedLabel
-    : outcome === "aborted" ? stoppedLabel : processedLabel;
   return {
-    label: duration ? `${statusLabel} ${duration}` : statusLabel,
+    label: duration ? `${processedLabel} ${duration}` : processedLabel,
   };
 }

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

@@ -189,6 +189,7 @@ export function buildChatMessageTexts(
     copiedMessageLabel: t("chatMessageCopied"),
     excerptCharacterCountTemplate: t("chatWorkspaceExcerptCharacterCount"),
     mermaidDiagramLabel: t("chatMermaidDiagram"),
+    frontmatterLabel: t("chatMarkdownFrontmatter"),
     mermaidExpandLabel: t("chatMermaidExpand"),
     mermaidLoadingLabel: t("chatMermaidLoading"),
     mermaidRenderErrorLabel: t("chatMermaidRenderError"),

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

@@ -175,6 +175,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                   {group.projectId ? (
                     <Link
                       to={`/projects/${encodeURIComponent(group.projectId)}/overview`}
+                      state={{ returnTo: `${location.pathname}${location.search}` }}
                       className="flex h-full min-w-0 flex-1 items-center gap-1.5 rounded-md px-1 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                       aria-current={isSelected ? "page" : undefined}
                       title={group.projectRoot}
@@ -233,7 +234,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>
   );