v2.2.0

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-02-21 - 2.2.0 - feat(demo-mta)
+add MTA / Email demo views and components and integrate into demo app shell
+
+- Add sz-mta-list-view component with search, direction/status filters, and a results table
+- Add sz-demo-view-mta demo page with sample emails and detailed SMTP log data; handles list -> detail navigation
+- Export new MTA elements from ts_web/elements/index.ts and register sz-demo-view-mta
+- Integrate MTA view into sz-demo-app-shell navigation and include it in the Infrastructure section
+
 ## 2026-02-20 - 2.1.0 - feat(catalog)
 add comprehensive README documenting package purpose, components, usage, development workflow, and legal information
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '2.1.0',
+  version: '2.2.0',
   description: 'UI component catalog for serve.zone'
 }

ts_web/elements/index.ts

@@ -45,6 +45,10 @@ export * from './sz-service-create-view.js';
 export * from './sz-platform-service-detail-view.js';
 export * from './sz-domain-detail-view.js';
 
+// MTA Email Views
+export * from './sz-mta-list-view.js';
+export * from './sz-mta-detail-view.js';
+
 // Demo Views
 export * from './sz-demo-view-dashboard.js';
 export * from './sz-demo-view-services.js';
@@ -52,3 +56,4 @@ export * from './sz-demo-view-network.js';
 export * from './sz-demo-view-registries.js';
 export * from './sz-demo-view-tokens.js';
 export * from './sz-demo-view-settings.js';
+export * from './sz-demo-view-mta.js';

ts_web/elements/sz-demo-view-mta.ts

@@ -0,0 +1,335 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import type { IEmail, TEmailDirection } from './sz-mta-list-view.js';
+import type { IEmailDetail } from './sz-mta-detail-view.js';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-mta': SzDemoViewMta;
+  }
+}
+
+@customElement('sz-demo-view-mta')
+export class SzDemoViewMta extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  @state()
+  private accessor currentView: 'list' | 'detail' = 'list';
+
+  @state()
+  private accessor selectedEmail: IEmailDetail | null = null;
+
+  @state()
+  private accessor currentDirectionFilter: TEmailDirection | 'all' = 'all';
+
+  private demoEmails: IEmail[] = [
+    { id: '1', direction: 'outbound', status: 'delivered', from: 'noreply@serve.zone', to: 'user@example.com', subject: 'Welcome to serve.zone', timestamp: '2024-01-15 14:30:22', messageId: '<abc123@serve.zone>', size: '12.4 KB' },
+    { id: '2', direction: 'outbound', status: 'bounced', from: 'alerts@serve.zone', to: 'invalid@nowhere.test', subject: 'Service Alert: CPU Usage High', timestamp: '2024-01-15 14:28:10', messageId: '<def456@serve.zone>', size: '8.2 KB' },
+    { id: '3', direction: 'inbound', status: 'delivered', from: 'support@customer.com', to: 'admin@serve.zone', subject: 'Re: Infrastructure Review', timestamp: '2024-01-15 14:25:00', messageId: '<ghi789@customer.com>', size: '24.1 KB' },
+    { id: '4', direction: 'outbound', status: 'rejected', from: 'billing@serve.zone', to: 'blocked@spam-domain.test', subject: 'Invoice #2024-001', timestamp: '2024-01-15 14:20:45', messageId: '<jkl012@serve.zone>', size: '45.6 KB' },
+    { id: '5', direction: 'outbound', status: 'deferred', from: 'noreply@serve.zone', to: 'slow@remote-server.test', subject: 'Password Reset Request', timestamp: '2024-01-15 14:15:30', messageId: '<mno345@serve.zone>', size: '6.8 KB' },
+    { id: '6', direction: 'inbound', status: 'delivered', from: 'ci@github.com', to: 'devops@serve.zone', subject: 'Build #4521 passed', timestamp: '2024-01-15 14:10:00', messageId: '<pqr678@github.com>', size: '15.3 KB' },
+    { id: '7', direction: 'outbound', status: 'pending', from: 'reports@serve.zone', to: 'team@serve.zone', subject: 'Weekly Infrastructure Report', timestamp: '2024-01-15 14:05:00', messageId: '<stu901@serve.zone>', size: '102.7 KB' },
+    { id: '8', direction: 'inbound', status: 'delivered', from: 'monitoring@uptime.io', to: 'ops@serve.zone', subject: 'Uptime Report: 99.98%', timestamp: '2024-01-15 13:55:00', messageId: '<vwx234@uptime.io>', size: '9.1 KB' },
+  ];
+
+  private demoEmailDetails: Record<string, IEmailDetail> = {
+    '1': {
+      id: '1',
+      direction: 'outbound',
+      status: 'delivered',
+      from: 'noreply@serve.zone',
+      to: 'user@example.com',
+      toList: ['user@example.com'],
+      subject: 'Welcome to serve.zone',
+      timestamp: '2024-01-15 14:30:22',
+      messageId: '<abc123@serve.zone>',
+      size: '12.4 KB',
+      smtpLog: [
+        { timestamp: '14:30:20', direction: 'client', command: 'EHLO mail.serve.zone' },
+        { timestamp: '14:30:20', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
+        { timestamp: '14:30:20', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
+        { timestamp: '14:30:20', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
+        { timestamp: '14:30:20', direction: 'client', command: 'STARTTLS' },
+        { timestamp: '14:30:21', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
+        { timestamp: '14:30:21', direction: 'client', command: 'EHLO mail.serve.zone' },
+        { timestamp: '14:30:21', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
+        { timestamp: '14:30:21', direction: 'server', command: '250-AUTH PLAIN LOGIN', responseCode: 250 },
+        { timestamp: '14:30:21', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
+        { timestamp: '14:30:21', direction: 'client', command: 'AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=' },
+        { timestamp: '14:30:21', direction: 'server', command: '235 2.7.0 Authentication successful', responseCode: 235 },
+        { timestamp: '14:30:21', direction: 'client', command: 'MAIL FROM:<noreply@serve.zone>' },
+        { timestamp: '14:30:21', direction: 'server', command: '250 OK', responseCode: 250 },
+        { timestamp: '14:30:21', direction: 'client', command: 'RCPT TO:<user@example.com>' },
+        { timestamp: '14:30:21', direction: 'server', command: '250 Accepted', responseCode: 250 },
+        { timestamp: '14:30:22', direction: 'client', command: 'DATA' },
+        { timestamp: '14:30:22', direction: 'server', command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
+        { timestamp: '14:30:22', direction: 'client', command: '.' },
+        { timestamp: '14:30:22', direction: 'server', command: '250 OK id=1pQ2rS-0003Ab-C4', responseCode: 250 },
+        { timestamp: '14:30:22', direction: 'client', command: 'QUIT' },
+        { timestamp: '14:30:22', direction: 'server', command: '221 mail.example.com closing connection', responseCode: 221 },
+      ],
+      connectionInfo: {
+        sourceIp: '10.0.1.50',
+        sourceHostname: 'mail.serve.zone',
+        destinationIp: '93.184.216.34',
+        destinationPort: 25,
+        tlsVersion: 'TLSv1.3',
+        tlsCipher: 'TLS_AES_256_GCM_SHA384',
+        authenticated: true,
+        authMethod: 'PLAIN',
+        authUser: 'noreply@serve.zone',
+      },
+      authenticationResults: {
+        spf: 'pass',
+        spfDomain: 'serve.zone',
+        dkim: 'pass',
+        dkimDomain: 'serve.zone',
+        dmarc: 'pass',
+        dmarcPolicy: 'reject',
+      },
+      headers: {
+        'From': 'noreply@serve.zone',
+        'To': 'user@example.com',
+        'Subject': 'Welcome to serve.zone',
+        'Date': 'Mon, 15 Jan 2024 14:30:22 +0000',
+        'MIME-Version': '1.0',
+        'Content-Type': 'text/html; charset=UTF-8',
+      },
+      body: '<html>\n<head><title>Welcome</title></head>\n<body>\n  <h1>Welcome to serve.zone!</h1>\n  <p>Your account has been created successfully.</p>\n  <p>Get started by visiting your <a href="https://serve.zone/dashboard">dashboard</a>.</p>\n</body>\n</html>',
+    },
+    '2': {
+      id: '2',
+      direction: 'outbound',
+      status: 'bounced',
+      from: 'alerts@serve.zone',
+      to: 'invalid@nowhere.test',
+      toList: ['invalid@nowhere.test'],
+      subject: 'Service Alert: CPU Usage High',
+      timestamp: '2024-01-15 14:28:10',
+      messageId: '<def456@serve.zone>',
+      size: '8.2 KB',
+      rejectionReason: '550 5.1.1 The email account that you tried to reach does not exist.',
+      bounceMessage: 'Delivery to the following recipient failed permanently:\n\n    invalid@nowhere.test\n\nTechnical details of permanent failure:\nGoogle tried to deliver your message, but it was rejected by the server for the recipient domain nowhere.test.',
+      smtpLog: [
+        { timestamp: '14:28:08', direction: 'client', command: 'EHLO mail.serve.zone' },
+        { timestamp: '14:28:08', direction: 'server', command: '250-mail.nowhere.test Hello', responseCode: 250 },
+        { timestamp: '14:28:08', direction: 'client', command: 'MAIL FROM:<alerts@serve.zone>' },
+        { timestamp: '14:28:09', direction: 'server', command: '250 OK', responseCode: 250 },
+        { timestamp: '14:28:09', direction: 'client', command: 'RCPT TO:<invalid@nowhere.test>' },
+        { timestamp: '14:28:10', direction: 'server', command: '550 5.1.1 The email account that you tried to reach does not exist.', responseCode: 550 },
+        { timestamp: '14:28:10', direction: 'client', command: 'QUIT' },
+        { timestamp: '14:28:10', direction: 'server', command: '221 Bye', responseCode: 221 },
+      ],
+      connectionInfo: {
+        sourceIp: '10.0.1.50',
+        sourceHostname: 'mail.serve.zone',
+        destinationIp: '198.51.100.25',
+        destinationPort: 25,
+        tlsVersion: 'TLSv1.2',
+        tlsCipher: 'ECDHE-RSA-AES128-GCM-SHA256',
+        authenticated: true,
+        authMethod: 'PLAIN',
+        authUser: 'alerts@serve.zone',
+      },
+      authenticationResults: {
+        spf: 'pass',
+        spfDomain: 'serve.zone',
+        dkim: 'pass',
+        dkimDomain: 'serve.zone',
+        dmarc: 'pass',
+        dmarcPolicy: 'quarantine',
+      },
+      headers: {
+        'From': 'alerts@serve.zone',
+        'To': 'invalid@nowhere.test',
+        'Subject': 'Service Alert: CPU Usage High',
+        'Date': 'Mon, 15 Jan 2024 14:28:10 +0000',
+        'MIME-Version': '1.0',
+        'Content-Type': 'text/plain; charset=UTF-8',
+      },
+      body: 'ALERT: CPU Usage High\n\nService: api-gateway\nCurrent Usage: 94.2%\nThreshold: 90%\nTimestamp: 2024-01-15 14:28:00 UTC\n\nPlease investigate immediately.',
+    },
+    '3': {
+      id: '3',
+      direction: 'inbound',
+      status: 'delivered',
+      from: 'support@customer.com',
+      to: 'admin@serve.zone',
+      toList: ['admin@serve.zone'],
+      cc: ['ops@serve.zone'],
+      subject: 'Re: Infrastructure Review',
+      timestamp: '2024-01-15 14:25:00',
+      messageId: '<ghi789@customer.com>',
+      size: '24.1 KB',
+      smtpLog: [
+        { timestamp: '14:24:58', direction: 'client', command: 'EHLO mail.customer.com' },
+        { timestamp: '14:24:58', direction: 'server', command: '250-mail.serve.zone Hello', responseCode: 250 },
+        { timestamp: '14:24:58', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
+        { timestamp: '14:24:58', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
+        { timestamp: '14:24:59', direction: 'client', command: 'STARTTLS' },
+        { timestamp: '14:24:59', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
+        { timestamp: '14:24:59', direction: 'client', command: 'MAIL FROM:<support@customer.com>' },
+        { timestamp: '14:24:59', direction: 'server', command: '250 OK', responseCode: 250 },
+        { timestamp: '14:24:59', direction: 'client', command: 'RCPT TO:<admin@serve.zone>' },
+        { timestamp: '14:25:00', direction: 'server', command: '250 Accepted', responseCode: 250 },
+        { timestamp: '14:25:00', direction: 'client', command: 'DATA' },
+        { timestamp: '14:25:00', direction: 'server', command: '354 Enter message', responseCode: 354 },
+        { timestamp: '14:25:00', direction: 'client', command: '.' },
+        { timestamp: '14:25:00', direction: 'server', command: '250 OK id=2bR3sT-0004Cd-E5', responseCode: 250 },
+      ],
+      connectionInfo: {
+        sourceIp: '203.0.113.45',
+        sourceHostname: 'mail.customer.com',
+        destinationIp: '10.0.1.50',
+        destinationPort: 25,
+        tlsVersion: 'TLSv1.3',
+        tlsCipher: 'TLS_AES_128_GCM_SHA256',
+        authenticated: false,
+        authMethod: '',
+        authUser: '',
+      },
+      authenticationResults: {
+        spf: 'pass',
+        spfDomain: 'customer.com',
+        dkim: 'pass',
+        dkimDomain: 'customer.com',
+        dmarc: 'pass',
+        dmarcPolicy: 'none',
+      },
+      headers: {
+        'From': 'support@customer.com',
+        'To': 'admin@serve.zone',
+        'CC': 'ops@serve.zone',
+        'Subject': 'Re: Infrastructure Review',
+        'Date': 'Mon, 15 Jan 2024 14:25:00 +0000',
+        'MIME-Version': '1.0',
+        'Content-Type': 'text/plain; charset=UTF-8',
+        'In-Reply-To': '<prev123@serve.zone>',
+      },
+      body: 'Hi Admin,\n\nThank you for the detailed infrastructure review report.\n\nWe have reviewed the recommendations and would like to\nproceed with the following:\n\n1. Upgrade to the Pro tier\n2. Enable automatic backups\n3. Set up monitoring alerts\n\nPlease let us know the timeline for these changes.\n\nBest regards,\nCustomer Support Team',
+    },
+  };
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    this.appui.setContentTabs([
+      {
+        key: 'All Emails',
+        action: () => {
+          this.currentDirectionFilter = 'all';
+          this.currentView = 'list';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'Inbound',
+        action: () => {
+          this.currentDirectionFilter = 'inbound';
+          this.currentView = 'list';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'Outbound',
+        action: () => {
+          this.currentDirectionFilter = 'outbound';
+          this.currentView = 'list';
+          this.updateSecondaryMenu();
+        },
+      },
+    ]);
+
+    this.updateSecondaryMenu();
+  }
+
+  private updateSecondaryMenu() {
+    if (!this.appui) return;
+
+    this.appui.setSecondaryMenu({
+      heading: 'Email / MTA',
+      groups: [
+        {
+          name: 'Actions',
+          items: [
+            { type: 'action', key: 'Refresh', iconName: 'lucide:RefreshCw', action: () => { console.log('Refresh emails'); } },
+            { type: 'action', key: 'Export Logs', iconName: 'lucide:Download', action: () => { console.log('Export logs'); } },
+          ],
+        },
+        {
+          name: 'Status Filters',
+          items: [
+            { key: 'Delivered', iconName: 'lucide:CheckCircle', badge: '5', badgeVariant: 'success' as const, action: () => { console.log('Filter delivered'); } },
+            { key: 'Bounced', iconName: 'lucide:XCircle', badge: '1', badgeVariant: 'error' as const, action: () => { console.log('Filter bounced'); } },
+            { key: 'Deferred', iconName: 'lucide:Clock', badge: '1', badgeVariant: 'warning' as const, action: () => { console.log('Filter deferred'); } },
+            { key: 'Pending', iconName: 'lucide:Loader', badge: '1', action: () => { console.log('Filter pending'); } },
+          ],
+        },
+        {
+          name: 'Statistics',
+          items: [
+            { type: 'header' as const, label: '8 Total Emails' },
+            { type: 'header' as const, label: '62.5% Delivery Rate' },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (this.currentView === 'detail' && this.selectedEmail) {
+      return html`
+        <sz-mta-detail-view
+          .email=${this.selectedEmail}
+          @back=${() => { this.currentView = 'list'; this.selectedEmail = null; }}
+        ></sz-mta-detail-view>
+      `;
+    }
+
+    return html`
+      <sz-mta-list-view
+        .emails=${this.currentDirectionFilter === 'all'
+          ? this.demoEmails
+          : this.demoEmails.filter(e => e.direction === this.currentDirectionFilter)}
+        @email-click=${(e: CustomEvent<IEmail>) => this.handleEmailClick(e.detail)}
+      ></sz-mta-list-view>
+    `;
+  }
+
+  private handleEmailClick(email: IEmail) {
+    const detail = this.demoEmailDetails[email.id];
+    if (detail) {
+      this.selectedEmail = detail;
+      this.currentView = 'detail';
+    } else {
+      console.log('No detail data available for email:', email.id);
+    }
+  }
+}

ts_web/elements/sz-mta-detail-view.ts

@@ -0,0 +1,933 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import type { IEmail } from './sz-mta-list-view.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-mta-detail-view': SzMtaDetailView;
+  }
+}
+
+export interface ISmtpLogEntry {
+  timestamp: string;
+  direction: 'client' | 'server';
+  command: string;
+  responseCode?: number;
+}
+
+export interface IConnectionInfo {
+  sourceIp: string;
+  sourceHostname: string;
+  destinationIp: string;
+  destinationPort: number;
+  tlsVersion: string;
+  tlsCipher: string;
+  authenticated: boolean;
+  authMethod: string;
+  authUser: string;
+}
+
+export interface IAuthenticationResults {
+  spf: 'pass' | 'fail' | 'softfail' | 'neutral' | 'none';
+  spfDomain: string;
+  dkim: 'pass' | 'fail' | 'none';
+  dkimDomain: string;
+  dmarc: 'pass' | 'fail' | 'none';
+  dmarcPolicy: string;
+}
+
+export interface IEmailDetail extends IEmail {
+  to: string;
+  toList: string[];
+  cc?: string[];
+  smtpLog: ISmtpLogEntry[];
+  connectionInfo: IConnectionInfo;
+  authenticationResults: IAuthenticationResults;
+  rejectionReason?: string;
+  bounceMessage?: string;
+  headers: Record<string, string>;
+  body: string;
+}
+
+@customElement('sz-mta-detail-view')
+export class SzMtaDetailView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-mta-detail-view
+        .email=${{
+          id: '1',
+          direction: 'outbound',
+          status: 'delivered',
+          from: 'noreply@serve.zone',
+          to: 'user@example.com',
+          toList: ['user@example.com'],
+          subject: 'Welcome to serve.zone',
+          timestamp: '2024-01-15 14:30:22',
+          messageId: '<abc123@serve.zone>',
+          size: '12.4 KB',
+          smtpLog: [
+            { timestamp: '14:30:20', direction: 'client', command: 'EHLO mail.serve.zone' },
+            { timestamp: '14:30:20', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
+            { timestamp: '14:30:20', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
+            { timestamp: '14:30:20', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
+            { timestamp: '14:30:20', direction: 'client', command: 'STARTTLS' },
+            { timestamp: '14:30:21', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
+            { timestamp: '14:30:21', direction: 'client', command: 'EHLO mail.serve.zone' },
+            { timestamp: '14:30:21', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
+            { timestamp: '14:30:21', direction: 'server', command: '250-AUTH PLAIN LOGIN', responseCode: 250 },
+            { timestamp: '14:30:21', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
+            { timestamp: '14:30:21', direction: 'client', command: 'AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=' },
+            { timestamp: '14:30:21', direction: 'server', command: '235 2.7.0 Authentication successful', responseCode: 235 },
+            { timestamp: '14:30:21', direction: 'client', command: 'MAIL FROM:<noreply@serve.zone>' },
+            { timestamp: '14:30:21', direction: 'server', command: '250 OK', responseCode: 250 },
+            { timestamp: '14:30:21', direction: 'client', command: 'RCPT TO:<user@example.com>' },
+            { timestamp: '14:30:21', direction: 'server', command: '250 Accepted', responseCode: 250 },
+            { timestamp: '14:30:22', direction: 'client', command: 'DATA' },
+            { timestamp: '14:30:22', direction: 'server', command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
+            { timestamp: '14:30:22', direction: 'client', command: '.' },
+            { timestamp: '14:30:22', direction: 'server', command: '250 OK id=1pQ2rS-0003Ab-C4', responseCode: 250 },
+            { timestamp: '14:30:22', direction: 'client', command: 'QUIT' },
+            { timestamp: '14:30:22', direction: 'server', command: '221 mail.example.com closing connection', responseCode: 221 },
+          ],
+          connectionInfo: {
+            sourceIp: '10.0.1.50',
+            sourceHostname: 'mail.serve.zone',
+            destinationIp: '93.184.216.34',
+            destinationPort: 25,
+            tlsVersion: 'TLSv1.3',
+            tlsCipher: 'TLS_AES_256_GCM_SHA384',
+            authenticated: true,
+            authMethod: 'PLAIN',
+            authUser: 'noreply@serve.zone',
+          },
+          authenticationResults: {
+            spf: 'pass',
+            spfDomain: 'serve.zone',
+            dkim: 'pass',
+            dkimDomain: 'serve.zone',
+            dmarc: 'pass',
+            dmarcPolicy: 'reject',
+          },
+          headers: {
+            'From': 'noreply@serve.zone',
+            'To': 'user@example.com',
+            'Subject': 'Welcome to serve.zone',
+            'Date': 'Mon, 15 Jan 2024 14:30:22 +0000',
+            'MIME-Version': '1.0',
+            'Content-Type': 'text/html; charset=UTF-8',
+          },
+          body: '<html>\\n<head><title>Welcome</title></head>\\n<body>\\n  <h1>Welcome to serve.zone!</h1>\\n  <p>Your account has been created successfully.</p>\\n  <a href="https://serve.zone/dashboard">Go to Dashboard</a>\\n</body>\\n</html>',
+        }}
+      ></sz-mta-detail-view>
+    </div>
+  `;
+
+  public static demoGroups = ['MTA'];
+
+  @property({ type: Object })
+  public accessor email: IEmailDetail | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        cursor: pointer;
+        transition: color 200ms ease;
+      }
+
+      .back-link:hover {
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .email-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 24px;
+      }
+
+      .email-subject {
+        font-size: 24px;
+        font-weight: 700;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin: 0;
+      }
+
+      .badge-group {
+        display: flex;
+        gap: 8px;
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 12px;
+        border-radius: 9999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .status-badge.delivered {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.bounced,
+      .status-badge.rejected {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .status-badge.deferred {
+        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+      }
+
+      .status-badge.pending {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .direction-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 12px;
+        border-radius: 9999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .direction-badge.inbound {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .direction-badge.outbound {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .content {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 24px;
+      }
+
+      @media (min-width: 1024px) {
+        .content {
+          grid-template-columns: 2fr 1fr;
+        }
+      }
+
+      .main-content {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+      }
+
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .card-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .card-content {
+        padding: 16px;
+      }
+
+      .detail-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .detail-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+
+      .detail-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        flex-shrink: 0;
+      }
+
+      .detail-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        text-align: right;
+        word-break: break-all;
+      }
+
+      .smtp-log-container {
+        padding: 16px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        max-height: 500px;
+        overflow-y: auto;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')} transparent;
+      }
+
+      .smtp-log-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .smtp-log-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .smtp-log-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        border-radius: 3px;
+      }
+
+      /* Phase separators */
+      .smtp-phase-separator {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 4px 0;
+        margin: 4px 0;
+      }
+
+      .smtp-phase-line {
+        flex: 1;
+        height: 1px;
+        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+      }
+
+      .smtp-phase-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        white-space: nowrap;
+      }
+
+      /* Chat bubbles */
+      .smtp-bubble {
+        border-radius: 8px;
+        padding: 10px 14px;
+        max-width: 70%;
+      }
+
+      .smtp-bubble.client {
+        align-self: flex-start;
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(59, 130, 246, 0.12)')};
+        border-left: 3px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        margin-right: auto;
+      }
+
+      .smtp-bubble.server {
+        align-self: flex-end;
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.06)', 'rgba(34, 197, 94, 0.10)')};
+        border-right: 3px solid ${cssManager.bdTheme('#22c55e', '#4ade80')};
+        margin-left: auto;
+        text-align: right;
+      }
+
+      .smtp-bubble-command {
+        white-space: pre-wrap;
+        word-break: break-all;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .smtp-bubble-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .smtp-bubble.server .smtp-bubble-meta {
+        justify-content: flex-end;
+      }
+
+      .smtp-direction-tag {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+      }
+
+      .smtp-direction-tag.client {
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .smtp-direction-tag.server {
+        color: ${cssManager.bdTheme('#22c55e', '#4ade80')};
+      }
+
+      /* Response code badges */
+      .response-code-badge {
+        display: inline-block;
+        padding: 1px 7px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 700;
+        margin-bottom: 4px;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      }
+
+      .response-code-badge.code-2xx {
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.15)', 'rgba(34, 197, 94, 0.25)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .response-code-badge.code-3xx {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.25)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .response-code-badge.code-4xx {
+        background: ${cssManager.bdTheme('rgba(250, 204, 21, 0.15)', 'rgba(250, 204, 21, 0.25)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+      }
+
+      .response-code-badge.code-5xx {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.15)', 'rgba(239, 68, 68, 0.25)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      /* Copy button */
+      .smtp-copy-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 150ms ease;
+      }
+
+      .smtp-copy-button:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+      }
+
+      /* Header subtitle enhancements */
+      .smtp-header-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+
+      .smtp-direction-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+      }
+
+      .smtp-direction-badge.inbound {
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.12)', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .smtp-direction-badge.outbound {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.12)', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .email-body-container {
+        padding: 16px;
+        font-family: monospace;
+        font-size: 13px;
+        max-height: 500px;
+        overflow-y: auto;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        white-space: pre-wrap;
+        word-break: break-all;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .tls-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .auth-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+      }
+
+      .auth-row:last-child {
+        border-bottom: none;
+      }
+
+      .auth-label {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .auth-domain {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-left: 8px;
+      }
+
+      .auth-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .auth-badge.pass {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .auth-badge.fail {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .auth-badge.softfail,
+      .auth-badge.neutral,
+      .auth-badge.none {
+        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+      }
+
+      .rejection-card {
+        border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
+      }
+
+      .rejection-content {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .rejection-label {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 4px;
+      }
+
+      .rejection-text {
+        font-family: monospace;
+        font-size: 13px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('#fef2f2', 'rgba(239, 68, 68, 0.1)')};
+        border-radius: 4px;
+        margin-bottom: 12px;
+        color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
+      }
+
+      .rejection-text:last-child {
+        margin-bottom: 0;
+      }
+
+      .no-email {
+        padding: 48px 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.email) {
+      return html`<div class="no-email">No email selected</div>`;
+    }
+
+    const email = this.email;
+
+    return html`
+      <div class="header">
+        <div class="back-link" @click=${() => this.handleBack()}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+          Back to Emails
+        </div>
+      </div>
+
+      <div class="email-header">
+        <h1 class="email-subject">${email.subject}</h1>
+        <div class="badge-group">
+          <span class="status-badge ${email.status}">${email.status}</span>
+          <span class="direction-badge ${email.direction}">${email.direction}</span>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="main-content">
+          <!-- Email Metadata -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Email Metadata</div>
+            </div>
+            <div class="card-content">
+              <div class="detail-list">
+                <div class="detail-item">
+                  <span class="detail-label">From</span>
+                  <span class="detail-value">${email.from}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">To</span>
+                  <span class="detail-value">${email.toList.join(', ')}</span>
+                </div>
+                ${email.cc && email.cc.length > 0 ? html`
+                  <div class="detail-item">
+                    <span class="detail-label">CC</span>
+                    <span class="detail-value">${email.cc.join(', ')}</span>
+                  </div>
+                ` : ''}
+                <div class="detail-item">
+                  <span class="detail-label">Subject</span>
+                  <span class="detail-value">${email.subject}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Date</span>
+                  <span class="detail-value">${email.timestamp}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Message ID</span>
+                  <span class="detail-value">${email.messageId}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Size</span>
+                  <span class="detail-value">${email.size}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- SMTP Transaction Log -->
+          <div class="card">
+            <div class="card-header">
+              <div>
+                <div class="card-title">SMTP Transaction Log</div>
+                <div class="smtp-header-subtitle">
+                  <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
+                  <span>${email.direction === 'outbound'
+                    ? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
+                    : `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
+                  }</span>
+                </div>
+              </div>
+              <button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                Copy Log
+              </button>
+            </div>
+            ${this.renderSmtpLog(email)}
+          </div>
+
+          <!-- Email Body -->
+          <div class="card">
+            <div class="card-header">
+              <div>
+                <div class="card-title">Email Body (Escaped)</div>
+                <div class="card-subtitle">Raw content — HTML is not rendered</div>
+              </div>
+            </div>
+            <pre class="email-body-container">${email.body}</pre>
+          </div>
+        </div>
+
+        <div class="sidebar">
+          <!-- Connection Info -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Connection Info</div>
+            </div>
+            <div class="card-content">
+              <div class="detail-list">
+                <div class="detail-item">
+                  <span class="detail-label">Source IP</span>
+                  <span class="detail-value">${email.connectionInfo.sourceIp}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Source Hostname</span>
+                  <span class="detail-value">${email.connectionInfo.sourceHostname}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">Destination</span>
+                  <span class="detail-value">${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">TLS</span>
+                  <span class="detail-value">
+                    ${email.connectionInfo.tlsVersion
+                      ? html`<span class="tls-badge">${email.connectionInfo.tlsVersion}</span>`
+                      : 'None'}
+                  </span>
+                </div>
+                ${email.connectionInfo.tlsCipher ? html`
+                  <div class="detail-item">
+                    <span class="detail-label">Cipher</span>
+                    <span class="detail-value">${email.connectionInfo.tlsCipher}</span>
+                  </div>
+                ` : ''}
+                <div class="detail-item">
+                  <span class="detail-label">Authenticated</span>
+                  <span class="detail-value">${email.connectionInfo.authenticated ? 'Yes' : 'No'}</span>
+                </div>
+                ${email.connectionInfo.authenticated ? html`
+                  <div class="detail-item">
+                    <span class="detail-label">Auth Method</span>
+                    <span class="detail-value">${email.connectionInfo.authMethod}</span>
+                  </div>
+                  <div class="detail-item">
+                    <span class="detail-label">Auth User</span>
+                    <span class="detail-value">${email.connectionInfo.authUser}</span>
+                  </div>
+                ` : ''}
+              </div>
+            </div>
+          </div>
+
+          <!-- Authentication Results -->
+          <div class="card">
+            <div class="card-header">
+              <div class="card-title">Authentication Results</div>
+            </div>
+            <div class="card-content">
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">SPF</span>
+                  <span class="auth-domain">${email.authenticationResults.spfDomain}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.spf}">${email.authenticationResults.spf}</span>
+              </div>
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">DKIM</span>
+                  <span class="auth-domain">${email.authenticationResults.dkimDomain}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.dkim}">${email.authenticationResults.dkim}</span>
+              </div>
+              <div class="auth-row">
+                <div>
+                  <span class="auth-label">DMARC</span>
+                  <span class="auth-domain">policy: ${email.authenticationResults.dmarcPolicy}</span>
+                </div>
+                <span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Rejection Details (conditional) -->
+          ${email.status === 'rejected' || email.status === 'bounced' ? html`
+            <div class="card rejection-card">
+              <div class="card-header">
+                <div class="card-title">Rejection Details</div>
+              </div>
+              <div class="card-content">
+                ${email.rejectionReason ? html`
+                  <div class="rejection-label">Rejection Reason</div>
+                  <div class="rejection-text">${email.rejectionReason}</div>
+                ` : ''}
+                ${email.bounceMessage ? html`
+                  <div class="rejection-label">Bounce Message</div>
+                  <div class="rejection-text">${email.bounceMessage}</div>
+                ` : ''}
+              </div>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  private getResponseCodeBadgeClass(code: number): string {
+    if (code >= 500) return 'code-5xx';
+    if (code >= 400) return 'code-4xx';
+    if (code >= 300) return 'code-3xx';
+    return 'code-2xx';
+  }
+
+  private getSmtpPhases(log: ISmtpLogEntry[]): Array<{ phase: string; label: string; entries: ISmtpLogEntry[] }> {
+    const phases: Array<{ phase: string; label: string; entries: ISmtpLogEntry[] }> = [];
+    let currentPhase = '';
+    let ehloCount = 0;
+
+    for (const entry of log) {
+      const cmd = entry.command.toUpperCase();
+      let phase = currentPhase;
+
+      if (entry.direction === 'client') {
+        if (cmd.startsWith('EHLO') || cmd.startsWith('HELO')) {
+          ehloCount++;
+          if (ehloCount === 1) {
+            phase = 'connection';
+          } else {
+            phase = 'post-tls';
+          }
+        } else if (cmd === 'STARTTLS') {
+          phase = 'tls';
+        } else if (cmd.startsWith('AUTH')) {
+          phase = 'auth';
+        } else if (cmd.startsWith('MAIL FROM') || cmd.startsWith('RCPT TO') || cmd === 'DATA' || cmd === '.') {
+          phase = 'transfer';
+        } else if (cmd === 'QUIT') {
+          phase = 'closing';
+        }
+      }
+
+      // Server responses stay in the current phase
+      if (entry.direction === 'server' && phase === '') {
+        phase = currentPhase || 'connection';
+      }
+      if (phase === '') phase = 'connection';
+
+      if (phase !== currentPhase) {
+        currentPhase = phase;
+        const labels: Record<string, string> = {
+          'connection': 'Connection',
+          'tls': 'TLS Negotiation',
+          'post-tls': 'Post-TLS Handshake',
+          'auth': 'Authentication',
+          'transfer': 'Mail Transfer',
+          'closing': 'Closing',
+        };
+        phases.push({ phase, label: labels[phase] || phase, entries: [] });
+      }
+
+      if (phases.length === 0) {
+        phases.push({ phase: 'connection', label: 'Connection', entries: [] });
+      }
+      phases[phases.length - 1].entries.push(entry);
+    }
+
+    return phases;
+  }
+
+  private renderSmtpLog(email: IEmailDetail): TemplateResult {
+    const phases = this.getSmtpPhases(email.smtpLog);
+
+    return html`
+      <div class="smtp-log-container">
+        ${phases.map(phase => html`
+          <div class="smtp-phase-separator">
+            <div class="smtp-phase-line"></div>
+            <span class="smtp-phase-label">${phase.label}</span>
+            <div class="smtp-phase-line"></div>
+          </div>
+          ${phase.entries.map(entry => html`
+            <div class="smtp-bubble ${entry.direction}">
+              ${entry.direction === 'server' && entry.responseCode ? html`
+                <span class="response-code-badge ${this.getResponseCodeBadgeClass(entry.responseCode)}">${entry.responseCode}</span>
+              ` : ''}
+              <div class="smtp-bubble-command">${entry.command}</div>
+              <div class="smtp-bubble-meta">
+                <span>${entry.timestamp}</span>
+                <span>·</span>
+                <span class="smtp-direction-tag ${entry.direction}">${entry.direction === 'client' ? 'Client' : 'Server'}</span>
+              </div>
+            </div>
+          `)}
+        `)}
+      </div>
+    `;
+  }
+
+  private copySmtpLog() {
+    if (!this.email) return;
+    const text = this.email.smtpLog
+      .map(e => `[${e.timestamp}] ${e.direction === 'client' ? 'C:' : 'S:'} ${e.command}`)
+      .join('\n');
+    navigator.clipboard.writeText(text);
+  }
+
+  private handleBack() {
+    this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
+  }
+}

ts_web/elements/sz-mta-list-view.ts

@@ -0,0 +1,332 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-mta-list-view': SzMtaListView;
+  }
+}
+
+export type TEmailStatus = 'delivered' | 'bounced' | 'rejected' | 'deferred' | 'pending';
+export type TEmailDirection = 'inbound' | 'outbound';
+
+export interface IEmail {
+  id: string;
+  direction: TEmailDirection;
+  status: TEmailStatus;
+  from: string;
+  to: string;
+  subject: string;
+  timestamp: string;
+  messageId: string;
+  size: string;
+}
+
+@customElement('sz-mta-list-view')
+export class SzMtaListView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-mta-list-view
+        .emails=${[
+          { id: '1', direction: 'outbound', status: 'delivered', from: 'noreply@serve.zone', to: 'user@example.com', subject: 'Welcome to serve.zone', timestamp: '2024-01-15 14:30:22', messageId: '<abc123@serve.zone>', size: '12.4 KB' },
+          { id: '2', direction: 'outbound', status: 'bounced', from: 'alerts@serve.zone', to: 'invalid@nowhere.test', subject: 'Service Alert: CPU Usage High', timestamp: '2024-01-15 14:28:10', messageId: '<def456@serve.zone>', size: '8.2 KB' },
+          { id: '3', direction: 'inbound', status: 'delivered', from: 'support@customer.com', to: 'admin@serve.zone', subject: 'Re: Infrastructure Review', timestamp: '2024-01-15 14:25:00', messageId: '<ghi789@customer.com>', size: '24.1 KB' },
+          { id: '4', direction: 'outbound', status: 'rejected', from: 'billing@serve.zone', to: 'blocked@spam-domain.test', subject: 'Invoice #2024-001', timestamp: '2024-01-15 14:20:45', messageId: '<jkl012@serve.zone>', size: '45.6 KB' },
+          { id: '5', direction: 'outbound', status: 'deferred', from: 'noreply@serve.zone', to: 'slow@remote-server.test', subject: 'Password Reset Request', timestamp: '2024-01-15 14:15:30', messageId: '<mno345@serve.zone>', size: '6.8 KB' },
+          { id: '6', direction: 'inbound', status: 'delivered', from: 'ci@github.com', to: 'devops@serve.zone', subject: 'Build #4521 passed', timestamp: '2024-01-15 14:10:00', messageId: '<pqr678@github.com>', size: '15.3 KB' },
+          { id: '7', direction: 'outbound', status: 'pending', from: 'reports@serve.zone', to: 'team@serve.zone', subject: 'Weekly Infrastructure Report', timestamp: '2024-01-15 14:05:00', messageId: '<stu901@serve.zone>', size: '102.7 KB' },
+        ]}
+      ></sz-mta-list-view>
+    </div>
+  `;
+
+  public static demoGroups = ['MTA'];
+
+  @property({ type: Array })
+  public accessor emails: IEmail[] = [];
+
+  @state()
+  private accessor searchQuery: string = '';
+
+  @state()
+  private accessor statusFilter: TEmailStatus | 'all' = 'all';
+
+  @state()
+  private accessor directionFilter: TEmailDirection | 'all' = 'all';
+
+  private get filteredEmails(): IEmail[] {
+    return this.emails.filter((email) => {
+      if (this.statusFilter !== 'all' && email.status !== this.statusFilter) return false;
+      if (this.directionFilter !== 'all' && email.direction !== this.directionFilter) return false;
+      if (this.searchQuery) {
+        const q = this.searchQuery.toLowerCase();
+        return (
+          email.from.toLowerCase().includes(q) ||
+          email.to.toLowerCase().includes(q) ||
+          email.subject.toLowerCase().includes(q) ||
+          email.messageId.toLowerCase().includes(q)
+        );
+      }
+      return true;
+    });
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .filter-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 6px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        outline: none;
+        transition: border-color 200ms ease;
+      }
+
+      .search-input::placeholder {
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .search-input:focus {
+        border-color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+      }
+
+      .chip-group {
+        display: flex;
+        gap: 4px;
+      }
+
+      .chip {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        cursor: pointer;
+        transition: all 200ms ease;
+        white-space: nowrap;
+      }
+
+      .chip:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .chip.active {
+        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        border-color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .results-count {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 12px;
+      }
+
+      .table-container {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .table-header {
+        display: grid;
+        grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
+        gap: 16px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .table-row {
+        display: grid;
+        grid-template-columns: 40px 90px 1.5fr 1.5fr 2fr 140px;
+        gap: 16px;
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        align-items: center;
+        cursor: pointer;
+        transition: background 200ms ease;
+      }
+
+      .table-row:last-child {
+        border-bottom: none;
+      }
+
+      .table-row:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+
+      .direction-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .direction-icon.inbound {
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .direction-icon.outbound {
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-badge.delivered {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.bounced,
+      .status-badge.rejected {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .status-badge.deferred {
+        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+      }
+
+      .status-badge.pending {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .email-from,
+      .email-to {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .email-subject {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 500;
+      }
+
+      .email-timestamp {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        white-space: nowrap;
+      }
+
+      .empty-state {
+        padding: 48px 24px;
+        text-align: center;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const filtered = this.filteredEmails;
+
+    return html`
+      <div class="filter-bar">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Search by from, to, subject, or message ID..."
+          .value=${this.searchQuery}
+          @input=${(e: InputEvent) => { this.searchQuery = (e.target as HTMLInputElement).value; }}
+        />
+        <div class="chip-group">
+          ${(['all', 'inbound', 'outbound'] as const).map(dir => html`
+            <button
+              class="chip ${this.directionFilter === dir ? 'active' : ''}"
+              @click=${() => { this.directionFilter = dir; }}
+            >${dir === 'all' ? 'All' : dir === 'inbound' ? 'Inbound' : 'Outbound'}</button>
+          `)}
+        </div>
+        <div class="chip-group">
+          ${(['all', 'delivered', 'bounced', 'rejected', 'deferred', 'pending'] as const).map(s => html`
+            <button
+              class="chip ${this.statusFilter === s ? 'active' : ''}"
+              @click=${() => { this.statusFilter = s; }}
+            >${s === 'all' ? 'All' : s.charAt(0).toUpperCase() + s.slice(1)}</button>
+          `)}
+        </div>
+      </div>
+
+      <div class="results-count">Showing ${filtered.length} of ${this.emails.length} emails</div>
+
+      <div class="table-container">
+        <div class="table-header">
+          <span></span>
+          <span>Status</span>
+          <span>From</span>
+          <span>To</span>
+          <span>Subject</span>
+          <span>Timestamp</span>
+        </div>
+        ${filtered.length > 0 ? filtered.map(email => html`
+          <div class="table-row" @click=${() => this.handleEmailClick(email)}>
+            <span class="direction-icon ${email.direction}">
+              ${email.direction === 'inbound'
+                ? html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>`
+                : html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>`
+              }
+            </span>
+            <span><span class="status-badge ${email.status}">${email.status}</span></span>
+            <span class="email-from" title="${email.from}">${email.from}</span>
+            <span class="email-to" title="${email.to}">${email.to}</span>
+            <span class="email-subject" title="${email.subject}">${email.subject}</span>
+            <span class="email-timestamp">${email.timestamp}</span>
+          </div>
+        `) : html`
+          <div class="empty-state">No emails found</div>
+        `}
+      </div>
+    `;
+  }
+
+  private handleEmailClick(email: IEmail) {
+    this.dispatchEvent(new CustomEvent('email-click', { detail: email, bubbles: true, composed: true }));
+  }
+}

ts_web/pages/sz-demo-app-shell.ts

@@ -132,6 +132,12 @@ export class SzDemoAppShell extends DeesElement {
           iconName: 'lucide:Key',
           content: 'sz-demo-view-tokens',
         },
+        {
+          id: 'mta',
+          name: 'Email / MTA',
+          iconName: 'lucide:Mail',
+          content: 'sz-demo-view-mta',
+        },
         {
           id: 'settings',
           name: 'Settings',
@@ -147,7 +153,7 @@ export class SzDemoAppShell extends DeesElement {
           },
           {
             name: 'Infrastructure',
-            views: ['services', 'network', 'registries'],
+            views: ['services', 'network', 'registries', 'mta'],
           },
           {
             name: 'Administration',