@agent-native/core 0.88.0 → 0.90.1

package/corpus/templates/mail/app/pages/NotFound.tsx

@@ -1,8 +1,9 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconMail } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Button } from "@/components/ui/button";
+
 export function NotFound() {
   const t = useT();
   return (

package/corpus/templates/mail/app/pages/SettingsPage.tsx

@@ -5,36 +5,11 @@ import {
   useChangeVersions,
   ChangelogSettingsCard,
   LanguagePicker,
-  openAgentSettings,
+  useAgentSettingsTabs,
   useT,
 } from "@agent-native/core/client";
 import { appApiPath } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
-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";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import type {
   Alias,
   AutomationAction,
@@ -59,6 +34,7 @@ import {
   IconInfoCircle,
   IconHistory,
   IconSettings,
+  IconMessage2,
 } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState, useEffect, useRef, useMemo } from "react";
@@ -66,8 +42,34 @@ import { useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { GmailFiltersSection } from "@/components/settings/GmailFiltersSection";
+import { SnippetsSection } from "@/components/settings/SnippetsSection";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} 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 "@/components/ui/tooltip";
 import {
   useAliases,
   useCreateAlias,
@@ -1433,20 +1435,6 @@ function GeneralSection() {
           <LanguagePicker label={t("settings.languageLabel")} />
         </div>
       </div>
-
-      <div className="mt-4 max-w-2xl rounded-lg border border-border/20 bg-card/50 p-4">
-        <div className="mb-3">
-          <h3 className="text-[13px] font-semibold text-foreground">
-            {t("settings.agentTitle")}
-          </h3>
-          <p className="mt-0.5 text-[12px] text-muted-foreground">
-            {t("settings.agentDescription")}
-          </p>
-        </div>
-        <Button variant="outline" size="sm" onClick={() => openAgentSettings()}>
-          {t("settings.openAgentSettings")}
-        </Button>
-      </div>
     </div>
   );
 }
@@ -1473,26 +1461,19 @@ function WhatsNewSection() {
 
 // ─── Settings Page ────────────────────────────────────────────────────────────
 
-type SettingsSection =
-  | "general"
-  | "whats-new"
-  | "drafting"
-  | "automations"
-  | "gmail-filters"
-  | "aliases"
-  | "tracking"
-  | "slack"
-  | "team";
-
-const navItems: {
-  id: SettingsSection;
-  labelKey: string;
+type SettingsNavItem = {
+  id: string;
+  labelKey?: string;
+  label?: string;
   icon: React.ComponentType<{ className?: string }>;
-}[] = [
+};
+
+const navItems: SettingsNavItem[] = [
   { id: "general", labelKey: "settings.general", icon: IconSettings },
   { id: "team", labelKey: "settings.team", icon: IconUsers },
   { id: "whats-new", labelKey: "settings.whatsNew", icon: IconHistory },
   { id: "drafting", labelKey: "settings.drafting", icon: IconSignature },
+  { id: "snippets", labelKey: "settings.snippets", icon: IconMessage2 },
   { id: "automations", labelKey: "settings.automations", icon: IconBolt },
   { id: "gmail-filters", labelKey: "settings.gmailFilters", icon: IconFilter },
   { id: "aliases", labelKey: "settings.aliases", icon: IconUsers },
@@ -1500,27 +1481,34 @@ const navItems: {
   { id: "slack", labelKey: "settings.slack", icon: IconBolt },
 ];
 
-function isSettingsSection(value: string | null): value is SettingsSection {
-  return navItems.some((item) => item.id === value);
-}
-
 export function SettingsPage() {
   const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const navState = useNavigationState();
-  const [activeSection, setActiveSection] =
-    useState<SettingsSection>("general");
+  const agentSettingsTabs = useAgentSettingsTabs();
+  const [activeSection, setActiveSection] = useState<string>("general");
+  const allNavItems = useMemo<SettingsNavItem[]>(
+    () => [
+      ...navItems,
+      ...agentSettingsTabs.map((tab) => ({
+        id: tab.id,
+        label: tab.label,
+        icon: tab.icon ?? IconSettings,
+      })),
+    ],
+    [agentSettingsTabs],
+  );
 
   useEffect(() => {
     const section = searchParams.get("section");
-    if (!isSettingsSection(section)) return;
+    if (!section || !allNavItems.some((item) => item.id === section)) return;
     setActiveSection(section);
     setSearchParams((prev) => {
       const next = new URLSearchParams(prev);
       next.delete("section");
       return next;
     });
-  }, [searchParams, setSearchParams]);
+  }, [allNavItems, searchParams, setSearchParams]);
 
   useEffect(() => {
     navState.sync({ view: "settings", settingsSection: activeSection });
@@ -1529,11 +1517,13 @@ export function SettingsPage() {
   return (
     <div className="flex flex-1 flex-col sm:flex-row overflow-hidden">
       {/* Top tabs on mobile, left sidebar on desktop */}
-      <div className="sm:w-[200px] shrink-0 sm:border-e border-b sm:border-b-0 border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)] sm:p-3 flex sm:flex-col gap-0.5 overflow-x-auto">
-        {navItems.map((item) => {
+      <div className="sm:w-[200px] shrink-0 sm:border-e border-b sm:border-b-0 border-border/30 bg-muted/50 dark:bg-[var(--mail-sidebar-surface)] sm:p-3 flex sm:flex-col gap-0.5 overflow-x-auto">
+        {allNavItems.map((item) => {
           const Icon = item.icon;
           const isActive = activeSection === item.id;
-          const label = t(item.labelKey);
+          const label = item.labelKey
+            ? t(item.labelKey)
+            : (item.label ?? item.id);
           return (
             <button
               key={item.id}
@@ -1562,6 +1552,7 @@ export function SettingsPage() {
         {activeSection === "general" && <GeneralSection />}
         {activeSection === "whats-new" && <WhatsNewSection />}
         {activeSection === "drafting" && <DraftingSection />}
+        {activeSection === "snippets" && <SnippetsSection />}
         {activeSection === "automations" && <AutomationsSection />}
         {activeSection === "gmail-filters" && <GmailFiltersSection />}
         {activeSection === "aliases" && <AliasesSection />}
@@ -1575,6 +1566,13 @@ export function SettingsPage() {
             />
           </div>
         )}
+        {agentSettingsTabs.map((tab) =>
+          activeSection === tab.id ? (
+            <div key={tab.id} className="flex-1 overflow-y-auto p-4 sm:p-8">
+              {tab.content}
+            </div>
+          ) : null,
+        )}
       </div>
     </div>
   );

package/corpus/templates/mail/app/root.tsx

@@ -15,7 +15,6 @@ import {
   type LocaleCode,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -30,7 +29,9 @@ import {
 import type { LinksFunction } from "react-router";
 
 import { AppLayout } from "@/components/layout/AppLayout";
+import { Button } from "@/components/ui/button";
 import { Toaster } from "@/components/ui/sonner";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 import { markExternalEmailRefresh } from "@/hooks/use-emails";
 import { isMcpEmbedSurface } from "@/lib/mcp-embed";
 import { TAB_ID } from "@/lib/tab-id";
@@ -422,23 +423,25 @@ export default function Root() {
     }),
   );
   return (
-    <AppProviders
-      queryClient={queryClient}
-      themeAttribute={["class", "data-theme"]}
-      tooltipDelayDuration={300}
-      toaster={MAIL_TOASTER}
-      i18n={{ catalog: i18nCatalog }}
-    >
-      <RequireSession bypass={isMcpEmbedSurface()}>
-        <AutoFocus />
-        <AutomationTrigger />
-        <VisibilityRefresh />
-        <DbSyncSetup />
-        <AppLayout>
-          <Outlet />
-        </AppLayout>
-      </RequireSession>
-    </AppProviders>
+    <AppToolkitProvider>
+      <AppProviders
+        queryClient={queryClient}
+        themeAttribute={["class", "data-theme"]}
+        tooltipDelayDuration={300}
+        toaster={MAIL_TOASTER}
+        i18n={{ catalog: i18nCatalog }}
+      >
+        <RequireSession bypass={isMcpEmbedSurface()}>
+          <AutoFocus />
+          <AutomationTrigger />
+          <VisibilityRefresh />
+          <DbSyncSetup />
+          <AppLayout>
+            <Outlet />
+          </AppLayout>
+        </RequireSession>
+      </AppProviders>
+    </AppToolkitProvider>
   );
 }
 

package/corpus/templates/mail/app/routes/_index.tsx

@@ -1,6 +1,7 @@
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import { redirect } from "react-router";
 
+import { Spinner } from "@/components/ui/spinner";
+
 const SEO_TITLE =
   "Agent-Native Mail - Open Source AI email client and Superhuman alternative";
 const SEO_DESCRIPTION =

package/corpus/templates/mail/app/routes/email.tsx

@@ -1,11 +1,11 @@
 import { postNavigate, isInAgentEmbed, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import type { EmailMessage } from "@shared/types";
 import { IconExternalLink } from "@tabler/icons-react";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router";
 
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useThreadMessages } from "@/hooks/use-emails";
 import messages from "@/i18n/en-US";
 import { sanitizeHtml } from "@/lib/sanitize-html";

package/corpus/templates/mail/changelog/2026-07-06-a-queued-draft-can-no-longer-be-sent-twice-by-simultaneous-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-06
+---
+
+A queued draft can no longer be sent twice by simultaneous send attempts

package/corpus/templates/mail/changelog/2026-07-06-bulk-archive-trash-star-and-mark-read-now-complete-in-one-fa.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Bulk archive, trash, star, and mark-read now complete in one fast batch

package/corpus/templates/mail/changelog/2026-07-06-dark-mode-sidebars-and-notifications-now-use-the-softer-gray.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Dark mode sidebars and notifications now use the softer gray Mail theme.

package/corpus/templates/mail/changelog/2026-07-06-inbox-automations-pick-up-new-mail-faster.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Inbox automations pick up new mail faster

package/corpus/templates/mail/changelog/2026-07-06-inbox-lists-stay-fast-as-scheduled-and-snoozed-mail-accumula.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Inbox lists stay fast as scheduled and snoozed mail accumulates

package/corpus/templates/mail/changelog/2026-07-06-long-inboxes-scroll-smoothly-and-stay-fast-as-more-mail-load.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Long inboxes scroll smoothly and stay fast as more mail loads

package/corpus/templates/mail/changelog/2026-07-06-paste-or-drop-images-straight-into-the-composer-to-send-them.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-06
+---
+
+Paste or drop images straight into the composer to send them inline

package/corpus/templates/mail/changelog/2026-07-06-save-reusable-snippets-and-insert-them-from-the-compose-slas.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-06
+---
+
+Save reusable snippets and insert them from the compose slash menu

package/corpus/templates/mail/changelog/2026-07-06-scrolling-older-mail-keeps-loading-correctly-when-no-gmail-a.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-06
+---
+
+Scrolling older mail keeps loading correctly when no Gmail account is connected

package/corpus/templates/mail/changelog/2026-07-06-search-shows-instant-matches-from-already-loaded-mail-while-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-06
+---
+
+Search shows instant matches from already-loaded mail while Gmail search runs

package/corpus/templates/mail/changelog/2026-07-06-sends-now-fail-with-a-clear-error-instead-of-quietly-missing.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-06
+---
+
+Sends now fail with a clear error instead of quietly missing attachments

package/corpus/templates/mail/changelog/2026-07-06-the-mail-header-no-longer-shows-the-global-notifications-bel.md

@@ -0,0 +1,6 @@
+---
+type: removed
+date: 2026-07-06
+---
+
+The mail header no longer shows the global notifications bell.

package/corpus/templates/mail/package.json

@@ -21,6 +21,7 @@
     "@fontsource-variable/inter": "^5.2.8",
     "@libsql/client": "^0.15.0",
     "@tabler/icons-react": "catalog:",
+    "@tanstack/react-virtual": "^3.14.5",
     "chrono-node": "^2.7.6",
     "drizzle-orm": "^0.45.2",
     "embla-carousel-react": "^8.6.0",

package/corpus/templates/mail/server/db/schema.ts

@@ -59,6 +59,15 @@ export const emailLinkTracking = table("email_link_tracking", {
   lastClickedAt: integer("last_clicked_at"),
 });
 
+export const snippets = table("snippets", {
+  id: text("id").primaryKey(),
+  ownerEmail: text("owner_email").notNull(),
+  name: text("name").notNull(),
+  body: text("body").notNull(),
+  createdAt: integer("created_at").notNull(),
+  updatedAt: integer("updated_at").notNull(),
+});
+
 export const queuedEmailDrafts = table("queued_email_drafts", {
   id: text("id").primaryKey(),
   orgId: text("org_id").notNull(),
@@ -76,6 +85,8 @@ export const queuedEmailDrafts = table("queued_email_drafts", {
   accountEmail: text("account_email"),
   composeId: text("compose_id"),
   sentMessageId: text("sent_message_id"),
+  sendClaimId: text("send_claim_id"),
+  sendClaimedAt: integer("send_claimed_at"),
   status: text("status", {
     enum: ["queued", "in_review", "sent", "dismissed"],
   })

package/corpus/templates/mail/server/handlers/emails.ts

@@ -637,7 +637,26 @@ export const listEmails = defineEventHandler(async (event: H3Event) => {
     (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
   );
 
-  return { emails };
+  // Paginate the same way the Gmail-connected branch above does, so local/demo
+  // mode doesn't load the entire filtered list in one unbounded response and
+  // infinite scroll (which relies on nextPageToken) actually has a next page.
+  const { pageToken: localPageToken } = getQuery(event) as {
+    pageToken?: string;
+  };
+  const offset = (() => {
+    const n = Number(localPageToken);
+    return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
+  })();
+  const page = emails.slice(offset, offset + pageLimit);
+  const nextOffset = offset + pageLimit;
+  const nextPageToken =
+    nextOffset < emails.length ? String(nextOffset) : undefined;
+
+  return {
+    emails: page,
+    ...(nextPageToken && { nextPageToken }),
+    totalEstimate: emails.length,
+  };
 });
 
 // ─── Thread messages ─────────────────────────────────────────────────────────

package/corpus/templates/mail/server/lib/automation-engine.ts

@@ -24,6 +24,7 @@ import {
   createOAuth2Client,
   gmailListMessages,
   gmailGetMessage,
+  gmailBatchGetMessages,
   gmailListHistory,
   gmailGetProfile,
 } from "./google-api.js";
@@ -272,34 +273,61 @@ async function fetchNewInboxMessages(
     return { messages: [], newHistoryId };
   }
 
-  // Fetch metadata for each message
-  const messages: EmailSummary[] = [];
-  for (const id of messageIds) {
-    try {
-      const msg = await gmailGetMessage(accessToken, id, "metadata");
-      const headers = msg.payload?.headers || [];
-      const getHeader = (name: string) =>
-        headers.find((h: any) => h.name.toLowerCase() === name.toLowerCase())
-          ?.value || "";
-
-      messages.push({
-        id: msg.id,
-        threadId: msg.threadId || msg.id,
-        from: getHeader("From"),
-        to: getHeader("To"),
-        subject: getHeader("Subject"),
-        snippet: msg.snippet || "",
-        labelIds: msg.labelIds || [],
-        date: getHeader("Date"),
-      });
-    } catch (err: any) {
-      console.error(
-        `[automation-engine] Failed to fetch message ${id}:`,
-        err.message,
-      );
+  // Fetch metadata for all messages in one batched call instead of one
+  // request per message.
+  const batchResults = await gmailBatchGetMessages(
+    accessToken,
+    messageIds,
+    "metadata",
+  );
+
+  // Gmail's batch endpoint can return fewer sub-responses than sub-requests
+  // when it rate-limits mid-batch. Refill any gaps with individual gets so a
+  // transient partial batch doesn't drop messages a full per-message loop
+  // would have caught.
+  const missing = batchResults.filter((r) => !r.data).map((r) => r.id);
+  if (missing.length > 0) {
+    const refills = await Promise.all(
+      missing.map(async (id) => {
+        try {
+          const data = await gmailGetMessage(accessToken, id, "metadata");
+          return { id, data };
+        } catch (err: any) {
+          console.error(
+            `[automation-engine] Failed to fetch message ${id}:`,
+            err.message,
+          );
+          return { id, data: null as any };
+        }
+      }),
+    );
+    const byId = new Map(refills.map((r) => [r.id, r.data]));
+    for (const r of batchResults) {
+      if (!r.data && byId.has(r.id)) r.data = byId.get(r.id);
     }
   }
 
+  const messages: EmailSummary[] = [];
+  for (const r of batchResults) {
+    if (!r.data) continue;
+    const msg = r.data;
+    const headers = msg.payload?.headers || [];
+    const getHeader = (name: string) =>
+      headers.find((h: any) => h.name.toLowerCase() === name.toLowerCase())
+        ?.value || "";
+
+    messages.push({
+      id: msg.id,
+      threadId: msg.threadId || msg.id,
+      from: getHeader("From"),
+      to: getHeader("To"),
+      subject: getHeader("Subject"),
+      snippet: msg.snippet || "",
+      labelIds: msg.labelIds || [],
+      date: getHeader("Date"),
+    });
+  }
+
   return { messages, newHistoryId };
 }