@agent-native/core 0.69.0 → 0.70.1

package/corpus/templates/forms/actions/export-responses.ts

@@ -35,6 +35,8 @@ export default defineAction({
         id: r.id,
         submittedAt: r.submittedAt,
         submitterEmail: r.submitterEmail ?? null,
+        pageUrl: r.pageUrl ?? null,
+        clientSurface: r.clientSurface ?? null,
         ...JSON.parse(r.data),
       }));
       fs.writeFileSync(outputPath, JSON.stringify(data, null, 2));
@@ -43,6 +45,8 @@ export default defineAction({
         "ID",
         "Submitted At",
         "Submitter Email",
+        "Page URL",
+        "Source",
         ...fields.map((f: any) => f.label),
       ];
       const rows = responses.map((r) => {
@@ -51,6 +55,8 @@ export default defineAction({
           r.id,
           r.submittedAt,
           r.submitterEmail ?? "",
+          r.pageUrl ?? "",
+          r.clientSurface ?? "",
           ...fields.map((f: any) => {
             const val = data[f.id];
             if (Array.isArray(val)) return val.join("; ");

package/corpus/templates/forms/actions/list-responses.ts

@@ -49,6 +49,8 @@ export default defineAction({
         data: JSON.parse(r.data),
         submittedAt: r.submittedAt,
         submitterEmail: r.submitterEmail ?? null,
+        pageUrl: r.pageUrl ?? null,
+        clientSurface: r.clientSurface ?? null,
       })) as FormResponse[],
       total: (total as any)?.count ?? 0,
       fields: JSON.parse(form.fields),

package/corpus/templates/forms/actions/response-insights.ts

@@ -318,6 +318,8 @@ export default defineAction({
             submittedAt: schema.responses.submittedAt,
             ip: schema.responses.ip,
             submitterEmail: schema.responses.submitterEmail,
+            pageUrl: schema.responses.pageUrl,
+            clientSurface: schema.responses.clientSurface,
           })
           .from(schema.responses)
           .where(responseFilter)

package/corpus/templates/forms/app/pages/ResponsesPage.tsx

@@ -29,6 +29,39 @@ function valueAsString(val: unknown): string {
   return String(val);
 }
 
+/** Drop the protocol for a cleaner table cell; the full URL stays the link href. */
+function formatPageUrl(url: string): string {
+  return url.replace(/^https?:\/\//, "");
+}
+
+/**
+ * Only http(s) URLs are safe to use as an anchor href. Page URLs arrive from
+ * client `_meta` and could be spoofed by a direct POST, so reject other schemes
+ * (e.g. `javascript:`) to avoid a self-XSS when the owner clicks the cell.
+ */
+function safeHttpUrl(value: string): string | null {
+  try {
+    const u = new URL(value);
+    return u.protocol === "http:" || u.protocol === "https:" ? u.href : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Friendly label for the client-surface token forwarded by feedback embeds. */
+function formatClientSurface(surface: string): string {
+  switch (surface) {
+    case "electron":
+      return "Desktop (Electron)";
+    case "tauri":
+      return "Desktop (Tauri)";
+    case "web":
+      return "Web";
+    default:
+      return surface;
+  }
+}
+
 function compareValues(a: unknown, b: unknown): number {
   // Empty values sort last regardless of direction.
   const aEmpty = a === undefined || a === null || a === "";
@@ -66,8 +99,21 @@ export function ResponsesPage() {
     () => responses.some((r: any) => valueAsString(r.submitterEmail).trim()),
     [responses],
   );
+  const hasPageUrl = useMemo(
+    () => responses.some((r: any) => valueAsString(r.pageUrl).trim()),
+    [responses],
+  );
+  const hasClientSurface = useMemo(
+    () => responses.some((r: any) => valueAsString(r.clientSurface).trim()),
+    [responses],
+  );
   const responseTableMinWidth =
-    64 + 160 + (hasSubmitterEmail ? 224 : 0) + Math.max(fields.length, 1) * 320;
+    64 +
+    160 +
+    (hasSubmitterEmail ? 224 : 0) +
+    (hasPageUrl ? 256 : 0) +
+    (hasClientSurface ? 160 : 0) +
+    Math.max(fields.length, 1) * 320;
 
   function toggleSort(key: SortKey) {
     if (sortKey === key) {
@@ -86,6 +132,16 @@ export function ResponsesPage() {
         if (valueAsString(r.submitterEmail).toLowerCase().includes(q)) {
           return true;
         }
+        if (valueAsString(r.pageUrl).toLowerCase().includes(q)) {
+          return true;
+        }
+        if (
+          formatClientSurface(valueAsString(r.clientSurface))
+            .toLowerCase()
+            .includes(q)
+        ) {
+          return true;
+        }
         for (const f of fields) {
           if (valueAsString(r.data[f.id]).toLowerCase().includes(q))
             return true;
@@ -100,6 +156,10 @@ export function ResponsesPage() {
           new Date(a.submittedAt).getTime() - new Date(b.submittedAt).getTime();
       } else if (sortKey === "_email") {
         cmp = compareValues(a.submitterEmail, b.submitterEmail);
+      } else if (sortKey === "_page") {
+        cmp = compareValues(a.pageUrl, b.pageUrl);
+      } else if (sortKey === "_source") {
+        cmp = compareValues(a.clientSurface, b.clientSurface);
       } else {
         cmp = compareValues(a.data[sortKey], b.data[sortKey]);
       }
@@ -113,11 +173,21 @@ export function ResponsesPage() {
     const headers = [
       "Submitted At",
       ...(hasSubmitterEmail ? ["Submitter Email"] : []),
+      ...(hasPageUrl ? ["Page URL"] : []),
+      ...(hasClientSurface ? ["Source"] : []),
       ...fields.map((f) => f.label),
     ];
     const rows = filteredSorted.map((r) => [
       r.submittedAt,
       ...(hasSubmitterEmail ? [valueAsString(r.submitterEmail)] : []),
+      ...(hasPageUrl ? [valueAsString(r.pageUrl)] : []),
+      ...(hasClientSurface
+        ? [
+            valueAsString(r.clientSurface)
+              ? formatClientSurface(valueAsString(r.clientSurface))
+              : "",
+          ]
+        : []),
       ...fields.map((f) => valueAsString(r.data[f.id])),
     ]);
 
@@ -282,6 +352,8 @@ export function ResponsesPage() {
                 <col className="w-16" />
                 <col className="w-40" />
                 {hasSubmitterEmail ? <col className="w-56" /> : null}
+                {hasPageUrl ? <col className="w-64" /> : null}
+                {hasClientSurface ? <col className="w-40" /> : null}
                 {fields.map((f) => (
                   <col key={f.id} className="w-80" />
                 ))}
@@ -308,6 +380,22 @@ export function ResponsesPage() {
                       onClick={() => toggleSort("_email")}
                     />
                   ) : null}
+                  {hasPageUrl ? (
+                    <SortableHeader
+                      label="Page"
+                      active={sortKey === "_page"}
+                      dir={sortDir}
+                      onClick={() => toggleSort("_page")}
+                    />
+                  ) : null}
+                  {hasClientSurface ? (
+                    <SortableHeader
+                      label="Source"
+                      active={sortKey === "_source"}
+                      dir={sortDir}
+                      onClick={() => toggleSort("_source")}
+                    />
+                  ) : null}
                   {fields.map((f) => (
                     <SortableHeader
                       key={f.id}
@@ -336,6 +424,55 @@ export function ResponsesPage() {
                         {valueAsString(response.submitterEmail) || "-"}
                       </td>
                     ) : null}
+                    {hasPageUrl ? (
+                      <td className="w-64 px-4 py-3 align-top text-xs whitespace-normal break-words">
+                        {(() => {
+                          const raw = valueAsString(response.pageUrl);
+                          if (!raw)
+                            return (
+                              <span className="text-muted-foreground">-</span>
+                            );
+                          const safe = safeHttpUrl(raw);
+                          return safe ? (
+                            <a
+                              href={safe}
+                              target="_blank"
+                              rel="noopener noreferrer nofollow"
+                              title={raw}
+                              className="text-primary hover:underline"
+                            >
+                              {formatPageUrl(raw)}
+                            </a>
+                          ) : (
+                            <span title={raw} className="text-muted-foreground">
+                              {formatPageUrl(raw)}
+                            </span>
+                          );
+                        })()}
+                      </td>
+                    ) : null}
+                    {hasClientSurface ? (
+                      <td className="w-40 px-4 py-3 align-top text-xs whitespace-nowrap">
+                        {(() => {
+                          const surface = valueAsString(response.clientSurface);
+                          if (!surface)
+                            return (
+                              <span className="text-muted-foreground">-</span>
+                            );
+                          const label = formatClientSurface(surface);
+                          // Make desktop submissions pop; web stays muted text.
+                          return surface === "web" ? (
+                            <span className="text-muted-foreground">
+                              {label}
+                            </span>
+                          ) : (
+                            <Badge variant="secondary" className="font-normal">
+                              {label}
+                            </Badge>
+                          );
+                        })()}
+                      </td>
+                    ) : null}
                     {fields.map((f) => {
                       const val = response.data[f.id];
                       const display =

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

@@ -27,6 +27,7 @@ import {
   setClientAppState,
 } from "@agent-native/core/client";
 import type { LinksFunction } from "react-router";
+import changelog from "../CHANGELOG.md?raw";
 import stylesheet from "./global.css?url";
 import { TAB_ID } from "@/lib/tab-id";
 
@@ -198,7 +199,12 @@ export default function Root() {
       <NavigationStateSync />
       <UrlStateSync />
       <OpenLinkInterceptor />
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="forms"
+      >
         <CommandMenu.Group heading="Forms">
           <CommandMenu.Item onSelect={() => {}}>Search forms</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/forms/changelog/2026-06-23-response-tables-now-show-the-page-each-submission-came-from-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Response tables now show the page each submission came from, passed through from embedded feedback widgets

package/corpus/templates/forms/changelog/2026-06-23-response-tables-now-show-whether-feedback-came-from-the-web-.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Response tables now show whether feedback came from the web, the Electron desktop app, or a Tauri app

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

@@ -32,6 +32,13 @@ export const responses = table("responses", {
   submittedAt: text("submitted_at").notNull(),
   ip: text("ip"),
   submitterEmail: text("submitter_email"),
+  // URL of the page the respondent was on, forwarded by trusted embeds (e.g.
+  // the framework FeedbackButton) as a hidden pass-through field. Client-scrubbed
+  // of sensitive query params. NULL for direct fills that send no page context.
+  pageUrl: text("page_url"),
+  // Runtime shell the feedback was sent from: "web", "electron", or "tauri".
+  // Hidden pass-through field forwarded by trusted embeds. NULL when unknown.
+  clientSurface: text("client_surface"),
 });
 
 export const formShares = createSharesTable("form_shares");

package/corpus/templates/forms/server/handlers/submissions.ts

@@ -49,6 +49,15 @@ function cleanSubmitterEmail(value: unknown): string | null {
   return trimmed;
 }
 
+// Allowlist the client-surface hint so only known values are stored. Anything
+// else (including spoofed direct POSTs) is dropped to NULL.
+const KNOWN_CLIENT_SURFACES = new Set(["web", "electron", "tauri"]);
+function cleanClientSurface(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase();
+  return KNOWN_CLIENT_SURFACES.has(normalized) ? normalized : null;
+}
+
 function cleanChatSessionIds(value: unknown): string[] {
   const ids: string[] = [];
   const visit = (item: unknown) => {
@@ -219,6 +228,7 @@ export const submitForm = defineEventHandler(async (event: H3Event) => {
           chatSessionIds?: unknown;
           activeRunId?: unknown;
           pageUrl?: unknown;
+          clientSurface?: unknown;
         })
       : null;
   const session = await getSession(event).catch(() => null);
@@ -231,6 +241,7 @@ export const submitForm = defineEventHandler(async (event: H3Event) => {
   ]);
   const activeRunId = cleanMetaText(meta?.activeRunId);
   const pageUrl = cleanMetaText(meta?.pageUrl);
+  const clientSurface = cleanClientSurface(meta?.clientSurface);
 
   await db.insert(schema.responses).values({
     id: responseId,
@@ -239,6 +250,8 @@ export const submitForm = defineEventHandler(async (event: H3Event) => {
     submittedAt: now,
     ip,
     submitterEmail,
+    pageUrl,
+    clientSurface,
   });
 
   // Write submission notification to application state (SQL-backed)
@@ -257,8 +270,9 @@ export const submitForm = defineEventHandler(async (event: H3Event) => {
   // Fire integrations best-effort and never fail the submission. Keep this
   // awaited: serverless hosts can freeze fire-and-forget work as soon as the
   // HTTP response returns, which silently drops Slack/webhook delivery.
-  // Feedback debug context is intentionally integration-only: it helps triage
-  // Slack submissions without retaining page URLs or debug breadcrumbs in SQL.
+  // pageUrl and clientSurface are persisted on the response (above) so owners
+  // can see which screen and which app feedback came from; chat session ids and
+  // run ids remain integration-only debug breadcrumbs we don't retain in SQL.
   try {
     const integrations: FormIntegration[] = settings.integrations ?? [];
     if (integrations.length > 0) {
@@ -273,6 +287,7 @@ export const submitForm = defineEventHandler(async (event: H3Event) => {
         chatSessionIds,
         activeRunId,
         pageUrl,
+        clientSurface,
       });
     }
   } catch {
@@ -326,6 +341,8 @@ export const listResponses = defineEventHandler(async (event: H3Event) => {
           data: JSON.parse(r.data),
           submittedAt: r.submittedAt,
           submitterEmail: r.submitterEmail,
+          pageUrl: r.pageUrl ?? null,
+          clientSurface: r.clientSurface ?? null,
         })) as FormResponse[],
         total: total?.count ?? 0,
         fields: JSON.parse(access.resource.fields),

package/corpus/templates/forms/server/lib/integrations.ts

@@ -48,6 +48,64 @@ interface SubmissionPayload {
   activeRunId?: string | null;
   /** Page URL where the feedback was submitted, when available. */
   pageUrl?: string | null;
+  /** Client surface (web/electron/tauri) the feedback came from, when known. */
+  clientSurface?: string | null;
+}
+
+/** Human-readable label for a client-surface token. */
+function clientSurfaceLabel(surface: string): string {
+  switch (surface) {
+    case "electron":
+      return "Desktop (Electron)";
+    case "tauri":
+      return "Desktop (Tauri)";
+    case "web":
+      return "Web";
+    default:
+      return surface;
+  }
+}
+
+/**
+ * Friendly app name derived from a feedback page URL, so a reviewer can tell at
+ * a glance which app the feedback came from. `plan.agent-native.com` → "Plan",
+ * `analytics.agent-native.com` → "Analytics". Returns null when the host isn't a
+ * recognizable per-app subdomain (the full URL still carries the page).
+ */
+function appLabelFromUrl(pageUrl: string): string | null {
+  try {
+    const { hostname } = new URL(pageUrl);
+    const match = hostname.match(/^([a-z0-9-]+)\.agent-native\.com$/i);
+    const sub = match?.[1];
+    if (!sub || sub === "www") return null;
+    return sub
+      .split("-")
+      .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
+      .join(" ");
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Readable host+path label for a feedback page URL, used as the visible text of
+ * the Slack link so the app/page is legible inline instead of hidden behind a
+ * bare "open". The full (already client-scrubbed) URL stays the link target.
+ */
+function pageLabelFromUrl(pageUrl: string): string {
+  let label = pageUrl;
+  try {
+    const url = new URL(pageUrl);
+    label = `${url.hostname}${url.pathname}`.replace(/\/$/, "") || url.hostname;
+  } catch {
+    // fall back to the raw string below
+  }
+  if (label.length > 80) label = `${label.slice(0, 79)}…`;
+  // Escape Slack mrkdwn link-text control characters.
+  return label
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
 }
 
 // ---------------------------------------------------------------------------
@@ -82,13 +140,20 @@ function formatDebugContext(submission: SubmissionPayload): string[] {
     lines.push(`Run: \`${submission.activeRunId}\``);
   }
   if (submission.pageUrl) {
-    lines.push(`Page: <${submission.pageUrl}|open>`);
+    const appLabel = appLabelFromUrl(submission.pageUrl);
+    if (appLabel) lines.push(`App: ${appLabel}`);
+    lines.push(
+      `Page: <${submission.pageUrl}|${pageLabelFromUrl(submission.pageUrl)}>`,
+    );
+  }
+  if (submission.clientSurface) {
+    lines.push(`Source: ${clientSurfaceLabel(submission.clientSurface)}`);
   }
   return lines;
 }
 
 /** Slack Block Kit message */
-function buildSlackPayload(submission: SubmissionPayload) {
+export function buildSlackPayload(submission: SubmissionPayload) {
   const fieldLines = submission.fields
     .filter((f) => submission.data[f.id] !== undefined)
     .map((f) => {
@@ -170,6 +235,13 @@ function buildDiscordPayload(submission: SubmissionPayload) {
       inline: false,
     });
   }
+  if (submission.clientSurface) {
+    discordFields.push({
+      name: "Source",
+      value: clientSurfaceLabel(submission.clientSurface),
+      inline: true,
+    });
+  }
 
   return {
     embeds: [
@@ -192,6 +264,7 @@ function buildGoogleSheetsPayload(submission: SubmissionPayload) {
     chatSessionIds: (submission.chatSessionIds ?? []).join(", "),
     activeRunId: submission.activeRunId ?? "",
     pageUrl: submission.pageUrl ?? "",
+    clientSurface: submission.clientSurface ?? "",
     ...formatFields(submission.fields, submission.data),
   };
 }
@@ -208,6 +281,7 @@ function buildWebhookPayload(submission: SubmissionPayload) {
     chatSessionIds: submission.chatSessionIds ?? [],
     activeRunId: submission.activeRunId ?? null,
     pageUrl: submission.pageUrl ?? null,
+    clientSurface: submission.clientSurface ?? null,
     data: formatFields(submission.fields, submission.data),
     rawData: submission.data,
   };

package/corpus/templates/forms/server/plugins/db.ts

@@ -102,6 +102,26 @@ CREATE TABLE IF NOT EXISTS form_shares (
 CREATE INDEX IF NOT EXISTS responses_form_id_idx ON responses (form_id, submitted_at);
 CREATE INDEX IF NOT EXISTS form_shares_resource_idx ON form_shares (resource_id, principal_type, principal_id)`,
     },
+    {
+      // Page URL the respondent was on, forwarded by trusted embeds (e.g. the
+      // framework FeedbackButton) as a hidden pass-through field so owners can
+      // see which screen feedback came from in the responses table.
+      version: 11,
+      sql: {
+        postgres: `ALTER TABLE responses ADD COLUMN IF NOT EXISTS page_url TEXT`,
+        sqlite: `ALTER TABLE responses ADD COLUMN IF NOT EXISTS page_url TEXT`,
+      },
+    },
+    {
+      // Client surface (web/electron/tauri) the respondent submitted from,
+      // forwarded by trusted embeds as a hidden pass-through field so owners can
+      // see whether feedback came from a desktop app or the browser.
+      version: 12,
+      sql: {
+        postgres: `ALTER TABLE responses ADD COLUMN IF NOT EXISTS client_surface TEXT`,
+        sqlite: `ALTER TABLE responses ADD COLUMN IF NOT EXISTS client_surface TEXT`,
+      },
+    },
   ],
   { table: "forms_migrations" },
 );

package/corpus/templates/forms/shared/types.ts

@@ -147,6 +147,18 @@ export interface FormResponse {
   submittedAt: string;
   /** Email of the submitter when known (claimed by the client; not verified). */
   submitterEmail?: string | null;
+  /**
+   * URL of the page the respondent was on, forwarded by trusted embeds (e.g.
+   * the framework FeedbackButton) as a hidden pass-through field. Null when the
+   * submission carried no page context (e.g. a direct fill on the public page).
+   */
+  pageUrl?: string | null;
+  /**
+   * Runtime shell the feedback was sent from — "web", "electron", or "tauri" —
+   * forwarded by trusted embeds as a hidden pass-through field. Null when
+   * unknown (e.g. a direct fill on the public page).
+   */
+  clientSurface?: string | null;
 }
 
 // ---------------------------------------------------------------------------

package/corpus/templates/macros/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Agent-Native Macros are documented here. Open it any
+time from the command menu (Cmd+K → "What's new").
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Agent-Native Macros — a changelog now lives in the command menu (Cmd+K).

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

@@ -17,6 +17,7 @@ import { IconSun, IconMoon } from "@tabler/icons-react";
 import { TAB_ID } from "@/lib/tab-id";
 import { AppLayout } from "@/components/layout/AppLayout";
 import type { LinksFunction } from "react-router";
+import changelog from "../CHANGELOG.md?raw";
 import stylesheet from "./global.css?url";
 
 configureTracking({
@@ -124,7 +125,12 @@ export default function Root() {
       toaster={<Toaster richColors position="bottom-left" />}
     >
       <DbSyncSetup />
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="macros"
+      >
         <CommandMenu.Group heading="Actions">
           <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/mail/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Agent-Native Mail are documented here. Open it any
+time from the command menu (Cmd+K → "What's new") or from Settings.
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Agent-Native Mail — a changelog now lives in the command menu (Cmd+K) and in Settings.

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

@@ -25,6 +25,7 @@ import { CommandMenu } from "@agent-native/core/client";
 import { useTheme } from "next-themes";
 import { useSettings, useUpdateSettings } from "@/hooks/use-emails";
 import { getResolvedTheme } from "@/lib/theme";
+import changelog from "../../../CHANGELOG.md?raw";
 
 interface CommandPaletteProps {
   open: boolean;
@@ -91,6 +92,8 @@ export function CommandPalette({
       open={open}
       onOpenChange={onOpenChange}
       placeholder="Type a command or ask AI..."
+      changelog={changelog}
+      changelogKey="mail"
     >
       <CommandMenu.Group heading="Actions">
         <CommandMenu.Item

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

@@ -6,8 +6,10 @@ import {
   useActionMutation,
   useChatModels,
   useChangeVersions,
+  ChangelogSettingsCard,
 } from "@agent-native/core/client";
 import { appApiPath } from "@agent-native/core/client";
+import changelog from "../../CHANGELOG.md?raw";
 import {
   IconUsers,
   IconPlus,
@@ -24,6 +26,7 @@ import {
   IconSignature,
   IconFilter,
   IconInfoCircle,
+  IconHistory,
 } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -1379,9 +1382,31 @@ function SlackIntakeSection() {
   );
 }
 
+// ─── What's New Section ──────────────────────────────────────────────────────
+
+function WhatsNewSection() {
+  return (
+    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+      <div className="mb-6">
+        <h2 className="text-[16px] font-semibold text-foreground">
+          What's new
+        </h2>
+        <p className="mt-0.5 text-[13px] text-muted-foreground">
+          Recent user-facing changes to Agent-Native Mail.
+        </p>
+      </div>
+
+      <div className="max-w-2xl">
+        <ChangelogSettingsCard markdown={changelog} />
+      </div>
+    </div>
+  );
+}
+
 // ─── Settings Page ────────────────────────────────────────────────────────────
 
 type SettingsSection =
+  | "whats-new"
   | "drafting"
   | "automations"
   | "gmail-filters"
@@ -1395,6 +1420,7 @@ const navItems: {
   label: string;
   icon: React.ComponentType<{ className?: string }>;
 }[] = [
+  { id: "whats-new", label: "What's new", icon: IconHistory },
   { id: "drafting", label: "Drafting", icon: IconSignature },
   { id: "automations", label: "Automations", icon: IconBolt },
   { id: "gmail-filters", label: "Gmail Filters", icon: IconFilter },
@@ -1464,6 +1490,7 @@ export function SettingsPage() {
 
       {/* Right content panel */}
       <div className="flex flex-1 overflow-hidden bg-background">
+        {activeSection === "whats-new" && <WhatsNewSection />}
         {activeSection === "drafting" && <DraftingSection />}
         {activeSection === "automations" && <AutomationsSection />}
         {activeSection === "gmail-filters" && <GmailFiltersSection />}