feat(admin-email): SMTP test-send card on /admin/email

Adds a plaintext-only SMTP connectivity test on the email-settings
page. Distinct from the branding-preview "Send a test" affordance:

  - branding-preview exercises the full rendering pipeline (logo +
    branded shell + colour) — useful for confirming the email *looks*
    right.
  - this test isolates SMTP — minimal HTML, plaintext alternative, no
    logo dependency — so a failure is purely transport. Confirms the
    configured credentials (env or per-port DB) reach the wire before
    a real notification flow depends on them.

SMTP errors surface inline below the input (auth failure, ENOTFOUND,
connection refused, etc.) rather than as a passing toast — the whole
point of the test is to read them.

`/api/v1/admin/email/test-send` route reuses `sendEmail(...,
ctx.portId)` so per-port SMTP overrides are exercised the same way a
real notification would.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/email/smtp-test-send-card.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from 'react';
+import { Send, CheckCircle2, AlertCircle } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { apiFetch } from '@/lib/api/client';
+
+/**
+ * SMTP connectivity test card. Distinct from the branding-page "Send a
+ * test" affordance:
+ *   - This one isolates SMTP — plaintext + minimal HTML, no logo, no
+ *     branded shell — so the failure mode is pure transport.
+ *   - The branding-preview send exercises the full rendering pipeline.
+ *
+ * Surfaces the SMTP error inline (under the input) instead of toasting,
+ * because the whole point is to read it. ENOTFOUND, EAUTH, connection
+ * refused, etc. land here as a useful diagnostic.
+ */
+export function SmtpTestSendCard() {
+  const [recipient, setRecipient] = useState('');
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<
+    | { kind: 'ok'; recipient: string; messageId: string | null }
+    | { kind: 'err'; message: string }
+    | null
+  >(null);
+
+  async function send() {
+    if (!recipient) return;
+    setSending(true);
+    setResult(null);
+    try {
+      const res = await apiFetch<{
+        data: { sent: boolean; recipient: string; messageId: string | null };
+      }>('/api/v1/admin/email/test-send', {
+        method: 'POST',
+        body: { recipient },
+      });
+      setResult({
+        kind: 'ok',
+        recipient: res.data.recipient,
+        messageId: res.data.messageId,
+      });
+      toast.success(`Test email accepted by SMTP for ${res.data.recipient}`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'SMTP send failed';
+      setResult({ kind: 'err', message });
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>SMTP test send</CardTitle>
+        <CardDescription>
+          Fires a minimal plaintext email through the configured SMTP host. Use this to confirm
+          credentials reach the wire before a real notification flow depends on them. Errors land
+          inline below so you can read the SMTP response (auth failure, connection refused, etc.).
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="space-y-2">
+          <Label htmlFor="smtp-test-recipient">Recipient</Label>
+          <div className="flex flex-wrap items-center gap-2">
+            <Input
+              id="smtp-test-recipient"
+              type="email"
+              value={recipient}
+              onChange={(e) => setRecipient(e.target.value)}
+              placeholder="you@example.com"
+              className="flex-1 min-w-[240px]"
+            />
+            <Button onClick={send} disabled={sending || !recipient}>
+              <Send className="mr-1.5 h-4 w-4" aria-hidden />
+              {sending ? 'Sending…' : 'Send test'}
+            </Button>
+          </div>
+        </div>
+        {result?.kind === 'ok' && (
+          <div
+            role="status"
+            className="flex items-start gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-900"
+          >
+            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+            <div>
+              <div className="font-medium">Accepted by SMTP for {result.recipient}.</div>
+              {result.messageId ? (
+                <div className="text-xs text-emerald-800/80">
+                  Message-ID: <span className="font-mono">{result.messageId}</span>
+                </div>
+              ) : null}
+              <div className="text-xs text-emerald-800/80">
+                Acceptance doesn&apos;t guarantee inbox delivery. Check the recipient&apos;s mailbox
+                (and spam folder) to confirm.
+              </div>
+            </div>
+          </div>
+        )}
+        {result?.kind === 'err' && (
+          <div
+            role="alert"
+            className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+          >
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+            <div>
+              <div className="font-medium">SMTP send failed</div>
+              <div className="font-mono text-xs break-all">{result.message}</div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}