@nextclaw/ui 0.25.4 → 0.26.0

package/src/app/components/layout/app-layout.tsx

@@ -1,6 +1,10 @@
-import { useCallback, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import { MessageSquarePlus } from "lucide-react";
+import { ChatResourceLinkProvider } from '@nextclaw/agent-chat-ui';
+import { PageResourceIcon } from '@/features/right-panel-resources';
+import { usePageResourceActions } from '@/features/right-panel-resources';
+import { pageResourceFromTab } from '@/features/right-panel-resources';
+import { PAGE_RESOURCE_RENDERERS } from '@/app/configs/page-resource-renderers.config';
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import {
   DocBrowserProvider,
   useDocBrowser,
@@ -10,30 +14,21 @@ import { useI18n } from "@/app/components/i18n-provider";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { DesktopAppShell, getDesktopHostPlatform } from "@/platforms/desktop";
 import { MobileAppShell } from "@/platforms/mobile";
-import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
-import { MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS } from "@/features/marketplace";
 import {
   SideDock,
   type SideDockManager,
   useSideDockStore,
 } from "@/features/side-dock";
 import { getPresenter } from "@/app/presenters/app.presenter";
-import { CHAT_DRAFT_SESSION_PATH } from "@/features/chat";
-import { parseSessionKeyFromRoute } from "@/features/chat/features/session/utils/chat-session-route.utils";
-import { createChatUiResourceReferenceFromTab } from "@/features/right-panel-resources/utils/right-panel-resource-uri.utils";
 import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
 import type { DocBrowserTabMenuGroupsResolver } from "@/shared/components/doc-browser/doc-browser";
-import { t } from "@/shared/lib/i18n";
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-const DOC_BROWSER_RENDERERS = {
-  ...PANEL_APPS_DOC_BROWSER_RENDERERS,
-  ...MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
-};
+const renderResourceIcon = (uri: string) => <PageResourceIcon uri={uri} />;
 
 function AppLayoutInner({
   children,
@@ -42,8 +37,6 @@ function AppLayoutInner({
   const { isOpen, mode } = useDocBrowser();
   useDocLinkInterceptor();
   const { pathname } = useLocation();
-  const navigate = useNavigate();
-  const presenter = getPresenter();
   const { language } = useI18n();
   const { isMobile } = useViewportLayout();
   const desktopHostPlatform = getDesktopHostPlatform();
@@ -54,32 +47,8 @@ function AppLayoutInner({
     pinTab: sideDockManager.pinTab,
     unpinTab: sideDockManager.unpinTab,
   };
-  const getDocBrowserTabMenuGroups = useCallback<DocBrowserTabMenuGroupsResolver>((tab) => {
-    const reference = createChatUiResourceReferenceFromTab(tab);
-    if (!reference) return undefined;
-    return [{
-      key: "chat",
-      items: [{
-        key: "add-to-chat",
-        icon: <MessageSquarePlus className="h-4 w-4" />,
-        label: t("docBrowserAddToChat"),
-        restoreFocus: false,
-        onSelect: () => {
-          const isChatRoute = pathname === "/chat" || pathname.startsWith("/chat/");
-          const routeSessionKey = pathname === "/chat"
-            ? null
-            : parseSessionKeyFromRoute(pathname.slice("/chat/".length));
-          presenter.chatComposerIntentManager.requestUiResourceReference({
-            targetSessionKey: isChatRoute ? routeSessionKey : null,
-            reference,
-          });
-          if (!isChatRoute) {
-            navigate(CHAT_DRAFT_SESSION_PATH);
-          }
-        },
-      }],
-    }];
-  }, [navigate, pathname, presenter]);
+  const pageActions = usePageResourceActions();
+  const getDocBrowserTabMenuGroups: DocBrowserTabMenuGroupsResolver = (tab) => pageActions(pageResourceFromTab(tab), 'global');
 
   useEffect(() => {
     document.title = resolveUiDocumentTitle(pathname, window.location);
@@ -91,7 +60,7 @@ function AppLayoutInner({
         pathname={pathname}
         isDocBrowserOpen={isOpen}
         docBrowserDockControls={docBrowserDockControls}
-        docBrowserRenderers={DOC_BROWSER_RENDERERS}
+        docBrowserRenderers={PAGE_RESOURCE_RENDERERS}
         docBrowserTabMenuGroups={getDocBrowserTabMenuGroups}
         topbarLeadingInset={
           desktopHostPlatform === "darwin" ? "4.75rem" : undefined
@@ -109,9 +78,12 @@ function AppLayoutInner({
       isDocBrowserOpen={isOpen}
       docBrowserMode={mode}
       docBrowserDockControls={docBrowserDockControls}
-      docBrowserRenderers={DOC_BROWSER_RENDERERS}
+      docBrowserRenderers={PAGE_RESOURCE_RENDERERS}
       docBrowserTabMenuGroups={getDocBrowserTabMenuGroups}
-      sideDock={isSideDockVisible ? <SideDock manager={sideDockManager} /> : null}
+      sideDock={isSideDockVisible ? <SideDock manager={sideDockManager} getItemMenuGroups={(item) => {
+        const page = getPresenter().pageResourceManager.resolve(item.target.type === 'right-panel-resource' ? item.target.uri : item.target.url);
+        return page ? pageActions(page) : [];
+      }} /> : null}
     >
       {children}
     </DesktopAppShell>
@@ -123,9 +95,9 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <DocBrowserProvider manager={presenter.docBrowserManager}>
-      <AppLayoutInner sideDockManager={presenter.sideDockManager}>
+      <ChatResourceLinkProvider renderIcon={renderResourceIcon}><AppLayoutInner sideDockManager={presenter.sideDockManager}>
         {children}
       </AppLayoutInner>
-    </DocBrowserProvider>
+    </ChatResourceLinkProvider></DocBrowserProvider>
   );
 }

package/src/app/configs/__tests__/app-navigation.config.test.ts

@@ -7,6 +7,10 @@ import {
 } from "@/app/configs/app-navigation.config";
 
 describe("panel app main navigation", () => {
+  it("labels resource pages as resources, not settings", () => {
+    expect(isMainWorkspaceRoute("/resource")).toBe(true);
+    expect(resolveMobileRouteMeta("/resource", key => key).title).toBe("resourcePageTitle");
+  });
   it("keeps panel app routes inside the main workspace shell", () => {
     expect(isMainWorkspaceRoute("/apps/panel/rust-todo")).toBe(true);
     expect(isMainWorkspaceRoute("/apps")).toBe(false);

package/src/app/configs/app-navigation.config.ts

@@ -52,6 +52,7 @@ export function matchesRouteTarget(pathname: string, target: string): boolean {
 export function isMainWorkspaceRoute(pathname: string): boolean {
   const normalized = pathname.toLowerCase();
   return (
+    normalized === "/resource" ||
     normalized === "/chat" ||
     normalized.startsWith("/chat/") ||
     normalized === "/inbox" ||
@@ -260,6 +261,7 @@ export function resolveMobileRouteMeta(
 } {
   const normalized = pathname.toLowerCase();
   const settingsItems = getSettingsNavItems(translate);
+  if (normalized === "/resource") return { title: translate("resourcePageTitle"), backTarget: null, backLabel: null };
 
   if (isChatSessionDetailRoute(normalized)) {
     return {

package/src/app/configs/page-resource-renderers.config.ts

@@ -0,0 +1,13 @@
+import { SYSTEM_OBJECT_RESOURCE_RENDERERS } from "@/features/right-panel-resources";
+import { WORKSPACE_FILE_PANEL_RENDERERS } from "@/features/right-panel-resources";
+import { CHAT_SESSION_PANEL_RENDERERS } from "@/features/chat";
+import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
+import { MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS } from "@/features/marketplace";
+
+export const PAGE_RESOURCE_RENDERERS = {
+  ...SYSTEM_OBJECT_RESOURCE_RENDERERS,
+  ...WORKSPACE_FILE_PANEL_RENDERERS,
+  ...CHAT_SESSION_PANEL_RENDERERS,
+  ...PANEL_APPS_DOC_BROWSER_RENDERERS,
+  ...MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
+};

package/src/app/index.tsx

@@ -11,6 +11,7 @@ import { SIDEBAR_RAIL_WIDTH_PX } from "@/app/components/layout/sidebar-rail.styl
 import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
 import { ChatPage } from "@/components/chat/chat-page";
+import { ChatRuntimeProvider } from "@/features/chat";
 import { loadAccountPanel } from "@/features/account";
 import { InboxRuntime } from "@/features/inbox";
 import { PanelAppServiceActionAuthorizationDialog } from "@/features/panel-apps";
@@ -117,6 +118,7 @@ function createLazyElement(element: ReactElement): ReactElement {
 }
 
 const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
+  { path: '/resource', element: createLazyElement(<ChatPage view="resource" />) },
   {
     path: "/projects/:projectId/:tab",
     element: createLazyElement(<ChatPage view="projects" />),
@@ -274,6 +276,7 @@ function ProtectedApp() {
 
   return (
     <AppPresenterProvider>
+      <ChatRuntimeProvider>
       <AppNotificationRuntime />
       <InboxRuntime />
       <AppLayout>
@@ -284,6 +287,7 @@ function ProtectedApp() {
       </Suspense>
       <PanelAppServiceActionAuthorizationDialog />
       <DesktopAuthorizationDialog />
+      </ChatRuntimeProvider>
     </AppPresenterProvider>
   );
 }

package/src/app/presenters/app.presenter.ts

@@ -1,3 +1,4 @@
+import { PageResourceManager } from '@/features/right-panel-resources';
 import { AccountManager } from '@/features/account';
 import { viewportLayoutManager } from '@/app/managers/viewport-layout.manager';
 import {
@@ -15,14 +16,17 @@ import { RemoteAccessManager } from '@/features/remote';
 import { SideDockManager } from '@/features/side-dock';
 import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+import { GLOBAL_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { workbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
 
 type ChatThreadSnapshot = ReturnType<typeof useChatThreadStore.getState>['snapshot'];
 
 function isChatWorkspacePanelOpen(snapshot: ChatThreadSnapshot): boolean {
-  return snapshot.activeWorkspacePanelKind != null;
+  return snapshot.activeWorkspacePanelKind != null && !snapshot.workspacePanelHidden;
 }
 
 export class AppPresenter {
+  workbenchSurfaceManager = workbenchSurfaceManager;
   notificationManager = new AppNotificationManager();
   inboxManager = new InboxManager();
   chatCompletionNotificationManager = new ChatCompletionNotificationManager(
@@ -34,15 +38,22 @@ export class AppPresenter {
     const docBrowser = useDocBrowserStore.getState().snapshot;
     const chatThread = useChatThreadStore.getState().snapshot;
     viewportLayoutManager.collapseSidebarForDenseRightPanels({
-      isDocBrowserDocked: docBrowser.mode === 'docked',
+      isDocBrowserDocked: this.workbenchSurfaceManager.get(GLOBAL_WORKBENCH_SURFACE).placement === 'docked',
       isDocBrowserOpen: docBrowser.isOpen,
       isWorkspacePanelOpen: isChatWorkspacePanelOpen(chatThread),
     });
   };
+  notifyWorkspacePanelOpened = () => {
+    const parentKey = useChatThreadStore.getState().snapshot.workspacePanelParentKey;
+    this.workbenchSurfaceManager.restore(`session-workspace:${parentKey ?? 'draft'}`);
+    this.notifyRightPanelOpened();
+  };
   docBrowserManager = new DocBrowserManager(
+    this.workbenchSurfaceManager,
     this.rightPanelResourceRouteResolver,
     this.notifyRightPanelOpened,
   );
+  pageResourceManager = new PageResourceManager(this);
   appPackageOperationSettlementManager = new AppPackageOperationSettlementManager(
     this.docBrowserManager,
   );

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";
@@ -84,6 +86,7 @@ export function AgentDetailsDialog({
                 <DialogTitle className="truncate text-base">
                   {agent.displayName?.trim() || agent.id}
                 </DialogTitle>
+                <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
                 <DialogDescription className="truncate text-xs">
                   @{agent.id}
                 </DialogDescription>

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,
@@ -189,10 +191,12 @@ 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" className="w-56 p-1.5">
+              <PageResourceActionItems page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
+              <div className="my-1 border-t border-border" />
               <AgentActionMenuItem
                 icon={Eye}
                 label={t("agentsViewDetailsAction")}

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");
@@ -103,3 +102,5 @@ describe("ChatPageLayout", () => {
     expect(screen.queryByTestId("chat-conversation-panel")).toBeNull();
   });
 });
+
+vi.mock("@/features/right-panel-resources/components/current-page-actions", () => ({ CurrentPageActions: () => null }));

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();
   });
 });