Make sidebar Search and resizing accessible

.changeset/quiet-sidebar-command-layer.md

@@ -0,0 +1,5 @@
+---
+"@agent-native/core": patch
+---
+
+Keep the command picker above navigation drawers by using the shared dialog stacking order.

packages/core/src/client/CommandMenu.spec.tsx

@@ -274,16 +274,17 @@ describe("CommandMenu docs group", () => {
     expect(input).toBeTruthy();
     expect(list).toBeTruthy();
     expect(dialog?.className).toContain("top-[15vh]");
-    expect(dialog?.className).toContain("!z-50");
+    expect(dialog?.className).toContain("z-[280]");
     expect(dialog?.className).toContain("!max-h-none");
     expect(dialog?.className).toContain("!translate-y-0");
     expect(dialog?.className).toContain("bg-popover");
     expect(dialog?.style.animation).toBe("none");
     expect(dialog?.style.transition).toBe("none");
     expect(dialog?.style.maxWidth).toBe("");
     expect(dialog?.style.backgroundColor).toBe("");
-    expect(overlay?.className).toContain("z-50");
-    expect(overlay?.className).toContain("bg-black/50");
+    expect(overlay?.className).toContain("z-[270]");
+    expect(overlay?.style.zIndex).toBe("");
+    expect(overlay?.style.backgroundColor).toBe("rgb(0 0 0 / 0.5)");
     expect(overlay?.style.backdropFilter).toBe("none");
     expect(overlay?.style.transition).toBe("none");
     expect(document.activeElement).toBe(input);

packages/core/src/client/CommandMenu.tsx

@@ -487,16 +487,15 @@ export function CommandMenu({
           aria-describedby={undefined}
           hideClose
           motion="instant"
-          overlayClassName="fixed inset-0 z-50 bg-black/50 backdrop-blur-none transition-none"
+          overlayClassName="fixed inset-0 backdrop-blur-none transition-none"
           overlayStyle={{
-            zIndex: 50,
             backgroundColor: "rgb(0 0 0 / 0.5)",
             backdropFilter: "none",
             animation: "none",
             transition: "none",
           }}
           className={cn(
-            "fixed left-1/2 top-[15vh] !z-50 !max-h-none -translate-x-1/2 !translate-y-0 !gap-0 w-full max-w-lg",
+            "fixed left-1/2 top-[15vh] !max-h-none -translate-x-1/2 !translate-y-0 !gap-0 w-full max-w-lg",
             "rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
             className,
           )}

templates/content/app/components/layout/Layout.tsx

@@ -111,7 +111,7 @@
   const documentChatHistory = useMemo<
     | AssistantChatHistoryConfig<unknown, AssistantChatHistoryVersion, Document>
     | undefined
   >(() => {
     if (!documentScope) return undefined;
     const documentId = documentScope.id;
     return {
@@ -276,6 +276,8 @@
               collapsed={sidebarCollapsed}
               onToggleCollapsed={() => setSidebarCollapsed((c) => !c)}
               width={sidebarWidth}
+              minWidth={MIN_SIDEBAR_WIDTH}
+              maxWidth={MAX_SIDEBAR_WIDTH}
               onResize={handleSidebarResize}
             />
           </div>

templates/content/app/components/sidebar/DocumentSidebar.layout.test.ts

@@ -114,7 +114,6 @@ describe("document sidebar layout", () => {
 
   it("defaults database pages to the database icon before the page icon", () => {
     const treeItem = readSidebarSource("./DocumentTreeItem.tsx");
-    const sidebar = readSidebarSource("./DocumentSidebar.tsx");
     const iconSource = treeItem.slice(
       treeItem.indexOf("export function getDocumentSidebarIconKind"),
       treeItem.indexOf("export function DocumentTreeItem"),
@@ -125,7 +124,6 @@ describe("document sidebar layout", () => {
     expect(iconSource.indexOf("if (document.database)")).toBeLessThan(
       iconSource.indexOf('return "page"'),
     );
-    expect(sidebar).toContain("<DocumentSidebarIcon document={doc} />");
   });
 
   it("uses the database icon as the default for database pages", () => {
@@ -166,13 +164,11 @@ describe("document sidebar layout", () => {
     );
   });
 
-  it("settles search dismissal by clearing the hidden query", () => {
+  it("opens the shared search picker without keeping a hidden sidebar query", () => {
     const sidebar = readSidebarSource("./DocumentSidebar.tsx");
 
-    expect(sidebar).toContain("const closeSearch = useCallback");
-    expect(sidebar).toContain('setSearchQuery("")');
-    expect(sidebar).toContain("if (isSearching)");
-    expect(sidebar).toContain("closeSearch();");
+    expect(sidebar).toContain("onClick={openCommandMenu}");
+    expect(sidebar).not.toContain("setSearchQuery");
   });
 
   it("reveals child destinations without concurrent rollback conflicts", () => {
@@ -214,9 +210,6 @@ describe("document sidebar layout", () => {
     expect(sidebar).toContain("selectedSpace?.id");
     expect(sidebar).toContain("spaceId: parentId ? undefined : rootSpaceId");
     expect(sidebar).toContain("const handleCreatePageInSpace = useCallback");
-    expect(sidebar).toContain(
-      "const renderNewButton = (space = selectedSpace) =>",
-    );
     expect(sidebar).toContain("const renderCollapsedNewButton = () =>");
     expect(sidebar).toContain('t("sidebar.newPage")');
     expect(sidebar).not.toContain(