@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/agents/components/__tests__/agents-page.test.tsx

@@ -469,3 +469,7 @@ describe("AgentsPage", () => {
     expect(useChatThreadStore.getState().snapshot.sessionKey).toBeNull();
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));
+
+vi.mock("@/features/right-panel-resources", () => ({ PageResourceActionsMenu: () => null, PageResourceActionItems: () => null, pageResourceFromSystemObject: vi.fn() }));

package/src/features/agents/components/agent-details-dialog.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import type { ReactNode } from "react";
 import type { AgentProfileView, ConfigView } from "@/shared/lib/api";
 import { normalizeSessionType, resolveSessionTypeLabel } from "@/features/chat";
@@ -73,14 +75,14 @@ export function AgentDetailsDialog({
       <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
         <div className="shrink-0 px-5 pb-3 pt-5">
           <DialogHeader className="text-left">
-            <div className="flex min-w-0 items-center gap-3">
+            <div className="flex min-w-0 items-center gap-3 pr-7">
               <AgentAvatar
                 agentId={agent.id}
                 displayName={agent.displayName}
                 avatarUrl={agent.avatarUrl}
                 className="h-10 w-10 shrink-0"
               />
-              <div className="min-w-0">
+              <div className="min-w-0 flex-1">
                 <DialogTitle className="truncate text-base">
                   {agent.displayName?.trim() || agent.id}
                 </DialogTitle>
@@ -88,6 +90,7 @@ export function AgentDetailsDialog({
                   @{agent.id}
                 </DialogDescription>
               </div>
+              <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
             </div>
           </DialogHeader>
         </div>

package/src/features/agents/components/agents-page.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useMemo, useState } from "react";
 import {
   useDeleteAgent,
@@ -37,7 +39,7 @@ import {
   Eye,
   House,
   MessageCircle,
-  MoreHorizontal,
+  MoreVertical,
   Pencil,
   Plus,
   ShieldCheck,
@@ -131,6 +133,7 @@ function AgentListCard(props: {
     onEdit,
     onDelete,
   } = props;
+  const [menuOpen, setMenuOpen] = useState(false);
   const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || "";
   const runtimeLabel = runtimeValue
     ? (runtimeOptions.find(
@@ -179,7 +182,7 @@ function AgentListCard(props: {
           >
             <MessageCircle className="h-4 w-4" />
           </Button>
-          <Popover>
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
             <PopoverTrigger asChild>
               <Button
                 type="button"
@@ -189,10 +192,10 @@ function AgentListCard(props: {
                 aria-label={t("chatSessionMoreActions")}
                 title={t("chatSessionMoreActions")}
               >
-                <MoreHorizontal className="h-4 w-4" />
+                <MoreVertical className="h-4 w-4" />
               </Button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-44 p-1.5">
+            <PopoverContent align="end" variant="menu">
               <AgentActionMenuItem
                 icon={Eye}
                 label={t("agentsViewDetailsAction")}
@@ -213,6 +216,8 @@ function AgentListCard(props: {
                   destructive
                 />
               ) : null}
+                <div className="my-1 h-px bg-border" />
+              <PageResourceActionItems page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} onSelect={() => setMenuOpen(false)} />
             </PopoverContent>
           </Popover>
         </div>

package/src/features/apps/components/app-package-card.tsx

@@ -7,7 +7,7 @@ import {
   CalendarDays,
   CheckSquare2,
   ChevronRight,
-  MoreHorizontal,
+  MoreVertical,
   NotebookText,
   RefreshCw,
   RotateCcw,
@@ -150,7 +150,7 @@ export function AppPackageCard({
                 disabled={pending}
                 className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
               >
-                <MoreHorizontal className="h-4 w-4" />
+                <MoreVertical className="h-4 w-4" />
               </button>
             </PopoverTrigger>
             <PopoverContent

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

@@ -1,5 +1,7 @@
+import { scrollRestorationManager } from '@/shared/lib/navigation-history';
 import {
   useCallback,
+  useMemo,
   useRef,
   type ReactNode,
   type UIEvent,
@@ -31,6 +33,7 @@ type ChatConversationContentProps = {
   messages: readonly NcpMessage[];
   messageDetailStates?: Readonly<Record<string, SessionMessageToolPayloadState>>;
   sessionKey: string | null;
+  resourceWorkingDir?: string | null;
   showWelcome: boolean;
   onLoadPreviousMessages: () => Promise<void>;
   onLoadMessageDetails?: (messageId: string) => Promise<void>;
@@ -49,6 +52,26 @@ function createConversationScrollRestorationKey(
   return sessionKey && !showWelcome ? `chat-conversation:${sessionKey}` : null;
 }
 
+function ConversationHistoryStatus({ historyError, isLoadingPreviousMessages, onLoadPreviousMessages }: Pick<ChatConversationContentProps, 'historyError' | 'isLoadingPreviousMessages' | 'onLoadPreviousMessages'>) {
+  return <>{historyError ? (
+                  <div role="alert" className="flex h-8 justify-center">
+                    <button
+                      type="button"
+                      aria-label={t("chatHistoryRetry")}
+                      className="rounded px-1.5 text-xs text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      onClick={() => void onLoadPreviousMessages()}
+                    >
+                      {t("chatHistoryLoadFailed")} · {t("chatHistoryRetry")}
+                    </button>
+                  </div>
+                ) : isLoadingPreviousMessages ? (
+                  <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute left-1/2 top-[13px] block h-1.5 w-1.5 -translate-x-1/2 animate-pulse rounded-full bg-muted-foreground/50 sm:top-[17px]"
+                  />
+                ) : null}</>;
+}
+
 export function ChatConversationContent({
   bottomSlot,
   canContinue = false,
@@ -62,6 +85,7 @@ export function ChatConversationContent({
   messages,
   messageDetailStates,
   sessionKey,
+  resourceWorkingDir,
   showWelcome,
   onLoadPreviousMessages,
   onLoadMessageDetails,
@@ -72,16 +96,19 @@ export function ChatConversationContent({
   const threadRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const hasConversationContent = messages.length > 0 || isSending;
+  const readingKey = createConversationScrollRestorationKey(sessionKey, showWelcome);
+  const initialReadingPosition = useMemo(() => readingKey ? scrollRestorationManager.read(readingKey) : null, [readingKey]);
   const scrollRestoration = useScrollRestoration({
-    restorationKey: createConversationScrollRestorationKey(sessionKey, showWelcome),
+    restorationKey: readingKey,
     scrollRef: threadRef,
-    isEnabled: !showWelcome,
+    isEnabled: !showWelcome && !isHistoryLoading,
   });
   const { onScroll: onScrollPositionSave } = scrollRestoration;
   const { isAtBottom, onScroll, scrollToBottom } = useStickyBottomScroll({
     contentRef,
     scrollRef: threadRef,
     resetKey: sessionKey,
+    initialScrollTop: initialReadingPosition?.y,
     isLoading: isHistoryLoading,
     hasContent: hasConversationContent,
     contentVersion: messages[messages.length - 1] ?? isSending,
@@ -113,6 +140,8 @@ export function ChatConversationContent({
         ref={threadRef}
         onScroll={handleScroll}
         data-chat-scroll-container="true"
+        data-resource-session={sessionKey ?? undefined}
+        data-resource-working-dir={resourceWorkingDir ?? undefined}
         className={showWelcome ? "h-full overflow-y-auto custom-scrollbar" : `h-full overflow-y-auto custom-scrollbar ${SCROLL_BOTTOM_EDGE_FADE_CLASS}`}
         style={{ overflowAnchor: "none" }}
       >
@@ -122,23 +151,7 @@ export function ChatConversationContent({
           <div ref={contentRef} className="pb-7">
             {hasConversationContent ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
-                {historyError ? (
-                  <div role="alert" className="flex h-8 justify-center">
-                    <button
-                      type="button"
-                      aria-label={t("chatHistoryRetry")}
-                      className="rounded px-1.5 text-xs text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      onClick={() => void onLoadPreviousMessages()}
-                    >
-                      {t("chatHistoryLoadFailed")} · {t("chatHistoryRetry")}
-                    </button>
-                  </div>
-                ) : isLoadingPreviousMessages ? (
-                  <span
-                    aria-hidden="true"
-                    className="pointer-events-none absolute left-1/2 top-[13px] block h-1.5 w-1.5 -translate-x-1/2 animate-pulse rounded-full bg-muted-foreground/50 sm:top-[17px]"
-                  />
-                ) : null}
+                <ConversationHistoryStatus historyError={historyError} isLoadingPreviousMessages={isLoadingPreviousMessages} onLoadPreviousMessages={onLoadPreviousMessages} />
                 <ChatMessageListContainer
                   canContinue={canContinue}
                   messages={messages}

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

@@ -165,6 +165,7 @@ export function ChatConversationHeaderSection({
           ) : null}
           <ChatSessionHeaderActions
             sessionKey={sessionKey}
+            sessionTitle={sessionHeaderTitle}
             canDeleteSession={canDeleteSession}
             isDeletePending={snapshot.isDeletePending}
             currentPath={

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

@@ -80,7 +80,7 @@ export function ChatConversationHeader({
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+            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"
           />
         ) : null}
         {leading}

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

@@ -22,9 +22,9 @@ export function ChatConversationPanel({
   return (
     <section
       data-theme-surface="workspace"
-      className="relative flex-1 min-h-0 flex overflow-hidden bg-background"
+      className="relative flex-1 min-h-0 min-w-0 flex overflow-hidden bg-background"
     >
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <ChatConversationParentBanner />
         <ChatConversationHeaderSection
           layoutMode={layoutMode}

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -44,6 +44,7 @@ export function ChatConversationWorkspaceSection({
   return (
     <ChatSessionWorkspacePanel
       sessionKey={sessionKey}
+      hidden={snapshot.workspacePanelHidden === true}
       childSessionTabs={sessionKey ? childSessionTabs : []}
       activeChildSessionKey={snapshot.activeChildSessionKey ?? null}
       activeSideChatDraft={activeSideChatDraft}

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

@@ -36,6 +36,7 @@ vi.mock("@/features/cron", () => ({
 
 vi.mock("@/features/marketplace", () => ({
   MarketplacePage: () => <div>Marketplace</div>,
+  MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS: {},
 }));
 
 vi.mock("@/features/projects", () => ({
@@ -45,7 +46,7 @@ vi.mock("@/features/projects", () => ({
 describe("ChatPageLayout", () => {
   it("uses the same canvas width for management pages", () => {
     const agentsView = render(
-      <ChatPageLayout view="agents" confirmDialog={<div />} />,
+      <ChatPageLayout view="agents" />,
     );
     const agentsCanvas = screen.getByText("Agents").parentElement;
 
@@ -53,14 +54,14 @@ describe("ChatPageLayout", () => {
     agentsView.unmount();
 
     const cronView = render(
-      <ChatPageLayout view="cron" confirmDialog={<div />} />,
+      <ChatPageLayout view="cron" />,
     );
     const cronCanvas = screen.getByText("Cron").parentElement;
 
     expect(cronCanvas?.className).toContain("max-w-[min(1180px,100%)]");
     cronView.unmount();
 
-    render(<ChatPageLayout view="skills" confirmDialog={<div />} />);
+    render(<ChatPageLayout view="skills" />);
     const skillsCanvas = screen.getByText("Marketplace").parentElement;
 
     expect(skillsCanvas?.className).toContain("max-w-[min(1180px,100%)]");
@@ -76,14 +77,12 @@ describe("ChatPageLayout", () => {
     render(
       <ChatPageLayout
         view="chat"
-        confirmDialog={<div data-testid="confirm-dialog">Confirm</div>}
       />,
     );
 
     expect(screen.getByTestId("chat-mobile-shell")).toBeTruthy();
     expect(screen.queryByTestId("desktop-chat-sidebar")).toBeNull();
     expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
-    expect(screen.getByTestId("confirm-dialog")).toBeTruthy();
   });
 
   it("keeps the chat sidebar while rendering the project home in the workspace", async () => {
@@ -93,7 +92,7 @@ describe("ChatPageLayout", () => {
       isDesktop: true,
     });
 
-    render(<ChatPageLayout view="projects" confirmDialog={<div />} />);
+    render(<ChatPageLayout view="projects" />);
 
     expect(screen.getByTestId("desktop-chat-sidebar")).toBeTruthy();
     const projectHome = await screen.findByText("Project Home");

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,4 @@
+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 +14,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 +45,36 @@ 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`}>
+        <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";
@@ -137,18 +137,18 @@ export function ChatSidebarDesktopNav({
                       : unreadCount
                     : undefined
                 }
-                className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
               />
             </li>
           ))}
         </ul>
       </div>
-      <PanelAppMainSidebarNav isCollapsed={isCollapsed} />
+      <PageResourceSidebarNav isCollapsed={isCollapsed} />
     </div>
   );
 }
 
 export function ChatSidebarSessionArea({
+  variant = 'desktop',
   defaultSessionType,
   groups,
   isCollapsed,
@@ -162,6 +162,7 @@ export function ChatSidebarSessionArea({
   renderSessionItem,
   sessionTypeOptions,
 }: {
+  variant?: 'desktop' | 'mobile';
   defaultSessionType: string;
   groups: ReturnType<typeof groupSessionsByDate>;
   isCollapsed: boolean;
@@ -188,7 +189,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 +214,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}