@agent-native/core 0.90.11 → 0.91.1

package/corpus/templates/design/server/lib/verify-write-grant.ts

@@ -59,7 +59,8 @@ export async function verifyWriteGrant(
   if (!grant) {
     throw new Error(
       "No localhost write-consent grant found for this design + connection. " +
-        "The user must approve writes via the LocalhostWriteConsentDialog first.",
+        "Call request-localhost-write-consent to prompt the user, then retry " +
+        "this write after they click 'Allow writes'.",
     );
   }
 
@@ -67,7 +68,8 @@ export async function verifyWriteGrant(
   if (grant.grantedUntil < now) {
     throw new Error(
       `Localhost write-consent grant expired at ${grant.grantedUntil}. ` +
-        "Request a new grant via the LocalhostWriteConsentDialog.",
+        "Call request-localhost-write-consent to prompt the user for a new " +
+        "grant, then retry this write.",
     );
   }
 

package/corpus/templates/dispatch/app/routes/settings.tsx

@@ -4,6 +4,7 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 import { Button } from "@agent-native/dispatch/components/ui/button";
@@ -15,6 +16,7 @@ import {
   CardTitle,
 } from "@agent-native/dispatch/components/ui/card";
 import { Label } from "@agent-native/dispatch/components/ui/label";
+import { useMemo } from "react";
 import { Link } from "react-router";
 
 import { messagesByLocale } from "@/i18n-data";
@@ -29,16 +31,35 @@ export default function SettingsRoute() {
   const t = useT();
   const agentSettingsTabs = useAgentSettingsTabs();
 
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "dispatch-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
+      {
+        id: "dispatch-workspace",
+        label: t("settings.workspaceTitle"),
+        keywords: "workspace resources integrations vault destinations",
+        hash: "workspace-resources",
+      },
+    ],
+    [t],
+  );
+
   return (
     <SettingsTabsPage
       extraTabs={agentSettingsTabs}
+      generalSearchEntries={generalSearchEntries}
       general={
         <div className="mx-auto w-full max-w-3xl space-y-6">
           <p className="text-sm leading-6 text-muted-foreground">
             {t("settings.description")}
           </p>
 
-          <Card>
+          <Card id="language" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}
@@ -53,7 +74,7 @@ export default function SettingsRoute() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card id="workspace-resources" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.workspaceTitle")}

package/corpus/templates/dispatch/changelog/2026-07-08-settings-are-cleaner-and-searchable.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are cleaner and searchable, with a consistent navigation that jumps straight to any setting.

package/corpus/templates/forms/app/routes/_app.settings.tsx

@@ -4,9 +4,11 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { useMemo } from "react";
 
 import {
   Card,
@@ -29,17 +31,30 @@ export default function SettingsRoute() {
   const agentSettingsTabs = useAgentSettingsTabs();
   useSetPageTitle(t("settings.title"));
 
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "forms-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
+    ],
+    [t],
+  );
+
   return (
     <SettingsTabsPage
       teamLabel={t("navigation.team")}
       extraTabs={agentSettingsTabs}
+      generalSearchEntries={generalSearchEntries}
       general={
         <div className="mx-auto w-full max-w-3xl space-y-6">
           <p className="text-sm leading-6 text-muted-foreground">
             {t("settings.description")}
           </p>
 
-          <Card>
+          <Card id="language" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}

package/corpus/templates/forms/changelog/2026-07-08-settings-are-cleaner-and-searchable.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are cleaner and searchable, with a consistent navigation that jumps straight to any setting.

package/corpus/templates/macros/app/routes/settings.tsx

@@ -4,9 +4,11 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { useMemo } from "react";
 
 import {
   Card,
@@ -29,17 +31,30 @@ export default function SettingsRoute() {
   const agentSettingsTabs = useAgentSettingsTabs();
   useSetPageTitle(t("settings.title"));
 
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "macros-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
+    ],
+    [t],
+  );
+
   return (
     <SettingsTabsPage
       teamLabel={t("team.title")}
       extraTabs={agentSettingsTabs}
+      generalSearchEntries={generalSearchEntries}
       general={
         <div className="mx-auto w-full max-w-3xl space-y-6">
           <p className="text-sm leading-6 text-muted-foreground">
             {t("settings.description")}
           </p>
 
-          <Card>
+          <Card id="language" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}

package/corpus/templates/macros/changelog/2026-07-08-settings-are-cleaner-and-searchable.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are cleaner and searchable, with a consistent navigation that jumps straight to any setting.

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

@@ -554,7 +554,7 @@ export function GmailFiltersSection() {
   );
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+    <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h2 className="text-[16px] font-semibold text-foreground">

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

@@ -231,7 +231,7 @@ export function SnippetsSection() {
   };
 
   return (
-    <div className="flex-1 p-4 sm:p-8 overflow-y-auto">
+    <div>
       <div className="flex items-center justify-between mb-6">
         <div>
           <h2 className="text-[16px] font-semibold text-foreground">

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

@@ -5,8 +5,11 @@ import {
   useChangeVersions,
   ChangelogSettingsCard,
   LanguagePicker,
+  SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
+  type SettingsTabItem,
 } from "@agent-native/core/client";
 import { appApiPath } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
@@ -32,8 +35,6 @@ import {
   IconSignature,
   IconFilter,
   IconInfoCircle,
-  IconHistory,
-  IconSettings,
   IconMessage2,
 } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -328,7 +329,7 @@ function AliasesSection() {
   };
 
   return (
-    <div className="flex-1 p-4 sm:p-8 overflow-y-auto">
+    <div>
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
@@ -938,7 +939,7 @@ function AutomationsSection() {
   };
 
   return (
-    <div className="flex-1 p-4 sm:p-8 overflow-y-auto">
+    <div>
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
@@ -1115,7 +1116,7 @@ function DraftingSection() {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+    <div>
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
           {t("settings.drafting")}
@@ -1252,7 +1253,7 @@ function TrackingSection() {
   };
 
   return (
-    <div className="flex-1 p-4 sm:p-8 overflow-y-auto">
+    <div>
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
           {t("settings.tracking")}
@@ -1334,7 +1335,7 @@ function SlackIntakeSection() {
     : t("settings.slackNeedsCredentials");
 
   return (
-    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+    <div>
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
           {t("settings.slackIntake")}
@@ -1412,7 +1413,7 @@ function SlackIntakeSection() {
 function GeneralSection() {
   const t = useT();
   return (
-    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+    <div>
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
           {t("settings.general")}
@@ -1422,7 +1423,10 @@ function GeneralSection() {
         </p>
       </div>
 
-      <div className="max-w-2xl rounded-lg border border-border/20 bg-card/50 p-4">
+      <div
+        id="language"
+        className="max-w-2xl scroll-mt-4 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.languageTitle")}
@@ -1442,7 +1446,7 @@ function GeneralSection() {
 function WhatsNewSection() {
   const t = useT();
   return (
-    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+    <div>
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
           {t("settings.whatsNew")}
@@ -1461,119 +1465,133 @@ function WhatsNewSection() {
 
 // ─── Settings Page ────────────────────────────────────────────────────────────
 
-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 },
-  { id: "tracking", labelKey: "settings.tracking", icon: IconChartBar },
-  { id: "slack", labelKey: "settings.slack", icon: IconBolt },
-];
-
 export function SettingsPage() {
   const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const navState = useNavigationState();
   const agentSettingsTabs = useAgentSettingsTabs();
   const [activeSection, setActiveSection] = useState<string>("general");
-  const allNavItems = useMemo<SettingsNavItem[]>(
+
+  const mailTabs = useMemo<SettingsTabItem[]>(
     () => [
-      ...navItems,
-      ...agentSettingsTabs.map((tab) => ({
-        id: tab.id,
-        label: tab.label,
-        icon: tab.icon ?? IconSettings,
-      })),
+      {
+        id: "drafting",
+        label: t("settings.drafting"),
+        icon: IconSignature,
+        content: <DraftingSection />,
+        keywords: "signature writing style compose reply draft",
+      },
+      {
+        id: "snippets",
+        label: t("settings.snippets"),
+        icon: IconMessage2,
+        content: <SnippetsSection />,
+        keywords: "snippets templates canned responses shortcuts",
+      },
+      {
+        id: "automations",
+        label: t("settings.automations"),
+        icon: IconBolt,
+        content: <AutomationsSection />,
+        keywords: "automations rules triggers events labels model",
+      },
+      {
+        id: "gmail-filters",
+        label: t("settings.gmailFilters"),
+        icon: IconFilter,
+        content: <GmailFiltersSection />,
+        keywords: "gmail filters import rules",
+      },
+      {
+        id: "aliases",
+        label: t("settings.aliases"),
+        icon: IconUsers,
+        content: <AliasesSection />,
+        keywords: "aliases groups distribution lists recipients",
+      },
+      {
+        id: "tracking",
+        label: t("settings.tracking"),
+        icon: IconChartBar,
+        content: <TrackingSection />,
+        keywords: "tracking opens clicks pixel analytics",
+      },
+      {
+        id: "slack",
+        label: t("settings.slack"),
+        icon: IconBolt,
+        content: <SlackIntakeSection />,
+        keywords: "slack intake integration webhook",
+      },
+    ],
+    [t],
+  );
+
+  const extraTabs = useMemo<SettingsTabItem[]>(
+    () => [...mailTabs, ...agentSettingsTabs],
+    [agentSettingsTabs, mailTabs],
+  );
+
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "mail-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
     ],
-    [agentSettingsTabs],
+    [t],
   );
 
+  const validSectionIds = useMemo(() => {
+    const ids = new Set<string>(["general", "team", "whats-new"]);
+    for (const tab of extraTabs) ids.add(tab.id);
+    return ids;
+  }, [extraTabs]);
+
+  // Deep links arrive as /settings?section=<id> (e.g. from the agent's
+  // navigate action). Adopt that section, then strip the param so later tab
+  // switches aren't overridden by a stale query value.
   useEffect(() => {
     const section = searchParams.get("section");
-    if (!section || !allNavItems.some((item) => item.id === section)) return;
+    if (!section || !validSectionIds.has(section)) return;
     setActiveSection(section);
-    setSearchParams((prev) => {
-      const next = new URLSearchParams(prev);
-      next.delete("section");
-      return next;
-    });
-  }, [allNavItems, searchParams, setSearchParams]);
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        next.delete("section");
+        return next;
+      },
+      { replace: true },
+    );
+  }, [searchParams, setSearchParams, validSectionIds]);
 
+  // Keep app state aware of the visible settings section for the agent.
   useEffect(() => {
     navState.sync({ view: "settings", settingsSection: activeSection });
   }, [activeSection]); // eslint-disable-line react-hooks/exhaustive-deps
 
   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-[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 = item.labelKey
-            ? t(item.labelKey)
-            : (item.label ?? item.id);
-          return (
-            <button
-              key={item.id}
-              onClick={() => setActiveSection(item.id)}
-              className={cn(
-                "flex items-center gap-2.5 sm:w-full rounded-md px-3 sm:px-2.5 py-2.5 sm:py-2 text-[13px] transition-colors text-start whitespace-nowrap",
-                isActive
-                  ? "bg-blue-500/15 text-blue-400 font-medium"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
-              )}
-            >
-              <Icon
-                className={cn(
-                  "h-4 w-4 shrink-0",
-                  isActive ? "text-blue-400" : "text-muted-foreground/60",
-                )}
-              />
-              {label}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Right content panel */}
-      <div className="flex flex-1 overflow-hidden bg-background">
-        {activeSection === "general" && <GeneralSection />}
-        {activeSection === "whats-new" && <WhatsNewSection />}
-        {activeSection === "drafting" && <DraftingSection />}
-        {activeSection === "snippets" && <SnippetsSection />}
-        {activeSection === "automations" && <AutomationsSection />}
-        {activeSection === "gmail-filters" && <GmailFiltersSection />}
-        {activeSection === "aliases" && <AliasesSection />}
-        {activeSection === "tracking" && <TrackingSection />}
-        {activeSection === "slack" && <SlackIntakeSection />}
-        {activeSection === "team" && (
-          <div className="flex-1 overflow-y-auto">
-            <TeamPage
-              showTitle={false}
-              createOrgDescription={t("settings.teamDescription")}
-            />
-          </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>
+    <SettingsTabsPage
+      className="flex-1"
+      generalLabel={t("settings.general")}
+      teamLabel={t("settings.team")}
+      whatsNewLabel={t("settings.whatsNew")}
+      extraTabs={extraTabs}
+      generalSearchEntries={generalSearchEntries}
+      value={activeSection}
+      onValueChange={setActiveSection}
+      general={<GeneralSection />}
+      team={
+        <div className="mx-auto w-full max-w-3xl">
+          <TeamPage
+            showTitle={false}
+            createOrgDescription={t("settings.teamDescription")}
+          />
+        </div>
+      }
+      whatsNew={<WhatsNewSection />}
+    />
   );
 }

package/corpus/templates/mail/changelog/2026-07-08-settings-redesigned-with-a-consistent-searchable-layout.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are redesigned with a consistent, edge-to-edge navigation and a search box that jumps straight to any setting.

package/corpus/templates/plan/app/routes/settings.tsx

@@ -4,9 +4,11 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { useMemo } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -30,17 +32,36 @@ export default function SettingsRoute() {
   const agentSettingsTabs = useAgentSettingsTabs();
   useSetPageTitle(t("settings.title"));
 
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "plan-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
+      {
+        id: "plan-editor",
+        label: t("settings.editorTitle"),
+        keywords: "editor extension vscode ide",
+        hash: "editor",
+      },
+    ],
+    [t],
+  );
+
   return (
     <SettingsTabsPage
       teamLabel={t("header.team")}
       extraTabs={agentSettingsTabs}
+      generalSearchEntries={generalSearchEntries}
       general={
         <div className="mx-auto w-full max-w-3xl space-y-6">
           <p className="text-sm leading-6 text-muted-foreground">
             {t("settings.description")}
           </p>
 
-          <Card>
+          <Card id="language" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.languageTitle")}
@@ -55,7 +76,7 @@ export default function SettingsRoute() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card id="editor" className="scroll-mt-16">
             <CardHeader>
               <CardTitle className="text-base">
                 {t("settings.editorTitle")}

package/corpus/templates/plan/changelog/2026-07-08-settings-are-cleaner-and-searchable.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are cleaner and searchable, with a consistent navigation that jumps straight to any setting.

package/corpus/templates/slides/actions/add-slide.ts

@@ -35,6 +35,7 @@ export default defineAction({
     "Add a single slide to an existing deck. Use this to build decks slide-by-slide — " +
     "call it once per slide in slide order and wait for each result before adding the next slide. " +
     "Avoid parallel add-slide calls for the same deck; sequential writes keep the editor and agent connection stable. " +
+    "If the deck has a designSystemId, first use `get-design-system` and apply its `agentContext` tokens/docs; do not use generic slide styling from the id alone. " +
     "Returns the new slide ID, 1-based slideNumber, and updated slide count.",
   schema: z.object({
     deckId: z.string().describe("Target deck ID"),