feat(certificates): add certificate overview and reprovisioning in ops UI and API; track SmartProxy certificate events

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-02-13 - 5.3.0 - feat(certificates)
+add certificate overview and reprovisioning in ops UI and API; track SmartProxy certificate events
+
+- Add CertificateHandler with typedrequest endpoints: getCertificateOverview and reprovisionCertificate
+- Introduce ICertificateInfo and request/response interfaces for certificate operations
+- Frontend: add certificate state part, actions (fetchCertificateOverview, reprovisionCertificate), router view, and ops-view-certificates component
+- DcRouter: add certificateStatusMap, listen to SmartProxy certificate-issued/renewed/failed events, and add findRouteNameForDomain helper
+- Bump dependency @push.rocks/smartproxy to ^24.0.0
+
 ## 2026-02-13 - 5.2.0 - feat(monitoring)
 add throughput metrics and expose them in ops UI
 

package.json

@@ -49,7 +49,7 @@
     "@push.rocks/smartnetwork": "^4.4.0",
     "@push.rocks/smartpath": "^6.0.0",
     "@push.rocks/smartpromise": "^4.2.3",
-    "@push.rocks/smartproxy": "^23.1.6",
+    "@push.rocks/smartproxy": "^24.0.0",
     "@push.rocks/smartradius": "^1.1.1",
     "@push.rocks/smartrequest": "^5.0.1",
     "@push.rocks/smartrx": "^3.0.10",

pnpm-lock.yaml

@@ -75,8 +75,8 @@ importers:
         specifier: ^4.2.3
         version: 4.2.3
       '@push.rocks/smartproxy':
-        specifier: ^23.1.6
+        specifier: ^24.0.0
-        version: 23.1.6(@push.rocks/smartserve@2.0.1)(socks@2.8.7)
+        version: 24.0.0(@push.rocks/smartserve@2.0.1)(socks@2.8.7)
       '@push.rocks/smartradius':
         specifier: ^1.1.1
         version: 1.1.1
@@ -1040,8 +1040,8 @@ packages:
   '@push.rocks/smartpromise@4.2.3':
     resolution: {integrity: sha512-Ycg/TJR+tMt+S3wSFurOpEoW6nXv12QBtKXgBcjMZ4RsdO28geN46U09osPn9N9WuwQy1PkmTV5J/V4F9U8qEw==}
 
-  '@push.rocks/smartproxy@23.1.6':
+  '@push.rocks/smartproxy@24.0.0':
-    resolution: {integrity: sha512-cwTK4d7vOP0nEZzkZSg9Ua7R+J7SIGId9G815GNTRYYZP20TZbvmWDZW/1gf2lw3AuAy2MRIJMPO2BZ7JnZckw==}
+    resolution: {integrity: sha512-xSz6mrV59xmuiuaBgej6Fq611r9+Ay0ad2XiZAP/XGrkWykgQNeDZqzAq8dadmaCqO/3bVfH/mXlEYaKrDyTYA==}
 
   '@push.rocks/smartpuppeteer@2.0.5':
     resolution: {integrity: sha512-yK/qSeWVHIGWRp3c8S5tfdGP6WCKllZC4DR8d8CQlEjszOSBmHtlTdyyqOMBZ/BA4kd+eU5f3A1r4K2tGYty1g==}
@@ -6441,7 +6441,7 @@ snapshots:
 
   '@push.rocks/smartpromise@4.2.3': {}
 
-  '@push.rocks/smartproxy@23.1.6(@push.rocks/smartserve@2.0.1)(socks@2.8.7)':
+  '@push.rocks/smartproxy@24.0.0(@push.rocks/smartserve@2.0.1)(socks@2.8.7)':
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartacme': 8.0.0(@push.rocks/smartserve@2.0.1)(socks@2.8.7)

ts/00_commitinfo_data.ts

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

ts/classes.dcrouter.ts

@@ -183,6 +183,15 @@ export class DcRouter {
   public cacheDb?: CacheDb;
   public cacheCleaner?: CacheCleaner;
 
+  // Certificate status tracking from SmartProxy events
+  public certificateStatusMap = new Map<string, {
+    status: 'valid' | 'failed';
+    domain: string;
+    expiryDate?: string;
+    issuedAt?: string;
+    error?: string;
+  }>();
+
   // TypedRouter for API endpoints
   public typedrouter = new plugins.typedrequest.TypedRouter();
 
@@ -479,14 +488,34 @@ export class DcRouter {
       if (acmeConfig) {
         this.smartProxy.on('certificate-issued', (event) => {
           console.log(`[DcRouter] Certificate issued for ${event.domain}, expires ${event.expiryDate}`);
+          const routeName = this.findRouteNameForDomain(event.domain);
+          if (routeName) {
+            this.certificateStatusMap.set(routeName, {
+              status: 'valid', domain: event.domain,
+              expiryDate: event.expiryDate, issuedAt: new Date().toISOString(),
+            });
+          }
         });
-        
+
         this.smartProxy.on('certificate-renewed', (event) => {
           console.log(`[DcRouter] Certificate renewed for ${event.domain}, expires ${event.expiryDate}`);
+          const routeName = this.findRouteNameForDomain(event.domain);
+          if (routeName) {
+            this.certificateStatusMap.set(routeName, {
+              status: 'valid', domain: event.domain,
+              expiryDate: event.expiryDate, issuedAt: new Date().toISOString(),
+            });
+          }
         });
-        
+
         this.smartProxy.on('certificate-failed', (event) => {
           console.error(`[DcRouter] Certificate failed for ${event.domain}:`, event.error);
+          const routeName = this.findRouteNameForDomain(event.domain);
+          if (routeName) {
+            this.certificateStatusMap.set(routeName, {
+              status: 'failed', domain: event.domain, error: event.error,
+            });
+          }
         });
       }
       
@@ -658,6 +687,21 @@ export class DcRouter {
     return false;
   }
 
+  /**
+   * Find the route name that matches a given domain
+   */
+  private findRouteNameForDomain(domain: string): string | undefined {
+    if (!this.smartProxy) return undefined;
+    for (const route of this.smartProxy.routeManager.getRoutes()) {
+      if (!route.match.domains || !route.name) continue;
+      const routeDomains = Array.isArray(route.match.domains)
+        ? route.match.domains
+        : [route.match.domains];
+      if (routeDomains.includes(domain)) return route.name;
+    }
+    return undefined;
+  }
+
   public async stop() {
     console.log('Stopping DcRouter services...');
 

ts/opsserver/classes.opsserver.ts

@@ -18,6 +18,7 @@ export class OpsServer {
   private statsHandler: handlers.StatsHandler;
   private radiusHandler: handlers.RadiusHandler;
   private emailOpsHandler: handlers.EmailOpsHandler;
+  private certificateHandler: handlers.CertificateHandler;
 
   constructor(dcRouterRefArg: DcRouter) {
     this.dcRouterRef = dcRouterRefArg;
@@ -57,6 +58,7 @@ export class OpsServer {
     this.statsHandler = new handlers.StatsHandler(this);
     this.radiusHandler = new handlers.RadiusHandler(this);
     this.emailOpsHandler = new handlers.EmailOpsHandler(this);
+    this.certificateHandler = new handlers.CertificateHandler(this);
 
     console.log('✅ OpsServer TypedRequest handlers initialized');
   }

ts/opsserver/handlers/certificate.handler.ts

@@ -0,0 +1,174 @@
+import * as plugins from '../../plugins.js';
+import type { OpsServer } from '../classes.opsserver.js';
+import * as interfaces from '../../../ts_interfaces/index.js';
+
+export class CertificateHandler {
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  constructor(private opsServerRef: OpsServer) {
+    this.opsServerRef.typedrouter.addTypedRouter(this.typedrouter);
+    this.registerHandlers();
+  }
+
+  private registerHandlers(): void {
+    // Get Certificate Overview
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetCertificateOverview>(
+        'getCertificateOverview',
+        async (dataArg) => {
+          const certificates = this.buildCertificateOverview();
+          const summary = this.buildSummary(certificates);
+          return { certificates, summary };
+        }
+      )
+    );
+
+    // Reprovision Certificate
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_ReprovisionCertificate>(
+        'reprovisionCertificate',
+        async (dataArg) => {
+          return this.reprovisionCertificate(dataArg.routeName);
+        }
+      )
+    );
+  }
+
+  private buildCertificateOverview(): interfaces.requests.ICertificateInfo[] {
+    const dcRouter = this.opsServerRef.dcRouterRef;
+    const smartProxy = dcRouter.smartProxy;
+    if (!smartProxy) return [];
+
+    const routes = smartProxy.routeManager.getRoutes();
+    const certificates: interfaces.requests.ICertificateInfo[] = [];
+
+    for (const route of routes) {
+      if (!route.name) continue;
+
+      const tls = route.action?.tls;
+      if (!tls) continue;
+
+      // Skip passthrough routes - they don't manage certificates
+      if (tls.mode === 'passthrough') continue;
+
+      const routeDomains = route.match.domains
+        ? (Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains])
+        : [];
+
+      // Determine source
+      let source: interfaces.requests.TCertificateSource = 'none';
+      if (tls.certificate === 'auto') {
+        // Check if a certProvisionFunction is configured
+        if ((smartProxy.settings as any).certProvisionFunction) {
+          source = 'provision-function';
+        } else {
+          source = 'acme';
+        }
+      } else if (tls.certificate && typeof tls.certificate === 'object') {
+        source = 'static';
+      }
+
+      // Start with unknown status
+      let status: interfaces.requests.TCertificateStatus = 'unknown';
+      let expiryDate: string | undefined;
+      let issuedAt: string | undefined;
+      let issuer: string | undefined;
+      let error: string | undefined;
+
+      // Check event-based status from DcRouter's certificateStatusMap
+      const eventStatus = dcRouter.certificateStatusMap.get(route.name);
+      if (eventStatus) {
+        status = eventStatus.status;
+        expiryDate = eventStatus.expiryDate;
+        issuedAt = eventStatus.issuedAt;
+        error = eventStatus.error;
+      }
+
+      // Try to get Rust-side certificate data
+      try {
+        // getCertificateStatus is async but we're in a sync context
+        // We'll rely on event-based data primarily
+      } catch {
+        // Ignore errors from Rust bridge
+      }
+
+      // Compute status from expiry date if we have one and status is still valid/unknown
+      if (expiryDate && (status === 'valid' || status === 'unknown')) {
+        const expiry = new Date(expiryDate);
+        const now = new Date();
+        const daysUntilExpiry = (expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
+
+        if (daysUntilExpiry < 0) {
+          status = 'expired';
+        } else if (daysUntilExpiry < 30) {
+          status = 'expiring';
+        } else {
+          status = 'valid';
+        }
+      }
+
+      // Static certs with no other info default to 'valid'
+      if (source === 'static' && status === 'unknown') {
+        status = 'valid';
+      }
+
+      const canReprovision = source === 'acme' || source === 'provision-function';
+
+      certificates.push({
+        routeName: route.name,
+        domains: routeDomains,
+        status,
+        source,
+        tlsMode: tls.mode as 'terminate' | 'terminate-and-reencrypt' | 'passthrough',
+        expiryDate,
+        issuer,
+        issuedAt,
+        error,
+        canReprovision,
+      });
+    }
+
+    return certificates;
+  }
+
+  private buildSummary(certificates: interfaces.requests.ICertificateInfo[]): {
+    total: number;
+    valid: number;
+    expiring: number;
+    expired: number;
+    failed: number;
+    unknown: number;
+  } {
+    const summary = { total: 0, valid: 0, expiring: 0, expired: 0, failed: 0, unknown: 0 };
+    summary.total = certificates.length;
+    for (const cert of certificates) {
+      switch (cert.status) {
+        case 'valid': summary.valid++; break;
+        case 'expiring': summary.expiring++; break;
+        case 'expired': summary.expired++; break;
+        case 'failed': summary.failed++; break;
+        case 'provisioning': // count as unknown
+        case 'unknown': summary.unknown++; break;
+      }
+    }
+    return summary;
+  }
+
+  private async reprovisionCertificate(routeName: string): Promise<{ success: boolean; message?: string }> {
+    const dcRouter = this.opsServerRef.dcRouterRef;
+    const smartProxy = dcRouter.smartProxy;
+
+    if (!smartProxy) {
+      return { success: false, message: 'SmartProxy is not running' };
+    }
+
+    try {
+      await smartProxy.provisionCertificate(routeName);
+      // Clear event-based status so it gets refreshed
+      dcRouter.certificateStatusMap.delete(routeName);
+      return { success: true, message: `Certificate reprovisioning triggered for route '${routeName}'` };
+    } catch (err) {
+      return { success: false, message: err.message || 'Failed to reprovision certificate' };
+    }
+  }
+}

ts/opsserver/handlers/index.ts

@@ -4,4 +4,5 @@ export * from './logs.handler.js';
 export * from './security.handler.js';
 export * from './stats.handler.js';
 export * from './radius.handler.js';
-export * from './email-ops.handler.js';
+export * from './email-ops.handler.js';
+export * from './certificate.handler.js';

ts_interfaces/requests/certificate.ts

@@ -0,0 +1,54 @@
+import * as plugins from '../plugins.js';
+import * as authInterfaces from '../data/auth.js';
+
+export type TCertificateStatus = 'valid' | 'expiring' | 'expired' | 'provisioning' | 'failed' | 'unknown';
+export type TCertificateSource = 'acme' | 'provision-function' | 'static' | 'none';
+
+export interface ICertificateInfo {
+  routeName: string;
+  domains: string[];
+  status: TCertificateStatus;
+  source: TCertificateSource;
+  tlsMode: 'terminate' | 'terminate-and-reencrypt' | 'passthrough';
+  expiryDate?: string;     // ISO string
+  issuer?: string;
+  issuedAt?: string;       // ISO string
+  error?: string;          // if status === 'failed'
+  canReprovision: boolean; // true for acme/provision-function routes
+}
+
+export interface IReq_GetCertificateOverview extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetCertificateOverview
+> {
+  method: 'getCertificateOverview';
+  request: {
+    identity?: authInterfaces.IIdentity;
+  };
+  response: {
+    certificates: ICertificateInfo[];
+    summary: {
+      total: number;
+      valid: number;
+      expiring: number;
+      expired: number;
+      failed: number;
+      unknown: number;
+    };
+  };
+}
+
+export interface IReq_ReprovisionCertificate extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_ReprovisionCertificate
+> {
+  method: 'reprovisionCertificate';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    routeName: string;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}

ts_interfaces/requests/index.ts

@@ -4,4 +4,5 @@ export * from './logs.js';
 export * from './stats.js';
 export * from './combined.stats.js';
 export * from './radius.js';
-export * from './email-ops.js';
+export * from './email-ops.js';
+export * from './certificate.js';

ts_web/00_commitinfo_data.ts

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

ts_web/appstate.ts

@@ -53,6 +53,14 @@ export interface INetworkState {
   error: string | null;
 }
 
+export interface ICertificateState {
+  certificates: interfaces.requests.ICertificateInfo[];
+  summary: { total: number; valid: number; expiring: number; expired: number; failed: number; unknown: number };
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
 export interface IEmailOpsState {
   currentView: 'queued' | 'sent' | 'failed' | 'received' | 'security';
   queuedEmails: interfaces.requests.IEmailQueueItem[];
@@ -103,7 +111,7 @@ export const configStatePart = await appState.getStatePart<IConfigState>(
 // Determine initial view from URL path
 const getInitialView = (): string => {
   const path = typeof window !== 'undefined' ? window.location.pathname : '/';
-  const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security'];
+  const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates'];
   const segments = path.split('/').filter(Boolean);
   const view = segments[0];
   return validViews.includes(view) ? view : 'overview';
@@ -162,6 +170,18 @@ export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
   'soft'
 );
 
+export const certificateStatePart = await appState.getStatePart<ICertificateState>(
+  'certificates',
+  {
+    certificates: [],
+    summary: { total: 0, valid: 0, expiring: 0, expired: 0, failed: 0, unknown: 0 },
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft'
+);
+
 // Actions for state management
 interface IActionContext {
   identity: interfaces.data.IIdentity | null;
@@ -340,7 +360,14 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
       networkStatePart.dispatchAction(fetchNetworkStatsAction, null);
     }, 100);
   }
-  
+
+  // If switching to certificates view, ensure we fetch certificate data
+  if (viewName === 'certificates' && currentState.activeView !== 'certificates') {
+    setTimeout(() => {
+      certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+    }, 100);
+  }
+
   return {
     ...currentState,
     activeView: viewName,
@@ -641,6 +668,66 @@ export const removeFromSuppressionListAction = emailOpsStatePart.createAction<st
   }
 );
 
+// ============================================================================
+// Certificate Actions
+// ============================================================================
+
+export const fetchCertificateOverviewAction = certificateStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetCertificateOverview
+    >('/typedrequest', 'getCertificateOverview');
+
+    const response = await request.fire({
+      identity: context.identity,
+    });
+
+    return {
+      certificates: response.certificates,
+      summary: response.summary,
+      isLoading: false,
+      error: null,
+      lastUpdated: Date.now(),
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      isLoading: false,
+      error: error instanceof Error ? error.message : 'Failed to fetch certificate overview',
+    };
+  }
+});
+
+export const reprovisionCertificateAction = certificateStatePart.createAction<string>(
+  async (statePartArg, routeName) => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState();
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_ReprovisionCertificate
+      >('/typedrequest', 'reprovisionCertificate');
+
+      await request.fire({
+        identity: context.identity,
+        routeName,
+      });
+
+      // Re-fetch overview after reprovisioning
+      await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+      return statePartArg.getState();
+    } catch (error) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to reprovision certificate',
+      };
+    }
+  }
+);
+
 // Combined refresh action for efficient polling
 async function dispatchCombinedRefreshAction() {
   const context = getActionContext();
@@ -725,6 +812,15 @@ async function dispatchCombinedRefreshAction() {
         });
       }
     }
+
+    // Refresh certificate data if on certificates view
+    if (currentView === 'certificates') {
+      try {
+        await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+      } catch (error) {
+        console.error('Certificate refresh failed:', error);
+      }
+    }
   } catch (error) {
     console.error('Combined refresh failed:', error);
   }

ts_web/elements/index.ts

@@ -5,4 +5,5 @@ export * from './ops-view-emails.js';
 export * from './ops-view-logs.js';
 export * from './ops-view-config.js';
 export * from './ops-view-security.js';
+export * from './ops-view-certificates.js';
 export * from './shared/index.js';

ts_web/elements/ops-dashboard.ts

@@ -19,6 +19,7 @@ import { OpsViewEmails } from './ops-view-emails.js';
 import { OpsViewLogs } from './ops-view-logs.js';
 import { OpsViewConfig } from './ops-view-config.js';
 import { OpsViewSecurity } from './ops-view-security.js';
+import { OpsViewCertificates } from './ops-view-certificates.js';
 
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -61,6 +62,10 @@ export class OpsDashboard extends DeesElement {
       name: 'Security',
       element: OpsViewSecurity,
     },
+    {
+      name: 'Certificates',
+      element: OpsViewCertificates,
+    },
   ];
 
   /**

ts_web/elements/ops-view-certificates.ts

@@ -0,0 +1,355 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { viewHostCss } from './shared/css.js';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-certificates': OpsViewCertificates;
+  }
+}
+
+@customElement('ops-view-certificates')
+export class OpsViewCertificates extends DeesElement {
+  @state()
+  accessor certState: appstate.ICertificateState = appstate.certificateStatePart.getState();
+
+  constructor() {
+    super();
+    const sub = appstate.certificateStatePart.state.subscribe((newState) => {
+      this.certState = newState;
+    });
+    this.rxSubscriptions.push(sub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await appstate.certificateStatePart.dispatchAction(appstate.fetchCertificateOverviewAction, null);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .certificatesContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.valid {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.expiring {
+        background: ${cssManager.bdTheme('#fff7ed', '#431407')};
+        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
+      }
+
+      .statusBadge.expired,
+      .statusBadge.failed {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .statusBadge.provisioning {
+        background: ${cssManager.bdTheme('#eff6ff', '#172554')};
+        color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
+      }
+
+      .statusBadge.unknown {
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
+      }
+
+      .sourceBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+      }
+
+      .domainPills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .domainPill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
+        color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
+      }
+
+      .moreCount {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        padding: 2px 6px;
+      }
+
+      .errorText {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .expiryInfo {
+        font-size: 12px;
+      }
+
+      .expiryInfo .daysLeft {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      .expiryInfo .daysLeft.warn {
+        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
+      }
+
+      .expiryInfo .daysLeft.danger {
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const { summary } = this.certState;
+
+    return html`
+      <ops-sectionheading>Certificates</ops-sectionheading>
+
+      <div class="certificatesContainer">
+        ${this.renderStatsTiles(summary)}
+        ${this.renderCertificateTable()}
+      </div>
+    `;
+  }
+
+  private renderStatsTiles(summary: appstate.ICertificateState['summary']): TemplateResult {
+    const tiles: IStatsTile[] = [
+      {
+        id: 'total',
+        title: 'Total Certificates',
+        value: summary.total,
+        type: 'number',
+        icon: 'shieldHalved',
+        color: '#3b82f6',
+      },
+      {
+        id: 'valid',
+        title: 'Valid',
+        value: summary.valid,
+        type: 'number',
+        icon: 'check',
+        color: '#22c55e',
+      },
+      {
+        id: 'expiring',
+        title: 'Expiring Soon',
+        value: summary.expiring,
+        type: 'number',
+        icon: 'clock',
+        color: '#f59e0b',
+      },
+      {
+        id: 'problems',
+        title: 'Failed / Expired',
+        value: summary.failed + summary.expired,
+        type: 'number',
+        icon: 'triangleExclamation',
+        color: '#ef4444',
+      },
+    ];
+
+    return html`
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+        .gridActions=${[
+          {
+            name: 'Refresh',
+            iconName: 'arrowsRotate',
+            action: async () => {
+              await appstate.certificateStatePart.dispatchAction(
+                appstate.fetchCertificateOverviewAction,
+                null
+              );
+            },
+          },
+        ]}
+      ></dees-statsgrid>
+    `;
+  }
+
+  private renderCertificateTable(): TemplateResult {
+    return html`
+      <dees-table
+        .data=${this.certState.certificates}
+        .displayFunction=${(cert: interfaces.requests.ICertificateInfo) => ({
+          Route: cert.routeName,
+          Domains: this.renderDomainPills(cert.domains),
+          Status: this.renderStatusBadge(cert.status),
+          Source: this.renderSourceBadge(cert.source),
+          Expires: this.renderExpiry(cert.expiryDate),
+          Error: cert.error
+            ? html`<span class="errorText" title="${cert.error}">${cert.error}</span>`
+            : '',
+        })}
+        .dataActions=${[
+          {
+            name: 'Reprovision',
+            iconName: 'arrowsRotate',
+            type: ['inRow'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const cert = actionData.item;
+              if (!cert.canReprovision) {
+                const { DeesToast } = await import('@design.estate/dees-catalog');
+                DeesToast.show({
+                  message: 'This certificate source does not support reprovisioning.',
+                  type: 'warning',
+                  duration: 3000,
+                });
+                return;
+              }
+              await appstate.certificateStatePart.dispatchAction(
+                appstate.reprovisionCertificateAction,
+                cert.routeName,
+              );
+              const { DeesToast } = await import('@design.estate/dees-catalog');
+              DeesToast.show({
+                message: `Reprovisioning triggered for ${cert.routeName}`,
+                type: 'success',
+                duration: 3000,
+              });
+            },
+          },
+          {
+            name: 'View Details',
+            iconName: 'magnifyingGlass',
+            type: ['doubleClick', 'contextmenu'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const cert = actionData.item;
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+              await DeesModal.createAndShow({
+                heading: `Certificate: ${cert.routeName}`,
+                content: html`
+                  <div style="padding: 20px;">
+                    <dees-dataview-codebox
+                      .heading=${'Certificate Details'}
+                      progLang="json"
+                      .codeToDisplay=${JSON.stringify(cert, null, 2)}
+                    ></dees-dataview-codebox>
+                  </div>
+                `,
+                menuOptions: [
+                  {
+                    name: 'Copy Route Name',
+                    iconName: 'copy',
+                    action: async () => {
+                      await navigator.clipboard.writeText(cert.routeName);
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+        heading1="Certificate Status"
+        heading2="TLS certificates across all routes"
+        searchable
+        .pagination=${true}
+        .paginationSize=${50}
+        dataName="certificate"
+      ></dees-table>
+    `;
+  }
+
+  private renderDomainPills(domains: string[]): TemplateResult {
+    const maxShow = 3;
+    const visible = domains.slice(0, maxShow);
+    const remaining = domains.length - maxShow;
+
+    return html`
+      <span class="domainPills">
+        ${visible.map((d) => html`<span class="domainPill">${d}</span>`)}
+        ${remaining > 0 ? html`<span class="moreCount">+${remaining} more</span>` : ''}
+      </span>
+    `;
+  }
+
+  private renderStatusBadge(status: interfaces.requests.TCertificateStatus): TemplateResult {
+    return html`<span class="statusBadge ${status}">${status}</span>`;
+  }
+
+  private renderSourceBadge(source: interfaces.requests.TCertificateSource): TemplateResult {
+    const labels: Record<string, string> = {
+      acme: 'ACME',
+      'provision-function': 'Custom',
+      static: 'Static',
+      none: 'None',
+    };
+    return html`<span class="sourceBadge">${labels[source] || source}</span>`;
+  }
+
+  private renderExpiry(expiryDate?: string): TemplateResult {
+    if (!expiryDate) {
+      return html`<span style="color: ${cssManager.bdTheme('#9ca3af', '#4b5563')}">--</span>`;
+    }
+
+    const expiry = new Date(expiryDate);
+    const now = new Date();
+    const daysLeft = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+
+    const dateStr = expiry.toLocaleDateString();
+    let daysClass = '';
+    let daysText = '';
+
+    if (daysLeft < 0) {
+      daysClass = 'danger';
+      daysText = `(expired)`;
+    } else if (daysLeft < 30) {
+      daysClass = 'warn';
+      daysText = `(${daysLeft}d left)`;
+    } else {
+      daysText = `(${daysLeft}d left)`;
+    }
+
+    return html`
+      <span class="expiryInfo">
+        ${dateStr} <span class="daysLeft ${daysClass}">${daysText}</span>
+      </span>
+    `;
+  }
+}

ts_web/router.ts

@@ -3,7 +3,7 @@ import * as appstate from './appstate.js';
 
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
-export const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security'] as const;
+export const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates'] as const;
 export const validEmailFolders = ['queued', 'sent', 'failed', 'security'] as const;
 
 export type TValidView = typeof validViews[number];