@company-semantics/contracts 27.13.0 → 27.14.0

package/src/email/render/__tests__/render-snapshot.test.ts

@@ -28,10 +28,12 @@ function add<K extends ImplementedEmailKind>(
   payload: EmailPayloads[K],
   options?: RenderEmailOptions,
 ): void {
+  // `payload as never`: the add() call sites are type-checked (payload:
+  // EmailPayloads[K]); this only bridges the generic conditional in renderEmail.
   fixtures.push({
     kind,
     name,
-    render: () => renderEmail(kind, payload, options),
+    render: () => renderEmail(kind, payload as never, options),
   });
 }
 

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

@@ -11,13 +11,12 @@ import type { EmailPayloads } from "../types";
 import { baseTextLayout } from "./base-text";
 import {
   asciiCodeBox,
-  bodyParagraph,
+  paragraph,
   ctaBox,
   footer,
   htmlShell,
-  metaRow,
-  monoParagraph,
-  signatureLine,
+  keyValue,
+  signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 
@@ -67,7 +66,7 @@ export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
   const { otp, expiresInMinutes } = payload;
 
   return htmlShell([
-    bodyParagraph("Copy/paste code in login form:"),
+    paragraph("Copy/paste code in login form:"),
     ctaBox({
       label: otp,
       padding: "20px 24px",
@@ -75,8 +74,8 @@ export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
       borderRadiusZero: true,
       letterSpacing: "4px",
     }),
-    metaRow("Status", "VALID", "tight"),
-    metaRow(
+    keyValue("Status", "VALID", "tight"),
+    keyValue(
       "Expires in",
       `${expiresInMinutes} ${expiresInMinutes === 1 ? "min" : "mins"}`,
       "normal",
@@ -85,7 +84,7 @@ export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
       `This code was generated to authorize a login to ${COMPANY_NAME}.`,
       "It expires automatically and cannot be reused.",
     ),
-    monoParagraph("If this wasn't you, no action is required."),
-    signatureLine(),
+    paragraph("If this wasn't you, no action is required."),
+    signature(),
   ]);
 }

package/src/email/render/blocks.ts

@@ -11,11 +11,7 @@
  * - Callers pass already-escaped content for any user-controlled HTML field.
  */
 
-import {
-  COMPANY_NAME,
-  MONO_FONT_STACK,
-  TITLE_TRUNCATE_LENGTH,
-} from "./constants";
+import { COMPANY_NAME, MONO_FONT_STACK } from "./constants";
 import { escapeHtml } from "./escape-html";
 
 const MONO = `font-family: ${MONO_FONT_STACK};`;
@@ -50,33 +46,27 @@ const SPACING: Record<Spacing, string> = {
   none: "0",
 };
 
-/** Intro / greeting / body paragraph (inherits the body monospace). */
-export function bodyParagraph(html: string): string {
-  return `<p style="margin: 0 0 20px 0; font-size: 14px;">${html}</p>`;
+/**
+ * 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.
+ */
+export function paragraph(html: string, spacing: Spacing = "normal"): string {
+  return `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`;
 }
 
 /** "Hi Name," / "Hi," greeting. Escapes the name. */
 export function greeting(recipientName?: string): string {
-  return bodyParagraph(
-    recipientName ? `Hi ${escapeHtml(recipientName)},` : "Hi,",
-  );
-}
-
-/** Monospace paragraph for meta / footer / notice lines. */
-export function monoParagraph(
-  html: string,
-  spacing: Spacing = "normal",
-): string {
-  return `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`;
+  return paragraph(recipientName ? `Hi ${escapeHtml(recipientName)},` : "Hi,");
 }
 
-/** "Label: <b>value</b>" metadata row. */
-export function metaRow(
+/** "Label: <b>value</b>" key/value row. */
+export function keyValue(
   label: string,
   valueHtml: string,
   spacing: Spacing = "tight",
 ): string {
-  return monoParagraph(`${label}: <b>${valueHtml}</b>`, spacing);
+  return paragraph(`${label}: <b>${valueHtml}</b>`, spacing);
 }
 
 /** Footer paragraph: first line + optional second line after a `<br>`. */
@@ -85,15 +75,15 @@ export function footer(
   secondLine?: string,
   spacing: Spacing = "normal",
 ): string {
-  return monoParagraph(
+  return paragraph(
     secondLine ? `${firstLine}<br>${secondLine}` : firstLine,
     spacing,
   );
 }
 
 /** Trailing company signature paragraph. */
-export function signatureLine(): string {
-  return monoParagraph(COMPANY_NAME, "none");
+export function signature(): string {
+  return paragraph(COMPANY_NAME, "none");
 }
 
 /** The standard "no action required" reassurance line (content constant). */
@@ -168,38 +158,39 @@ export function ctaBox(opts: CtaBoxOptions): string {
 </table>`;
 }
 
-// =============================================================================
-// HTML — quote block
-// =============================================================================
-
-/** The left-ruled quoted-message block. Both args must be pre-escaped. */
-export function quoteBlock(labelHtml: string, bodyHtml: string): string {
-  return `<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 20px 0;">
-  <tr><td style="border-left: 2px solid #1a1a1a; padding: 4px 14px; ${MONO} font-size: 13px; background: #f5f5f5;">
-    <span style="color: #555;">${labelHtml}</span><br>${bodyHtml}
-  </td></tr>
-</table>`;
-}
-
 // =============================================================================
 // HTML — chat bubbles
 // =============================================================================
 
-/** Right-aligned user chat bubble. `contentHtml` must be escaped + truncated. */
-export function chatUserBubble(contentHtml: string): string {
+/**
+ * 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>
+  </tr>${attributionRow}
 </table>`;
 }
 
-/** Left-aligned assistant chat bubble. `contentHtml` must be escaped + truncated. */
-export function chatAssistantBubble(contentHtml: string): string {
+/** 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: top;">[c_S]</td>
+    <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>`;
@@ -209,9 +200,11 @@ export function chatAssistantBubble(contentHtml: string): string {
 // Plain text — CTA / code boxes
 // =============================================================================
 
-const CTA_BOX_WIDTH = 20;
 const CODE_BOX_WIDTH = 18;
 
+/** Padding columns on each side of the `>> LABEL <<` line in the CTA box. */
+const CTA_BOX_PAD = 3;
+
 function centered(value: string, width: number): string {
   const pad = Math.max(0, width - value.length);
   const left = Math.floor(pad / 2);
@@ -219,18 +212,15 @@ function centered(value: string, width: number): string {
   return `${" ".repeat(left)}${value}${" ".repeat(right)}`;
 }
 
-/** Normalized `>> LABEL <<` ASCII box (`*` corners, centered). */
+/**
+ * `>> 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 line = `>> ${label} <<`;
-  const border = `*${"-".repeat(CTA_BOX_WIDTH)}*`;
-  const blank = `|${" ".repeat(CTA_BOX_WIDTH)}|`;
-  return [
-    border,
-    blank,
-    `|${centered(line, CTA_BOX_WIDTH)}|`,
-    blank,
-    border,
-  ].join("\n");
+  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). */
@@ -247,12 +237,48 @@ export function asciiCodeBox(value: string): string {
 }
 
 // =============================================================================
-// Plain text — quote + chat boxes
+// Plain text — chat boxes
 // =============================================================================
 
-/** Plain-text quoted message: `Label:` then the quoted value. */
-export function textQuote(label: string, value: string): string {
-  return `${label}:\n"${value}"`;
+/** Greedy word-wrap into lines of at most `width` chars (hard-breaks long words). */
+function wrapText(text: string, width: number): string[] {
+  const lines: string[] = [];
+  let cur = "";
+  for (const word of text.split(/\s+/).filter(Boolean)) {
+    let w = word;
+    while (w.length > width) {
+      if (cur) {
+        lines.push(cur);
+        cur = "";
+      }
+      lines.push(w.slice(0, width));
+      w = w.slice(width);
+    }
+    if (!cur) cur = w;
+    else if (cur.length + 1 + w.length <= width) cur += ` ${w}`;
+    else {
+      lines.push(cur);
+      cur = w;
+    }
+  }
+  if (cur) lines.push(cur);
+  return lines.length ? lines : [""];
+}
+
+/** Chat message truncation budget: at most MAX_MESSAGE_LINES lines of MESSAGE_WIDTH chars. */
+const MAX_MESSAGE_LINES = 3;
+const MESSAGE_WIDTH = 35;
+
+/** Word-wrap `text`, then clamp to `maxLines`, ellipsizing the last line on overflow. */
+function wrapClamped(text: string, width: number, maxLines: number): string[] {
+  const lines = wrapText(text, width);
+  if (lines.length <= maxLines) return lines;
+  const kept = lines.slice(0, maxLines);
+  const last = kept[maxLines - 1];
+  kept[maxLines - 1] =
+    (last.length > width - 3 ? last.slice(0, width - 3).trimEnd() : last) +
+    "...";
+  return kept;
 }
 
 /** Plain-text continuation dots, centered under the 38-char chat box. */
@@ -260,49 +286,41 @@ export function chatDotsText(): string {
   return "                  ⋮";
 }
 
-/** Right-aligned user chat box (title, kaomoji). */
-export function chatUserBoxText(title: string): string {
-  const truncated =
-    title.length > TITLE_TRUNCATE_LENGTH
-      ? title.slice(0, TITLE_TRUNCATE_LENGTH - 3) + "..."
-      : title;
-  const padded = truncated.padStart(35);
-  return `┌────────────────────────────────────┐
-│${padded} │  (•̀_ರ╮)
-└────────────────────────────────────┘`;
+/**
+ * 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.
+ */
+export 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.
+ */
+export function chatUserBoxText(content: string, from?: string): string {
+  const border = "─".repeat(MESSAGE_WIDTH + 1);
+  const lines = wrapText(clampMessage(content), 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");
 }
 
-/** Left-aligned assistant chat box with `[c_S]` label (max 2 lines, 36 wide). */
+/** Left-aligned assistant chat box with `[c_S]` label (clampMessage-truncated, 36 wide). */
 export function chatAssistantBoxText(text: string): string {
   const lineWidth = 36;
-  const maxChars = lineWidth * 2;
-
-  let truncated = text;
-  if (text.length > maxChars - 3) {
-    truncated = text.slice(0, maxChars - 3) + "...";
-  }
-
-  const lines: string[] = [];
-  let remaining = truncated;
-  while (remaining.length > 0 && lines.length < 2) {
-    if (remaining.length <= lineWidth) {
-      lines.push(remaining);
-      remaining = "";
-    } else {
-      let breakPoint = remaining.lastIndexOf(" ", lineWidth);
-      if (breakPoint <= 0) breakPoint = lineWidth;
-      lines.push(remaining.slice(0, breakPoint));
-      remaining = remaining.slice(breakPoint).trimStart();
-    }
-  }
+  const lines = wrapText(clampMessage(text), lineWidth);
 
   const top = "       ┌──────────────────────────────────────┐";
-  const bot = "       └──────────────────────────────────────┘";
-  const boxLines = lines.map((line, i) => {
-    const padded = ` ${line.padEnd(lineWidth)} `;
-    const label = i === 0 ? "[c_S]  " : "       ";
-    return `${label}│${padded}│`;
-  });
+  // [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");
 }

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

@@ -7,7 +7,7 @@ import type { EmailPayloads } from "../types";
 import { baseTextLayout } from "./base-text";
 import {
   asciiCtaBox,
-  bodyParagraph,
+  paragraph,
   chatAssistantBoxText,
   chatAssistantBubble,
   chatDots,
@@ -17,23 +17,13 @@ import {
   ctaBox,
   footer,
   htmlShell,
-  monoParagraph,
   NOTICE,
-  signatureLine,
+  signature,
 } from "./blocks";
-import {
-  COMPANY_NAME,
-  PREVIEW_TRUNCATE_LENGTH,
-  TITLE_TRUNCATE_LENGTH,
-} from "./constants";
-import { escapeHtml } from "./escape-html";
+import { COMPANY_NAME } from "./constants";
 
 export type ChatSharedPayload = EmailPayloads["chat.shared"];
 
-function truncate(text: string, max: number): string {
-  return text.length > max ? text.slice(0, max - 3) + "..." : text;
-}
-
 export function renderChatSharedBody(payload: ChatSharedPayload): string {
   const { chatTitle, shareUrl, previewText } = payload;
 
@@ -64,16 +54,11 @@ export function renderChatSharedBody(payload: ChatSharedPayload): string {
 export function renderChatSharedHtml(payload: ChatSharedPayload): string {
   const { chatTitle, shareUrl, previewText } = payload;
 
-  const title = escapeHtml(truncate(chatTitle, TITLE_TRUNCATE_LENGTH));
-  const previewHtml = previewText
-    ? chatAssistantBubble(
-        escapeHtml(truncate(previewText, PREVIEW_TRUNCATE_LENGTH)),
-      )
-    : "";
+  const previewHtml = previewText ? chatAssistantBubble(previewText) : "";
 
   return htmlShell([
-    bodyParagraph("A chat has been shared with you."),
-    chatUserBubble(title) + previewHtml,
+    paragraph("A chat has been shared with you."),
+    chatUserBubble(chatTitle) + previewHtml,
     chatDots(),
     ctaBox({
       label: "SEE MORE",
@@ -83,7 +68,7 @@ export function renderChatSharedHtml(payload: ChatSharedPayload): string {
       maxWidth: "200px",
     }),
     footer(`This share was sent via ${COMPANY_NAME}.`),
-    monoParagraph(NOTICE, "tight"),
-    signatureLine(),
+    paragraph(NOTICE, "tight"),
+    signature(),
   ]);
 }

package/src/email/render/company-md-access-approved.ts

@@ -8,7 +8,7 @@ import { baseTextLayout } from "./base-text";
 import {
   ACCESS_PHRASE,
   asciiCtaBox,
-  bodyParagraph,
+  paragraph,
   ctaBox,
   footer,
   greeting,
@@ -48,7 +48,7 @@ export function renderAccessApprovedHtml(
 
   return htmlShell([
     greeting(),
-    bodyParagraph(
+    paragraph(
       `<b>${escapeHtml(approverName)}</b> approved your request to access <b>"${escapeHtml(docTitle)}"</b> &mdash; you ${ACCESS_PHRASE[accessLevel]}.`,
     ),
     ctaBox({

package/src/email/render/company-md-access-denied.ts

@@ -6,12 +6,12 @@ import type { EmailPayloads } from "../types";
 
 import { baseTextLayout } from "./base-text";
 import {
-  bodyParagraph,
+  paragraph,
   footer,
   greeting,
   htmlShell,
-  quoteBlock,
-  textQuote,
+  chatUserBubble,
+  chatUserBoxText,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 import { escapeHtml } from "./escape-html";
@@ -31,7 +31,7 @@ export function renderAccessDeniedBody(payload: AccessDeniedPayload): string {
 
   if (reason) {
     sections.push("");
-    sections.push(textQuote(`Reason from ${approverName}`, reason));
+    sections.push(chatUserBoxText(reason, `Reason from ${approverName}`));
   }
 
   sections.push("");
@@ -45,15 +45,10 @@ export function renderAccessDeniedHtml(payload: AccessDeniedPayload): string {
 
   return htmlShell([
     greeting(),
-    bodyParagraph(
+    paragraph(
       `<b>${escapeHtml(approverName)}</b> declined your request to access <b>"${escapeHtml(docTitle)}"</b>.`,
     ),
-    reason
-      ? quoteBlock(
-          `Reason from ${escapeHtml(approverName)}:`,
-          escapeHtml(reason),
-        )
-      : "",
+    reason ? chatUserBubble(reason, `Reason from ${approverName}`) : "",
     footer(
       `This notification was sent via ${COMPANY_NAME}.`,
       undefined,

package/src/email/render/company-md-access-requested.ts

@@ -7,14 +7,14 @@ import type { EmailPayloads } from "../types";
 import { baseTextLayout } from "./base-text";
 import {
   asciiCtaBox,
-  bodyParagraph,
+  paragraph,
   ctaBox,
   footer,
   greeting,
   htmlShell,
-  quoteBlock,
-  signatureLine,
-  textQuote,
+  chatUserBubble,
+  chatUserBoxText,
+  signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 import { escapeHtml } from "./escape-html";
@@ -36,7 +36,7 @@ export function renderAccessRequestedBody(
 
   if (message) {
     sections.push("");
-    sections.push(textQuote(`Message from ${requesterName}`, message));
+    sections.push(chatUserBoxText(message, `Message from ${requesterName}`));
   }
 
   sections.push("");
@@ -57,15 +57,10 @@ export function renderAccessRequestedHtml(
 
   return htmlShell([
     greeting(),
-    bodyParagraph(
+    paragraph(
       `<b>${escapeHtml(requesterName)}</b> is requesting access to <b>"${escapeHtml(docTitle)}"</b>.`,
     ),
-    message
-      ? quoteBlock(
-          `Message from ${escapeHtml(requesterName)}:`,
-          escapeHtml(message),
-        )
-      : "",
+    message ? chatUserBubble(message, `Message from ${requesterName}`) : "",
     ctaBox({
       label: "REVIEW",
       href: reviewUrl,
@@ -74,6 +69,6 @@ export function renderAccessRequestedHtml(
       maxWidth: "220px",
     }),
     footer(`This notification was sent via ${COMPANY_NAME}.`, OWNER_NOTE),
-    signatureLine(),
+    signature(),
   ]);
 }

package/src/email/render/constants.ts

@@ -16,9 +16,3 @@ export const SUPPORT_EMAIL = "support@companysemantics.ai";
 /** Monospace font stack for HTML emails. */
 export const MONO_FONT_STACK =
   "'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace";
-
-/** Max chat-title length before truncation (chat-shared). */
-export const TITLE_TRUNCATE_LENGTH = 30;
-
-/** Max preview-text length before truncation (chat-shared). */
-export const PREVIEW_TRUNCATE_LENGTH = 70;

package/src/email/render/index.ts

@@ -6,13 +6,7 @@
  */
 
 // Constants
-export {
-  COMPANY_NAME,
-  SUPPORT_EMAIL,
-  MONO_FONT_STACK,
-  TITLE_TRUNCATE_LENGTH,
-  PREVIEW_TRUNCATE_LENGTH,
-} from "./constants";
+export { COMPANY_NAME, SUPPORT_EMAIL, MONO_FONT_STACK } from "./constants";
 
 // Primitives
 export { escapeHtml } from "./escape-html";
@@ -21,25 +15,23 @@ export { baseTextLayout } from "./base-text";
 // Shared building blocks
 export {
   htmlShell,
-  bodyParagraph,
   greeting,
-  monoParagraph,
-  metaRow,
+  paragraph,
+  keyValue,
   footer,
-  signatureLine,
+  signature,
   NOTICE,
   ACCESS_PHRASE,
   chatDots,
   ctaBox,
-  quoteBlock,
   chatUserBubble,
   chatAssistantBubble,
   asciiCtaBox,
   asciiCodeBox,
-  textQuote,
   chatDotsText,
   chatUserBoxText,
   chatAssistantBoxText,
+  clampMessage,
   type Spacing,
   type CtaBoxOptions,
 } from "./blocks";
@@ -57,6 +49,7 @@ export {
 export {
   renderAuthOtpBody,
   renderAuthOtpHtml,
+  type AuthOtpPayload,
   type RenderOptions,
 } from "./auth-otp";
 export { renderOrgInviteBody, renderOrgInviteHtml } from "./org-invite";

package/src/email/render/org-invite.ts

@@ -7,13 +7,13 @@ import type { EmailPayloads } from "../types";
 import { baseTextLayout } from "./base-text";
 import {
   asciiCtaBox,
-  bodyParagraph,
+  paragraph,
   ctaBox,
   footer,
   htmlShell,
-  metaRow,
+  keyValue,
   NOTICE,
-  signatureLine,
+  signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 import { escapeHtml } from "./escape-html";
@@ -27,13 +27,13 @@ export function renderOrgInviteBody(payload: OrgInvitePayload): string {
   sections.push("Workspace invitation.");
   sections.push(asciiCtaBox("JOIN"));
   sections.push("");
+  sections.push(acceptUrl);
+  sections.push("");
   sections.push(`From: ${inviterName}`);
   sections.push(`Workspace: ${orgName}`);
   sections.push(`Role: ${role}`);
   sections.push(`Expires in: ${expiresInDays} days`);
   sections.push("");
-  sections.push(acceptUrl);
-  sections.push("");
   sections.push(`This invitation was sent via ${COMPANY_NAME}.`);
   sections.push(NOTICE);
 
@@ -44,18 +44,18 @@ export function renderOrgInviteHtml(payload: OrgInvitePayload): string {
   const { inviterName, orgName, role, acceptUrl, expiresInDays } = payload;
 
   return htmlShell([
-    bodyParagraph("Workspace invitation."),
+    paragraph("Workspace invitation."),
     ctaBox({
       label: "JOIN",
       href: acceptUrl,
       padding: "20px 24px",
       fontSize: "16px",
     }),
-    metaRow("From", escapeHtml(inviterName), "tight"),
-    metaRow("Workspace", escapeHtml(orgName), "tight"),
-    metaRow("Role", role, "tight"),
-    metaRow("Expires in", `${expiresInDays} days`, "normal"),
+    keyValue("From", escapeHtml(inviterName), "tight"),
+    keyValue("Workspace", escapeHtml(orgName), "tight"),
+    keyValue("Role", role, "tight"),
+    keyValue("Expires in", `${expiresInDays} days`, "normal"),
     footer(`This invitation was sent via ${COMPANY_NAME}.`, NOTICE),
-    signatureLine(),
+    signature(),
   ]);
 }