@nextclaw/ui 0.26.3 → 0.26.4

package/dist/index.html

@@ -258,47 +258,47 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/main-B-oxUq-o.js"></script>
+  <script type="module" crossorigin src="/assets/main-bEWCGDHr.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
   <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
   <link rel="modulepreload" crossorigin href="/assets/i18n-OGmF0Ws_.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-DkLJrSCd.js">
-  <link rel="modulepreload" crossorigin href="/assets/client-imrVphQb.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-D-CRf3_Z.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-B4xj2I2g.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-6Uq4chZW.js">
-  <link rel="modulepreload" crossorigin href="/assets/context-menu-CRqH2SEk.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-CQIp_nJT.js">
-  <link rel="modulepreload" crossorigin href="/assets/dialog-BgL3vKJQ.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-BZvNpFOS.js">
+  <link rel="modulepreload" crossorigin href="/assets/client-DKKbdJ6Q.js">
+  <link rel="modulepreload" crossorigin href="/assets/es2015-BiB05Sav.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DE0sB9Nu.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-Y9IEbx9x.js">
+  <link rel="modulepreload" crossorigin href="/assets/context-menu-DHVVdHzN.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-DSz9cGhy.js">
+  <link rel="modulepreload" crossorigin href="/assets/dialog-BUfWO8hr.js">
   <link rel="modulepreload" crossorigin href="/assets/katex-CsAM73R9.js">
-  <link rel="modulepreload" crossorigin href="/assets/puzzle--RLCeYML.js">
+  <link rel="modulepreload" crossorigin href="/assets/puzzle-D_TiFXOv.js">
   <link rel="modulepreload" crossorigin href="/assets/middleware-B--6mAUM.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-DdxVnCYc.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-BPMkKSci.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-vmbQUNT6.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-CmRdT3N1.js">
   <link rel="modulepreload" crossorigin href="/assets/navigation-history-CzErJuPG.js">
-  <link rel="modulepreload" crossorigin href="/assets/theme-provider-C5PCDBPB.js">
-  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-10Qb3dpZ.js">
-  <link rel="modulepreload" crossorigin href="/assets/download-Cr337h4W.js">
+  <link rel="modulepreload" crossorigin href="/assets/theme-provider-BjF1Eowc.js">
+  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-8vqYZ0wy.js">
+  <link rel="modulepreload" crossorigin href="/assets/download-CKqS1Ksj.js">
   <link rel="modulepreload" crossorigin href="/assets/host-capabilities-DuIFVsvM.js">
-  <link rel="modulepreload" crossorigin href="/assets/navigation-link-D3pzNHeA.js">
-  <link rel="modulepreload" crossorigin href="/assets/eye-DrQRSAfJ.js">
-  <link rel="modulepreload" crossorigin href="/assets/tag-chip-DXHtZ8AS.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-DbOQWT9C.js">
-  <link rel="modulepreload" crossorigin href="/assets/trash-2-DazgBvmJ.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-syCVj_nw.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-CdfOUjdE.js">
-  <link rel="modulepreload" crossorigin href="/assets/status-dot-DZlxa5zW.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-DH4aWvkS.js">
-  <link rel="modulepreload" crossorigin href="/assets/card-Bqu8zWLq.js">
-  <link rel="modulepreload" crossorigin href="/assets/provider-models-YW7rIeOD.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-config-DRRGF9Zb.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-Co8uKOyW.js">
-  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-axJ-pTEu.js">
-  <link rel="modulepreload" crossorigin href="/assets/settings-2-COvVf1XX.js">
-  <link rel="modulepreload" crossorigin href="/assets/pwa-DcizGowz.js">
-  <link rel="modulepreload" crossorigin href="/assets/login-page-sgivRYG1.js">
+  <link rel="modulepreload" crossorigin href="/assets/navigation-link-DC-Pku0Y.js">
+  <link rel="modulepreload" crossorigin href="/assets/eye-bKzylu3p.js">
+  <link rel="modulepreload" crossorigin href="/assets/tag-chip-D-6aPuuh.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-Clq1Gtb1.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-DER2EJKK.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-BG8VfcdA.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-ezKJwKqg.js">
+  <link rel="modulepreload" crossorigin href="/assets/status-dot-Cb8ewlUr.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-ClLgMbxd.js">
+  <link rel="modulepreload" crossorigin href="/assets/card-CdRBL1E0.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-models-DFQgF4hS.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-config-BM5jC65L.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-BcYL-VNe.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-DaONL0j_.js">
+  <link rel="modulepreload" crossorigin href="/assets/settings-2-CrGx9_De.js">
+  <link rel="modulepreload" crossorigin href="/assets/pwa-C9ac_1dg.js">
+  <link rel="modulepreload" crossorigin href="/assets/login-page-BT3GV3Sb.js">
   <link rel="stylesheet" crossorigin href="/assets/app-presenter-provider-jNGlmBLe.css">
-  <link rel="stylesheet" crossorigin href="/assets/main-BpL6OjwM.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-kqMRTwOs.css">
 </head>
 
 <body>

package/dist/panel-standalone.html

@@ -5,20 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#ffffff" />
     <title>Panel App · NextClaw</title>
-    <script type="module" crossorigin src="/assets/panelStandalone-CGkYeMK5.js"></script>
+    <script type="module" crossorigin src="/assets/panelStandalone-CX8X2hjh.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
     <link rel="modulepreload" crossorigin href="/assets/i18n-OGmF0Ws_.js">
-    <link rel="modulepreload" crossorigin href="/assets/api-DkLJrSCd.js">
-    <link rel="modulepreload" crossorigin href="/assets/client-imrVphQb.js">
-    <link rel="modulepreload" crossorigin href="/assets/es2015-D-CRf3_Z.js">
-    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-B4xj2I2g.js">
-    <link rel="modulepreload" crossorigin href="/assets/context-menu-CRqH2SEk.js">
-    <link rel="modulepreload" crossorigin href="/assets/x-CQIp_nJT.js">
-    <link rel="modulepreload" crossorigin href="/assets/dialog-BgL3vKJQ.js">
+    <link rel="modulepreload" crossorigin href="/assets/api-BZvNpFOS.js">
+    <link rel="modulepreload" crossorigin href="/assets/client-DKKbdJ6Q.js">
+    <link rel="modulepreload" crossorigin href="/assets/es2015-BiB05Sav.js">
+    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DE0sB9Nu.js">
+    <link rel="modulepreload" crossorigin href="/assets/context-menu-DHVVdHzN.js">
+    <link rel="modulepreload" crossorigin href="/assets/x-DSz9cGhy.js">
+    <link rel="modulepreload" crossorigin href="/assets/dialog-BUfWO8hr.js">
     <link rel="modulepreload" crossorigin href="/assets/navigation-history-CzErJuPG.js">
-    <link rel="modulepreload" crossorigin href="/assets/theme-provider-C5PCDBPB.js">
-    <link rel="stylesheet" crossorigin href="/assets/panelStandalone-D-mhAGNa.css">
+    <link rel="modulepreload" crossorigin href="/assets/theme-provider-BjF1Eowc.js">
+    <link rel="stylesheet" crossorigin href="/assets/panelStandalone-BRg7B1EI.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.26.3",
+  "version": "0.26.4",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -35,11 +35,11 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/client-sdk": "0.12.8",
+    "@nextclaw/client-sdk": "0.12.9",
     "@nextclaw/ncp": "0.11.2",
-    "@nextclaw/agent-chat-ui": "0.10.2",
-    "@nextclaw/ncp-http-agent-client": "0.4.25",
+    "@nextclaw/agent-chat-ui": "0.11.0",
     "@nextclaw/ncp-react": "0.5.30",
+    "@nextclaw/ncp-http-agent-client": "0.4.25",
     "@nextclaw/ncp-toolkit": "0.6.27",
     "@nextclaw/shared": "0.8.2"
   },

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -107,7 +107,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
+    expect(backLink.className).toContain("hover:bg-[var(--sidebar-interaction-hover)]");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -207,7 +207,7 @@ describe("Sidebar", () => {
     expect(screen.queryByRole("combobox", { name: "Language" })).toBeNull();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
-    expect(accountEntry.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
+    expect(accountEntry.className).toContain("hover:bg-[var(--sidebar-interaction-hover)]");
     expect(navigationList?.className).toContain("space-y-0.5");
     expect(footer?.className).toContain("space-y-0.5");
     expect(footer?.firstElementChild?.textContent).toContain("Help Docs");

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -10,13 +10,13 @@ export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
 // Use theme neutral tokens directly so legacy gray utility overrides cannot
 // turn sidebar feedback into a content selection or accent surface.
 export const SIDEBAR_ITEM_SURFACE_CLASS =
-  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[hsl(var(--gray-200)/0.6)] hover:text-foreground focus-within:bg-[hsl(var(--gray-200)/0.6)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.6)]";
+  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[var(--sidebar-interaction-hover)] hover:text-foreground focus-within:bg-[var(--sidebar-interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--sidebar-interaction-hover)]";
 
 export const SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS =
-  "bg-[hsl(var(--gray-200)/0.8)] text-foreground hover:bg-[hsl(var(--gray-200)/0.8)] focus-within:bg-[hsl(var(--gray-200)/0.8)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.8)]";
+  "bg-[var(--sidebar-interaction-selection)] text-foreground hover:bg-[var(--sidebar-interaction-selection)] focus-within:bg-[var(--sidebar-interaction-selection)] has-[[data-context-menu-open]]:bg-[var(--sidebar-interaction-selection)]";
 
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[hsl(var(--gray-200)/0.8)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
+  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[var(--sidebar-interaction-selection)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
 
 export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS;
 

package/src/app/styles/charcoal-theme.css

@@ -42,9 +42,6 @@
     --secondary-foreground: var(--gray-800);
     --accent: 0 0% 19%;
     --accent-foreground: var(--gray-900);
-    --interaction-hover: hsl(var(--muted));
-    --interaction-selection: hsl(202 38% 27%);
-    --interaction-selection-border: hsl(202 48% 40%);
     --muted: var(--gray-100);
     --muted-foreground: var(--gray-500);
     --destructive: 0 72% 60%;

package/src/app/styles/design-system.css

@@ -12,6 +12,7 @@
    }
 
    :root {
+      --shadow-popover: 0 12px 36px -8px rgb(0 0 0 / 0.18), 0 3px 10px -2px rgb(0 0 0 / 0.08);
       color-scheme: light;
 
       /* Mobile density: hit target, visual feedback, and chrome are separate. */
@@ -86,9 +87,16 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
-      --interaction-hover: hsl(var(--muted));
-      --interaction-selection: hsl(211 100% 92%);
-      --interaction-selection-border: hsl(211 75% 84%);
+      --interaction-hover: hsl(var(--foreground) / 0.04);
+      --interaction-selection: hsl(var(--foreground) / 0.07);
+      --interaction-selection-border: hsl(var(--foreground) / 0.12);
+      /* Desktop sidebar feedback matches the verified VPS v0.54.2 baseline. */
+      --sidebar-interaction-hover: hsl(var(--gray-200) / 0.6);
+      --sidebar-interaction-selection: hsl(var(--gray-200) / 0.8);
+      --sidebar-segment-selection: hsl(var(--gray-200) / 0.7);
+      /* Mobile conversation rows retain their separate paper surface. */
+      --session-interaction-hover: hsl(var(--background) / 0.65);
+      --session-interaction-selection: hsl(var(--background) / 0.9);
 
       /* Muted */
       --muted: var(--gray-100);
@@ -723,9 +731,6 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
-      --interaction-hover: hsl(var(--muted));
-      --interaction-selection: hsl(211 48% 30%);
-      --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
       --destructive: 0 70% 52%;
@@ -834,6 +839,7 @@
 
 @layer base {
    :root[data-theme-appearance="dark"] {
+      --shadow-popover: 0 8px 32px -8px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.24);
       --link-foreground: 213 94% 68%;
       --link-foreground-hover: 213 97% 79%;
    }

package/src/app/styles/island-theme.css

@@ -44,9 +44,6 @@
     --secondary-foreground: var(--gray-800);
     --accent: 151 28% 88%;
     --accent-foreground: var(--brand-800);
-    --interaction-hover: hsl(var(--muted));
-    --interaction-selection: hsl(153 35% 80% / 0.82);
-    --interaction-selection-border: hsl(157 37% 58% / 0.88);
     --muted: var(--gray-100);
     --muted-foreground: var(--gray-500);
     --destructive: 5 61% 47%;
@@ -323,8 +320,8 @@
     -webkit-backdrop-filter: blur(18px) saturate(0.9);
     backdrop-filter: blur(18px) saturate(0.9);
     background-color: hsl(var(--popover) / 0.9);
-    border-color: hsl(var(--border) / 0.7);
-    box-shadow: 0 18px 42px -24px hsl(158 27% 20% / 0.46);
+    border-color: hsl(var(--border) / 0.4);
+    box-shadow: var(--shadow-popover);
   }
 
   :root[data-theme="island"] [data-theme-overlay="tooltip"] {
@@ -446,16 +443,6 @@
     border-radius: 0;
   }
 
-  :root[data-theme="island"]
-    [data-theme-surface="navigation"]
-    :is([aria-current="page"], [aria-selected="true"], [data-state="active"]),
-  :root[data-theme="island"]
-    [data-theme-surface="utility-rail"]
-    :is([aria-pressed="true"], [data-state="active"]) {
-    background-color: hsl(151 27% 84% / 0.68);
-    color: hsl(var(--brand-800));
-  }
-
   :root[data-theme="island"]
     :is(
       .custom-scrollbar,

package/src/features/app-data/components/app-data-removal-choice.tsx

@@ -25,7 +25,7 @@ export function AppDataRemovalChoice({
       onClick={onClick}
       className={cn(
         'flex items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50',
-        checked ? 'border-foreground/25 bg-muted/55' : 'border-border/60 hover:bg-muted/35',
+        checked ? 'border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)]' : 'border-border/60 hover:bg-[var(--interaction-hover)]',
       )}
     >
       <span className={cn(

package/src/features/channels/pages/channels-list-page.tsx

@@ -138,7 +138,7 @@ export function ChannelsList() {
                         <a
                           href={tutorialUrl}
                           onClick={(event) => event.stopPropagation()}
-                          className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/45 transition-colors hover:bg-muted hover:text-foreground'
+                          className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/45 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground'
                           title={t('channelsGuideTitle')}
                         >
                           <ExternalLink className='h-3.5 w-3.5' />

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -14,7 +14,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
       <span
         aria-hidden="true"
         className={cn(
-          'pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 w-[calc(50%-2px)] rounded-full bg-gray-200/70 transition-transform duration-200 ease-out motion-reduce:transition-none',
+          'pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 w-[calc(50%-2px)] rounded-full bg-[var(--sidebar-segment-selection)] transition-transform duration-200 ease-out motion-reduce:transition-none',
           isProjectFirstView && 'translate-x-full',
         )}
       />

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -8,6 +8,7 @@ import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { ChatSessionSwitcherGroups } from "@/features/chat/features/session/components/session-header/chat-session-switcher-groups";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
@@ -312,42 +313,51 @@ describe("ChatConversationHeaderSection", () => {
     ).toBeTruthy();
   });
 
-  it("switches to collapsible project groups inside the header popover", async () => {
+  it("renders compact collapsible project groups inside the header popover", async () => {
     const user = userEvent.setup();
-    viewportLayoutManager.setSidebarCollapsed(true);
-    mocks.sessionItems = [
-      createSessionListItem({
+    const alphaItem = createSessionListItem({
         key: "parent-session-1",
         label: "Parent Task",
         projectName: "Alpha",
         projectRoot: "/workspace/alpha",
-      }),
-      createSessionListItem({
+      });
+    const betaItem = createSessionListItem({
         key: "session:ncp-2",
         label: "Background Task",
         projectName: "Beta",
         projectRoot: "/workspace/beta",
-      }),
-    ];
+      });
 
-    renderHeaderSection();
-    await user.click(screen.getByRole("button", { name: /Switch session/ }));
-    await user.click(screen.getByRole("button", { name: "Project" }));
+    render(
+      <ChatSessionSwitcherGroups
+        collapsedProjectRoots={[]}
+        dateGroups={[]}
+        isProjectFirstView
+        onSelect={mocks.selectSession}
+        onToggleProjectCollapsed={mocks.toggleProjectCollapsed}
+        optimisticReadAtBySessionKey={{}}
+        projectGroups={[
+          { projectRoot: "/workspace/alpha", projectName: "Alpha", items: [alphaItem], latestUpdatedAt: 1, isPinned: false },
+          { projectRoot: "/workspace/beta", projectName: "Beta", items: [betaItem], latestUpdatedAt: 1, isPinned: false },
+        ]}
+        selectedSessionKey="parent-session-1"
+        sessionTypeOptions={[]}
+      />,
+    );
 
-    expect(mocks.setListMode).toHaveBeenCalledWith("project-first");
-    const alphaGroup = screen.getByRole("region", { name: "Alpha" });
+    const alphaGroup = await screen.findByRole("region", { name: "Alpha" });
     const alphaToggle = within(alphaGroup).getByRole("button", {
       name: "Collapse project · Alpha",
     });
     expect(alphaToggle.getAttribute("aria-expanded")).toBe("true");
+    expect(alphaToggle.className).toContain("h-8");
     expect(alphaToggle.className).not.toContain("bg-muted");
+    expect(alphaToggle.querySelector('[title="/workspace/alpha"]')?.getAttribute("class")).toContain("text-[13px]");
+    expect(alphaGroup.parentElement?.className).toContain("space-y-0.5");
     expect(within(alphaGroup).getByText("Parent Task")).toBeTruthy();
 
     await user.click(alphaToggle);
     expect(mocks.toggleProjectCollapsed).toHaveBeenCalledWith("/workspace/alpha");
-    expect(
-      within(screen.getByRole("region", { name: "Alpha" })).queryByText("Parent Task"),
-    ).toBeNull();
   });
 
   it("keeps the desktop title plain while the sidebar is expanded", () => {
@@ -447,6 +457,8 @@ describe("ChatConversationHeaderSection", () => {
     const searchInput = screen.getByRole("textbox", {
       name: "Search session key / label",
     });
+    expect(searchInput.className).toContain("max-md:text-[13px]");
+    expect(searchInput.className).toContain("max-md:min-h-0");
     await user.type(searchInput, "Background");
     await user.click(screen.getByRole("button", { name: /Background Task/ }));
 

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

@@ -95,6 +95,9 @@ export function ChatConversationContent({
 }: ChatConversationContentProps) {
   const threadRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const turnAnchorRef = useRef<HTMLDivElement>(null);
+  const turnFrameRef = useRef<HTMLDivElement>(null);
+  const latestUserMessageId = messages.findLast((message) => message.role === "user")?.id ?? null;
   const hasConversationContent = messages.length > 0 || isSending;
   const readingKey = createConversationScrollRestorationKey(sessionKey, showWelcome);
   const initialReadingPosition = useMemo(() => readingKey ? scrollRestorationManager.read(readingKey) : null, [readingKey]);
@@ -112,6 +115,8 @@ export function ChatConversationContent({
     isLoading: isHistoryLoading,
     hasContent: hasConversationContent,
     contentVersion: messages[messages.length - 1] ?? isSending,
+    stickyThresholdPx: 80,
+    turnSpace: { key: latestUserMessageId, anchorRef: turnAnchorRef, frameRef: turnFrameRef },
   });
   const hasMessages = messages.length > 0;
   const handleScroll = useCallback(
@@ -148,7 +153,7 @@ export function ChatConversationContent({
         {showWelcome ? (
           (welcomeSlot ?? null)
         ) : (
-          <div ref={contentRef} className="pb-7">
+          <div ref={turnFrameRef}><div ref={contentRef} className="pb-7">
             {hasConversationContent ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 <ConversationHistoryStatus historyError={historyError} isLoadingPreviousMessages={isLoadingPreviousMessages} onLoadPreviousMessages={onLoadPreviousMessages} />
@@ -163,6 +168,7 @@ export function ChatConversationContent({
                   onLoadMessageDetails={onLoadMessageDetails}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
+                  turnAnchorRef={turnAnchorRef}
                 />
                 {isContextCompacting ? <ChatContextCompactionDivider /> : null}
               </ChatConversationTrack>
@@ -172,7 +178,7 @@ export function ChatConversationContent({
                 {bottomSlot}
               </ChatConversationTrack>
             ) : null}
-          </div>
+          </div></div>
         )}
       </div>
       {hasMessages && !showWelcome && !isAtBottom ? (

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