toiljs 0.0.97 → 0.0.99

package/build/devserver/email/console.js

@@ -40,6 +40,203 @@ export function emailAction(parsed) {
         return { kind: 'code', value: code[1] };
     return null;
 }
+const NAMED = {
+    black: [0, 0, 0], white: [235, 235, 235], red: [229, 57, 53], green: [67, 160, 71],
+    blue: [30, 136, 229], yellow: [253, 216, 53], orange: [251, 140, 0], purple: [142, 36, 170],
+    magenta: [216, 27, 96], pink: [233, 30, 99], cyan: [0, 172, 193], teal: [0, 137, 123],
+    indigo: [57, 73, 171], gray: [128, 128, 128], grey: [128, 128, 128], silver: [192, 192, 192],
+    gold: [255, 193, 7], brown: [121, 85, 72], navy: [26, 35, 126], lime: [124, 179, 66],
+};
+export function parseColor(value) {
+    const s = value.trim().toLowerCase();
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(s);
+    if (hex !== null) {
+        const h = hex[1];
+        if (h.length === 3) {
+            return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];
+        }
+        return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+    }
+    const rgb = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/.exec(s);
+    if (rgb !== null) {
+        return [Math.min(255, +rgb[1]), Math.min(255, +rgb[2]), Math.min(255, +rgb[3])];
+    }
+    return NAMED[s];
+}
+function styleFromTag(name, attrs) {
+    const d = {};
+    if (name === 'b' || name === 'strong' || /^h[1-6]$/.test(name))
+        d.bold = true;
+    if (name === 'i' || name === 'em')
+        d.italic = true;
+    if (name === 'u' || name === 'ins')
+        d.underline = true;
+    if (name === 'a') {
+        d.underline = true;
+        d.color = NAMED.cyan;
+    }
+    if (name === 'code' || name === 'kbd' || name === 'pre' || name === 'samp')
+        d.color = NAMED.gray;
+    const styleAttr = /style\s*=\s*["']([^"']*)["']/i.exec(attrs);
+    if (styleAttr !== null) {
+        const css = styleAttr[1].toLowerCase();
+        const colorM = /(?:^|;)\s*color\s*:\s*([^;]+)/.exec(css);
+        if (colorM !== null) {
+            const c = parseColor(colorM[1]);
+            if (c !== undefined)
+                d.color = c;
+        }
+        if (/font-weight\s*:\s*(?:bold|bolder|[6-9]00)/.test(css))
+            d.bold = true;
+        if (/font-style\s*:\s*italic/.test(css))
+            d.italic = true;
+        if (/text-decoration[^;]*:\s*[^;]*underline/.test(css))
+            d.underline = true;
+    }
+    if (name === 'font') {
+        const fc = /\bcolor\s*=\s*["']([^"']+)["']/i.exec(attrs);
+        if (fc !== null) {
+            const c = parseColor(fc[1]);
+            if (c !== undefined)
+                d.color = c;
+        }
+    }
+    return d;
+}
+function compose(stack) {
+    const out = {};
+    for (const s of stack) {
+        if (s.bold)
+            out.bold = true;
+        if (s.italic)
+            out.italic = true;
+        if (s.underline)
+            out.underline = true;
+        if (s.color !== undefined)
+            out.color = s.color;
+    }
+    return out;
+}
+const BLOCK = new Set([
+    'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'tr', 'table', 'ul', 'ol',
+    'blockquote', 'section', 'header', 'footer', 'br', 'hr', 'article', 'main', 'nav', 'aside',
+]);
+function htmlToParagraphs(html) {
+    const paras = [];
+    let cur = [];
+    let pendingSpace = false;
+    const flush = () => {
+        if (cur.length > 0) {
+            paras.push(cur);
+            cur = [];
+        }
+        pendingSpace = false;
+    };
+    const stack = [];
+    const hrefs = [];
+    const re = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>|([^<]+)/g;
+    let m;
+    while ((m = re.exec(html)) !== null) {
+        const raw = m[4];
+        if (raw !== undefined) {
+            const norm = decodeEntities(raw).replace(/\s+/g, ' ').trim();
+            if (norm.length === 0) {
+                if (/\s/.test(raw))
+                    pendingSpace = true;
+                continue;
+            }
+            const leading = /^\s/.test(raw) || pendingSpace;
+            const st = compose(stack);
+            const words = norm.split(' ');
+            for (let i = 0; i < words.length; i++) {
+                cur.push({ text: words[i], style: st, spaceBefore: cur.length > 0 && (i > 0 || leading) });
+            }
+            pendingSpace = /\s$/.test(raw);
+            continue;
+        }
+        const closing = m[1] === '/';
+        const name = m[2].toLowerCase();
+        const attrs = m[3] ?? '';
+        if (BLOCK.has(name)) {
+            flush();
+            if (/^h[1-6]$/.test(name)) {
+                if (closing)
+                    stack.pop();
+                else
+                    stack.push(styleFromTag(name, attrs));
+            }
+            continue;
+        }
+        if (closing) {
+            stack.pop();
+            if (name === 'a') {
+                const href = hrefs.pop();
+                if (href) {
+                    cur.push({
+                        text: `(${href})`,
+                        style: { ...compose(stack), color: NAMED.gray },
+                        spaceBefore: cur.length > 0,
+                    });
+                }
+            }
+        }
+        else {
+            stack.push(styleFromTag(name, attrs));
+            if (name === 'a') {
+                const hm = /\bhref\s*=\s*["']([^"']+)["']/i.exec(attrs);
+                hrefs.push(hm !== null ? hm[1] : null);
+            }
+        }
+    }
+    flush();
+    return paras;
+}
+function paint(style, s) {
+    if (!pc.isColorSupported)
+        return s;
+    let open = '';
+    if (style.bold)
+        open += '\x1b[1m';
+    if (style.italic)
+        open += '\x1b[3m';
+    if (style.underline)
+        open += '\x1b[4m';
+    if (style.color !== undefined)
+        open += `\x1b[38;2;${style.color[0]};${style.color[1]};${style.color[2]}m`;
+    return open === '' ? s : `${open}${s}\x1b[0m`;
+}
+function wrapWords(words, width) {
+    const lines = [];
+    let line = [];
+    let len = 0;
+    for (const w of words) {
+        const sep = line.length > 0 && w.spaceBefore ? 1 : 0;
+        if (line.length > 0 && len + sep + w.text.length > width) {
+            lines.push(line);
+            line = [w];
+            len = w.text.length;
+        }
+        else {
+            line.push(w);
+            len += sep + w.text.length;
+        }
+    }
+    if (line.length > 0)
+        lines.push(line);
+    return lines;
+}
+export function renderHtmlBody(html, width = WIDTH) {
+    const paras = htmlToParagraphs(html);
+    const out = [];
+    for (let p = 0; p < paras.length; p++) {
+        if (p > 0)
+            out.push('');
+        for (const line of wrapWords(paras[p], width)) {
+            out.push(line.map((w, i) => (i > 0 && w.spaceBefore ? ' ' : '') + paint(w.style, w.text)).join(''));
+        }
+    }
+    return out;
+}
 function wrap(text, width) {
     const out = [];
     for (const para of text.split('\n')) {
@@ -77,8 +274,8 @@ export function renderEmailConsole(parsed, status) {
     lines.push(bar + pc.dim('To:      ') + parsed.to);
     lines.push(bar + pc.dim('Subject: ') + parsed.subject);
     lines.push(pc.dim('  │'));
-    const bodyText = parsed.body.length > 0 ? parsed.body : htmlToText(parsed.html);
-    for (const l of wrap(bodyText, WIDTH))
+    const bodyLines = parsed.html.length > 0 ? renderHtmlBody(parsed.html, WIDTH) : wrap(parsed.body, WIDTH);
+    for (const l of bodyLines)
         lines.push(l.length === 0 ? pc.dim('  │') : bar + l);
     const action = emailAction(parsed);
     if (action !== null) {

package/build/devserver/email/providers.js

@@ -59,7 +59,7 @@ export async function sendSmtp(cfg, msg) {
             host: smtp.host,
             port: smtp.port,
             secure: smtp.port === 465,
-            auth: { user: smtp.user, pass: cfg.apiKey },
+            auth: cfg.apiKey.length > 0 ? { user: smtp.user, pass: cfg.apiKey } : undefined,
             connectionTimeout: POST_TIMEOUT_MS,
             greetingTimeout: POST_TIMEOUT_MS,
         });

package/build/devserver/runtime/host.js

@@ -112,6 +112,9 @@ function devEmailSend(ref, reqPtr, reqLen) {
     const { status, parsed } = svc.prepare(raw);
     if (parsed === null) {
         process.stdout.write(`  ✉ dev email_send -> ${EmailStatus[status]}\n`);
+        const skipped = parseEmailBlob(raw);
+        if (skipped !== null)
+            previewDevEmail(skipped, EmailStatus[status]);
         return status;
     }
     recordSentEmail(parsed);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.97",
+    "version": "0.0.99",
     "author": "Dacely",
     "description": "The modern React framework: a file-based React frontend and a ToilScript-compiled WebAssembly backend.",
     "repository": {

package/src/cli/index.ts

@@ -15,6 +15,19 @@ import { runUpdate } from './update.js';
 import { type Preprocessor, PREPROCESSORS } from './features.js';
 import { accent, banner, bold, danger, dim, success, version } from './ui.js';
 
+// Node 22+/26 prints an ExperimentalWarning the first time any code touches the
+// built-in `localStorage` global (some browser-oriented deps do when they are
+// evaluated server-side during the dev SSR pass). It is harmless (localStorage
+// works fine in the real browser) but noisy on every `toiljs dev`/`build`, so drop
+// exactly that one warning here, before anything runs. Every other warning still
+// prints. Installed on the CLI process, ahead of the compiler/dev work.
+const __origEmitWarning = process.emitWarning.bind(process) as (...a: unknown[]) => void;
+process.emitWarning = ((warning: unknown, ...rest: unknown[]): void => {
+    const msg = typeof warning === 'string' ? warning : (warning as { message?: string })?.message;
+    if (typeof msg === 'string' && msg.includes('localStorage is not available')) return;
+    __origEmitWarning(warning, ...rest);
+}) as typeof process.emitWarning;
+
 interface Flags {
     root?: string;
     port?: number;

package/src/devserver/email/config.ts

@@ -80,16 +80,20 @@ export function resolveEmailConfig(
     if (!validFrom(from)) {
         return { config: null, warning: 'email `from` is not a valid address (CRLF or no `@`)' };
     }
-    if (apiKey === undefined) {
-        return {
-            config: null,
-            warning: 'email config present but TOIL_EMAIL_API_KEY is not set (in .env.secrets)',
-        };
-    }
-
+    // The API-key requirement is PER PROVIDER: Resend authenticates with a key, and
+    // Gmail SMTP needs an app password (also carried in the key), but a plain SMTP
+    // relay (a local dev catch-all like Mailpit/MailHog on 127.0.0.1, or an internal
+    // open relay) needs NO credential. Requiring a key for plain SMTP silently
+    // disabled a perfectly good local-SMTP dev setup.
     let provider: ResolvedProvider;
     let smtp: ResolvedSmtp | undefined;
     if (providerId === 'resend') {
+        if (apiKey === undefined) {
+            return {
+                config: null,
+                warning: 'provider `resend` requires TOIL_EMAIL_API_KEY (in .env.secrets)',
+            };
+        }
         provider = 'resend';
     } else if (providerId === 'gmail' || providerId === 'smtp') {
         provider = 'smtp';
@@ -101,6 +105,14 @@ export function resolveEmailConfig(
         if (!host) {
             return { config: null, warning: 'provider `smtp` requires TOIL_EMAIL_SMTP_HOST' };
         }
+        // Gmail always needs an app password; plain SMTP may be auth-less (the send
+        // path omits `auth` when the key is empty). See providers.ts sendSmtp.
+        if (isGmail && apiKey === undefined) {
+            return {
+                config: null,
+                warning: 'provider `gmail` requires TOIL_EMAIL_API_KEY (a Gmail app password)',
+            };
+        }
         const port = parseInt0(envOf(reserved, 'SMTP_PORT'), c.smtp?.port ?? 0) || 587;
         const user = envOf(reserved, 'SMTP_USER') ?? c.smtp?.user?.trim() ?? from;
         smtp = { host, port, user };
@@ -115,7 +127,7 @@ export function resolveEmailConfig(
         config: {
             provider,
             from,
-            apiKey,
+            apiKey: apiKey ?? '',
             maxPerMin: parseInt0(envOf(reserved, 'MAX_PER_MIN'), c.maxPerMin ?? 60),
             maxPerDay: parseInt0(envOf(reserved, 'MAX_PER_DAY'), c.maxPerDay ?? 0),
             maxPerRecipientPerHour: parseInt0(

package/src/devserver/email/console.ts

@@ -1,15 +1,17 @@
 /**
  * DEV EMAIL EMULATOR: renders an outgoing email as an ASCII-drawn box in the
  * terminal so confirm / reset / 2FA flows are testable locally WITHOUT a real
- * inbox (the whole point of dev). It converts the HTML body to readable text,
- * lays it out under a left-barred box, and highlights the ACTION (the one-time
- * link, which carries its token in the `#token=` fragment and so is directly
- * clickable, or the numeric 2FA code). Dev-only; the production edge never renders
- * or logs token material.
+ * inbox (the whole point of dev). It converts the HTML body to readable text WITH
+ * terminal color + font styling (bold / italic / underline / colored text taken
+ * from the HTML), lays it out under a left-barred box, and highlights the ACTION
+ * (the one-time link, which carries its token in the `#token=` fragment and so is
+ * directly clickable, or the numeric 2FA code). Dev-only; the production edge never
+ * renders or logs token material.
  *
  * The box uses a LEFT bar plus full top/bottom rules (no right border), so colored
  * spans never break column alignment and long URLs stay on one unbroken, clickable
- * line.
+ * line. Styling is emitted only when the terminal supports color (a piped/CI run
+ * gets clean plain text).
  */
 import pc from 'picocolors';
 
@@ -31,9 +33,10 @@ function decodeEntities(s: string): string {
 }
 
 /**
- * A plain-text rendering of an HTML email body: anchors become `text (url)` so
- * the URL stays visible + clickable, block elements become line breaks, remaining
- * tags are stripped, entities decoded, and whitespace collapsed.
+ * A plain-text (no color) rendering of an HTML email body: anchors become
+ * `text (url)`, block elements become line breaks, remaining tags are stripped,
+ * entities decoded, whitespace collapsed. Kept for the action-extraction fallback
+ * and any caller that wants text without escape codes.
  */
 export function htmlToText(html: string): string {
     let s = html;
@@ -45,13 +48,10 @@ export function htmlToText(html: string): string {
             return t.length > 0 && t !== href ? `${t} (${href})` : href;
         },
     );
-    // block-level tags -> newlines (open OR close), <br> -> newline
     s = s.replace(/<br\s*\/?>/gi, '\n');
     s = s.replace(/<\/?(?:p|div|h[1-6]|li|tr|table|ul|ol|blockquote|section|header|footer)\b[^>]*>/gi, '\n');
-    // strip whatever tags remain
     s = s.replace(/<[^>]+>/g, '');
     s = decodeEntities(s);
-    // collapse intra-line whitespace, trim each line, cap blank runs at one
     s = s.replace(/[ \t]+/g, ' ');
     s = s
         .split('\n')
@@ -72,8 +72,220 @@ export function emailAction(parsed: ParsedEmail): { kind: 'link' | 'code'; value
     return null;
 }
 
-/** Word-wrap to `width`; words longer than `width` (URLs, tokens) overflow rather
- *  than being hard-split, so they stay intact and clickable. */
+// --- HTML -> STYLED terminal spans -----------------------------------------------------------------
+
+type Rgb = readonly [number, number, number];
+interface Style {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: Rgb;
+}
+interface Word {
+    readonly text: string;
+    readonly style: Style;
+    /** Whether whitespace separated this word from the previous one in the source
+     *  (so `<b>bob</b>,` renders as `bob,` not `bob ,`). */
+    readonly spaceBefore: boolean;
+}
+
+/** A small palette of CSS color names our templates (and most emails) use. */
+const NAMED: Record<string, Rgb> = {
+    black: [0, 0, 0], white: [235, 235, 235], red: [229, 57, 53], green: [67, 160, 71],
+    blue: [30, 136, 229], yellow: [253, 216, 53], orange: [251, 140, 0], purple: [142, 36, 170],
+    magenta: [216, 27, 96], pink: [233, 30, 99], cyan: [0, 172, 193], teal: [0, 137, 123],
+    indigo: [57, 73, 171], gray: [128, 128, 128], grey: [128, 128, 128], silver: [192, 192, 192],
+    gold: [255, 193, 7], brown: [121, 85, 72], navy: [26, 35, 126], lime: [124, 179, 66],
+};
+
+/** Parse a CSS color value (`#rgb`, `#rrggbb`, `rgb(...)`, or a named color) to RGB. */
+export function parseColor(value: string): Rgb | undefined {
+    const s = value.trim().toLowerCase();
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(s);
+    if (hex !== null) {
+        const h = hex[1];
+        if (h.length === 3) {
+            return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)];
+        }
+        return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+    }
+    const rgb = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/.exec(s);
+    if (rgb !== null) {
+        return [Math.min(255, +rgb[1]), Math.min(255, +rgb[2]), Math.min(255, +rgb[3])];
+    }
+    return NAMED[s];
+}
+
+/** The style delta a tag (name + raw attributes) contributes. */
+function styleFromTag(name: string, attrs: string): Style {
+    const d: Style = {};
+    if (name === 'b' || name === 'strong' || /^h[1-6]$/.test(name)) d.bold = true;
+    if (name === 'i' || name === 'em') d.italic = true;
+    if (name === 'u' || name === 'ins') d.underline = true;
+    if (name === 'a') {
+        d.underline = true;
+        d.color = NAMED.cyan; // links stand out
+    }
+    if (name === 'code' || name === 'kbd' || name === 'pre' || name === 'samp') d.color = NAMED.gray;
+    const styleAttr = /style\s*=\s*["']([^"']*)["']/i.exec(attrs);
+    if (styleAttr !== null) {
+        const css = styleAttr[1].toLowerCase();
+        const colorM = /(?:^|;)\s*color\s*:\s*([^;]+)/.exec(css);
+        if (colorM !== null) {
+            const c = parseColor(colorM[1]);
+            if (c !== undefined) d.color = c;
+        }
+        if (/font-weight\s*:\s*(?:bold|bolder|[6-9]00)/.test(css)) d.bold = true;
+        if (/font-style\s*:\s*italic/.test(css)) d.italic = true;
+        if (/text-decoration[^;]*:\s*[^;]*underline/.test(css)) d.underline = true;
+    }
+    if (name === 'font') {
+        const fc = /\bcolor\s*=\s*["']([^"']+)["']/i.exec(attrs);
+        if (fc !== null) {
+            const c = parseColor(fc[1]);
+            if (c !== undefined) d.color = c;
+        }
+    }
+    return d;
+}
+
+/** Flatten a style stack (last color / any true flag wins). */
+function compose(stack: readonly Style[]): Style {
+    const out: Style = {};
+    for (const s of stack) {
+        if (s.bold) out.bold = true;
+        if (s.italic) out.italic = true;
+        if (s.underline) out.underline = true;
+        if (s.color !== undefined) out.color = s.color;
+    }
+    return out;
+}
+
+const BLOCK = new Set([
+    'p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'tr', 'table', 'ul', 'ol',
+    'blockquote', 'section', 'header', 'footer', 'br', 'hr', 'article', 'main', 'nav', 'aside',
+]);
+
+/** Parse an HTML body into paragraphs (split on block elements) of styled words,
+ *  preserving whether each word was space-separated from the previous one. */
+function htmlToParagraphs(html: string): Word[][] {
+    const paras: Word[][] = [];
+    let cur: Word[] = [];
+    let pendingSpace = false; // a space boundary carried across tag boundaries
+    const flush = (): void => {
+        if (cur.length > 0) {
+            paras.push(cur);
+            cur = [];
+        }
+        pendingSpace = false;
+    };
+    const stack: Style[] = [];
+    const hrefs: (string | null)[] = [];
+    const re = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>|([^<]+)/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(html)) !== null) {
+        const raw = m[4];
+        if (raw !== undefined) {
+            const norm = decodeEntities(raw).replace(/\s+/g, ' ').trim();
+            if (norm.length === 0) {
+                if (/\s/.test(raw)) pendingSpace = true;
+                continue;
+            }
+            const leading = /^\s/.test(raw) || pendingSpace;
+            const st = compose(stack);
+            const words = norm.split(' ');
+            for (let i = 0; i < words.length; i++) {
+                cur.push({ text: words[i], style: st, spaceBefore: cur.length > 0 && (i > 0 || leading) });
+            }
+            pendingSpace = /\s$/.test(raw);
+            continue;
+        }
+        const closing = m[1] === '/';
+        const name = m[2].toLowerCase();
+        const attrs = m[3] ?? '';
+        if (BLOCK.has(name)) {
+            flush();
+            if (/^h[1-6]$/.test(name)) {
+                if (closing) stack.pop();
+                else stack.push(styleFromTag(name, attrs));
+            }
+            continue;
+        }
+        if (closing) {
+            stack.pop();
+            if (name === 'a') {
+                const href = hrefs.pop();
+                if (href) {
+                    cur.push({
+                        text: `(${href})`,
+                        style: { ...compose(stack), color: NAMED.gray },
+                        spaceBefore: cur.length > 0,
+                    });
+                }
+            }
+        } else {
+            stack.push(styleFromTag(name, attrs));
+            if (name === 'a') {
+                const hm = /\bhref\s*=\s*["']([^"']+)["']/i.exec(attrs);
+                hrefs.push(hm !== null ? hm[1] : null);
+            }
+        }
+    }
+    flush();
+    return paras;
+}
+
+/** Apply a style to a string as terminal escapes (no-op when color is unsupported). */
+function paint(style: Style, s: string): string {
+    if (!pc.isColorSupported) return s;
+    let open = '';
+    if (style.bold) open += '\x1b[1m';
+    if (style.italic) open += '\x1b[3m';
+    if (style.underline) open += '\x1b[4m';
+    if (style.color !== undefined) open += `\x1b[38;2;${style.color[0]};${style.color[1]};${style.color[2]}m`;
+    return open === '' ? s : `${open}${s}\x1b[0m`;
+}
+
+/** Word-wrap styled words to `width` VISIBLE columns; over-long words (URLs) overflow.
+ *  Honors each word's `spaceBefore` so attached punctuation is not pushed off. */
+function wrapWords(words: readonly Word[], width: number): Word[][] {
+    const lines: Word[][] = [];
+    let line: Word[] = [];
+    let len = 0;
+    for (const w of words) {
+        const sep = line.length > 0 && w.spaceBefore ? 1 : 0;
+        if (line.length > 0 && len + sep + w.text.length > width) {
+            lines.push(line);
+            line = [w];
+            len = w.text.length;
+        } else {
+            line.push(w);
+            len += sep + w.text.length;
+        }
+    }
+    if (line.length > 0) lines.push(line);
+    return lines;
+}
+
+/**
+ * Render an HTML body to styled terminal lines (visible width <= `width`). Empty
+ * strings mark blank separator lines between paragraphs. Exported for tests.
+ */
+export function renderHtmlBody(html: string, width: number = WIDTH): string[] {
+    const paras = htmlToParagraphs(html);
+    const out: string[] = [];
+    for (let p = 0; p < paras.length; p++) {
+        if (p > 0) out.push(''); // one blank line between paragraphs
+        for (const line of wrapWords(paras[p], width)) {
+            out.push(
+                line.map((w, i) => (i > 0 && w.spaceBefore ? ' ' : '') + paint(w.style, w.text)).join(''),
+            );
+        }
+    }
+    return out;
+}
+
+/** Word-wrap PLAIN text (the fallback when there is no HTML body). */
 function wrap(text: string, width: number): string[] {
     const out: string[] = [];
     for (const para of text.split('\n')) {
@@ -97,7 +309,8 @@ function wrap(text: string, width: number): string[] {
 
 /**
  * The full ASCII box for one dev email. `status` is a short label for the header
- * (e.g. `not sent - no provider`, `sent`, `deduped`).
+ * (e.g. `not sent, no provider`, `sent`, `deduped`). The body is rendered from the
+ * HTML with color + font styling when present, else from the plain-text body.
  */
 export function renderEmailConsole(parsed: ParsedEmail, status: string): string {
     const bar = pc.dim('  │ ');
@@ -116,8 +329,9 @@ export function renderEmailConsole(parsed: ParsedEmail, status: string): string
     lines.push(bar + pc.dim('Subject: ') + parsed.subject);
     lines.push(pc.dim('  │'));
 
-    const bodyText = parsed.body.length > 0 ? parsed.body : htmlToText(parsed.html);
-    for (const l of wrap(bodyText, WIDTH)) lines.push(l.length === 0 ? pc.dim('  │') : bar + l);
+    const bodyLines =
+        parsed.html.length > 0 ? renderHtmlBody(parsed.html, WIDTH) : wrap(parsed.body, WIDTH);
+    for (const l of bodyLines) lines.push(l.length === 0 ? pc.dim('  │') : bar + l);
 
     const action = emailAction(parsed);
     if (action !== null) {

package/src/devserver/email/providers.ts

@@ -91,7 +91,8 @@ export async function sendSmtp(
             host: smtp.host,
             port: smtp.port,
             secure: smtp.port === 465, // 465 = implicit TLS; else STARTTLS
-            auth: { user: smtp.user, pass: cfg.apiKey },
+            // Auth only when there is a credential; a local/auth-less relay takes none.
+            auth: cfg.apiKey.length > 0 ? { user: smtp.user, pass: cfg.apiKey } : undefined,
             connectionTimeout: POST_TIMEOUT_MS,
             greetingTimeout: POST_TIMEOUT_MS,
         });

package/src/devserver/runtime/host.ts

@@ -228,6 +228,11 @@ function devEmailSend(ref: MemoryRef, reqPtr: number, reqLen: number): number {
     const { status, parsed } = svc.prepare(raw);
     if (parsed === null) {
         process.stdout.write(`  ✉ dev email_send -> ${EmailStatus[status]}\n`);
+        // The real send was skipped (bad recipient / deduped / budget / cap), but in
+        // DEV still draw the email so its link/code stays testable. Not recorded to
+        // the test seam (that tracks accepted sends only).
+        const skipped = parseEmailBlob(raw);
+        if (skipped !== null) previewDevEmail(skipped, EmailStatus[status]);
         return status;
     }
     recordSentEmail(parsed); // dev test seam

package/test/devserver-email.test.ts

@@ -154,6 +154,24 @@ describe('config resolution', () => {
             resolveEmailConfig({ from: 'a@b.com' }, reserved({ TOIL_EMAIL_API_KEY: 'k', TOIL_EMAIL_PROVIDER: 'mailgun' }))
                 .warning,
         ).toMatch(/unknown/);
+        // gmail still needs an app password
+        expect(
+            resolveEmailConfig({ provider: 'gmail', from: 'me@gmail.com' }, reserved({})).warning,
+        ).toMatch(/gmail/);
+    });
+
+    it('plain SMTP needs NO api key (a local / auth-less relay)', () => {
+        const { config, warning } = resolveEmailConfig(
+            { provider: 'smtp', from: 'dev@dacely.local' },
+            reserved({ TOIL_EMAIL_SMTP_HOST: '127.0.0.1' }),
+        );
+        expect(warning).toBeNull();
+        expect(config).toMatchObject({
+            provider: 'smtp',
+            from: 'dev@dacely.local',
+            apiKey: '', // no credential -> the send path omits SMTP auth
+            smtp: { host: '127.0.0.1', port: 587 },
+        });
     });
 
     it('TOIL_EMAIL_ENABLED=false disables silently', () => {