@nextclaw/ui 0.25.3 → 0.26.0

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

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from "vitest";
 import {
   ChatSidebarDesktopToolbar,
@@ -47,17 +48,18 @@ describe("ChatSidebarToolbar", () => {
     ).toBe("chat-search");
   });
 
-  it("keeps mobile search icon transparent to pointer input", () => {
-    render(<ChatSidebarMobileToolbar {...toolbarProps} />);
-
-    expect(searchIconClassName()).toContain("pointer-events-none");
-    expect(
-      screen.getByPlaceholderText("Search conversations...").className,
-    ).toContain("border-0");
-    expect(
-      screen
-        .getByPlaceholderText("Search conversations...")
-        .getAttribute("data-theme-control"),
-    ).toBe("chat-search");
+  it('reveals mobile search on demand and clears the filter when closed', async () => {
+    const user = userEvent.setup();
+    const onQueryChange = vi.fn();
+    render(<ChatSidebarMobileToolbar {...toolbarProps} onQueryChange={onQueryChange} isProjectFirstView={false} onSelectMode={vi.fn()} onAddProject={vi.fn()} />);
+    expect(screen.queryByRole('textbox')).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Search conversations...' }));
+    const search = screen.getByRole('textbox');
+    expect(document.activeElement).toBe(search);
+    await user.type(search, 'a');
+    expect(onQueryChange).toHaveBeenLastCalledWith('a');
+    await user.click(screen.getByRole('button', { name: 'Close search' }));
+    expect(onQueryChange).toHaveBeenLastCalledWith('');
+    expect(screen.queryByRole('textbox')).toBeNull();
   });
 });

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

@@ -1,3 +1,5 @@
+import { CurrentPageActions } from '@/features/right-panel-resources';
+import { ResourcePage } from '@/features/right-panel-resources';
 import { lazy, Suspense, useLayoutEffect } from "react";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
@@ -13,7 +15,7 @@ const ProjectsPage = lazy(async () => ({
   default: (await import("@/features/projects")).ProjectsPage,
 }));
 
-export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app" | "projects";
+export type MainPanelView = "resource" | "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app" | "projects";
 export type ChatPageProps = {
   view: MainPanelView;
 };
@@ -44,70 +46,37 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
 }
 type ChatPageLayoutProps = {
   view: MainPanelView;
-  confirmDialog: JSX.Element;
+  confirmDialog?: JSX.Element;
 };
-export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
-  const { isMobile } = useViewportLayout();
-  const cronScroll = useScrollRestoration<HTMLDivElement>({
-    restorationKey: "main-page:cron",
+function ManagementPageContent({ view }: ChatPageProps) {
+  const { onScroll, scrollRef } = useScrollRestoration<HTMLDivElement>({
+    restorationKey: view === 'cron' || view === 'agents' ? `main-page:${view}` : null,
   });
-  const agentsScroll = useScrollRestoration<HTMLDivElement>({
-    restorationKey: "main-page:agents",
-  });
-  const { onScroll: onCronScroll, scrollRef: cronScrollRef } = cronScroll;
-  const { onScroll: onAgentsScroll, scrollRef: agentsScrollRef } = agentsScroll;
-
-  return (
-    <div className="h-full flex">
-      {!isMobile ? <ChatSidebar /> : null}
+  switch (view) {
+    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 '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}`}>
+        {view === 'cron' ? <CronConfig /> : <AgentsPage />}
+      </div>
+    </div>;
+    default: return <div className={`mx-auto flex h-full min-h-0 w-full flex-col px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}><MarketplacePage forcedType="skills" /></div>;
+  }
+}
 
-      {view === "chat" ? (
-        isMobile ? <ChatMobileShell /> : <ChatConversationPanel />
-      ) : (
-        <section
-          data-theme-surface="workspace"
-          className={resolveManagementWorkspaceClass(view)}
-        >
-          {view === "projects" ? (
-            <Suspense fallback={<div className="h-full animate-pulse bg-card/30" />}>
-              <ProjectsPage />
-            </Suspense>
-          ) : view === "inbox" ? (
-            <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>
-          ) : view === "panel-app" ? (
-            <PanelAppMainPage />
-          ) : view === "cron" ? (
-            <div
-              ref={cronScrollRef}
-              onScroll={onCronScroll}
-              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}`}>
-                <CronConfig />
-              </div>
-            </div>
-          ) : view === "agents" ? (
-            <div
-              ref={agentsScrollRef}
-              onScroll={onAgentsScroll}
-              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}`}>
-                <AgentsPage />
-              </div>
-            </div>
-          ) : (
-            <div className="h-full overflow-hidden">
-              <div className={`mx-auto flex h-full min-h-0 w-full flex-col px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
-                <MarketplacePage forcedType="skills" />
-              </div>
-            </div>
-          )}
-        </section>
-      )}
-      {confirmDialog}
-    </div>
-  );
+export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
+  const { isMobile } = useViewportLayout();
+  return <div className="h-full flex">
+    {!isMobile ? <ChatSidebar /> : null}
+    {view === 'chat' ? (isMobile ? <ChatMobileShell /> : <ChatConversationPanel />) : (
+      <section data-theme-surface="workspace" className={`${resolveManagementWorkspaceClass(view)} flex flex-col`}>
+        {view !== 'resource' && view !== 'panel-app' ? <CurrentPageActions /> : null}
+        <div className="min-h-0 flex-1 overflow-hidden"><ManagementPageContent view={view} /></div>
+      </section>
+    )}
+    {confirmDialog}
+  </div>;
 }

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

@@ -25,7 +25,7 @@ import {
 import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
-import { PanelAppMainSidebarNav } from "@/features/panel-apps";
+import { PageResourceSidebarNav } from "@/features/right-panel-resources";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
@@ -143,12 +143,13 @@ export function ChatSidebarDesktopNav({
           ))}
         </ul>
       </div>
-      <PanelAppMainSidebarNav isCollapsed={isCollapsed} />
+      <PageResourceSidebarNav isCollapsed={isCollapsed} />
     </div>
   );
 }
 
 export function ChatSidebarSessionArea({
+  variant = 'desktop',
   defaultSessionType,
   groups,
   isCollapsed,
@@ -162,6 +163,7 @@ export function ChatSidebarSessionArea({
   renderSessionItem,
   sessionTypeOptions,
 }: {
+  variant?: 'desktop' | 'mobile';
   defaultSessionType: string;
   groups: ReturnType<typeof groupSessionsByDate>;
   isCollapsed: boolean;
@@ -188,7 +190,7 @@ export function ChatSidebarSessionArea({
 
   return (
     <>
-      <div className="flex h-8 items-center justify-end gap-1 px-3">
+      <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" />}
@@ -213,11 +215,13 @@ export function ChatSidebarSessionArea({
           }
         }}
         className={cn(
-          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-4 pt-1",
+          'custom-scrollbar min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain',
+          variant === 'mobile' ? 'bg-background' : 'px-3 pb-4 pt-1',
           SCROLL_BOTTOM_EDGE_FADE_CLASS,
         )}
       >
         <ChatSidebarSessionList
+          variant={variant}
           isLoading={isLoading}
           isProjectFirstView={isProjectFirstView}
           groups={groups}

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

@@ -1,275 +1,83 @@
-import { Button } from "@/shared/components/ui/button";
-import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
-import { Input } from "@/shared/components/ui/input";
-import {
-  Popover,
-  PopoverTrigger,
-} from "@/shared/components/ui/popover";
-import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
-import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
-import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
-import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
-import { cn } from "@/shared/lib/utils";
-import { t } from "@/shared/lib/i18n";
-import { Bot, ChevronDown, Plus, Search } from "lucide-react";
-import {
-  SIDEBAR_RAIL_CONTROL_CLASS,
-  SIDEBAR_RAIL_ICON_CLASS,
-  SIDEBAR_RAIL_ITEM_GAP_CLASS,
-  SIDEBAR_RAIL_SURFACE_CLASS,
-} from "@/app/components/layout/sidebar-rail.styles";
-
-type SessionTypeOption = ChatSessionTypeOption;
+import { useState } from 'react';
+import { 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 { Input } from '@/shared/components/ui/input';
+import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
+import { ChatSessionHeaderMenuItem } from '@/features/chat/features/session/components/session-header/chat-session-header-menu-item';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+import { SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_ICON_CLASS, SIDEBAR_RAIL_SURFACE_CLASS } from '@/app/components/layout/sidebar-rail.styles';
 
 type ChatSidebarToolbarProps = {
   query: string;
-  defaultSessionType: string;
-  sessionTypeOptions: SessionTypeOption[];
-  selectedNewSessionType: string;
-  selectedNewSessionTypeOption: SessionTypeOption | null;
-  isCreateMenuOpen: boolean;
-  onCreateMenuOpenChange: (open: boolean) => void;
-  onCreateSession: (sessionType: string) => void;
-  onSelectNewSessionType: (sessionType: string) => void;
   onQueryChange: (query: string) => void;
+  onCreateSession: () => void;
   collapsed?: boolean;
 };
 
-function SessionTypeTriggerIcon({
-  option,
-}: {
-  option: SessionTypeOption | null;
-}) {
-  if (option?.icon?.src) {
-    return (
-      <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-        <SessionContextIconNode
-          icon={{
-            kind: "runtime-image",
-            src: option.icon.src,
-            alt: option.icon.alt ?? null,
-            name: option.label,
-          }}
-          className="h-4 w-4"
-        />
-      </span>
-    );
-  }
-  return <Bot className="h-4 w-4 shrink-0" />;
-}
-
-export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
-  const {
-    query,
-    selectedNewSessionType,
-    selectedNewSessionTypeOption,
-    sessionTypeOptions,
-    isCreateMenuOpen,
-    onCreateMenuOpenChange,
-    onCreateSession,
-    onSelectNewSessionType,
-    onQueryChange,
-    collapsed = false,
-  } = props;
-  const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
-
+export function ChatSidebarDesktopToolbar({ query, onQueryChange, onCreateSession, collapsed }: ChatSidebarToolbarProps) {
   if (collapsed) {
-    return (
-      <div className="px-2 pb-2">
-        <div
-          className={cn(
-            "flex flex-col items-center",
-            SIDEBAR_RAIL_ITEM_GAP_CLASS,
-          )}
-        >
-          <IconActionButton
-            icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />}
-            label={t("chatSidebarNewTask")}
-            className={cn(
-              SIDEBAR_RAIL_CONTROL_CLASS,
-              SIDEBAR_RAIL_SURFACE_CLASS,
-            )}
-            onClick={() => {
-              onCreateMenuOpenChange(false);
-              onCreateSession(selectedNewSessionType);
-            }}
-          />
-          {supportsSessionTypeSwitch ? (
-            <Popover
-              open={isCreateMenuOpen}
-              onOpenChange={onCreateMenuOpenChange}
-            >
-              <PopoverTrigger asChild>
-                <IconActionButton
-                  icon={
-                    <SessionTypeTriggerIcon
-                      option={selectedNewSessionTypeOption}
-                    />
-                  }
-                  label={t("chatSessionTypeLabel")}
-                  className={cn(
-                    SIDEBAR_RAIL_CONTROL_CLASS,
-                    SIDEBAR_RAIL_SURFACE_CLASS,
-                  )}
-                />
-              </PopoverTrigger>
-              <ChatPopoverContent
-                align="start"
-                side="right"
-                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
-              >
-                <ChatSessionTypeMenu
-                  options={sessionTypeOptions}
-                  selectedSessionType={selectedNewSessionType}
-                  onSelect={(sessionType) => {
-                    onSelectNewSessionType(sessionType);
-                    onCreateMenuOpenChange(false);
-                  }}
-                />
-              </ChatPopoverContent>
-            </Popover>
-          ) : null}
-        </div>
-      </div>
-    );
+    return <div className="px-2 pb-2">
+      <IconActionButton icon={<Plus className={SIDEBAR_RAIL_ICON_CLASS} />} label={t('chatSidebarNewTask')}
+        className={cn(SIDEBAR_RAIL_CONTROL_CLASS, SIDEBAR_RAIL_SURFACE_CLASS)} onClick={onCreateSession} />
+    </div>;
   }
-
-  return (
-    <>
-      <div className="px-4 pb-2">
-        <div className="flex overflow-hidden rounded-lg bg-primary/10 text-primary ring-1 ring-primary/10">
-          <Button
-            variant="ghost"
-            className={cn(
-              "min-w-0 rounded-none bg-transparent px-3 text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15",
-              supportsSessionTypeSwitch ? "flex-1" : "w-full",
-            )}
-            onClick={() => {
-              onCreateMenuOpenChange(false);
-              onCreateSession(selectedNewSessionType);
-            }}
-          >
-            <Plus className="mr-1.5 h-4 w-4" />
-            {t("chatSidebarNewTask")}
-          </Button>
-          {supportsSessionTypeSwitch ? (
-            <Popover
-              open={isCreateMenuOpen}
-              onOpenChange={onCreateMenuOpenChange}
-            >
-              <PopoverTrigger asChild>
-                <IconActionButton
-                  icon={
-                    <span className="inline-flex items-center gap-1">
-                      <SessionTypeTriggerIcon
-                        option={selectedNewSessionTypeOption}
-                      />
-                      <ChevronDown className="h-3 w-3 opacity-50" />
-                    </span>
-                  }
-                  label={t("chatSessionTypeLabel")}
-                  tooltip={t("chatSessionTypeLabel")}
-                  className="h-9 w-12 shrink-0 rounded-none border-l border-primary/10 bg-transparent text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15"
-                />
-              </PopoverTrigger>
-              <ChatPopoverContent
-                align="end"
-                className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
-              >
-                <ChatSessionTypeMenu
-                  options={sessionTypeOptions}
-                  selectedSessionType={selectedNewSessionType}
-                  onSelect={(sessionType) => {
-                    onSelectNewSessionType(sessionType);
-                    onCreateMenuOpenChange(false);
-                  }}
-                />
-              </ChatPopoverContent>
-            </Popover>
-          ) : null}
-        </div>
-      </div>
-
-      <div className="px-4 pb-2">
-        <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"
-          />
-        </div>
+  return <>
+    <div className="px-4 pb-2">
+      <Button variant="ghost" className="w-full rounded-lg bg-primary/10 text-primary hover:bg-primary/15" onClick={onCreateSession}>
+        <Plus className="mr-1.5 h-4 w-4" />{t('chatSidebarNewTask')}
+      </Button>
+    </div>
+    <div className="px-4 pb-2">
+      <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" />
       </div>
-    </>
-  );
+    </div>
+  </>;
 }
 
-export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
-  const {
-    query,
-    defaultSessionType,
-    sessionTypeOptions,
-    isCreateMenuOpen,
-    onCreateMenuOpenChange,
-    onCreateSession,
-    onQueryChange,
-  } = props;
-  const hasCreateMenu = sessionTypeOptions.length > 1;
-
+export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+  onAddProject: () => void;
+}) {
+  const { query, onQueryChange, onCreateSession, isProjectFirstView, onSelectMode, onAddProject } = props;
+  const [searchOpen, setSearchOpen] = useState(Boolean(query));
+  const [viewMenuOpen, setViewMenuOpen] = useState(false);
   return (
-    <div className="px-4 pb-2 pt-1">
-      <div className="flex items-center gap-2">
-        <div className="relative min-w-0 flex-1">
-          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
-          <Input
-            data-theme-control="chat-search"
-            value={query}
-            onChange={(event) => onQueryChange(event.target.value)}
-            placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-full border-0 bg-muted pl-9 pr-3 text-[13px] shadow-none"
-          />
-        </div>
-
-        {hasCreateMenu ? (
-          <Popover
-            open={isCreateMenuOpen}
-            onOpenChange={onCreateMenuOpenChange}
-          >
+    <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">
+        <Popover open={viewMenuOpen} onOpenChange={setViewMenuOpen}>
+          <h1>
             <PopoverTrigger asChild>
-              <IconActionButton
-                icon={<Plus className="h-4 w-4" />}
-                label={t("chatSidebarNewTask")}
-                tooltip={false}
-                className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-              />
+              <button type="button" aria-label={t('chatSidebarViewMode')} className="flex h-11 min-w-0 items-center gap-1.5 rounded-lg px-1 text-[18px] font-semibold text-foreground">
+                {t('chat')}{isProjectFirstView ? <Folder className="h-4 w-4" /> : null}
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              </button>
             </PopoverTrigger>
-            <ChatPopoverContent
-              align="end"
-              className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
-            >
-              <ChatSessionTypeMenu
-                options={sessionTypeOptions}
-                selectedSessionType={defaultSessionType}
-                title={t("chatSidebarNewTask")}
-                titleClassName="pb-1.5 text-[11px] font-medium normal-case tracking-normal"
-                onSelect={(sessionType) => {
-                  onCreateSession(sessionType);
-                  onCreateMenuOpenChange(false);
-                }}
-              />
-            </ChatPopoverContent>
-          </Popover>
-        ) : (
-          <IconActionButton
-            icon={<Plus className="h-4 w-4" />}
-            label={t("chatSidebarNewTask")}
-            className="h-9 w-9 shrink-0 rounded-full bg-muted text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-            onClick={() => onCreateSession(defaultSessionType)}
-          />
-        )}
+          </h1>
+          <ChatPopoverContent align="start" className="w-48 p-1.5">
+            <div onClick={() => setViewMenuOpen(false)}>
+              <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} />
+            </div>
+          </ChatPopoverContent>
+        </Popover>
+        <div className="flex-1" />
+        <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}
+          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} />
       </div>
+      {searchOpen ? <div className="pb-2">
+        <Input autoFocus value={query} onChange={event => onQueryChange(event.target.value)} placeholder={t('chatSidebarSearchPlaceholder')}
+          aria-label={t('chatSidebarSearchPlaceholder')} className="h-10 rounded-lg border-0 bg-muted px-3 text-base shadow-none" />
+      </div> : null}
     </div>
   );
 }

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

@@ -105,7 +105,6 @@ export function ChatSidebar({
   const isSidebarCollapsed = useViewportLayoutStore(
     (state) => state.isSidebarCollapsed,
   );
-  const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
   const [isProjectAddOpen, setIsProjectAddOpen] = useState(false);
   const [isUtilityMenuOpen, setIsUtilityMenuOpen] = useState(false);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
@@ -226,6 +225,7 @@ export function ChatSidebar({
   };
   const renderSessionItem = (item: NcpSessionListItemView) => (
     <ChatSidebarSessionEntry
+      variant={variant}
       key={item.session.key}
       item={item}
       selectedSessionKey={listSnapshot.selectedSessionKey}
@@ -250,13 +250,9 @@ export function ChatSidebar({
       onDeleteSession={presenter.chatThreadManager.deleteSession}
     />
   );
-  const createSessionAndOpenIfNeeded = (
-    sessionType: string,
-    projectRoot?: string | null,
-  ) => {
+  const createSessionAndOpenIfNeeded = () => {
     presenter.chatSessionListManager.createSession({
-      projectRoot: typeof projectRoot === "string" ? projectRoot : undefined,
-      sessionType,
+      sessionType: newSessionTypePreference.selectedSessionType,
     });
   };
   const openProjectAdd = () => {
@@ -283,7 +279,7 @@ export function ChatSidebar({
       className={cn(
         "flex h-full min-h-0 flex-col bg-secondary transition-[width] duration-200 ease-out",
         isMobileVariant
-          ? "flex-1 overflow-hidden"
+          ? "flex-1 overflow-hidden bg-background"
           : shouldCollapse
             ? cn(SIDEBAR_RAIL_WIDTH_CLASS, "shrink-0")
             : "w-[280px] shrink-0",
@@ -299,36 +295,17 @@ export function ChatSidebar({
 
       {isMobileVariant ? (
         <ChatSidebarMobileToolbar
+          isProjectFirstView={isProjectFirstView}
+          onSelectMode={presenter.chatSessionListManager.setListMode}
+          onAddProject={openProjectAdd}
           query={listSnapshot.query}
-          defaultSessionType={newSessionTypePreference.selectedSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
-          selectedNewSessionTypeOption={
-            newSessionTypePreference.selectedSessionTypeOption
-          }
-          isCreateMenuOpen={isCreateMenuOpen}
-          onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
-          onSelectNewSessionType={
-            newSessionTypePreference.setSelectedSessionType
-          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       ) : (
         <ChatSidebarDesktopToolbar
           query={listSnapshot.query}
-          defaultSessionType={defaultSessionType}
-          sessionTypeOptions={sessionTypeOptions}
-          selectedNewSessionType={newSessionTypePreference.selectedSessionType}
-          selectedNewSessionTypeOption={
-            newSessionTypePreference.selectedSessionTypeOption
-          }
-          isCreateMenuOpen={isCreateMenuOpen}
-          onCreateMenuOpenChange={setIsCreateMenuOpen}
           onCreateSession={createSessionAndOpenIfNeeded}
-          onSelectNewSessionType={
-            newSessionTypePreference.setSelectedSessionType
-          }
           onQueryChange={presenter.chatSessionListManager.setQuery}
           collapsed={shouldCollapse}
         />
@@ -339,6 +316,7 @@ export function ChatSidebar({
       ) : null}
 
       <ChatSidebarSessionArea
+        variant={variant}
         defaultSessionType={newSessionTypePreference.selectedSessionType}
         groups={groups}
         isCollapsed={shouldCollapse}