@agent-native/core 0.90.11 → 0.91.0

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"),

package/corpus/templates/slides/actions/get-design-system.ts

@@ -8,9 +8,146 @@ import { z } from "zod";
 
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
+const MAX_AGENT_CONTEXT_CHARS = 14_000;
+const MAX_JSON_CONTEXT_CHARS = 2_500;
+const MAX_BUILDER_DOCS = 8;
+const MAX_BUILDER_DOC_CHARS = 1_200;
+const MAX_TOKEN_VALUES = 48;
+
+interface BuilderGenerationContext {
+  builderDesignSystemId: string;
+  builderJobId: string;
+  builderProjectId?: string;
+  builderUrl?: string;
+  builderStatus?: string;
+  docs: Array<{
+    name?: string;
+    type?: string;
+    description?: string;
+    content?: string;
+    tokenValues?: Record<string, string>;
+  }>;
+  tokenValues: Record<string, string>;
+  docCount: number;
+  warning?: string;
+}
+
+function truncate(value: string, maxChars: number): string {
+  if (value.length <= maxChars) return value;
+  return `${value.slice(0, maxChars).trimEnd()}\n[truncated]`;
+}
+
+function parseJson(value: string | null | undefined): unknown {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+function formatJson(value: unknown, maxChars = MAX_JSON_CONTEXT_CHARS): string {
+  return truncate(JSON.stringify(value, null, 2), maxChars);
+}
+
+function formatTokenValues(tokenValues: Record<string, string>): string[] {
+  const entries = Object.entries(tokenValues)
+    .filter(([, value]) => typeof value === "string" && value.trim())
+    .slice(0, MAX_TOKEN_VALUES);
+  if (entries.length === 0) return [];
+  return [
+    "Builder DSI token values to apply first:",
+    ...entries.map(([name, value]) => `- ${name}: ${value}`),
+  ];
+}
+
+function buildDesignSystemAgentContext({
+  id,
+  title,
+  description,
+  data,
+  assets,
+  customInstructions,
+  builder,
+}: {
+  id: string;
+  title: string;
+  description?: string | null;
+  data?: string | null;
+  assets?: string | null;
+  customInstructions?: string | null;
+  builder: BuilderGenerationContext | null;
+}): string {
+  const lines: string[] = [
+    "## Selected Design System Context",
+    `Use "${title}" (id: ${id}) as the visual source of truth for this deck.`,
+    "Apply these tokens, assets, and usage notes before choosing colors, type, spacing, radius, imagery, slide defaults, or component language.",
+  ];
+
+  if (description?.trim()) {
+    lines.push("", "Description:", description.trim());
+  }
+
+  if (customInstructions?.trim()) {
+    lines.push("", "Custom instructions:", customInstructions.trim());
+  }
+
+  const parsedAssets = parseJson(assets);
+  if (Array.isArray(parsedAssets) && parsedAssets.length > 0) {
+    lines.push("", "Design system assets:", formatJson(parsedAssets));
+  }
+
+  if (builder) {
+    lines.push(
+      "",
+      "Builder DSI:",
+      `- Design system id: ${builder.builderDesignSystemId}`,
+      `- Job id: ${builder.builderJobId}`,
+      builder.builderProjectId
+        ? `- Project id: ${builder.builderProjectId}`
+        : "",
+      builder.builderUrl ? `- URL: ${builder.builderUrl}` : "",
+      builder.builderStatus ? `- Status: ${builder.builderStatus}` : "",
+      "- Builder DSI docs and token values override local proxy placeholders.",
+      "- Do not substitute a generic style if DSI docs or tokens are unavailable; call get-design-system again or tell the user Builder indexing is not ready.",
+    );
+
+    if (builder.warning) {
+      lines.push(`- Warning: ${builder.warning}`);
+    }
+
+    lines.push("", ...formatTokenValues(builder.tokenValues));
+
+    const docs = builder.docs.slice(0, MAX_BUILDER_DOCS);
+    if (docs.length > 0) {
+      lines.push("", "Builder DSI docs to follow:");
+      for (const doc of docs) {
+        const label = [doc.name, doc.type ? `(${doc.type})` : ""]
+          .filter(Boolean)
+          .join(" ");
+        lines.push(
+          "",
+          `### ${label || "Design system doc"}`,
+          doc.description?.trim() ? doc.description.trim() : "",
+          doc.content?.trim()
+            ? truncate(doc.content.trim(), MAX_BUILDER_DOC_CHARS)
+            : "",
+        );
+      }
+    }
+  } else {
+    const parsedData = parseJson(data);
+    if (parsedData) {
+      lines.push("", "Local design-system tokens:", formatJson(parsedData));
+    }
+  }
+
+  return truncate(lines.filter(Boolean).join("\n"), MAX_AGENT_CONTEXT_CHARS);
+}
+
 export default defineAction({
   description:
-    "Get a design system by ID. Returns full design system data including colors, typography, spacing, and assets.",
+    "Get a design system by ID. Returns full design system data including colors, typography, spacing, assets, and a compact agentContext for generation.",
   schema: z.object({
     id: z.string().describe("Design system ID"),
   }),
@@ -51,6 +188,15 @@ export default defineAction({
       createdAt: row.createdAt,
       updatedAt: row.updatedAt,
       builder,
+      agentContext: buildDesignSystemAgentContext({
+        id: row.id,
+        title: row.title,
+        description: row.description,
+        data: row.data,
+        assets: row.assets,
+        customInstructions: row.customInstructions,
+        builder,
+      }),
     };
   },
 });

package/corpus/templates/slides/app/pages/Index.tsx

@@ -101,6 +101,47 @@ function truncateSourceForContext(prompt: string): {
   };
 }
 
+interface DesignSystemGenerationContextResult {
+  title?: string;
+  agentContext?: string;
+}
+
+async function loadDesignSystemGenerationContext(
+  designSystemId?: string | null,
+): Promise<string> {
+  if (!designSystemId) return "";
+  try {
+    const result = (await callAction(
+      "get-design-system",
+      { id: designSystemId },
+      { method: "GET" },
+    )) as DesignSystemGenerationContextResult | undefined;
+    if (result?.agentContext?.trim()) {
+      return [
+        "",
+        result.agentContext.trim(),
+        "",
+        "The selected design system context above was hydrated before this agent run. Follow it directly; do not replace it with generic colors, fonts, spacing, imagery, or slide components.",
+      ].join("\n");
+    }
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "unknown loading error";
+    return [
+      "",
+      "## Selected Design System Context",
+      `The selected design system id "${designSystemId}" could not be loaded before generation: ${message}`,
+      "Before adding slides, call `get-design-system` for this id. If it still fails, stop and tell the user the selected design system is unavailable instead of improvising a generic style.",
+    ].join("\n");
+  }
+  return [
+    "",
+    "## Selected Design System Context",
+    `The selected design system id "${designSystemId}" returned no generation context.`,
+    "Call `get-design-system` for this id before adding slides. If it still has no usable tokens/docs, stop and ask the user to finish design-system indexing instead of improvising a generic style.",
+  ].join("\n");
+}
+
 function describeUploadedFilesForAgent(
   files: UploadedFile[],
   deckId: string,
@@ -359,13 +400,17 @@ export default function Index() {
             "If the action cannot read a private document, tell the user the exact sharing step from the action error instead of generating from the URL alone.",
           ].join("\n")
         : "";
+    const hydratedDesignSystemContext = await loadDesignSystemGenerationContext(
+      selectedDesignSystem?.id,
+    );
     const designSystemContext = selectedDesignSystem
       ? [
           "",
           "Design system selection:",
           `- Use "${selectedDesignSystem.title}" (id: ${selectedDesignSystem.id}).`,
           "- The deck has already been linked to this design system.",
-          `- Before adding slides, call \`get-design-system --id ${selectedDesignSystem.id}\` and use its tokens for colors, typography, spacing, imagery, and slide defaults.`,
+          "- Use the hydrated design system context below for colors, typography, spacing, imagery, and slide defaults.",
+          hydratedDesignSystemContext,
           "- Do not choose or apply a different design system.",
         ].join("\n")
       : [

package/corpus/templates/slides/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: "slides-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/slides/changelog/2026-07-08-deck-generation-now-follows-hydrated-builder-design-system-g.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-08
+---
+
+Deck generation now follows hydrated Builder design-system guidance before adding slides.