@company-semantics/contracts 27.14.0 → 28.0.0

package/src/email/render/auth-otp.ts

@@ -1,5 +1,5 @@
 /**
- * Auth OTP email (login code). Plain text + HTML.
+ * Auth OTP email (login code).
  *
  * INVARIANT: the OTP value is a runtime payload field — never a literal in this
  * package. Request metadata (IP / user agent) is gated by the caller-supplied
@@ -8,14 +8,12 @@
 
 import type { EmailPayloads } from "../types";
 
-import { baseTextLayout } from "./base-text";
 import {
-  asciiCodeBox,
-  paragraph,
+  type Block,
   ctaBox,
   footer,
-  htmlShell,
   keyValue,
+  paragraph,
   signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
@@ -27,45 +25,13 @@ export interface RenderOptions {
   includeRequestMetadata?: boolean;
 }
 
-export function renderAuthOtpBody(
+export function renderAuthOtp(
   payload: AuthOtpPayload,
   options?: RenderOptions,
-): string {
+): Block[] {
   const { otp, expiresInMinutes, requestIp, userAgent } = payload;
 
-  const sections: string[] = [];
-  sections.push("Your login code is below.");
-  sections.push(asciiCodeBox(otp));
-  sections.push(
-    `This code expires in ${expiresInMinutes} ${expiresInMinutes === 1 ? "minute" : "minutes"}.`,
-  );
-
-  // PRIVACY: IP address is PII under GDPR, so this feature is opt-in.
-  if (options?.includeRequestMetadata && (requestIp || userAgent)) {
-    sections.push("");
-    sections.push("Request details:");
-    if (requestIp) {
-      sections.push(`  IP address: ${requestIp}`);
-    }
-    if (userAgent) {
-      const truncated =
-        userAgent.length > 80 ? userAgent.substring(0, 77) + "..." : userAgent;
-      sections.push(`  Device: ${truncated}`);
-    }
-  }
-
-  sections.push("");
-  sections.push(
-    "If you didn't request this code, you can safely ignore this email.",
-  );
-
-  return baseTextLayout(sections.join("\n"));
-}
-
-export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
-  const { otp, expiresInMinutes } = payload;
-
-  return htmlShell([
+  const blocks: Block[] = [
     paragraph("Copy/paste code in login form:"),
     ctaBox({
       label: otp,
@@ -74,17 +40,33 @@ export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
       borderRadiusZero: true,
       letterSpacing: "4px",
     }),
-    keyValue("Status", "VALID", "tight"),
+    keyValue("Status", "VALID"),
     keyValue(
       "Expires in",
-      `${expiresInMinutes} ${expiresInMinutes === 1 ? "min" : "mins"}`,
+      `${expiresInMinutes} ${expiresInMinutes === 1 ? "minute" : "minutes"}`,
       "normal",
     ),
+  ];
+
+  // PRIVACY: IP address is PII under GDPR, so this is opt-in.
+  if (options?.includeRequestMetadata && (requestIp || userAgent)) {
+    blocks.push(paragraph("Request details:", "tight"));
+    if (requestIp) blocks.push(keyValue("IP address", requestIp));
+    if (userAgent) {
+      const truncated =
+        userAgent.length > 80 ? userAgent.slice(0, 77) + "..." : userAgent;
+      blocks.push(keyValue("Device", truncated, "normal"));
+    }
+  }
+
+  blocks.push(
     footer(
       `This code was generated to authorize a login to ${COMPANY_NAME}.`,
       "It expires automatically and cannot be reused.",
     ),
     paragraph("If this wasn't you, no action is required."),
     signature(),
-  ]);
+  );
+
+  return blocks;
 }

package/src/email/render/blocks.ts

@@ -1,30 +1,80 @@
 /**
- * Shared email building blocks.
+ * Shared email building blocks — dual-output components.
  *
- * The single source of truth for the styled markup every template composes.
- * Principle: **blocks own the styling; templates supply only content text.**
- * Editing a block here restyles every email — HTML and plain text — across the
- * backend (real sends) and the app (Ladle preview).
+ * Every component returns a `Block` (`{ html, text }`), so a template composes
+ * ONE list of blocks and both surfaces derive from the same source. Principle:
+ * **blocks own the styling; templates supply only content — the only allowable
+ * UI is the components.** Editing a block restyles every email, HTML and plain
+ * text, across the backend (real sends) and the app (Ladle preview).
  *
  * INVARIANTS:
- * - Pure string functions, no side effects.
- * - Callers pass already-escaped content for any user-controlled HTML field.
+ * - Pure functions, no side effects.
+ * - Components escape their own content; templates pass raw text (+ `bold(...)`
+ *   for inline emphasis). No template hand-writes markup or raw strings.
  */
 
-import { COMPANY_NAME, MONO_FONT_STACK } from "./constants";
+import { COMPANY_NAME, MONO_FONT_STACK, SUPPORT_EMAIL } from "./constants";
 import { escapeHtml } from "./escape-html";
 
 const MONO = `font-family: ${MONO_FONT_STACK};`;
 
 // =============================================================================
-// HTML — shell
+// Core types
+// =============================================================================
+
+/** A rendered block — both presentations of one component. `spacing` controls
+ * the plain-text gap AFTER this block ("normal" = blank line, else none). */
+export interface Block {
+  html: string;
+  text: string;
+  spacing: Spacing;
+}
+
+/** An inline segment — for in-line emphasis inside a paragraph. */
+export interface Inline {
+  html: string;
+  text: string;
+}
+
+/** Paragraph content: raw string(s) (auto-escaped for HTML) and/or `bold(...)`. */
+export type InlineContent = string | Inline | Array<string | Inline>;
+
+/** Bold inline emphasis (plain in text). */
+export function bold(s: string): Inline {
+  return { html: `<b>${escapeHtml(s)}</b>`, text: s };
+}
+
+/** Normalize a segment: a raw string is escaped for HTML, passed through for text. */
+function toInline(seg: string | Inline): Inline {
+  return typeof seg === "string" ? { html: escapeHtml(seg), text: seg } : seg;
+}
+
+function renderInline(content: InlineContent): { html: string; text: string } {
+  const segs = (Array.isArray(content) ? content : [content]).map(toInline);
+  return {
+    html: segs.map((s) => s.html).join(""),
+    text: segs.map((s) => s.text).join(""),
+  };
+}
+
+/** Vertical spacing options for a paragraph. */
+export type Spacing = "normal" | "tight" | "none";
+const SPACING: Record<Spacing, string> = {
+  normal: "0 0 20px 0",
+  tight: "0 0 4px 0",
+  none: "0",
+};
+
+// =============================================================================
+// Shells
 // =============================================================================
 
 /** Wrap body blocks in the shared `<!DOCTYPE>` monospace shell. */
-export function htmlShell(blocks: string | string[]): string {
-  const inner = Array.isArray(blocks)
-    ? blocks.filter(Boolean).join("\n")
-    : blocks;
+export function htmlShell(blocks: Block[]): string {
+  const inner = blocks
+    .map((b) => b.html)
+    .filter(Boolean)
+    .join("\n");
   return `<!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8"></head>
@@ -34,56 +84,79 @@ ${inner}
 </html>`;
 }
 
+/** Join body blocks into the plain-text email (blank-line separated per each
+ * block's spacing, trailing newline). */
+export function textShell(blocks: Block[]): string {
+  let out = "";
+  blocks.forEach((b, i) => {
+    out += b.text;
+    if (i < blocks.length - 1) out += b.spacing === "normal" ? "\n\n" : "\n";
+  });
+  return out.trim() + "\n";
+}
+
 // =============================================================================
-// HTML — paragraphs
+// Paragraphs
 // =============================================================================
 
-/** Vertical spacing options for a mono paragraph. */
-export type Spacing = "normal" | "tight" | "none";
-const SPACING: Record<Spacing, string> = {
-  normal: "0 0 20px 0",
-  tight: "0 0 4px 0",
-  none: "0",
-};
-
 /**
- * Email paragraph — mono (matching the body shell), 14px, with configurable
- * vertical spacing. The single paragraph primitive: greeting / meta / footer /
- * signature all build on it, and templates use it directly for body lines.
+ * Email paragraph — mono (matching the body shell), 14px, configurable spacing.
+ * The single paragraph primitive: greeting / keyValue / footer / signature all
+ * build on it, and templates use it directly for body lines.
  */
-export function paragraph(html: string, spacing: Spacing = "normal"): string {
-  return `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`;
+export function paragraph(
+  content: InlineContent,
+  spacing: Spacing = "normal",
+): Block {
+  const { html, text } = renderInline(content);
+  return {
+    html: `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`,
+    text,
+    spacing,
+  };
 }
 
-/** "Hi Name," / "Hi," greeting. Escapes the name. */
-export function greeting(recipientName?: string): string {
-  return paragraph(recipientName ? `Hi ${escapeHtml(recipientName)},` : "Hi,");
+/** "Hi Name," / "Hi," greeting. */
+export function greeting(recipientName?: string): Block {
+  return paragraph(recipientName ? `Hi ${recipientName},` : "Hi,");
 }
 
-/** "Label: <b>value</b>" key/value row. */
+/** "Label: **value**" key/value row (value bold in HTML; tight by default). */
 export function keyValue(
   label: string,
-  valueHtml: string,
+  value: string,
   spacing: Spacing = "tight",
-): string {
-  return paragraph(`${label}: <b>${valueHtml}</b>`, spacing);
+): Block {
+  return paragraph([`${label}: `, bold(value)], spacing);
 }
 
-/** Footer paragraph: first line + optional second line after a `<br>`. */
+/** Footer paragraph: first line + optional second line after a line break. */
 export function footer(
   firstLine: string,
   secondLine?: string,
   spacing: Spacing = "normal",
-): string {
-  return paragraph(
-    secondLine ? `${firstLine}<br>${secondLine}` : firstLine,
+): Block {
+  const html = secondLine
+    ? `${escapeHtml(firstLine)}<br>${escapeHtml(secondLine)}`
+    : escapeHtml(firstLine);
+  const text = secondLine ? `${firstLine}\n${secondLine}` : firstLine;
+  return {
+    html: `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`,
+    text,
     spacing,
-  );
+  };
 }
 
-/** Trailing company signature paragraph. */
-export function signature(): string {
-  return paragraph(COMPANY_NAME, "none");
+/**
+ * Trailing sign-off. Owns the full company sign-off in both surfaces: the
+ * company (or custom `signer`) name and a "Questions? Contact <support>" line.
+ */
+export function signature(signer: string = COMPANY_NAME): Block {
+  return {
+    html: `<p style="${MONO} font-size: 14px; margin: ${SPACING.none};">${escapeHtml(signer)}<br><span style="color: #888;">Questions? Contact <a href="mailto:${SUPPORT_EMAIL}" style="color: #888;">${SUPPORT_EMAIL}</a></span></p>`,
+    text: `---\n${signer}\nQuestions? Contact ${SUPPORT_EMAIL}`,
+    spacing: "none",
+  };
 }
 
 /** The standard "no action required" reassurance line (content constant). */
@@ -98,19 +171,24 @@ export const ACCESS_PHRASE: Record<"editor" | "commenter" | "viewer", string> =
   };
 
 /** Centered continuation dots separator (chat-shared). */
-export function chatDots(): string {
-  return `<p style="${MONO} font-size: 20px; margin: 0 0 16px 0; max-width: 320px; text-align: center;">⋮</p>`;
+export function chatDots(): Block {
+  return {
+    html: `<p style="${MONO} font-size: 20px; margin: 0 0 16px 0; max-width: 320px; text-align: center;">⋮</p>`,
+    text: "                  ⋮",
+    spacing: "normal",
+  };
 }
 
 // =============================================================================
-// HTML — CTA box
+// CTA box
 // =============================================================================
 
 /** Options for the `>> LABEL <<` call-to-action box. */
 export interface CtaBoxOptions {
   /** Text between the chevrons (already display-safe). */
   label: string;
-  /** When present, the label links to this URL. */
+  /** When present, the label links to this URL (and the URL rides under the
+   * plain-text box). */
   href?: string;
   /** Inner-cell padding, e.g. `"16px 24px"`. */
   padding: string;
@@ -124,8 +202,20 @@ export interface CtaBoxOptions {
   letterSpacing?: string;
 }
 
-/** The bordered `>> LABEL <<` CTA box (OTP / JOIN / OPEN / VIEW TEAM / …). */
-export function ctaBox(opts: CtaBoxOptions): string {
+/** Padding columns on each side of the `>> LABEL <<` line in the ASCII box. */
+const CTA_BOX_PAD = 3;
+
+/** `>> LABEL <<` ASCII box (`*` corners): 3 lines, sized to the label. */
+function asciiCtaBox(label: string): string {
+  const pad = " ".repeat(CTA_BOX_PAD);
+  const inner = `${pad}>> ${label} <<${pad}`;
+  const border = `*${"-".repeat(inner.length)}*`;
+  return [border, `|${inner}|`, border].join("\n");
+}
+
+/** The bordered `>> LABEL <<` CTA box (OTP / JOIN / OPEN / VIEW TEAM / …). When
+ * `href` is given, HTML links the label and plain text prints the URL below. */
+export function ctaBox(opts: CtaBoxOptions): Block {
   const {
     label,
     href,
@@ -146,98 +236,24 @@ export function ctaBox(opts: CtaBoxOptions): string {
     `padding: ${padding}; text-align: center; ${MONO} font-size: ${fontSize};` +
     (letterSpacing ? ` letter-spacing: ${letterSpacing};` : ``);
 
-  const chevrons = `<b>&gt;&gt; ${label} &lt;&lt;</b>`;
+  const chevrons = `<b>&gt;&gt; ${escapeHtml(label)} &lt;&lt;</b>`;
   const inner = href
     ? `<a href="${href}" style="color: #0047FF; text-decoration: underline;">${chevrons}</a>`
     : chevrons;
 
-  return `<table cellpadding="0" cellspacing="0" border="0" style="${tableStyle}">
+  const html = `<table cellpadding="0" cellspacing="0" border="0" style="${tableStyle}">
   <tr><td style="${tdStyle}">
     ${inner}
   </td></tr>
 </table>`;
-}
-
-// =============================================================================
-// HTML — chat bubbles
-// =============================================================================
-
-/**
- * Right-aligned user chat bubble. Pass raw text — it is truncated by
- * clampMessage and escaped here. When `from` is given (raw) it renders as an
- * attribution line below the bubble, right-aligned to the bubble's right edge
- * (clear of the face). Doubles as the "message from …" quote.
- */
-export function chatUserBubble(text: string, from?: string): string {
-  const contentHtml = escapeHtml(clampMessage(text));
-  const attributionRow = from
-    ? `
-  <tr>
-    <td style="${MONO} font-size: 11px; color: #888; text-align: right; padding-top: 4px;">${escapeHtml(from)}</td>
-    <td></td>
-  </tr>`
-    : "";
-  return `<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 16px 0;">
-  <tr>
-    <td style="border: 1px solid #1a1a1a; border-radius: 12px 12px 0 12px; padding: 10px 14px; min-width: 280px; text-align: right; ${MONO} font-size: 13px; background: #f5f5f5;">${contentHtml}</td>
-    <td style="${MONO} font-size: 14px; padding-left: 8px; vertical-align: bottom;">(•̀_ರ╮)</td>
-  </tr>${attributionRow}
-</table>`;
-}
-
-/** Left-aligned assistant chat bubble. Pass raw text — truncated + escaped here. */
-export function chatAssistantBubble(text: string): string {
-  const contentHtml = escapeHtml(clampMessage(text));
-  return `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;">
-  <tr>
-    <td style="${MONO} font-size: 14px; padding-right: 8px; vertical-align: bottom;">[c_S]</td>
-    <td style="border: 1px solid #1a1a1a; border-radius: 12px 12px 12px 0; padding: 10px 14px; min-width: 280px; ${MONO} font-size: 13px; background: #f5f5f5;">${contentHtml}</td>
-  </tr>
-</table>`;
-}
-
-// =============================================================================
-// Plain text — CTA / code boxes
-// =============================================================================
-
-const CODE_BOX_WIDTH = 18;
 
-/** Padding columns on each side of the `>> LABEL <<` line in the CTA box. */
-const CTA_BOX_PAD = 3;
+  const text = href ? `${asciiCtaBox(label)}\n\n${href}` : asciiCtaBox(label);
 
-function centered(value: string, width: number): string {
-  const pad = Math.max(0, width - value.length);
-  const left = Math.floor(pad / 2);
-  const right = pad - left;
-  return `${" ".repeat(left)}${value}${" ".repeat(right)}`;
-}
-
-/**
- * `>> LABEL <<` ASCII box (`*` corners): 3 lines, sized to the label with
- * `CTA_BOX_PAD` padding columns on each side.
- */
-export function asciiCtaBox(label: string): string {
-  const pad = " ".repeat(CTA_BOX_PAD);
-  const inner = `${pad}>> ${label} <<${pad}`;
-  const border = `*${"-".repeat(inner.length)}*`;
-  return [border, `|${inner}|`, border].join("\n");
-}
-
-/** ASCII box that displays a code value (OTP; `+` corners, centered). */
-export function asciiCodeBox(value: string): string {
-  const border = `+${"-".repeat(CODE_BOX_WIDTH)}+`;
-  const blank = `|${" ".repeat(CODE_BOX_WIDTH)}|`;
-  return [
-    border,
-    blank,
-    `|${centered(value, CODE_BOX_WIDTH)}|`,
-    blank,
-    border,
-  ].join("\n");
+  return { html, text, spacing: "normal" };
 }
 
 // =============================================================================
-// Plain text — chat boxes
+// Chat bubbles — one dual-output block per role
 // =============================================================================
 
 /** Greedy word-wrap into lines of at most `width` chars (hard-breaks long words). */
@@ -281,46 +297,63 @@ function wrapClamped(text: string, width: number, maxLines: number): string[] {
   return kept;
 }
 
-/** Plain-text continuation dots, centered under the 38-char chat box. */
-export function chatDotsText(): string {
-  return "                  ⋮";
-}
-
 /**
  * The one truncation authority: clamp a raw message to MAX_MESSAGE_LINES ×
- * MESSAGE_WIDTH, ellipsized. Every chat box/bubble runs its content through
- * this, so HTML and plain text truncate at exactly the same point. Pass raw
- * (unescaped) text.
+ * MESSAGE_WIDTH, ellipsized. Both surfaces of a chat block run content through
+ * this, so HTML and plain text truncate at exactly the same point.
  */
-export function clampMessage(text: string): string {
+function clampMessage(text: string): string {
   return wrapClamped(text, MESSAGE_WIDTH, MAX_MESSAGE_LINES).join(" ");
 }
 
 /**
- * Right-aligned user chat box. `content` is truncated by clampMessage, then
- * wrapped for display. The kaomoji rides the bottom border — bottom-aligned
- * like a chat avatar. When `from` is given it renders as an attribution line
- * below the box, right-aligned to the box's right edge (clear of the face).
- * Doubles as the "message from …" quote.
+ * Right-aligned user chat message. Truncated by clampMessage. The avatar rides
+ * the bottom (bottom-aligned like a real chat). When `from` is given it renders
+ * as an attribution below, right-aligned to the message's right edge (clear of
+ * the face). Doubles as the "message from …" quote.
  */
-export function chatUserBoxText(content: string, from?: string): string {
+export function chatUser(content: string, from?: string): Block {
+  const clamped = clampMessage(content);
+
+  const attributionRow = from
+    ? `
+  <tr>
+    <td style="${MONO} font-size: 11px; color: #888; text-align: right; padding-top: 4px;">${escapeHtml(from)}</td>
+    <td></td>
+  </tr>`
+    : "";
+  const html = `<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 16px 0;">
+  <tr>
+    <td style="border: 1px solid #1a1a1a; border-radius: 12px 12px 0 12px; padding: 10px 14px; min-width: 280px; text-align: right; ${MONO} font-size: 13px; background: #f5f5f5;">${escapeHtml(clamped)}</td>
+    <td style="${MONO} font-size: 14px; padding-left: 8px; vertical-align: bottom;">(•̀_ರ╮)</td>
+  </tr>${attributionRow}
+</table>`;
+
   const border = "─".repeat(MESSAGE_WIDTH + 1);
-  const lines = wrapText(clampMessage(content), MESSAGE_WIDTH);
+  const lines = wrapText(clamped, MESSAGE_WIDTH);
   const body = lines.map((line) => `│${line.padStart(MESSAGE_WIDTH)} │`);
   const box = [`┌${border}┐`, ...body, `└${border}┘  (•̀_ರ╮)`];
   if (from) box.push(from.padStart(MESSAGE_WIDTH + 3));
-  return box.join("\n");
+
+  return { html, text: box.join("\n"), spacing: "normal" };
 }
 
-/** Left-aligned assistant chat box with `[c_S]` label (clampMessage-truncated, 36 wide). */
-export function chatAssistantBoxText(text: string): string {
-  const lineWidth = 36;
-  const lines = wrapText(clampMessage(text), lineWidth);
+/** Left-aligned assistant chat message with `[c_S]` avatar (bottom-aligned). */
+export function chatAssistant(content: string): Block {
+  const clamped = clampMessage(content);
 
+  const html = `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;">
+  <tr>
+    <td style="${MONO} font-size: 14px; padding-right: 8px; vertical-align: bottom;">[c_S]</td>
+    <td style="border: 1px solid #1a1a1a; border-radius: 12px 12px 12px 0; padding: 10px 14px; min-width: 280px; ${MONO} font-size: 13px; background: #f5f5f5;">${escapeHtml(clamped)}</td>
+  </tr>
+</table>`;
+
+  const lineWidth = 36;
+  const lines = wrapText(clamped, lineWidth);
   const top = "       ┌──────────────────────────────────────┐";
-  // [c_S] rides the bottom border — bottom-aligned like a chat avatar.
   const bot = "[c_S]  └──────────────────────────────────────┘";
   const boxLines = lines.map((line) => `       │ ${line.padEnd(lineWidth)} │`);
 
-  return [top, ...boxLines, bot].join("\n");
+  return { html, text: [top, ...boxLines, bot].join("\n"), spacing: "normal" };
 }

package/src/email/render/chat-shared.ts

@@ -1,64 +1,35 @@
 /**
- * Chat-shared email (someone shared a chat). Plain text + HTML.
+ * Chat-shared email (someone shared a chat).
  */
 
 import type { EmailPayloads } from "../types";
 
-import { baseTextLayout } from "./base-text";
 import {
-  asciiCtaBox,
-  paragraph,
-  chatAssistantBoxText,
-  chatAssistantBubble,
+  type Block,
+  chatAssistant,
   chatDots,
-  chatDotsText,
-  chatUserBoxText,
-  chatUserBubble,
+  chatUser,
   ctaBox,
   footer,
-  htmlShell,
   NOTICE,
+  paragraph,
   signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 
 export type ChatSharedPayload = EmailPayloads["chat.shared"];
 
-export function renderChatSharedBody(payload: ChatSharedPayload): string {
+export function renderChatShared(payload: ChatSharedPayload): Block[] {
   const { chatTitle, shareUrl, previewText } = payload;
 
-  const sections: string[] = [];
-  sections.push("A chat has been shared with you.");
-  sections.push("");
-  sections.push(chatUserBoxText(chatTitle));
-
-  if (previewText) {
-    sections.push("");
-    sections.push(chatAssistantBoxText(previewText));
-  }
-
-  sections.push("");
-  sections.push(chatDotsText());
-  sections.push("");
-  sections.push(asciiCtaBox("SEE MORE"));
-  sections.push("");
-  sections.push(shareUrl);
-  sections.push("");
-  sections.push(`This share was sent via ${COMPANY_NAME}.`);
-  sections.push("");
-  sections.push(NOTICE);
-
-  return baseTextLayout(sections.join("\n"));
-}
-
-export function renderChatSharedHtml(payload: ChatSharedPayload): string {
-  const { chatTitle, shareUrl, previewText } = payload;
+  const blocks: Block[] = [
+    paragraph("A chat has been shared with you."),
+    chatUser(chatTitle),
+  ];
 
-  const previewHtml = previewText ? chatAssistantBubble(previewText) : "";
+  if (previewText) blocks.push(chatAssistant(previewText));
 
-  return htmlShell([
-    paragraph("A chat has been shared with you."),
-    chatUserBubble(chatTitle) + previewHtml,
+  blocks.push(
     chatDots(),
     ctaBox({
       label: "SEE MORE",
@@ -70,5 +41,7 @@ export function renderChatSharedHtml(payload: ChatSharedPayload): string {
     footer(`This share was sent via ${COMPANY_NAME}.`),
     paragraph(NOTICE, "tight"),
     signature(),
-  ]);
+  );
+
+  return blocks;
 }