@serve.zone/dcrouter 18.2.1 → 18.3.0

package/ts/opsserver/handlers/email-ops.handler.ts

@@ -3,6 +3,14 @@ import type { OpsServer } from '../classes.opsserver.js';
 import * as interfaces from '../../../ts_interfaces/index.js';
 import { requireOpsAuth } from '../helpers/auth.js';
 import { CachedEmail } from '../../db/index.js';
+import {
+  aggregateEmailLogTrafficInMemory,
+  buildEmailLogTraffic,
+  EMAIL_LOG_RETENTION_MS,
+  normalizeEmailLogSearch,
+  selectEmailLogTrafficWindow,
+} from '../../email/helpers.email-log-traffic.js';
+import { evaluateInboundAcceptance } from '../../email/helpers.inbound-security.js';
 
 export class EmailOpsHandler {
   constructor(private opsServerRef: OpsServer) {
@@ -21,12 +29,27 @@ export class EmailOpsHandler {
         'getAllEmails',
         async (dataArg) => {
           await requireOpsAuth(this.opsServerRef, dataArg, { scope: 'emails:read' });
-          const emails = await this.getAllEmails(dataArg.direction, dataArg.limit);
-          return { emails };
+          return await this.getEmailLogSnapshot(
+            dataArg.direction,
+            dataArg.limit,
+            dataArg.search,
+          );
         }
       )
     );
 
+    viewRouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetEmailSecurityFindings>(
+        'getEmailSecurityFindings',
+        async (dataArg) => {
+          await requireOpsAuth(this.opsServerRef, dataArg, { scope: 'emails:read' });
+          return {
+            findings: await this.getEmailSecurityFindings(dataArg.limit),
+          };
+        },
+      ),
+    );
+
     // Get Email Detail Handler
     viewRouter.addTypedHandler(
       new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetEmailDetail>(
@@ -92,10 +115,12 @@ export class EmailOpsHandler {
   private async getAllEmails(
     direction?: interfaces.requests.TEmailDirection,
     limitArg?: number,
+    searchArg?: string,
   ): Promise<interfaces.requests.IEmail[]> {
     const limit = Math.min(Math.max(Math.floor(limitArg ?? 200), 1), 1000);
+    const search = normalizeEmailLogSearch(searchArg);
     const cachedDocs = this.isCachedEmailStoreAvailable()
-      ? await CachedEmail.findRecent(limit, { direction })
+      ? await CachedEmail.findRecent(limit, { direction, search: search || undefined })
       : [];
     const emails = cachedDocs.map((doc) => this.mapCachedEmailToEmail(doc));
     const representedIds = new Set(cachedDocs.map((doc) => doc.id));
@@ -110,7 +135,10 @@ export class EmailOpsHandler {
         if (cachedId && representedIds.has(cachedId)) {
           continue;
         }
-        emails.push(this.mapQueueItemToEmail(item));
+        const email = this.mapQueueItemToEmail(item);
+        if (this.matchesEmailSearch(email, search)) {
+          emails.push(email);
+        }
       }
     }
 
@@ -120,6 +148,90 @@ export class EmailOpsHandler {
     return emails.slice(0, limit);
   }
 
+  private async getEmailLogSnapshot(
+    direction?: interfaces.requests.TEmailDirection,
+    limitArg?: number,
+    searchArg?: string,
+  ): Promise<interfaces.requests.IReq_GetAllEmails['response']> {
+    const search = normalizeEmailLogSearch(searchArg);
+    const now = Date.now();
+    const filter = { direction, search: search || undefined };
+    const emails = await this.getAllEmails(direction, limitArg, search);
+
+    let oldestMatchAt: number | null = null;
+    if (search) {
+      oldestMatchAt = this.isCachedEmailStoreAvailable()
+        ? await CachedEmail.findOldestAcceptedAt(filter, now - EMAIL_LOG_RETENTION_MS)
+        : emails.reduce<number | null>((oldest, email) => {
+            const timestamp = new Date(email.timestamp).getTime();
+            if (!Number.isFinite(timestamp)) return oldest;
+            return oldest === null ? timestamp : Math.min(oldest, timestamp);
+          }, null);
+    }
+
+    const descriptor = selectEmailLogTrafficWindow(search, oldestMatchAt, now);
+    const emptyTraffic = buildEmailLogTraffic(descriptor, [], now);
+    const sparseTraffic = this.isCachedEmailStoreAvailable()
+      ? await CachedEmail.aggregateEmailLogTraffic(
+          filter,
+          emptyTraffic.windowStart,
+          emptyTraffic.windowEnd,
+          descriptor.bucketSizeMs,
+        )
+      : aggregateEmailLogTrafficInMemory(emails, descriptor, now);
+
+    return {
+      emails,
+      traffic: buildEmailLogTraffic(descriptor, sparseTraffic, now),
+    };
+  }
+
+  private async getEmailSecurityFindings(
+    limitArg?: number,
+  ): Promise<interfaces.requests.IEmailSecurityFinding[]> {
+    if (!this.isCachedEmailStoreAvailable()) return [];
+    const limit = Math.min(Math.max(Math.floor(limitArg ?? 200), 1), 200);
+    const candidates = await CachedEmail.findRecentSecurityCandidates(
+      Math.min(limit * 5, 1000),
+      Date.now() - EMAIL_LOG_RETENTION_MS,
+    );
+    const findings: interfaces.requests.IEmailSecurityFinding[] = [];
+    for (const candidate of candidates) {
+      let securityResults: unknown;
+      try {
+        securityResults = JSON.parse(candidate.inboundSecurityResults || '');
+      } catch {
+        continue;
+      }
+      const evaluation = evaluateInboundAcceptance(securityResults);
+      if (evaluation.doubts.length === 0) continue;
+      findings.push({
+        id: candidate.id,
+        timestamp: new Date(candidate.acceptedAt || 0).toISOString(),
+        from: candidate.from || '',
+        to: (candidate.to || []).join(', '),
+        subject: candidate.subject || '',
+        disposition: candidate.status === 'rejected' || evaluation.dmarcReject
+          ? 'rejected'
+          : 'flagged',
+        failures: evaluation.doubts,
+        failureSummary: evaluation.doubts.join('; '),
+      });
+      if (findings.length >= limit) break;
+    }
+    return findings;
+  }
+
+  private matchesEmailSearch(
+    emailArg: interfaces.requests.IEmail,
+    searchArg: string,
+  ): boolean {
+    if (!searchArg) return true;
+    const search = searchArg.toLowerCase();
+    return [emailArg.from, emailArg.to, emailArg.subject, emailArg.messageId]
+      .some((value) => value.toLowerCase().includes(search));
+  }
+
   /**
    * Get a single email detail by ID — live queue item first (freshest state),
    * else the durable CachedEmail row (covers inbound + historical mail).

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '18.2.1',
+  version: '18.3.0',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

package/ts_web/appstate/email-ops.ts

@@ -6,18 +6,30 @@ import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 export interface IEmailOpsState {
   emails: interfaces.requests.IEmail[];
+  traffic: interfaces.requests.IEmailLogTraffic | null;
+  searchQuery: string;
+  securityFindings: interfaces.requests.IEmailSecurityFinding[];
+  securityFindingsLoading: boolean;
+  securityFindingsError: string | null;
   isLoading: boolean;
   error: string | null;
   lastUpdated: number;
+  lastSecurityUpdated: number;
 }
 
 export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
   'emailOps',
   {
     emails: [],
+    traffic: null,
+    searchQuery: '',
+    securityFindings: [],
+    securityFindingsLoading: false,
+    securityFindingsError: null,
     isLoading: false,
     error: null,
     lastUpdated: 0,
+    lastSecurityUpdated: 0,
   },
   'soft'
 );
@@ -25,11 +37,39 @@ export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
 // Email Operations Actions
 // ============================================================================
 
+let activeSearchQuery = '';
+let emailListRequestGeneration = 0;
+let securityFindingsRequestGeneration = 0;
+
+export interface IEmailOpsFetchOptions {
+  searchQuery?: string;
+}
+
+export function setActiveEmailSearchQuery(searchQueryArg: string): string {
+  const nextSearchQuery = searchQueryArg.trim().slice(0, 200);
+  if (nextSearchQuery === activeSearchQuery) return activeSearchQuery;
+  activeSearchQuery = nextSearchQuery;
+  emailListRequestGeneration++;
+  const currentState = emailOpsStatePart.getState()!;
+  emailOpsStatePart.setState({
+    ...currentState,
+    searchQuery: activeSearchQuery,
+  });
+  return activeSearchQuery;
+}
+
 // Fetch All Emails Action
-export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (statePartArg): Promise<IEmailOpsState> => {
+export const fetchAllEmailsAction = emailOpsStatePart.createAction<IEmailOpsFetchOptions | null>(async (
+  statePartArg,
+  dataArg,
+): Promise<IEmailOpsState> => {
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const searchQuery = dataArg?.searchQuery !== undefined
+    ? setActiveEmailSearchQuery(dataArg.searchQuery)
+    : activeSearchQuery;
+  const requestGeneration = ++emailListRequestGeneration;
   const ticket = captureRealtimeTicket(['emailQueue', 'smtpAttempts']);
 
   try {
@@ -39,18 +79,27 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
 
     const response = await request.fire({
       identity: context.identity,
+      ...(searchQuery ? { search: searchQuery } : {}),
     });
-    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
+    if (
+      requestGeneration !== emailListRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
 
     return {
       ...statePartArg.getState()!,
       emails: response.emails,
+      traffic: response.traffic,
+      searchQuery,
       isLoading: false,
       error: null,
       lastUpdated: Date.now(),
     };
   } catch (error) {
-    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
+    if (
+      requestGeneration !== emailListRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
     return {
       ...statePartArg.getState()!,
       isLoading: false,
@@ -59,6 +108,53 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
   }
 });
 
+export const fetchEmailSecurityFindingsAction = emailOpsStatePart.createAction<void>(async (
+  statePartArg,
+): Promise<IEmailOpsState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+  if (!context.identity) return currentState;
+  const requestGeneration = ++securityFindingsRequestGeneration;
+  const ticket = captureRealtimeTicket(['emailQueue', 'smtpAttempts']);
+  statePartArg.setState({
+    ...currentState,
+    securityFindingsLoading: true,
+    securityFindingsError: null,
+  });
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetEmailSecurityFindings
+    >('/typedrequest', 'getEmailSecurityFindings');
+    const response = await request.fire({
+      identity: context.identity,
+      limit: 200,
+    });
+    if (
+      requestGeneration !== securityFindingsRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
+    return {
+      ...statePartArg.getState()!,
+      securityFindings: response.findings,
+      securityFindingsLoading: false,
+      securityFindingsError: null,
+      lastSecurityUpdated: Date.now(),
+    };
+  } catch (error) {
+    if (
+      requestGeneration !== securityFindingsRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
+    return {
+      ...statePartArg.getState()!,
+      securityFindingsLoading: false,
+      securityFindingsError: error instanceof Error
+        ? error.message
+        : 'Failed to fetch email security findings',
+    };
+  }
+});
+
 // ============================================================================
 export async function fetchEmailDetailSnapshot(
   emailIdArg: string,

package/ts_web/appstate/runtime.ts

@@ -11,7 +11,11 @@ import { certificateStatePart, fetchCertificateOverviewAction } from './certific
 import { remoteIngressStatePart, fetchRemoteIngressAction } from './remoteingress.js';
 import { vpnStatePart, fetchVpnAction } from './vpn.js';
 import { emailDomainsStatePart, fetchEmailDomainsAction } from './email-domains.js';
-import { emailOpsStatePart, fetchAllEmailsAction } from './email-ops.js';
+import {
+  emailOpsStatePart,
+  fetchAllEmailsAction,
+  fetchEmailSecurityFindingsAction,
+} from './email-ops.js';
 import {
   domainsStatePart,
   fetchDnsRecordsForDomainAction,
@@ -65,7 +69,14 @@ const refreshRealtimeGroup = async (groupArg: TRealtimeRefreshGroup): Promise<vo
       await emailDomainsStatePart.dispatchAction(fetchEmailDomainsAction, null);
       break;
     case 'emailOps':
-      await emailOpsStatePart.dispatchAction(fetchAllEmailsAction, null);
+      if (uiStatePart.getState()!.activeView !== 'email') {
+        break;
+      }
+      if (uiStatePart.getState()!.activeSubview === 'security') {
+        await emailOpsStatePart.dispatchAction(fetchEmailSecurityFindingsAction, undefined);
+      } else if (uiStatePart.getState()!.activeSubview === 'log') {
+        await emailOpsStatePart.dispatchAction(fetchAllEmailsAction, null);
+      }
       break;
     case 'dns': {
       const selectedDomainId = domainsStatePart.getState()!.selectedDomainId;

package/ts_web/elements/email/ops-view-email-security.ts

@@ -23,14 +23,32 @@ export class OpsViewEmailSecurity extends DeesElement {
   @state()
   accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
 
+  @state()
+  accessor emailOpsState: appstate.IEmailOpsState = appstate.emailOpsStatePart.getState()!;
+
   constructor() {
     super();
     const sub = appstate.statsStatePart
-      .select((s) => s)
+      .select()
       .subscribe((s) => {
         this.statsState = s;
       });
     this.rxSubscriptions.push(sub);
+
+    const emailOpsSub = appstate.emailOpsStatePart
+      .select()
+      .subscribe((s) => {
+        this.emailOpsState = s;
+      });
+    this.rxSubscriptions.push(emailOpsSub);
+  }
+
+  public async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    await appstate.emailOpsStatePart.dispatchAction(
+      appstate.fetchEmailSecurityFindingsAction,
+      undefined,
+    );
   }
 
   public static styles = [
@@ -42,21 +60,16 @@ export class OpsViewEmailSecurity extends DeesElement {
         flex-direction: column;
         gap: 24px;
       }
+
+      .findingsError {
+        color: ${cssManager.bdTheme('#b91c1c', '#fca5a5')};
+      }
     `,
   ];
 
   public render(): TemplateResult {
     const metrics = this.statsState.securityMetrics;
-
-    if (!metrics) {
-      return html`
-        <div class="loadingMessage">
-          <p>Loading security metrics...</p>
-        </div>
-      `;
-    }
-
-    const tiles: IStatsTile[] = [
+    const tiles: IStatsTile[] = metrics ? [
       {
         id: 'malware',
         title: 'Malware Detection',
@@ -93,16 +106,20 @@ export class OpsViewEmailSecurity extends DeesElement {
         color: '#f59e0b',
         description: 'Spam emails blocked',
       },
-    ];
+    ] : [];
 
     return html`
       <dees-heading level="3">Email Security</dees-heading>
 
       <div class="securityContainer">
-        <dees-statsgrid
-          .tiles=${tiles}
-          .minTileWidth=${200}
-        ></dees-statsgrid>
+        ${metrics ? html`
+          <dees-statsgrid
+            .tiles=${tiles}
+            .minTileWidth=${200}
+          ></dees-statsgrid>
+        ` : html`
+          <p class="loadingMessage">Loading security metrics...</p>
+        `}
 
         <dees-settings
           .heading=${'Security Configuration'}
@@ -114,6 +131,29 @@ export class OpsViewEmailSecurity extends DeesElement {
           ]}
           .actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
         ></dees-settings>
+
+        <dees-table
+          .heading1=${'Email Security Findings'}
+          .heading2=${this.emailOpsState.securityFindingsLoading
+            ? 'Loading retained findings...'
+            : this.emailOpsState.securityFindingsError
+              ? 'Could not load retained findings'
+            : `Last 30 days · ${this.emailOpsState.securityFindings.length} findings`}
+          .data=${this.emailOpsState.securityFindings}
+          .searchable=${false}
+          .rowKey=${'id'}
+          .displayFunction=${(finding) => ({
+            'Time': new Date(finding.timestamp).toLocaleString(),
+            'From': finding.from,
+            'To': finding.to,
+            'Title': finding.subject || '(no title)',
+            'Security issue': `${finding.disposition === 'rejected' ? 'Rejected' : 'Flagged'} — ${finding.failureSummary}`,
+          })}
+        ></dees-table>
+
+        ${this.emailOpsState.securityFindingsError ? html`
+          <p class="findingsError">${this.emailOpsState.securityFindingsError}</p>
+        ` : html``}
       </div>
     `;
   }

package/ts_web/elements/email/ops-view-emails.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, css, state, cssManager } from '@design.estate/dees-element';
 import * as appstate from '../../appstate.js';
 import * as shared from '../shared/index.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
@@ -23,14 +23,23 @@ export class OpsViewEmails extends DeesElement {
   @state()
   accessor isLoading = false;
 
+  @state()
+  accessor traffic: interfaces.requests.IEmailLogTraffic | null = null;
+
+  @state()
+  accessor searchQuery = '';
+
   private stateSubscription: any;
   private lastEmailOpsUpdate = 0;
   private detailRequestGeneration = 0;
+  private searchDebounceTimer: number | undefined;
 
   async connectedCallback() {
     await super.connectedCallback();
     this.stateSubscription = appstate.emailOpsStatePart.select().subscribe((state) => {
       this.emails = state.emails;
+      this.traffic = state.traffic;
+      this.searchQuery = state.searchQuery;
       const hasNewSnapshot = state.lastUpdated > this.lastEmailOpsUpdate;
       this.lastEmailOpsUpdate = Math.max(this.lastEmailOpsUpdate, state.lastUpdated);
       if (hasNewSnapshot && this.selectedEmail) {
@@ -47,6 +56,10 @@ export class OpsViewEmails extends DeesElement {
     if (this.stateSubscription) {
       this.stateSubscription.unsubscribe();
     }
+    if (this.searchDebounceTimer !== undefined) {
+      window.clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = undefined;
+    }
   }
 
   public static styles = [
@@ -61,6 +74,10 @@ export class OpsViewEmails extends DeesElement {
       .viewContainer {
         height: 100%;
       }
+
+      dees-chart-area[slot='above-table'] {
+        min-height: 360px;
+      }
     `,
   ];
 
@@ -78,8 +95,24 @@ export class OpsViewEmails extends DeesElement {
           : html`
               <sz-mta-list-view
                 .emails=${this.emails}
+                .searchQuery=${this.searchQuery}
+                .stickyFilterBar=${true}
+                @search-change=${this.handleSearchChange}
                 @email-click=${this.handleEmailClick}
-              ></sz-mta-list-view>
+              >
+                ${this.traffic ? html`
+                  <dees-chart-area
+                    slot="above-table"
+                    .label=${this.traffic.label}
+                    .series=${this.getEmailTrafficSeries()}
+                    .realtimeMode=${true}
+                    .rollingWindow=${this.traffic.durationMs}
+                    .legendStats=${['latest']}
+                    .chartLines=${[]}
+                    .yAxisFormatter=${(valueArg: number) => `${valueArg}`}
+                  ></dees-chart-area>
+                ` : html``}
+              </sz-mta-list-view>
             `
         }
       </div>
@@ -108,6 +141,45 @@ export class OpsViewEmails extends DeesElement {
     await this.refreshEmailDetail(e.detail.id, true);
   }
 
+  private handleSearchChange(eventArg: CustomEvent<{ searchQuery: string }>): void {
+    const searchQuery = appstate.setActiveEmailSearchQuery(eventArg.detail.searchQuery);
+    if (this.searchDebounceTimer !== undefined) {
+      window.clearTimeout(this.searchDebounceTimer);
+    }
+    this.searchDebounceTimer = window.setTimeout(() => {
+      this.searchDebounceTimer = undefined;
+      void appstate.emailOpsStatePart.dispatchAction(
+        appstate.fetchAllEmailsAction,
+        { searchQuery },
+      );
+    }, 300);
+  }
+
+  private getEmailTrafficSeries(): Array<{
+    name: string;
+    color: string;
+    data: Array<{ x: number; y: number }>;
+  }> {
+    if (!this.traffic) return [];
+    return [
+      {
+        name: 'Sent',
+        color: '#22c55e',
+        data: this.traffic.sent.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+      {
+        name: 'Received',
+        color: '#3b82f6',
+        data: this.traffic.received.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+      {
+        name: 'Failed',
+        color: '#ef4444',
+        data: this.traffic.failed.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+    ];
+  }
+
   private handleBack() {
     this.detailRequestGeneration++;
     this.selectedEmail = null;

package/ts_web/readme.md

@@ -27,6 +27,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 | `security` | `overview`, `blocked`, `authentication` |
 | `domains` | `providers`, `domains`, `dns`, `certificates` |
 
+The Email Log keeps its search controls visible while scrolling and places the
+traffic chart above the retained email table. With no search the chart shows the
+last 24 hours. A search filters both the table and chart, expanding the chart to
+7, 14, or 30 days when older matching mail exists. Email Security lists retained
+SPF, DKIM, and enforcing DMARC findings with sender, recipient, subject, and a
+concise reason.
+
 ## Routes Navigation
 
 The `/network/routes` view uses two adjacent, independent multitoggles: