@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/task-queue-health.tsx

@@ -0,0 +1,175 @@
+import { useChangeVersions } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconAlertTriangle, IconPlayerPlay } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  formatQueueAgeSeconds,
+  getDispatchTaskQueueStats,
+  type TaskQueueStats,
+  ZERO_TASK_QUEUE_STATS,
+} from "../lib/task-queue";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./ui/skeleton";
+
+const TASK_QUEUE_QUERY_KEY = ["dispatch-task-queue"] as const;
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat(undefined, {
+    notation: value >= 10_000 ? "compact" : "standard",
+  }).format(value);
+}
+
+function useTaskQueueStats() {
+  const version = useChangeVersions(["action", "screen-refresh"]);
+  return useQuery<TaskQueueStats>({
+    queryKey: [...TASK_QUEUE_QUERY_KEY, version],
+    queryFn: getDispatchTaskQueueStats,
+    placeholderData: (prev) => prev,
+    // Queue work can finish outside the action transport, so retain a bounded
+    // fallback only here. Idle workspaces back off aggressively; active queues
+    // keep the existing monitoring cadence.
+    refetchInterval: (query) => {
+      const stats = query.state.data;
+      return stats && (stats.pending > 0 || stats.processing > 0)
+        ? 15_000
+        : 300_000;
+    },
+    staleTime: 5_000,
+  });
+}
+
+function QueueCell({
+  label,
+  value,
+  danger,
+}: {
+  label: string;
+  value: number;
+  danger?: boolean;
+}) {
+  return (
+    <div className="rounded-md border bg-background px-2 py-2">
+      <div
+        className={cn(
+          "text-lg font-semibold text-foreground",
+          danger && "text-destructive",
+        )}
+      >
+        {formatNumber(value)}
+      </div>
+      <div className="truncate text-[11px] text-muted-foreground">{label}</div>
+    </div>
+  );
+}
+
+export function TaskQueueHealth() {
+  const t = useT();
+  const query = useTaskQueueStats();
+  const taskQueue = query.data ?? ZERO_TASK_QUEUE_STATS;
+  const hasFailure = taskQueue.failed_last_hour > 0;
+  const hasBacklog =
+    taskQueue.pending > 5 || taskQueue.oldest_pending_age_seconds > 300;
+  const oldestAge = formatQueueAgeSeconds(taskQueue.oldest_pending_age_seconds);
+  const oldestAgeLabel =
+    oldestAge === "none" ? t("dispatch.pages.queueAgeNone") : oldestAge;
+
+  return (
+    <section className="rounded-lg bg-card p-4">
+      <div className="flex min-w-0 items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <IconPlayerPlay
+            size={16}
+            className="shrink-0 text-muted-foreground"
+          />
+          <div className="min-w-0">
+            <h2 className="truncate text-sm font-semibold text-foreground">
+              {t("dispatch.pages.deliveryQueue")}
+            </h2>
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {hasFailure
+                ? t("dispatch.pages.failedLastHour", {
+                    count: taskQueue.failed_last_hour,
+                  })
+                : t("dispatch.pages.processingCount", {
+                    count: taskQueue.processing,
+                  })}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {query.isLoading && !query.data ? (
+        <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <Skeleton key={index} className="h-14 rounded-md" />
+          ))}
+        </div>
+      ) : (
+        <>
+          <div className="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <QueueCell
+              label={t("dispatch.pages.queued")}
+              value={taskQueue.pending}
+            />
+            <QueueCell
+              label={t("dispatch.pages.active")}
+              value={taskQueue.processing}
+            />
+            <QueueCell
+              label={t("dispatch.pages.done1h")}
+              value={taskQueue.completed_last_hour}
+            />
+            <QueueCell
+              label={t("dispatch.pages.failed1h")}
+              value={taskQueue.failed_last_hour}
+              danger={hasFailure}
+            />
+          </div>
+
+          <div
+            className={cn(
+              "mt-3 rounded-md border px-3 py-2 text-xs",
+              hasFailure
+                ? "border-destructive/30 bg-destructive/5 text-destructive"
+                : hasBacklog
+                  ? "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+                  : "bg-muted/20 text-muted-foreground",
+            )}
+          >
+            {t("dispatch.pages.oldestQueued", { age: oldestAgeLabel })}
+          </div>
+
+          {hasFailure ? (
+            <div className="mt-3 flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+              <IconAlertTriangle size={14} className="mt-0.5 shrink-0" />
+              <span>{t("dispatch.pages.queueFailureHint")}</span>
+            </div>
+          ) : null}
+
+          {taskQueue.recent_failures.length > 0 ? (
+            <div className="mt-3 divide-y rounded-md border">
+              {taskQueue.recent_failures.slice(0, 3).map((failure) => (
+                <div key={failure.id} className="px-3 py-2">
+                  <div className="flex items-center justify-between gap-3 text-xs">
+                    <span className="font-medium text-foreground">
+                      {failure.platform || t("dispatch.pages.unknownPlatform")}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {t("dispatch.pages.attemptsCount", {
+                        count: failure.attempts,
+                      })}
+                    </span>
+                  </div>
+                  <div className="mt-1 truncate text-xs text-muted-foreground">
+                    {failure.error || t("dispatch.pages.noErrorMessage")}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </>
+      )}
+    </section>
+  );
+}

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/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { IconChevronDown } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};