@dbx-tools/ui-email 0.6.67 → 0.6.69

package/README.md

@@ -49,9 +49,9 @@ const draft = email.emailMessageSchema.parse(toolCall.args);
 ```
 
 `EmailApprovalCard` is the chat-facing component for the `send_email` tool. It
-renders the complete branded React Email card, including envelope metadata and
-attachments, plus Approve/Deny actions while leaving tool-call state and
-transport decisions to the host app.
+renders mail-client chrome (sender, recipients, subject, attachments) around the
+branded React Email card, plus Approve/Deny actions while leaving tool-call
+state and transport decisions to the host app.
 
 Wire `onApprove` and `onDeny` to the chat framework's tool-result mechanism.
 The component deliberately does not call the email API itself; the server-side
@@ -65,11 +65,13 @@ import { EmailPreview } from "@dbx-tools/ui-email/react";
 <EmailPreview email={draft} />;
 ```
 
-Use `EmailPreview` when a page needs the same full branded card without action
-buttons, such as a review queue, audit log, or test harness. It projects the
-nearest `BrandProvider` context into email-safe colors and typography, so a live
-site brand picker updates the preview too. Pass the optional `brand` prop when a
-specific message needs an independent campaign or partner identity.
+Use `EmailPreview` when a page needs the same received-mail presentation without
+action buttons, such as a review queue, audit log, or test harness. Envelope
+fields live in the client chrome; the card itself matches delivered HTML. It
+projects the nearest `BrandProvider` context into email-safe colors and
+typography, so a live site brand picker updates the preview too. Pass the
+optional `brand` prop when a specific message needs an independent campaign or
+partner identity.
 
 ## Provide A Compose View
 

package/package.json

@@ -24,11 +24,11 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.67",
-    "@dbx-tools/shared-email": "0.6.67",
-    "@dbx-tools/shared-email-template": "0.6.67",
-    "@dbx-tools/ui-appkit": "0.6.67",
-    "@dbx-tools/ui-branding": "0.6.67",
+    "@dbx-tools/shared-core": "0.6.69",
+    "@dbx-tools/shared-email": "0.6.69",
+    "@dbx-tools/shared-email-template": "0.6.69",
+    "@dbx-tools/ui-appkit": "0.6.69",
+    "@dbx-tools/ui-branding": "0.6.69",
     "lucide-react": "^0.554.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
@@ -37,7 +37,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.67",
+  "version": "0.6.69",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/email-approval-card.tsx

@@ -1,16 +1,17 @@
 import {
   EmailCard,
   emailBrandFromContext,
+  resolveEmailBrand,
   type EmailBrand,
 } from "@dbx-tools/shared-email-template";
 import { Button } from "@dbx-tools/ui-appkit/react";
 import { useBrand } from "@dbx-tools/ui-branding/react";
-import { CheckIcon, MailIcon, XIcon } from "lucide-react";
+import { CheckIcon, MailIcon, PaperclipIcon, XIcon } from "lucide-react";
 import { attachmentNames, joinAddresses, type EmailDraft } from "./fields.ts";
 
 // Presentational pieces for an outbound email awaiting a human Approve /
-// Deny: the field preview (To / Cc / Subject / Body / Files, body rendered
-// through the shared React Email presentation) and an approval card wrapping it.
+// Deny: a mail-client chrome (sender, recipients, subject, attachments)
+// around the shared React Email card, plus an approval card wrapping it.
 // State and the resolve transport belong to the caller; these components
 // only render and report intent. The editable counterpart is
 // `EmailComposeView` in `./email-compose`; both share `./fields` and
@@ -25,31 +26,81 @@ export interface EmailPreviewProps {
   brand?: EmailBrand;
 }
 
+/** Initials for the sender avatar when no logo is available. */
+function senderInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return `${parts[0]![0] ?? ""}${parts[1]![0] ?? ""}`.toUpperCase();
+}
+
+/** One muted "Label: value" row in the client chrome. */
+const ChromeRow = ({ label, value }: { label: string; value: string }) => (
+  <p className="truncate text-xs text-muted-foreground">
+    <span className="font-medium text-foreground/70">{label}</span> {value}
+  </p>
+);
+
 /**
- * Render an email draft as a labelled `To` / `Cc` / `Subject` / `Body` /
- * `Files` list. `to` / `cc` may carry one or more addresses; the body is
- * rendered through the same React Email body used for delivery. Fields that
- * are empty are omitted.
+ * Render an email draft the way a mail client shows a received message: sender
+ * identity, recipients, subject, and attachment chips in chrome around the
+ * same branded React Email card used for delivery. Envelope fields stay out of
+ * the delivered HTML — they are transport metadata, not body content.
  */
 export const EmailPreview = ({ email, brand }: EmailPreviewProps) => {
   const { context } = useBrand();
+  const theme = resolveEmailBrand(brand ?? emailBrandFromContext(context));
   const to = joinAddresses(email.to);
   const cc = joinAddresses(email.cc);
   const bcc = joinAddresses(email.bcc);
-  const attachments = attachmentNames(email.attachments);
-  const headers: Array<readonly [string, string]> = [];
-  if (to) headers.push(["To", to]);
-  if (cc) headers.push(["Cc", cc]);
-  if (bcc) headers.push(["Bcc", bcc]);
-  if (attachments) headers.push(["Files", attachments]);
+  const subject = email.subject?.trim() || "Message";
+  const files = email.attachments?.map((att) => att.filename).filter(Boolean) ?? [];
+  const attachmentSummary = attachmentNames(email.attachments);
+
   return (
-    <div className="overflow-x-auto rounded-2xl bg-muted/20 p-2">
-      <EmailCard
-        subject={email.subject || "Message"}
-        body={email.body || ""}
-        headers={headers}
-        brand={brand ?? emailBrandFromContext(context)}
-      />
+    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
+      <div className="space-y-3 border-b border-border bg-background px-4 py-3">
+        <div className="flex items-start gap-3">
+          <div
+            className="flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
+            style={{ backgroundColor: theme.accent, color: theme.onAccent }}
+            aria-hidden
+          >
+            {senderInitials(theme.name)}
+          </div>
+          <div className="min-w-0 flex-1 space-y-1">
+            <div className="flex items-baseline justify-between gap-3">
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold text-foreground">{theme.name}</p>
+                {theme.website ? (
+                  <p className="truncate text-xs text-muted-foreground">{theme.website}</p>
+                ) : null}
+              </div>
+              <time className="shrink-0 text-xs text-muted-foreground">Just now</time>
+            </div>
+            {to ? <ChromeRow label="To" value={to} /> : null}
+            {cc ? <ChromeRow label="Cc" value={cc} /> : null}
+            {bcc ? <ChromeRow label="Bcc" value={bcc} /> : null}
+            <p className="pt-1 text-sm font-medium leading-snug text-foreground">{subject}</p>
+          </div>
+        </div>
+        {files.length > 0 ? (
+          <ul className="flex flex-wrap gap-1.5" aria-label={`Attachments: ${attachmentSummary}`}>
+            {files.map((filename) => (
+              <li
+                key={filename}
+                className="inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-muted/40 px-2 py-1 text-xs text-foreground"
+              >
+                <PaperclipIcon className="size-3 shrink-0 text-muted-foreground" />
+                <span className="truncate">{filename}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      <div className="bg-muted/30 p-3">
+        <EmailCard subject={subject} body={email.body || ""} brand={theme} />
+      </div>
     </div>
   );
 };