@agent-native/dispatch 0.17.3 → 0.17.5

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