@agent-native/toolkit 0.22.1 → 0.22.2-nightly-20260926235312

package/src/app-shell/prompt-home.css

@@ -8,7 +8,7 @@
   min-height: clamp(36rem, 64svh, 44rem);
   flex-direction: column;
   align-items: center;
-  padding-block-start: clamp(12rem, 33svh, 22rem);
+  justify-content: center;
   text-align: center;
 }
 
@@ -17,10 +17,41 @@
   max-width: 43.75rem;
 }
 
+.agent-prompt-home-connection {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 200ms ease,
+    opacity 160ms ease;
+}
+
+.agent-prompt-home-connection[data-visible] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.agent-prompt-home-connection > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.agent-prompt-home-connection > .agent-builder-setup-card--attached {
+  margin-bottom: -1.875rem;
+}
+
 .agent-prompt-home-library {
   padding-block-start: 2rem;
 }
 
+.agent-prompt-home-tabs > div:first-child {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding-block: 0.5rem;
+  background: hsl(var(--background));
+}
+
 .agent-template-library-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -28,6 +59,7 @@
 }
 
 .agent-template-library-preview {
+  position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: inherit;
@@ -41,11 +73,13 @@
 
 .agent-template-library-primary {
   grid-area: 1 / 1 / 3 / 3;
+  position: relative;
   min-width: 0;
 }
 
 .agent-template-library-caption {
-  height: 5rem;
+  min-height: 5rem;
+  padding: 1rem;
   padding-inline-end: 3rem;
 }
 
@@ -77,6 +111,12 @@
   height: min(85dvh, 60rem);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .agent-prompt-home-connection {
+    transition: none;
+  }
+}
+
 .agent-template-preview-viewer {
   display: grid;
   min-height: 0;

package/src/app-shell/use-home-search-shortcut.ts

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+
+export function useHomeSearchShortcut(enabled: boolean): void {
+  useEffect(() => {
+    if (!enabled) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key !== "/" ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.isComposing
+      ) {
+        return;
+      }
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      if (
+        target?.isContentEditable ||
+        target?.closest("input, textarea, select, [role='textbox']")
+      ) {
+        return;
+      }
+      if (
+        document.querySelector(
+          '[role="menu"][data-state="open"], [role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"], dialog[open]',
+        )
+      ) {
+        return;
+      }
+      const search = Array.from(
+        document.querySelectorAll<HTMLInputElement>("[data-home-search]"),
+      ).find((input) => input.getClientRects().length > 0);
+      if (!search || search.disabled) return;
+      event.preventDefault();
+      search.focus();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled]);
+}

package/src/composer/ComposerContextMenu.spec.tsx

@@ -136,24 +136,10 @@ describe("connected composer menus", () => {
   async function click(label: string) {
     await act(async () => row(label).click());
   }
-  async function search(placeholder: string, value: string) {
-    const input = document.querySelector<HTMLInputElement>(
-      `input[placeholder="${placeholder}"]`,
-    )!;
-    await act(async () => {
-      Object.getOwnPropertyDescriptor(
-        HTMLInputElement.prototype,
-        "value",
-      )!.set!.call(input, value);
-      input.dispatchEvent(new Event("input", { bubbles: true }));
-    });
-  }
-  it("keeps all anchored panels visible with category search overrides and w64", async () => {
+  it("shows complete options in each anchored menu with w64", async () => {
     await render(items, { addAttachment: vi.fn() });
     await open();
-    expect(
-      document.querySelector('input[placeholder="Search…"]'),
-    ).not.toBeNull();
+    expect(document.querySelectorAll('[role="searchbox"]')).toHaveLength(0);
     expect(row("Upload File").querySelector("svg")?.getAttribute("width")).toBe(
       "16",
     );
@@ -162,14 +148,12 @@ describe("connected composer menus", () => {
     await click("Archive");
     expect(menus()).toHaveLength(4);
     expect(menus().every((menu) => menu.classList.contains("w-64"))).toBe(true);
-    expect(document.querySelectorAll('[role="searchbox"]')).toHaveLength(4);
-    expect(
-      document.querySelector('input[placeholder="Search documents…"]'),
-    ).not.toBeNull();
+    expect(document.querySelectorAll('[role="searchbox"]')).toHaveLength(0);
     expect(row("Documents").getAttribute("aria-expanded")).toBe("true");
     expect(row("Meeting notes").getAttribute("role")).toBe("menuitem");
+    expect(row("Project brief")).toBeDefined();
   });
-  it("filters root and category search without flattening the hierarchy", async () => {
+  it("keeps the menu hierarchy while listing every option", async () => {
     const select = vi.fn();
     await render(
       [
@@ -187,27 +171,19 @@ describe("connected composer menus", () => {
       { addAttachment: vi.fn() },
     );
     await open();
-    await search("Search…", "brief");
-    expect(menus()[0].textContent).not.toContain("Upload File");
+    expect(row("Upload File")).toBeDefined();
     await click("Add context");
-    await search("Search context…", "documents");
-    expect(menus()[1].textContent).not.toContain("Library");
+    expect(row("Library")).toBeDefined();
     await click("Documents");
-    await search("Search documents…", "brief");
-    expect(menus()[2].textContent).not.toContain("Notes");
+    expect(row("Notes")).toBeDefined();
+    expect(document.querySelectorAll('[role="searchbox"]')).toHaveLength(0);
     await click("Project brief");
     expect(select).toHaveBeenCalledOnce();
     expect(menus()).toHaveLength(0);
   });
-  it("keeps typing out of typeahead and supports native ArrowRight, Left and Escape", async () => {
+  it("supports native ArrowRight, Left and Escape navigation", async () => {
     await render();
     await open();
-    const input =
-      document.querySelector<HTMLInputElement>('[role="searchbox"]')!;
-    await key(input, "d");
-    expect(document.activeElement).toBe(input);
-    await key(input, "ArrowDown");
-    expect(document.activeElement).toBe(row("Add context"));
     await key(row("Add context"), "ArrowRight");
     await key(row("Documents"), "ArrowRight");
     expect(menus()).toHaveLength(3);

package/src/composer/ComposerContextMenu.tsx

@@ -20,7 +20,6 @@ import {
 } from "../ui/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { formatAttachmentError } from "./attachment-accept.js";
-import { ComposerContextMenuSearch } from "./ComposerContextMenuSearch.js";
 import {
   ComposerContextPicker,
   type ComposerContextPickerConfig,
@@ -189,37 +188,6 @@ function ContextSubmenu({
   );
 }
 
-function ContextMenuPanel({
-  placeholder,
-  children,
-}: {
-  placeholder: string;
-  children: (query: string) => ReactNode;
-}) {
-  const [query, setQuery] = useState("");
-  return (
-    <>
-      <ComposerContextMenuSearch
-        placeholder={placeholder}
-        value={query}
-        onValueChange={setQuery}
-      />
-      {children(query)}
-    </>
-  );
-}
-
-function matchesEntry(entry: ComposerContextMenuItem, query: string): boolean {
-  const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
-  const text = [entry.label, ...(entry.keywords ?? [])]
-    .join(" ")
-    .toLocaleLowerCase();
-  return (
-    terms.every((term) => text.includes(term)) ||
-    Boolean(entry.children?.some((child) => matchesEntry(child, query)))
-  );
-}
-
 function LegacyContextPage({ children }: { children: ReactNode }) {
   const element = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -274,9 +242,6 @@ export function ComposerContextMenu({
   const label = t("agentChat.composer.addContext", {
     defaultValue: "Add context",
   });
-  const searchContext = t("agentChat.composer.searchContext", {
-    defaultValue: "Search context…",
-  });
   const uploadLabel = t("agentChat.composer.menu.uploadFile", {
     defaultValue: "Upload File",
   });
@@ -399,18 +364,7 @@ export function ComposerContextMenu({
               }}
             >
               {entry.children ? (
-                <ContextMenuPanel
-                  placeholder={entry.searchPlaceholder ?? searchContext}
-                >
-                  {(query) =>
-                    renderEntries(
-                      entry.children.filter((child) =>
-                        matchesEntry(child, query),
-                      ),
-                      branch,
-                    )
-                  }
-                </ContextMenuPanel>
+                renderEntries(entry.children, branch)
               ) : entry.picker ? (
                 <ComposerContextPicker
                   key={JSON.stringify([entry.id, entry.picker.scopeKey])}
@@ -522,59 +476,35 @@ export function ComposerContextMenu({
             restoreFocusOnClose.current = true;
           }}
         >
-          <ContextMenuPanel
-            placeholder={t("agentChat.composer.menu.search", {
-              defaultValue: "Search…",
-            })}
-          >
-            {(query) => (
-              <DropdownMenuGroup>
-                {addAttachment &&
-                  uploadLabel
-                    .toLocaleLowerCase()
-                    .includes(query.trim().toLocaleLowerCase()) && (
-                    <DropdownMenuItem
-                      onSelect={() => {
-                        changeOpen(false);
-                        inputRef.current?.click();
-                      }}
-                    >
-                      <IconFile size={16} />
-                      {uploadLabel}
-                    </DropdownMenuItem>
-                  )}
-                {items.length > 0 &&
-                  (label
-                    .toLocaleLowerCase()
-                    .includes(query.trim().toLocaleLowerCase()) ||
-                    items.some((item) => matchesEntry(item, query))) && (
-                    <ContextSubmenu
-                      label={label}
-                      icon={<IconTextRecognition size={16} />}
-                      open={contextOpen}
-                      onOpenChange={(next) => {
-                        setContextOpen(next);
-                        if (!next) {
-                          dismissPage();
-                          updatePath([]);
-                        }
-                      }}
-                    >
-                      <ContextMenuPanel placeholder={searchContext}>
-                        {(contextQuery) =>
-                          renderEntries(
-                            items.filter((item) =>
-                              matchesEntry(item, contextQuery),
-                            ),
-                            [],
-                          )
-                        }
-                      </ContextMenuPanel>
-                    </ContextSubmenu>
-                  )}
-              </DropdownMenuGroup>
+          <DropdownMenuGroup>
+            {addAttachment && (
+              <DropdownMenuItem
+                onSelect={() => {
+                  changeOpen(false);
+                  inputRef.current?.click();
+                }}
+              >
+                <IconFile size={16} />
+                {uploadLabel}
+              </DropdownMenuItem>
             )}
-          </ContextMenuPanel>
+            {items.length > 0 ? (
+              <ContextSubmenu
+                label={label}
+                icon={<IconTextRecognition size={16} />}
+                open={contextOpen}
+                onOpenChange={(next) => {
+                  setContextOpen(next);
+                  if (!next) {
+                    dismissPage();
+                    updatePath([]);
+                  }
+                }}
+              >
+                {renderEntries(items, [])}
+              </ContextSubmenu>
+            ) : null}
+          </DropdownMenuGroup>
         </DropdownMenuContent>
       </DropdownMenu>
       {dialog &&

package/src/composer/ComposerContextPicker.spec.tsx

@@ -242,7 +242,7 @@ describe("declarative context picker", () => {
     expect(menus()).toHaveLength(4);
     expect(menus().every((menu) => menu.classList.contains("w-64"))).toBe(true);
     const searches = document.querySelectorAll('input[role="searchbox"]');
-    expect(searches).toHaveLength(4);
+    expect(searches).toHaveLength(1);
     expect(document.querySelector('[role="combobox"]')).toBeNull();
     for (const input of searches)
       expect(input.hasAttribute("aria-controls")).toBe(false);

package/src/composer/PromptComposer.context.spec.tsx

@@ -44,7 +44,7 @@ describe("controlled composer context", () => {
       ),
     );
     const menu = document.querySelector('[role="menu"]')!;
-    expect(menu.querySelector('[role="searchbox"]')).not.toBeNull();
+    expect(menu.querySelector('[role="searchbox"]')).toBeNull();
     expect(menu.textContent).toBe("Upload File");
     await act(async () =>
       document.dispatchEvent(