@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/mail/app/components/email/SendLaterButton.tsx

@@ -1,12 +1,13 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
+import { IconSend, IconChevronDown, IconCalendar } from "@tabler/icons-react";
+import { useState, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import { IconSend, IconChevronDown, IconCalendar } from "@tabler/icons-react";
-import { useState, useRef } from "react";
+} from "@/components/ui/popover";
 
 interface SendLaterButtonProps {
   onSend: () => void;

package/corpus/templates/mail/app/components/email/SnoozeModal.tsx

@@ -1,9 +1,9 @@
 import { useT } from "@agent-native/core/client";
-import { Dialog, DialogContent } from "@agent-native/toolkit/ui/dialog";
 import { IconClock } from "@tabler/icons-react";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { toast } from "sonner";
 
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useParseDate, useSnoozeEmail } from "@/hooks/use-scheduled-jobs";
 import { cn } from "@/lib/utils";

package/corpus/templates/mail/app/components/email/SnoozePopover.tsx

@@ -1,14 +1,14 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
 import { IconAlarm } from "@tabler/icons-react";
 import { useState, useEffect, useRef } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { useParseDate, useSnoozeEmail } from "@/hooks/use-scheduled-jobs";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/mail/app/components/layout/AppLayout.tsx

@@ -3,25 +3,12 @@ import {
   AgentToggleButton,
   DevDatabaseLink,
   FeedbackButton,
-  NotificationsBell,
   agentNativePath,
   useT,
 } from "@agent-native/core/client";
 import { appApiPath } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from "@agent-native/toolkit/ui/popover";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import { normalizeMailLabel } from "@shared/gmail-labels";
 import type { Label } from "@shared/types";
 import {
@@ -52,6 +39,18 @@ import { ComposeModal } from "@/components/email/ComposeModal";
 import { SnoozeModal } from "@/components/email/SnoozeModal";
 import { GoogleConnectBanner } from "@/components/GoogleConnectBanner";
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { AccountFilterContext } from "@/hooks/use-account-filter";
 import { useComposeState } from "@/hooks/use-compose-state";
 import { useQueuedDraftCount } from "@/hooks/use-draft-queue";
@@ -1299,8 +1298,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             <TooltipContent>{t("mail.toolbar.refreshInbox")}</TooltipContent>
           </Tooltip>
 
-          <NotificationsBell />
-
           {/* Compose — prominent outline button */}
           <Tooltip>
             <TooltipTrigger asChild>
@@ -1416,13 +1413,13 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           <>
             {(!sidebarPinned || isMobile) && (
               <div
-                className="fixed inset-0 z-30 bg-black/20"
+                className="fixed inset-0 z-30 bg-[var(--mail-overlay-scrim)]"
                 onClick={() => setSidebarOpen(false)}
               />
             )}
             <div
               className={cn(
-                "flex flex-col overflow-hidden bg-background/85 backdrop-blur-2xl border-e border-border/30 shadow-2xl transition-[width] duration-200 ease-out",
+                "flex flex-col overflow-hidden bg-[var(--mail-drawer-surface)] backdrop-blur-2xl border-e border-border/30 shadow-2xl transition-[width] duration-200 ease-out",
                 showCollapsedSidebar ? "w-12" : "w-64",
                 sidebarPinned && !isMobile
                   ? "absolute start-0 top-12 bottom-0 z-10"
@@ -1946,8 +1943,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
 /**
  * Slim chrome used on secondary pages. Renders a clean h-12 header (title +
- * AgentToggleButton + NotificationsBell) instead of the inbox-specific top bar
- * (tabs, search, account stack, compose pen, etc.).
+ * AgentToggleButton) instead of the inbox-specific top bar (tabs, search,
+ * account stack, compose pen, etc.).
  *
  * Pages can hoist a custom title or right-side actions via
  * `useSetPageTitle` / `useSetHeaderActions` from `./HeaderActions`.
@@ -1962,7 +1959,7 @@ function StandardLayout({ children }: AppLayoutProps) {
   const view = location.pathname.split("/").filter(Boolean)[0] || "";
 
   // Extensions (`/extensions` list and `/extensions/:id` viewer) render their own h-12
-  // toolbar with NotificationsBell + AgentToggleButton inside the shared
+  // toolbar inside the shared
   // ExtensionViewer / ExtensionsListPage components. Skip our header to avoid stacking.
   const pageOwnsToolbar =
     location.pathname === "/extensions" ||
@@ -2003,7 +2000,6 @@ function StandardLayout({ children }: AppLayoutProps) {
           </div>
           <div className="flex shrink-0 items-center gap-2">
             {headerActions}
-            <NotificationsBell />
             <AgentToggleButton />
           </div>
         </header>
@@ -2012,10 +2008,10 @@ function StandardLayout({ children }: AppLayoutProps) {
       {sidebarOpen && (
         <>
           <div
-            className="fixed inset-0 z-30 bg-black/20"
+            className="fixed inset-0 z-30 bg-[var(--mail-overlay-scrim)]"
             onClick={() => setSidebarOpen(false)}
           />
-          <div className="fixed start-0 top-0 bottom-0 z-40 flex w-64 flex-col overflow-hidden bg-background/70 backdrop-blur-2xl border-e border-border/30 shadow-2xl">
+          <div className="fixed start-0 top-0 bottom-0 z-40 flex w-64 flex-col overflow-hidden bg-[var(--mail-drawer-surface)] backdrop-blur-2xl border-e border-border/30 shadow-2xl">
             <div className="min-h-0 flex-1 overflow-y-auto p-4">
               <div className="space-y-0.5">
                 {[

package/corpus/templates/mail/app/components/layout/HeaderActions.tsx

@@ -56,11 +56,19 @@ export function useSetPageTitle(node: ReactNode) {
 
 export function useSetHeaderActions(node: ReactNode) {
   useEffect(() => {
-    currentActions = node;
-    notify();
-    return () => {
-      currentActions = null;
+    // Callers may pass a fresh-but-equivalent node (e.g. `null` from a
+    // conditional) on every render; only broadcast when the reference the
+    // store holds actually changes so unrelated re-renders of the caller
+    // don't force every header subscriber to re-render too.
+    if (currentActions !== node) {
+      currentActions = node;
       notify();
+    }
+    return () => {
+      if (currentActions === node) {
+        currentActions = null;
+        notify();
+      }
     };
   });
 }

package/corpus/templates/mail/app/components/layout/SearchBar.tsx

@@ -1,10 +1,7 @@
 import { useT } from "@agent-native/core/client";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { IconX } from "@tabler/icons-react";
+import type { EmailMessage } from "@shared/types";
+import { IconLoader2, IconX } from "@tabler/icons-react";
+import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 import {
   useState,
   useRef,
@@ -15,9 +12,23 @@ import {
 } from "react";
 import { useNavigate } from "react-router";
 
-import { useContacts, type Contact } from "@/hooks/use-emails";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  useContacts,
+  type Contact,
+  type InfiniteEmails,
+} from "@/hooks/use-emails";
+import { ensureThread } from "@/lib/thread-cache";
+import { groupIntoThreads, type ThreadSummary } from "@/lib/threads";
 import { cn } from "@/lib/utils";
 
+const LOCAL_MATCH_LIMIT = 8;
+const MIN_REMOTE_QUERY_LENGTH = 3;
+
 interface SearchBarProps {
   onClose: () => void;
   initialQuery?: string;
@@ -42,6 +53,7 @@ export function SearchBar({
   const lastSyncedQueryRef = useRef(initialQuery);
 
   const { data: contacts = [] } = useContacts();
+  const queryClient = useQueryClient();
 
   // Sync from URL when it changes externally (e.g. browser back/forward).
   // Track the last prop we absorbed so user typing isn't clobbered when the
@@ -65,12 +77,46 @@ export function SearchBar({
       .slice(0, 6);
   }, [query, contacts]);
 
-  const showDropdown = isFocused && matchedContacts.length > 0;
+  // Instant local matches over already-cached email pages (subject/from/snippet
+  // substring), so something shows up before the debounced remote Gmail search
+  // fires and while it's in flight. Cheap and quota-free — no network call.
+  const localMatches = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q || q.length < 2) return [];
+    const cached = queryClient.getQueriesData<InfiniteEmails>({
+      queryKey: ["emails"],
+    });
+    const seenThreadIds = new Set<string>();
+    const messages: EmailMessage[] = [];
+    for (const [, data] of cached) {
+      for (const page of data?.pages ?? []) {
+        for (const email of page.emails) {
+          const threadKey = email.threadId || email.id;
+          if (seenThreadIds.has(threadKey)) continue;
+          const haystack =
+            `${email.subject} ${email.from.name} ${email.from.email} ${email.snippet}`.toLowerCase();
+          if (!haystack.includes(q)) continue;
+          seenThreadIds.add(threadKey);
+          messages.push(email);
+        }
+      }
+    }
+    return groupIntoThreads(messages).slice(0, LOCAL_MATCH_LIMIT);
+  }, [query, queryClient]);
+
+  // True while a live Gmail search for the current query is in flight, so we
+  // can show a "searching Gmail" row under the instant local matches.
+  const remoteSearchPending =
+    useIsFetching({ queryKey: ["emails", "all", query.trim()] }) > 0;
+
+  const showLocalResults = isFocused && query.trim().length >= 2;
+  const showDropdown =
+    isFocused && (matchedContacts.length > 0 || showLocalResults);
 
   // Reset selection when matches change
   useEffect(() => {
     setSelectedIndex(-1);
-  }, [matchedContacts.length]);
+  }, [matchedContacts.length, localMatches.length]);
 
   const executeSearch = useCallback(
     (q: string) => {
@@ -94,27 +140,43 @@ export function SearchBar({
     [navigate],
   );
 
-  // Debounced auto-search as you type (only for text queries, not contact selection)
+  const selectThread = useCallback(
+    (thread: ThreadSummary) => {
+      const email = thread.latestMessage;
+      const targetThreadId = email.threadId || email.id;
+      void ensureThread(targetThreadId, email.accountEmail).catch(() => {});
+      navigate(`/all/${targetThreadId}`);
+      inputRef.current?.blur();
+    },
+    [navigate],
+  );
+
+  // Debounced auto-search as you type (only for text queries, not contact
+  // selection). Kept at 400ms and gated to 3+ chars — Gmail's per-user search
+  // quota is tight, so this must not fire a live round trip per keystroke.
+  // Instant local matches (above) cover the gap while this waits/runs.
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     const q = query.trim();
-    if (q.length >= 3) {
+    if (q.length >= MIN_REMOTE_QUERY_LENGTH) {
       debounceRef.current = setTimeout(() => {
         executeSearch(q);
-      }, 700);
+      }, 400);
     }
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, [query, executeSearch]);
 
+  // Combined keyboard-navigable list: contacts first, then instant local
+  // thread matches, matching the visual order of the dropdown.
+  const combinedMatchCount = matchedContacts.length + localMatches.length;
+
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
       if (showDropdown) {
-        setSelectedIndex((prev) =>
-          Math.min(prev + 1, matchedContacts.length - 1),
-        );
+        setSelectedIndex((prev) => Math.min(prev + 1, combinedMatchCount - 1));
       }
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
@@ -123,11 +185,18 @@ export function SearchBar({
       }
     } else if (e.key === "Enter") {
       e.preventDefault();
-      if (selectedIndex >= 0 && matchedContacts[selectedIndex]) {
+      if (selectedIndex >= 0 && selectedIndex < matchedContacts.length) {
         selectContact(matchedContacts[selectedIndex]);
-      } else {
+      } else if (selectedIndex >= matchedContacts.length) {
+        const thread = localMatches[selectedIndex - matchedContacts.length];
+        if (thread) selectThread(thread);
+      } else if (query.trim().length >= MIN_REMOTE_QUERY_LENGTH) {
         executeSearch(query);
         inputRef.current?.blur();
+      } else if (localMatches[0]) {
+        // Below the remote-search minimum: only ever run the local filter,
+        // never a live Gmail round trip for a 1-2 char query.
+        selectThread(localMatches[0]);
       }
     } else if (e.key === "Escape") {
       e.preventDefault();
@@ -220,7 +289,7 @@ export function SearchBar({
         )}
       </div>
 
-      {/* Contact suggestions dropdown */}
+      {/* Contact + instant local-match suggestions dropdown */}
       {showDropdown && (
         <div
           data-search-dropdown
@@ -253,6 +322,57 @@ export function SearchBar({
               )}
             </button>
           ))}
+
+          {showLocalResults && localMatches.length > 0 && (
+            <div
+              className={cn(
+                "border-border/60",
+                matchedContacts.length > 0 && "border-t",
+              )}
+            >
+              <div className="px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">
+                {t("mail.search.localResults")}
+              </div>
+              {localMatches.map((thread, i) => {
+                const combinedIndex = matchedContacts.length + i;
+                const email = thread.latestMessage;
+                return (
+                  <button
+                    key={email.threadId || email.id}
+                    data-contact-item
+                    type="button"
+                    tabIndex={-1}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      selectThread(thread);
+                    }}
+                    onMouseEnter={() => setSelectedIndex(combinedIndex)}
+                    className={cn(
+                      "flex w-full items-center gap-2 px-3 py-2 text-start text-[13px]",
+                      combinedIndex === selectedIndex && "bg-accent",
+                    )}
+                  >
+                    <span className="min-w-0 flex-1 truncate text-foreground/90">
+                      {highlight(
+                        email.subject || email.from.name,
+                        query.trim(),
+                      )}
+                    </span>
+                    <span className="shrink-0 truncate max-w-[35%] text-muted-foreground text-xs">
+                      {email.from.name || email.from.email}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {showLocalResults && remoteSearchPending && (
+            <div className="flex items-center gap-2 border-t border-border/60 px-3 py-2 text-[12px] text-muted-foreground">
+              <IconLoader2 className="h-3 w-3 animate-spin" />
+              {t("mail.search.searchingGmail")}
+            </div>
+          )}
         </div>
       )}
     </div>

package/corpus/templates/mail/app/components/settings/GmailFiltersSection.tsx

@@ -1,4 +1,19 @@
 import { useT } from "@agent-native/core/client";
+import type { ManagedGmailFilter } from "@shared/types";
+import {
+  IconArchive,
+  IconFilter,
+  IconLoader2,
+  IconPencil,
+  IconPlus,
+  IconShieldCheck,
+  IconStar,
+  IconTag,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import type { ComponentType } from "react";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -8,39 +23,24 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
-import { Switch } from "@agent-native/toolkit/ui/switch";
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import type { ManagedGmailFilter } from "@shared/types";
-import {
-  IconArchive,
-  IconFilter,
-  IconLoader2,
-  IconPencil,
-  IconPlus,
-  IconShieldCheck,
-  IconStar,
-  IconTag,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-import type { ComponentType } from "react";
-
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+} from "@/components/ui/tooltip";
 import {
   useCreateGmailFilter,
   useDeleteGmailFilter,