@agent-native/dispatch 0.17.2 → 0.18.0

package/dist/server/lib/provider-api.d.ts

@@ -1,10 +1,10 @@
 import { type ProviderApiDocsOptions, type ProviderApiId, type ProviderApiMethod, type ProviderApiRequestArgs } from "@agent-native/core/provider-api";
 export declare const DISPATCH_APP_ID = "dispatch";
-export declare const DISPATCH_PROVIDER_API_IDS: readonly ["amplitude", "apollo", "bigquery", "clay", "commonroom", "dataforseo", "ga4", "gcloud", "github", "figma", "gmail", "gong", "google_calendar", "google_drive", "google_slides", "granola", "grafana", "hubspot", "salesforce", "jira", "mixpanel", "notion", "posthog", "prometheus", "pylon", "sentry", "slack", "stripe", "twitter"];
+export declare const DISPATCH_PROVIDER_API_IDS: readonly ["amplitude", "apollo", "bigquery", "clay", "commonroom", "dataforseo", "ga4", "gcloud", "github", "figma", "fullstory", "gmail", "gong", "google_calendar", "google_drive", "google_slides", "granola", "grafana", "hubspot", "salesforce", "jira", "mixpanel", "notion", "posthog", "prometheus", "pylon", "sentry", "slack", "stripe", "twitter"];
 export type DispatchProviderApiId = ProviderApiId;
 export type { ProviderApiMethod, ProviderApiRequestArgs };
 export declare function listProviderApiCatalog(provider?: string): {
-    id: "amplitude" | "apollo" | "bigquery" | "clay" | "commonroom" | "dataforseo" | "figma" | "ga4" | "gcloud" | "github" | "gmail" | "gong" | "google_calendar" | "google_drive" | "google_slides" | "grafana" | "granola" | "hubspot" | "jira" | "mixpanel" | "notion" | "posthog" | "prometheus" | "pylon" | "salesforce" | "sentry" | "slack" | "stripe" | "twitter";
+    id: "amplitude" | "apollo" | "bigquery" | "clay" | "commonroom" | "dataforseo" | "figma" | "fullstory" | "ga4" | "gcloud" | "github" | "gmail" | "gong" | "google_calendar" | "google_drive" | "google_slides" | "grafana" | "granola" | "hubspot" | "jira" | "mixpanel" | "notion" | "posthog" | "prometheus" | "pylon" | "salesforce" | "sentry" | "slack" | "stripe" | "twitter";
     label: string;
     defaultBaseUrl: string;
     requiresConnectionId: boolean;

package/dist/server/lib/provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider-api.d.ts","sourceRoot":"","sources":["../../../src/server/lib/provider-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,sBAAsB,EAE3B,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,iCAAiC,CAAC;AAGzC,eAAO,MAAM,eAAe,aAAa,CAAC;AAC1C,eAAO,MAAM,yBAAyB,kVAAmB,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,CAAC;AA0C1D,wBAAgB,sBAAsB,CAAC,QAAQ,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;yBAEvD;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,sBAAsB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,oBAGvD;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,sBAAsB,oBAErE"}
+{"version":3,"file":"provider-api.d.ts","sourceRoot":"","sources":["../../../src/server/lib/provider-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,sBAAsB,EAE3B,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,iCAAiC,CAAC;AAGzC,eAAO,MAAM,eAAe,aAAa,CAAC;AAC1C,eAAO,MAAM,yBAAyB,+VAAmB,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,CAAC;AA0C1D,wBAAgB,sBAAsB,CAAC,QAAQ,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;yBAEvD;AAED,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,sBAAsB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,oBAGvD;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,sBAAsB,oBAErE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/dispatch",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Dispatch — workspace control plane for agent-native apps. Vault, integrations, destinations, scheduled jobs, and cross-app delegation, shipped as a single drop-in package.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -84,7 +84,7 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "@agent-native/toolkit": "0.13.1"
+    "@agent-native/toolkit": "0.13.2"
   },
   "devDependencies": {
     "@react-router/dev": "^8.1.0",
@@ -98,7 +98,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "0.137.4"
+    "@agent-native/core": "0.139.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.8.0",

package/src/client/transactional-emails.spec.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  aggregateSharedEmails,
+  type AppEmailCatalog,
+  type AppTransactionalEmail,
+  type LocalTransactionalEmailCatalog,
+} from "./transactional-emails";
+
+const coreEmail: AppTransactionalEmail = {
+  id: "core.reset-password",
+  app: "core",
+  name: "Reset password",
+  trigger: "A password reset is requested.",
+  recipient: "The account address.",
+  recipientLabel: "Account address",
+  sender: "The configured sender.",
+  senderLabel: "Configured sender",
+  sent: 2,
+  failed: 1,
+  lastSentAt: 100,
+};
+
+const local: LocalTransactionalEmailCatalog = {
+  app: "dispatch",
+  statsAvailable: true,
+  statsError: null,
+  emails: [coreEmail],
+};
+
+function appCatalog(
+  appId: string,
+  email: AppTransactionalEmail,
+): AppEmailCatalog {
+  return {
+    appId,
+    appName: appId,
+    appPath: `/${appId}`,
+    emails: [email],
+    error: null,
+    statsError: null,
+  };
+}
+
+describe("aggregateSharedEmails", () => {
+  it("sums shared email counts across sending apps", () => {
+    const result = aggregateSharedEmails(local, [
+      appCatalog("calendar", {
+        ...coreEmail,
+        sent: 3,
+        failed: 0,
+        lastSentAt: 200,
+      }),
+      appCatalog("forms", {
+        ...coreEmail,
+        sent: 1,
+        failed: 2,
+        lastSentAt: 150,
+      }),
+    ]);
+
+    expect(result).toEqual({
+      statsError: null,
+      emails: [
+        {
+          ...coreEmail,
+          sent: 6,
+          failed: 3,
+          lastSentAt: 200,
+        },
+      ],
+    });
+  });
+
+  it("does not present partial totals when an app log is unreadable", () => {
+    const unreadable = appCatalog("calendar", coreEmail);
+    unreadable.statsError = "database unavailable";
+
+    expect(aggregateSharedEmails(local, [unreadable])).toEqual({
+      statsError: "database unavailable",
+      emails: [
+        {
+          ...coreEmail,
+          sent: null,
+          failed: null,
+          lastSentAt: null,
+        },
+      ],
+    });
+  });
+});

package/src/client/transactional-emails.ts

@@ -0,0 +1,201 @@
+/**
+ * Reads each mounted app's transactional email catalog from the browser.
+ *
+ * Workspace apps are path-mounted on a single origin, so the browser can call
+ * another app's action endpoint directly and its own session cookie carries the
+ * caller's identity. Fanning out here rather than server-side keeps every app's
+ * existing access checks in force — Dispatch never sees a catalog the signed-in
+ * user could not have loaded themselves.
+ */
+
+export interface AppTransactionalEmail {
+  id: string;
+  app: string;
+  name: string;
+  trigger: string;
+  recipient: string;
+  recipientLabel: string;
+  sender: string;
+  senderLabel: string;
+  /** null when the send log could not be read — not the same as zero sends. */
+  sent: number | null;
+  failed: number | null;
+  lastSentAt: number | null;
+}
+
+export interface AppEmailCatalog {
+  appId: string;
+  appName: string;
+  appPath: string;
+  emails: AppTransactionalEmail[];
+  /** Set when this app's catalog could not be read at all. */
+  error: string | null;
+  /** Set when the catalog loaded but its send counts did not. */
+  statsError: string | null;
+}
+
+export interface LocalTransactionalEmailCatalog {
+  app: string;
+  statsAvailable: boolean;
+  statsError: string | null;
+  emails: AppTransactionalEmail[];
+}
+
+export function aggregateSharedEmails(
+  local: LocalTransactionalEmailCatalog,
+  appCatalogs: AppEmailCatalog[],
+): { emails: AppTransactionalEmail[]; statsError: string | null } {
+  const catalogs = [
+    {
+      appId: local.app,
+      appName: local.app,
+      appPath: "",
+      emails: local.emails,
+      error: null,
+      statsError: local.statsAvailable ? null : local.statsError,
+    },
+    ...appCatalogs.filter((catalog) => catalog.appId !== local.app),
+  ];
+  const unreadable = catalogs.find(
+    (catalog) => catalog.error || catalog.statsError,
+  );
+  const statsAvailable = !unreadable;
+
+  return {
+    statsError: unreadable?.error ?? unreadable?.statsError ?? null,
+    emails: local.emails
+      .filter((email) => email.app === "core")
+      .map((definition) => {
+        if (!statsAvailable) {
+          return { ...definition, sent: null, failed: null, lastSentAt: null };
+        }
+        let sent = 0;
+        let failed = 0;
+        let lastSentAt: number | null = null;
+        for (const catalog of catalogs) {
+          const email = catalog.emails.find(
+            (candidate) => candidate.id === definition.id,
+          );
+          sent += email?.sent ?? 0;
+          failed += email?.failed ?? 0;
+          if (
+            email?.lastSentAt != null &&
+            (lastSentAt === null || email.lastSentAt > lastSentAt)
+          ) {
+            lastSentAt = email.lastSentAt;
+          }
+        }
+        return { ...definition, sent, failed, lastSentAt };
+      }),
+  };
+}
+
+function actionUrl(appPath: string, action: string, query = ""): string {
+  const base = appPath.replace(/\/$/, "");
+  return `${base}/_agent-native/actions/${action}${query}`;
+}
+
+export async function callAppAction<T>(
+  appPath: string,
+  action: string,
+  params: Record<string, unknown>,
+  method: "GET" | "POST",
+): Promise<T> {
+  const query =
+    method === "GET"
+      ? `?${new URLSearchParams(
+          Object.entries(params).map(([key, value]) => [key, String(value)]),
+        )}`
+      : "";
+  const res = await fetch(actionUrl(appPath, action, query), {
+    method,
+    credentials: "include",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "X-Agent-Native-Frontend": "1",
+    },
+    ...(method === "POST" ? { body: JSON.stringify(params) } : {}),
+  });
+  if (!res.ok) throw new Error(`${action} failed: HTTP ${res.status}`);
+  return (await res.json()) as T;
+}
+
+/**
+ * Load one app's catalog. Never throws — a single unreachable app must not
+ * blank the whole screen, but its failure is returned rather than swallowed so
+ * the UI can say "couldn't read" instead of showing it as having no emails.
+ */
+const CATALOG_TIMEOUT_MS = 10_000;
+
+export async function fetchAppEmailCatalog(
+  app: { id: string; name: string; path: string },
+  windowDays: number,
+): Promise<AppEmailCatalog> {
+  const base: AppEmailCatalog = {
+    appId: app.id,
+    appName: app.name,
+    appPath: app.path,
+    emails: [],
+    error: null,
+    statsError: null,
+  };
+  try {
+    const res = await fetch(
+      actionUrl(
+        app.path,
+        "list-transactional-emails",
+        `?windowDays=${windowDays}`,
+      ),
+      {
+        credentials: "include",
+        headers: { Accept: "application/json" },
+        signal: AbortSignal.timeout(CATALOG_TIMEOUT_MS),
+      },
+    );
+    if (!res.ok) {
+      return { ...base, error: `HTTP ${res.status}` };
+    }
+    const body = (await res.json()) as {
+      emails?: AppTransactionalEmail[];
+      statsAvailable?: boolean;
+      statsError?: string | null;
+    };
+    return {
+      ...base,
+      emails: body.emails ?? [],
+      statsError:
+        body.statsAvailable === false ? (body.statsError ?? "unknown") : null,
+    };
+  } catch (error) {
+    return {
+      ...base,
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export interface EmailPreview {
+  subject: string;
+  html: string;
+  text: string;
+}
+
+/** Render one email's preview with dummy data, from the owning app. */
+export async function fetchEmailPreview(
+  appPath: string,
+  id: string,
+): Promise<EmailPreview> {
+  const res = await fetch(
+    actionUrl(
+      appPath,
+      "render-transactional-email-preview",
+      `?id=${encodeURIComponent(id)}`,
+    ),
+    { credentials: "include", headers: { Accept: "application/json" } },
+  );
+  if (!res.ok) {
+    throw new Error(`Preview failed: HTTP ${res.status}`);
+  }
+  return (await res.json()) as EmailPreview;
+}

package/src/components/layout/Layout.tsx

@@ -28,6 +28,7 @@ import {
   IconKey,
   IconChevronDown,
   IconLayersSubtract,
+  IconMail,
   IconMessageQuestion,
   IconMessages,
   IconPlugConnected,
@@ -161,6 +162,13 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconPuzzle,
     section: "operations",
   },
+  {
+    id: "transactional-email",
+    to: "/transactional-email",
+    label: "Transactional email",
+    icon: IconMail,
+    section: "operations",
+  },
   {
     id: "vault",
     to: "/vault",

package/src/components/transactional-email-activity.tsx

@@ -0,0 +1,102 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { ActionQueryError } from "./action-query-error";
+import { type ProviderMetricsResult } from "./transactional-email-metrics";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Skeleton } from "./ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+
+export interface EmailActivityEntry {
+  msgId: string;
+  toEmail: string;
+  fromEmail: string;
+  subject: string;
+  status: string;
+  opensCount: number;
+  clicksCount: number;
+  lastEventTime: string;
+}
+
+/**
+ * Renders one email's activity feed. Used both inline on the detail page and
+ * inside the list page's activity dialog, so the "unavailable" and "empty"
+ * states only need to be written once.
+ */
+export function ActivityTable({
+  result,
+  isLoading,
+  isError,
+  error,
+  onRetry,
+}: {
+  result: ProviderMetricsResult<EmailActivityEntry[]> | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  error: unknown;
+  onRetry: () => void;
+}) {
+  const t = useT();
+
+  if (isError) {
+    return <ActionQueryError error={error} onRetry={onRetry} />;
+  }
+  if (isLoading) {
+    return <Skeleton className="h-40 w-full" />;
+  }
+  if (result && !result.available) {
+    return (
+      <Alert>
+        <IconInfoCircle className="size-4" />
+        <AlertTitle>
+          {t("dispatch.transactionalEmail.activityUnavailable")}
+        </AlertTitle>
+        <AlertDescription>{result.reason}</AlertDescription>
+      </Alert>
+    );
+  }
+  if (result && result.data.length === 0) {
+    return (
+      <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+        {t("dispatch.transactionalEmail.activityEmpty")}
+      </div>
+    );
+  }
+  if (!result) return null;
+
+  return (
+    <div className="max-h-96 overflow-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t("dispatch.transactionalEmail.recipient")}</TableHead>
+            <TableHead>{t("dispatch.transactionalEmail.subject")}</TableHead>
+            <TableHead>{t("dispatch.transactionalEmail.status")}</TableHead>
+            <TableHead>{t("dispatch.transactionalEmail.opens")}</TableHead>
+            <TableHead>{t("dispatch.transactionalEmail.lastEvent")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {result.data.map((entry) => (
+            <TableRow key={entry.msgId}>
+              <TableCell className="text-xs">{entry.toEmail}</TableCell>
+              <TableCell className="text-xs">{entry.subject}</TableCell>
+              <TableCell className="text-xs">{entry.status}</TableCell>
+              <TableCell className="text-xs tabular-nums">
+                {entry.opensCount}
+              </TableCell>
+              <TableCell className="text-xs">{entry.lastEventTime}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/transactional-email-metrics.tsx

@@ -0,0 +1,127 @@
+import { useT } from "@agent-native/core/client/i18n";
+
+import { Skeleton } from "./ui/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+/**
+ * Shared between the transactional email list and detail pages so both
+ * render the same "unknown vs. zero" and provider-availability rules.
+ */
+
+export interface EmailEngagement {
+  templateId: string;
+  delivered: number;
+  uniqueOpens: number;
+  uniqueClicks: number;
+  /** null when nothing was delivered in the window, so there is no rate yet. */
+  openRate: number | null;
+}
+
+export type ProviderMetricsResult<T> =
+  | { available: true; data: T }
+  | { available: false; reason: string };
+
+/**
+ * Renders a metric the backend could not read. "Unknown" and "zero" must stay
+ * visibly different — a dash with a reason is the only honest rendering.
+ */
+export function UnknownMetric({ reason }: { reason: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="cursor-help text-muted-foreground underline decoration-dotted underline-offset-2">
+          —
+        </span>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-64">{reason}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function SendsCell({
+  sent,
+  failed,
+}: {
+  sent: number | null;
+  failed: number | null;
+}) {
+  const t = useT();
+  if (sent === null) {
+    return (
+      <UnknownMetric reason={t("dispatch.transactionalEmail.sendLogUnread")} />
+    );
+  }
+  return (
+    <span className="tabular-nums">
+      {sent}
+      {failed !== null && failed > 0 ? (
+        <span className="ml-2 text-xs text-destructive">
+          {t("dispatch.transactionalEmail.failedCount", { count: failed })}
+        </span>
+      ) : null}
+      {failed === null ? (
+        <span className="ml-2 text-xs text-muted-foreground">
+          {t("dispatch.transactionalEmail.failuresUnknown")}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export function OpenRateCell({
+  engagement,
+  unavailableReason,
+  loading,
+}: {
+  engagement: EmailEngagement | undefined;
+  unavailableReason: string | null;
+  loading: boolean;
+}) {
+  const t = useT();
+  if (unavailableReason) {
+    return <UnknownMetric reason={unavailableReason} />;
+  }
+  if (loading) return <Skeleton className="h-4 w-10" />;
+  if (!engagement) {
+    return (
+      <UnknownMetric
+        reason={t("dispatch.transactionalEmail.noProviderRecord")}
+      />
+    );
+  }
+  if (engagement.openRate === null) {
+    return (
+      <span className="text-xs text-muted-foreground">
+        {t("dispatch.transactionalEmail.noDeliveredMail")}
+      </span>
+    );
+  }
+  return (
+    <span className="tabular-nums">
+      {`${(engagement.openRate * 100).toFixed(1)}%`}
+    </span>
+  );
+}
+
+export function LastSentCell({
+  lastSentAt,
+  sent,
+}: {
+  lastSentAt: number | null;
+  sent: number | null;
+}) {
+  const t = useT();
+  if (lastSentAt !== null) {
+    return <>{new Date(lastSentAt).toLocaleString()}</>;
+  }
+  if (sent === 0) {
+    return (
+      <span className="text-xs text-muted-foreground">
+        {t("dispatch.transactionalEmail.neverSent")}
+      </span>
+    );
+  }
+  return (
+    <UnknownMetric reason={t("dispatch.transactionalEmail.lastSentUnknown")} />
+  );
+}

package/src/components/transactional-email-preview.tsx

@@ -0,0 +1,88 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  fetchEmailPreview,
+  type EmailPreview,
+} from "../client/transactional-emails";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Skeleton } from "./ui/skeleton";
+
+/**
+ * The "core" app id means the email was read from Dispatch's own local
+ * catalog (see transactional-email.tsx), not a cross-app fetch, so its
+ * preview must render the same way — Dispatch always has the definition
+ * registered locally and a cross-app fetch would have no real appPath to hit.
+ */
+function useEmailPreviewQuery(appId: string, appPath: string, id: string) {
+  const isCore = appId === "core";
+  const local = useActionQuery<EmailPreview>(
+    "render-transactional-email-preview",
+    { id },
+    { enabled: isCore, retry: false },
+  );
+  const remote = useQuery({
+    queryKey: ["transactional-email-preview", appPath, id],
+    queryFn: () => fetchEmailPreview(appPath, id),
+    enabled: !isCore,
+    retry: false,
+  });
+  return isCore ? local : remote;
+}
+
+export function EmailPreviewPane({
+  appId,
+  appPath,
+  id,
+  name,
+}: {
+  appId: string;
+  appPath: string;
+  id: string;
+  name: string;
+}) {
+  const t = useT();
+  const preview = useEmailPreviewQuery(appId, appPath, id);
+
+  if (preview.isError) {
+    return (
+      <Alert variant="destructive">
+        <IconAlertTriangle className="size-4" />
+        <AlertTitle>
+          {t("dispatch.transactionalEmail.previewFailed")}
+        </AlertTitle>
+        <AlertDescription>
+          {preview.error instanceof Error
+            ? preview.error.message
+            : String(preview.error)}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+  if (preview.isLoading || !preview.data) {
+    return <Skeleton className="h-96 w-full" />;
+  }
+  return (
+    <div className="space-y-3">
+      <div>
+        <div className="text-xs text-muted-foreground">
+          {t("dispatch.transactionalEmail.subject")}
+        </div>
+        <div className="text-sm font-medium text-foreground">
+          {preview.data.subject}
+        </div>
+      </div>
+      {/* sandbox="" (no allow-scripts) keeps arbitrary email HTML from
+          running script in the Dispatch origin. */}
+      <iframe
+        title={t("dispatch.transactionalEmail.previewFrameTitle", { name })}
+        sandbox=""
+        srcDoc={preview.data.html}
+        // guard:allow-raw-color — the frame previews email HTML, which renders on white in mail clients regardless of app theme.
+        className="h-96 w-full rounded-xl border bg-white"
+      />
+    </div>
+  );
+}

package/src/routes/index.ts

@@ -47,6 +47,11 @@ export const dispatchRoutes: RouteConfig = [
   route("workspace", "./pages/workspace.js"),
   route("messaging", "./pages/messaging.js"),
   route("destinations", "./pages/destinations.js"),
+  route("transactional-email", "./pages/transactional-email.js"),
+  route(
+    "transactional-email/:appId/:id",
+    "./pages/transactional-email.$appId.$id.js",
+  ),
   route("identities", "./pages/identities.js"),
   route("approval", "./pages/approval.js"),
   route("approvals", "./pages/approvals.js"),