BREAKING CHANGE(mta): migrate internal MTA to @push.rocks/smartmta and remove legacy mail/deliverability implementation

2026-02-11 16:32:49 +00:00
parent 048f038e36
commit 530ebbf3e4
276 changed files with 1661 additions and 91193 deletions
--- a/ts_web/readme.md
+++ b/ts_web/readme.md
@@ -1,8 +1,8 @@
 # @serve.zone/dcrouter-web

-Web-based Operations Dashboard for DCRouter. 🖥️
+Web-based Operations Dashboard for DcRouter. 🖥️

-This module provides the frontend web application for the DCRouter OpsServer, built with modern web components using the `@design.estate/dees-element` library. It offers a comprehensive dashboard for monitoring and managing your DCRouter instance in real-time.
+A modern, reactive web application for monitoring and managing your DcRouter instance in real-time. Built with web components using [@design.estate/dees-element](https://code.foss.global/design.estate/dees-element) and [@design.estate/dees-catalog](https://code.foss.global/design.estate/dees-catalog).

 ## Issue Reporting and Security

@@ -10,203 +10,184 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community

 ## Features

-### 🔐 **Secure Authentication**
- JWT-based authentication flow
- Automatic session management
- Secure login with username/password
+### 🔐 Secure Authentication
+- JWT-based login with persistent sessions (IndexedDB)
+- Automatic session expiry detection and cleanup
+- Secure username/password authentication

-### 📊 **Overview Dashboard**
- Real-time server statistics
- Connection monitoring
- Email throughput visualization
- DNS query metrics
- RADIUS session tracking
+### 📊 Overview Dashboard
+- Real-time server statistics (CPU, memory, uptime)
+- Active connection counts and email throughput
+- DNS query metrics and RADIUS session tracking
+- Auto-refreshing with configurable intervals

-### 🌐 **Network View**
- Active connection monitoring
- SmartProxy route visualization
- TCP/HTTP connection details
- TLS certificate status
+### 🌐 Network View
+- Active connection monitoring with real-time data from SmartProxy
+- Top connected IPs with connection counts and percentages
+- Throughput rates (inbound/outbound in kbit/s, Mbit/s, Gbit/s)
+- Traffic chart with selectable time ranges

-### 📧 **Email Management**
- Email queue monitoring
- Delivery status tracking
- Bounce management
- DKIM key status
- Domain configuration overview
+### 📧 Email Management
+- **Queued** — Emails pending delivery with queue position
+- **Sent** — Successfully delivered emails with timestamps
+- **Failed** — Failed emails with resend capability
+- **Security** — Security incidents from email processing
+- Bounce record management and suppression list controls

-### 📜 **Log Viewer**
+### 📜 Log Viewer
 - Real-time log streaming
- Log level filtering (error, warning, info, debug)
- Search and filter capabilities
- Time-range selection
+- Filter by log level (error, warning, info, debug)
+- Search and time-range selection

-### ⚙️ **Configuration**
- View current system configuration
- Update settings via TypedRequest API
- Route management
- Domain management
+### ⚙️ Configuration
+- Read-only display of current system configuration
+- Status badges for boolean values (enabled/disabled)
+- Array values displayed as pills with counts
+- Section icons and formatted byte/time values

-### 🛡️ **Security Dashboard**
+### 🛡️ Security Dashboard
 - IP reputation monitoring
- Rate limit status
- Blocked connections
- Security event tracking
+- Rate limit status across domains
+- Blocked connection tracking
+- Security event timeline

 ## Architecture

-The web application is built using:
+### Technology Stack

- **@design.estate/dees-element** - Modern web component framework with lit-element
- **@design.estate/dees-catalog** - Pre-built UI components (appdash, login, forms)
- **@push.rocks/smartstate** - Reactive state management
- **@api.global/typedrequest** - Type-safe API communication
+| Layer | Package | Purpose |
+|-------|---------|---------|
+| **Components** | `@design.estate/dees-element` | Web component framework (lit-element based) |
+| **UI Kit** | `@design.estate/dees-catalog` | Pre-built components (tables, charts, forms, app shell) |
+| **State** | `@push.rocks/smartstate` | Reactive state management with persistent/soft modes |
+| **Routing** | Client-side router | URL-synchronized view navigation |
+| **API** | `@api.global/typedrequest` | Type-safe communication with OpsServer |
+| **Types** | `@serve.zone/dcrouter-interfaces` | Shared TypedRequest interface definitions |

 ### Component Structure

 ```
 ts_web/
-├── index.ts              # Application entry point
-├── plugins.ts            # External dependency imports
-├── router.ts             # Client-side routing
-├── appstate.ts           # State management
+├── index.ts                  # Entry point — renders <ops-dashboard>
+├── appstate.ts               # State management (all state parts + actions)
+├── router.ts                 # Client-side routing (AppRouter)
+├── plugins.ts                # Dependency imports
 └── elements/
-    ├── index.ts          # Component barrel export
-    ├── ops-dashboard.ts  # Main dashboard container
-    ├── ops-view-overview.ts    # Overview statistics
-    ├── ops-view-network.ts     # Network monitoring
-    ├── ops-view-emails.ts      # Email management
-    ├── ops-view-logs.ts        # Log viewer
-    ├── ops-view-config.ts      # Configuration
-    ├── ops-view-security.ts    # Security dashboard
+    ├── ops-dashboard.ts      # Main app shell
+    ├── ops-view-overview.ts  # Overview statistics
+    ├── ops-view-network.ts   # Network monitoring
+    ├── ops-view-emails.ts    # Email queue management
+    ├── ops-view-logs.ts      # Log viewer
+    ├── ops-view-config.ts    # Configuration display
+    ├── ops-view-security.ts  # Security dashboard
    └── shared/
-        ├── index.ts      # Shared component exports
-        ├── css.ts        # Shared styles
+        ├── css.ts            # Shared styles
        └── ops-sectionheading.ts  # Section heading component
 ```

-## State Management
+### State Management

-The application uses `@push.rocks/smartstate` for reactive state management:
+The app uses `@push.rocks/smartstate` with multiple state parts:

-### State Parts
-
-```typescript
-// Login state
-interface ILoginState {
-  identity: IIdentity | null;
-  isLoggedIn: boolean;
-}
-
-// UI state
-interface IUiState {
-  activeView: string;
-  sidebarCollapsed: boolean;
-  autoRefresh: boolean;
-  refreshInterval: number;
-  theme: 'light' | 'dark';
-}
-
-// Statistics state
-interface IStatsState {
-  server: IServerStats;
-  email: IEmailStats;
-  dns: IDnsStats;
-  connections: IConnectionInfo[];
-  health: IHealthStatus;
-}
-
-// Configuration state
-interface IConfigState {
-  configuration: IDcRouterConfig;
-  loading: boolean;
-}
-```
+| State Part | Mode | Description |
+|-----------|------|-------------|
+| `loginStatePart` | Persistent (IndexedDB) | JWT identity and login status |
+| `statsStatePart` | Soft (memory) | Server, email, DNS, security metrics |
+| `configStatePart` | Soft | Current system configuration |
+| `uiStatePart` | Soft | Active view, sidebar, auto-refresh, theme |
+| `logStatePart` | Soft | Recent logs, streaming status, filters |
+| `networkStatePart` | Soft | Connections, IPs, throughput rates |
+| `emailOpsStatePart` | Soft | Email queues, bounces, suppression list |

 ### Actions

- `loginAction` - Authenticate user
- `logoutAction` - End session
- `fetchAllStatsAction` - Refresh all statistics
- `fetchConfigurationAction` - Load configuration (read-only)
-
-## Client-Side Routing
-
-The application includes client-side routing for deep linking:
-
 ```typescript
-// Routes
-/overview       → Overview dashboard
-/network        → Network monitoring
-/emails         → Email management
-/logs           → Log viewer
-/configuration  → System configuration
-/security       → Security dashboard
+// Authentication
+loginAction(username, password)    // JWT login
+logoutAction()                     // Clear session
+
+// Data fetching (auto-refresh compatible)
+fetchAllStatsAction()              // Server + email + DNS + security stats
+fetchConfigurationAction()         // System configuration
+fetchRecentLogsAction()            // Log entries
+fetchNetworkStatsAction()          // Connection + throughput data
+
+// Email operations
+fetchQueuedEmailsAction()          // Pending emails
+fetchSentEmailsAction()            // Delivered emails
+fetchFailedEmailsAction()          // Failed emails
+fetchSecurityIncidentsAction()     // Security events
+fetchBounceRecordsAction()         // Bounce records
+resendEmailAction(emailId)         // Re-queue failed email
+removeFromSuppressionAction(email) // Remove from suppression list
 ```

-URL state is synchronized with the UI, allowing bookmarking and sharing of specific views.
+### Client-Side Routing

-## Building
-
-The web application is built using `@git.zone/tsbundle`:
-
-```bash
-# Build the bundle
-pnpm run bundle
-
-# Watch for development
-pnpm run watch
+```
+/overview        → Overview dashboard
+/network         → Network monitoring
+/emails          → Email management
+  /emails/queued    → Queued emails
+  /emails/sent      → Sent emails
+  /emails/failed    → Failed emails
+  /emails/security  → Security incidents
+/logs            → Log viewer
+/configuration   → System configuration
+/security        → Security dashboard
 ```

-The bundle is output to `./dist_serve/bundle.js` and served by the OpsServer.
+URL state is synchronized with the UI — bookmarking and deep linking fully supported.

 ## Development

-### Local Development
+### Running Locally
+
+Start DcRouter with OpsServer enabled:

 ```typescript
-// Start DCRouter with OpsServer enabled
 import { DcRouter } from '@serve.zone/dcrouter';

 const router = new DcRouter({
-  opsServerConfig: {
-    port: 3000,
-    admin: {
-      username: 'admin',
-      password: 'dev-password'
-    }
-  }
+  // OpsServer starts automatically on port 3000
+  smartProxyConfig: { routes: [/* your routes */] }
 });

 await router.start();
 // Dashboard at http://localhost:3000
 ```

-### Adding New Views
+### Building

-1. Create a new view component in `elements/`:
+```bash
+# Build the bundle
+pnpm run bundle
+
+# Watch for development (auto-rebuild + restart)
+pnpm run watch
+```
+
+The bundle is output to `./dist_serve/bundle.js` and served by the OpsServer.
+
+### Adding a New View
+
+1. Create a view component in `elements/`:
 ```typescript
-import { DeesElement, customElement, html } from '@design.estate/dees-element';
+import { DeesElement, customElement, html, css } from '@design.estate/dees-element';

@customElement('ops-view-myview')
 export class OpsViewMyView extends DeesElement {
+  public static styles = [css`:host { display: block; padding: 24px; }`];
+
  public render() {
-    return html`<div>My custom view</div>`;
+    return html`<ops-sectionheading>My View</ops-sectionheading>`;
  }
 }
 ```

-2. Import and add to `ops-dashboard.ts`:
-```typescript
-import { OpsViewMyView } from './ops-view-myview.js';
-
-private viewTabs = [
-  // ... existing tabs
-  { name: 'MyView', element: OpsViewMyView }
-];
-```
-
-3. Add route in `router.ts` if needed.
+2. Add it to the dashboard tabs in `ops-dashboard.ts`
+3. Add the route in `router.ts`
+4. Add any state management in `appstate.ts`

 ## License and Legal Information