@company-semantics/contracts 27.13.1 → 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,16 +8,13 @@
 
 import type { EmailPayloads } from "../types";
 
-import { baseTextLayout } from "./base-text";
 import {
-  asciiCodeBox,
-  bodyParagraph,
+  type Block,
   ctaBox,
   footer,
-  htmlShell,
-  metaRow,
-  monoParagraph,
-  signatureLine,
+  keyValue,
+  paragraph,
+  signature,
 } from "./blocks";
 import { COMPANY_NAME } from "./constants";
 
@@ -28,46 +25,14 @@ 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([
-    bodyParagraph("Copy/paste code in login form:"),
+  const blocks: Block[] = [
+    paragraph("Copy/paste code in login form:"),
     ctaBox({
       label: otp,
       padding: "20px 24px",
@@ -75,17 +40,33 @@ export function renderAuthOtpHtml(payload: AuthOtpPayload): string {
       borderRadiusZero: true,
       letterSpacing: "4px",
     }),
-    metaRow("Status", "VALID", "tight"),
-    metaRow(
+    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.",
     ),
-    monoParagraph("If this wasn't you, no action is required."),
-    signatureLine(),
-  ]);
+    paragraph("If this wasn't you, no action is required."),
+    signature(),
+  );
+
+  return blocks;
 }

package/src/email/render/blocks.ts

@@ -1,48 +1,63 @@
 /**
- * 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,
-  TITLE_TRUNCATE_LENGTH,
-} 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
 // =============================================================================
 
-/** 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;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head><meta charset="UTF-8"></head>
-<body style="${MONO} color: #1a1a1a; margin: 0; padding: 0;">
-${inner}
-</body>
-</html>`;
+/** 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;
 }
 
-// =============================================================================
-// HTML — paragraphs
-// =============================================================================
+/** 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>;
 
-/** Vertical spacing options for a mono paragraph. */
+/** 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",
@@ -50,50 +65,98 @@ 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>`;
+// =============================================================================
+// Shells
+// =============================================================================
+
+/** Wrap body blocks in the shared `<!DOCTYPE>` monospace shell. */
+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>
+<body style="${MONO} color: #1a1a1a; margin: 0; padding: 0;">
+${inner}
+</body>
+</html>`;
 }
 
-/** "Hi Name," / "Hi," greeting. Escapes the name. */
-export function greeting(recipientName?: string): string {
-  return bodyParagraph(
-    recipientName ? `Hi ${escapeHtml(recipientName)},` : "Hi,",
-  );
+/** 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";
 }
 
-/** Monospace paragraph for meta / footer / notice lines. */
-export function monoParagraph(
-  html: string,
+// =============================================================================
+// Paragraphs
+// =============================================================================
+
+/**
+ * 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(
+  content: InlineContent,
   spacing: Spacing = "normal",
-): string {
-  return `<p style="${MONO} font-size: 14px; margin: ${SPACING[spacing]};">${html}</p>`;
+): 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. */
+export function greeting(recipientName?: string): Block {
+  return paragraph(recipientName ? `Hi ${recipientName},` : "Hi,");
 }
 
-/** "Label: <b>value</b>" metadata row. */
-export function metaRow(
+/** "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 monoParagraph(`${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 monoParagraph(
-    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 signatureLine(): string {
-  return monoParagraph(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). */
@@ -108,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;
@@ -134,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,
@@ -156,153 +236,124 @@ 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 — quote block
-// =============================================================================
+  const text = href ? `${asciiCtaBox(label)}\n\n${href}` : asciiCtaBox(label);
 
-/** 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>`;
+  return { html, text, spacing: "normal" };
 }
 
 // =============================================================================
-// HTML — chat bubbles
+// Chat bubbles — one dual-output block per role
 // =============================================================================
 
-/** Right-aligned user chat bubble. `contentHtml` must be escaped + truncated. */
-export function chatUserBubble(contentHtml: string): string {
-  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>
-</table>`;
+/** 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 : [""];
 }
 
-/** Left-aligned assistant chat bubble. `contentHtml` must be escaped + truncated. */
-export function chatAssistantBubble(contentHtml: string): string {
-  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="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>`;
+/** 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 — CTA / code boxes
-// =============================================================================
-
-const CTA_BOX_WIDTH = 20;
-const CODE_BOX_WIDTH = 18;
-
-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)}`;
+/**
+ * The one truncation authority: clamp a raw message to MAX_MESSAGE_LINES ×
+ * MESSAGE_WIDTH, ellipsized. Both surfaces of a chat block run content through
+ * this, so HTML and plain text truncate at exactly the same point.
+ */
+function clampMessage(text: string): string {
+  return wrapClamped(text, MESSAGE_WIDTH, MAX_MESSAGE_LINES).join(" ");
 }
 
-/** Normalized `>> LABEL <<` ASCII box (`*` corners, centered). */
-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");
-}
+/**
+ * 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 chatUser(content: string, from?: string): Block {
+  const clamped = clampMessage(content);
 
-/** 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");
-}
+  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>`;
 
-// =============================================================================
-// Plain text — quote + chat boxes
-// =============================================================================
+  const border = "─".repeat(MESSAGE_WIDTH + 1);
+  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));
 
-/** Plain-text quoted message: `Label:` then the quoted value. */
-export function textQuote(label: string, value: string): string {
-  return `${label}:\n"${value}"`;
+  return { html, text: box.join("\n"), spacing: "normal" };
 }
 
-/** Plain-text continuation dots, centered under the 38-char chat box. */
-export function chatDotsText(): string {
-  return "                  ⋮";
-}
+/** Left-aligned assistant chat message with `[c_S]` avatar (bottom-aligned). */
+export function chatAssistant(content: string): Block {
+  const clamped = clampMessage(content);
 
-/** 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} │  (•̀_ರ╮)
-└────────────────────────────────────┘`;
-}
+  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>`;
 
-/** Left-aligned assistant chat box with `[c_S]` label (max 2 lines, 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(clamped, 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}│`;
-  });
+  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" };
 }