@serve.zone/dcrouter 13.20.0 → 13.21.0

package/ts_apiclient/readme.md

@@ -1,8 +1,6 @@
 # @serve.zone/dcrouter-apiclient
 
-Typed, object-oriented API client for operating a running dcrouter instance. 🔧
-
-Use this package when you want a clean TypeScript client instead of manually firing TypedRequest calls. It wraps the OpsServer API in resource managers and resource classes such as routes, certificates, tokens, edges, emails, stats, logs, config, and RADIUS.
+Typed, object-oriented client for operating a running dcrouter instance. It wraps the OpsServer `/typedrequest` API in managers and resource classes so your scripts can work with routes, certificates, tokens, remote ingress edges, emails, stats, config, logs, and RADIUS without hand-rolling requests.
 
 ## Issue Reporting and Security
 
@@ -14,7 +12,7 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 pnpm add @serve.zone/dcrouter-apiclient
 ```
 
-Or import through the main package:
+You can also import the same client through the main package subpath:
 
 ```typescript
 import { DcRouterApiClient } from '@serve.zone/dcrouter/apiclient';
@@ -29,24 +27,40 @@ const client = new DcRouterApiClient({
   baseUrl: 'https://dcrouter.example.com',
 });
 
-await client.login('admin', 'password');
+await client.login('admin', 'admin');
 
-const { routes } = await client.routes.list();
-console.log(routes.map((route) => `${route.origin}:${route.name}`));
+const { routes, warnings } = await client.routes.list();
+console.log('route count', routes.length, 'warnings', warnings.length);
 
-await client.routes.build()
+const route = await client.routes.build()
   .setName('api-gateway')
   .setMatch({ ports: 443, domains: ['api.example.com'] })
   .setAction({ type: 'forward', targets: [{ host: '127.0.0.1', port: 8080 }] })
   .save();
+
+await route.toggle(false);
 ```
 
+## What the Client Gives You
+
+| Manager | Purpose |
+| --- | --- |
+| `client.routes` | List merged routes, create API routes, toggle routes |
+| `client.certificates` | Inspect certificates and run certificate operations |
+| `client.apiTokens` | Create, list, toggle, roll, and revoke API tokens |
+| `client.remoteIngress` | Manage edge registrations, statuses, and connection tokens |
+| `client.emails` | Inspect email items and trigger resend flows |
+| `client.stats` | Health, statistics, and operational summaries |
+| `client.config` | Read the current configuration view |
+| `client.logs` | Read recent logs and log-related data |
+| `client.radius` | Manage RADIUS clients, VLANs, and sessions |
+
 ## Authentication Modes
 
 | Mode | How it works |
 | --- | --- |
-| Admin login | Call `login(username, password)` and the client stores the returned identity for later requests |
-| API token | Pass `apiToken` into the constructor for token-based automation |
+| Admin login | Call `login(username, password)` and the returned identity is stored on the client |
+| API token | Pass `apiToken` in the constructor and it is injected into requests automatically |
 
 ```typescript
 const client = new DcRouterApiClient({
@@ -55,52 +69,19 @@ const client = new DcRouterApiClient({
 });
 ```
 
-## Main Managers
-
-| Manager | Purpose |
-| --- | --- |
-| `client.routes` | List routes and create API-managed routes |
-| `client.certificates` | Inspect and operate on certificate records |
-| `client.apiTokens` | Create, list, toggle, roll, revoke API tokens |
-| `client.remoteIngress` | Manage registered remote ingress edges |
-| `client.stats` | Read operational metrics and health data |
-| `client.config` | Read current configuration view |
-| `client.logs` | Read recent logs or stream them |
-| `client.emails` | List emails and trigger resend flows |
-| `client.radius` | Operate on RADIUS clients, VLANs, sessions, and accounting |
-
-## Route Behavior
-
-Routes are returned as `Route` instances with:
-
-- `id`
-- `name`
-- `enabled`
-- `origin`
-
 Important behavior:
 
-- API routes can be created, updated, deleted, and toggled.
-- System routes can be listed and toggled, but not edited or deleted.
-- A system route is any route whose `origin !== 'api'`.
-
-```typescript
-const { routes } = await client.routes.list();
+- `baseUrl` is normalized, and the client automatically calls `${baseUrl}/typedrequest`
+- `buildRequestPayload()` injects the current identity and optional API token for you
+- system routes can be toggled, but only API routes are meant for edit and delete flows
 
-for (const route of routes) {
-  if (route.origin !== 'api') {
-    await route.toggle(false);
-  }
-}
-```
-
-## Builder Example
+## Route Builder Example
 
 ```typescript
-const route = await client.routes.build()
+const newRoute = await client.routes.build()
   .setName('internal-app')
   .setMatch({
-    ports: 80,
+    ports: 443,
     domains: ['internal.example.com'],
   })
   .setAction({
@@ -110,30 +91,47 @@ const route = await client.routes.build()
   .setEnabled(true)
   .save();
 
-await route.toggle(false);
+await newRoute.update({
+  action: {
+    type: 'forward',
+    targets: [{ host: '127.0.0.1', port: 3001 }],
+  },
+});
 ```
 
-## Example: Certificates and Stats
+## Token and Remote Ingress Example
 
 ```typescript
-const { certificates, summary } = await client.certificates.list();
-console.log(summary.valid, summary.failed);
+const token = await client.apiTokens.build()
+  .setName('ci-token')
+  .setScopes(['routes:read', 'routes:write'])
+  .setExpiresInDays(30)
+  .save();
+
+console.log('copy this once:', token.tokenValue);
+
+const edge = await client.remoteIngress.build()
+  .setName('edge-eu-1')
+  .setListenPorts([80, 443])
+  .setAutoDerivePorts(true)
+  .setTags(['production', 'eu'])
+  .save();
 
-const health = await client.stats.getHealth();
-const recentLogs = await client.logs.getRecent({ level: 'error', limit: 20 });
+const connectionToken = await edge.getConnectionToken();
+console.log(connectionToken);
 ```
 
 ## What This Package Does Not Do
 
 - It does not start dcrouter.
-- It does not embed the dashboard.
-- It does not replace the request interfaces package if you only need raw types.
+- It does not bundle the dashboard.
+- It does not replace the raw interfaces package when you want low-level TypedRequest contracts.
 
-Use `@serve.zone/dcrouter` to run the server, `@serve.zone/dcrouter-web` for the dashboard bundle/components, and `@serve.zone/dcrouter-interfaces` for raw API contracts.
+Use `@serve.zone/dcrouter` to run the server and `@serve.zone/dcrouter-interfaces` for the shared request/data types.
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](../license) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](../license) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
 

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/appstate.ts

@@ -512,15 +512,6 @@ export const fetchNetworkStatsAction = networkStatePart.createAction(async (stat
   if (!context.identity) return currentState;
 
   try {
-    // Fetch active connections using the existing endpoint
-    const connectionsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
-      interfaces.requests.IReq_GetActiveConnections
-    >('/typedrequest', 'getActiveConnections');
-    
-    const connectionsResponse = await connectionsRequest.fire({
-      identity: context.identity,
-    });
-
     // Get network stats for throughput and IP data
     const networkStatsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
       interfaces.requests.IReq_GetNetworkStats
@@ -533,22 +524,35 @@ export const fetchNetworkStatsAction = networkStatePart.createAction(async (stat
     // Use the connections data for the connection list
     // and network stats for throughput and IP analytics
     const connectionsByIP: { [ip: string]: number } = {};
+    const throughputByIP = new Map<string, { in: number; out: number }>();
+    for (const item of networkStatsResponse.throughputByIP || []) {
+      throughputByIP.set(item.ip, { in: item.in, out: item.out });
+    }
     
     // Build connectionsByIP from network stats if available
     if (networkStatsResponse.connectionsByIP && Array.isArray(networkStatsResponse.connectionsByIP)) {
       networkStatsResponse.connectionsByIP.forEach((item: { ip: string; count: number }) => {
         connectionsByIP[item.ip] = item.count;
       });
-    } else {
-      // Fallback: calculate from connections
-      connectionsResponse.connections.forEach(conn => {
-        const ip = conn.remoteAddress;
-        connectionsByIP[ip] = (connectionsByIP[ip] || 0) + 1;
-      });
     }
 
+    const connections: interfaces.data.IConnectionInfo[] = Object.entries(connectionsByIP).map(([ip, count]) => {
+      const tp = throughputByIP.get(ip);
+      return {
+        id: `ip-${ip}`,
+        remoteAddress: ip,
+        localAddress: 'server',
+        startTime: 0,
+        protocol: 'https',
+        state: 'connected',
+        bytesReceived: tp?.in || 0,
+        bytesSent: tp?.out || 0,
+        connectionCount: count,
+      };
+    });
+
     return {
-      connections: connectionsResponse.connections,
+      connections,
       connectionsByIP,
       throughputRate: networkStatsResponse.throughputRate || { bytesInPerSecond: 0, bytesOutPerSecond: 0 },
       totalBytes: networkStatsResponse.totalDataTransferred
@@ -2589,7 +2593,7 @@ async function dispatchCombinedRefreshActionInner() {
         email: true,
         dns: true,
         security: true,
-        network: currentView === 'network', // Only fetch network if on network view
+        network: currentView === 'network' && currentSubview === 'activity',
         radius: true,
         vpn: true,
       },
@@ -2617,7 +2621,7 @@ async function dispatchCombinedRefreshActionInner() {
 
       // Build connectionsByIP from connectionDetails (now populated with real per-IP data)
       network.connectionDetails.forEach(conn => {
-        connectionsByIP[conn.remoteAddress] = (connectionsByIP[conn.remoteAddress] || 0) + 1;
+        connectionsByIP[conn.remoteAddress] = (connectionsByIP[conn.remoteAddress] || 0) + (conn.connectionCount || 1);
       });
 
       // Build connections from connectionDetails (real per-IP aggregates)
@@ -2630,6 +2634,7 @@ async function dispatchCombinedRefreshActionInner() {
         state: conn.state as any,
         bytesReceived: conn.bytesIn,
         bytesSent: conn.bytesOut,
+        connectionCount: conn.connectionCount,
       }));
 
       networkStatePart.setState({

package/ts_web/elements/network/ops-view-network-activity.ts

@@ -79,7 +79,6 @@ export class OpsViewNetworkActivity extends DeesElement {
     // Subscribe and track unsubscribe functions
     const statsUnsubscribe = appstate.statsStatePart.select().subscribe((state) => {
       this.statsState = state;
-      this.updateNetworkData();
     });
     this.rxSubscriptions.push(statsUnsubscribe);
 
@@ -560,6 +559,8 @@ export class OpsViewNetworkActivity extends DeesElement {
             'Throughput Out': this.formatBitsPerSecond(item.bytesOutPerSecond),
             'Transferred / min': this.formatBytes(totalBytesPerMin),
             'Connections': item.activeConnections,
+            'Req/s': item.requestsPerSecond != null ? item.requestsPerSecond.toFixed(1) : '-',
+            'Req/min': item.requestsLastMinute != null ? item.requestsLastMinute.toFixed(0) : '-',
             'Requests': item.requestCount?.toLocaleString() ?? '0',
             'Routes': item.routeCount,
           };
@@ -583,7 +584,7 @@ export class OpsViewNetworkActivity extends DeesElement {
     return html`
       <dees-table
         .data=${backends}
-        .rowKey=${'backend'}
+        .rowKey=${'id'}
         .highlightUpdates=${'flash'}
         .displayFunction=${(item: interfaces.data.IBackendInfo) => {
           const totalErrors = item.connectErrors + item.handshakeErrors + item.requestErrors;
@@ -707,6 +708,9 @@ export class OpsViewNetworkActivity extends DeesElement {
     }
 
     const throughput = this.calculateThroughput();
+    if (this.networkState.lastUpdated && now - this.networkState.lastUpdated > 3000) {
+      return;
+    }
 
     // Convert to Mbps (bytes * 8 / 1,000,000)
     const throughputInMbps = (throughput.in * 8) / 1000000;

package/ts_web/elements/network/ops-view-vpn.ts

@@ -49,19 +49,28 @@ export class OpsViewVpn extends DeesElement {
   @state()
   accessor vpnState: appstate.IVpnState = appstate.vpnStatePart.getState()!;
 
+  @state()
+  accessor targetProfilesState: appstate.ITargetProfilesState = appstate.targetProfilesStatePart.getState()!;
+
   constructor() {
     super();
     const sub = appstate.vpnStatePart.select().subscribe((newState) => {
       this.vpnState = newState;
     });
     this.rxSubscriptions.push(sub);
+
+    const targetProfilesSub = appstate.targetProfilesStatePart.select().subscribe((newState) => {
+      this.targetProfilesState = newState;
+    });
+    this.rxSubscriptions.push(targetProfilesSub);
   }
 
   async connectedCallback() {
     await super.connectedCallback();
-    await appstate.vpnStatePart.dispatchAction(appstate.fetchVpnAction, null);
-    // Ensure target profiles are loaded for autocomplete candidates
-    await appstate.targetProfilesStatePart.dispatchAction(appstate.fetchTargetProfilesAction, null);
+    await Promise.all([
+      appstate.vpnStatePart.dispatchAction(appstate.fetchVpnAction, null),
+      appstate.targetProfilesStatePart.dispatchAction(appstate.fetchTargetProfilesAction, null),
+    ]);
   }
 
   public static styles = [
@@ -330,13 +339,7 @@ export class OpsViewVpn extends DeesElement {
             'Status': statusHtml,
             'Routing': routingHtml,
             'VPN IP': client.assignedIp || '-',
-            'Target Profiles': client.targetProfileIds?.length
-              ? html`${client.targetProfileIds.map(id => {
-                  const profileState = appstate.targetProfilesStatePart.getState();
-                  const profile = profileState?.profiles.find(p => p.id === id);
-                  return html`<span class="tagBadge">${profile?.name || id}</span>`;
-                })}`
-              : '-',
+            'Target Profiles': this.renderTargetProfileBadges(client.targetProfileIds),
             'Description': client.description || '-',
             'Created': new Date(client.createdAt).toLocaleDateString(),
           };
@@ -347,6 +350,7 @@ export class OpsViewVpn extends DeesElement {
             iconName: 'lucide:plus',
             type: ['header'],
             actionFunc: async () => {
+              await this.ensureTargetProfilesLoaded();
               const { DeesModal } = await import('@design.estate/dees-catalog');
               const profileCandidates = this.getTargetProfileCandidates();
               const createModal = await DeesModal.createAndShow({
@@ -647,6 +651,7 @@ export class OpsViewVpn extends DeesElement {
             type: ['contextmenu', 'inRow'],
             actionFunc: async (actionData: any) => {
               const client = actionData.item as interfaces.data.IVpnClient;
+              await this.ensureTargetProfilesLoaded();
               const { DeesModal } = await import('@design.estate/dees-catalog');
               const currentDescription = client.description ?? '';
               const currentTargetProfileNames = this.resolveProfileIdsToLabels(client.targetProfileIds) || [];
@@ -810,12 +815,28 @@ export class OpsViewVpn extends DeesElement {
     `;
   }
 
+  private async ensureTargetProfilesLoaded(): Promise<void> {
+    await appstate.targetProfilesStatePart.dispatchAction(appstate.fetchTargetProfilesAction, null);
+  }
+
+  private renderTargetProfileBadges(ids?: string[]): TemplateResult | string {
+    const labels = this.resolveProfileIdsToLabels(ids, {
+      pendingLabel: 'Loading profile...',
+      missingLabel: (id) => `Unknown profile (${id})`,
+    });
+
+    if (!labels?.length) {
+      return '-';
+    }
+
+    return html`${labels.map((label) => html`<span class="tagBadge">${label}</span>`)}`;
+  }
+
   /**
    * Build stable profile labels for list inputs.
    */
   private getTargetProfileChoices() {
-    const profileState = appstate.targetProfilesStatePart.getState();
-    const profiles = profileState?.profiles || [];
+    const profiles = this.targetProfilesState.profiles || [];
     const nameCounts = new Map<string, number>();
 
     for (const profile of profiles) {
@@ -837,12 +858,27 @@ export class OpsViewVpn extends DeesElement {
   /**
    * Convert profile IDs to form labels (for populating edit form values).
    */
-  private resolveProfileIdsToLabels(ids?: string[]): string[] | undefined {
+  private resolveProfileIdsToLabels(
+    ids?: string[],
+    options: {
+      pendingLabel?: string;
+      missingLabel?: (id: string) => string;
+    } = {},
+  ): string[] | undefined {
     if (!ids?.length) return undefined;
     const choices = this.getTargetProfileChoices();
     const labelsById = new Map(choices.map((profile) => [profile.id, profile.label]));
     return ids.map((id) => {
-      return labelsById.get(id) || id;
+      const label = labelsById.get(id);
+      if (label) {
+        return label;
+      }
+
+      if (this.targetProfilesState.lastUpdated === 0 && !this.targetProfilesState.error) {
+        return options.pendingLabel || 'Loading profile...';
+      }
+
+      return options.missingLabel?.(id) || id;
     });
   }
 

package/ts_web/readme.md

@@ -1,76 +1,56 @@
 # @serve.zone/dcrouter-web
 
-Browser UI package for dcrouter's operations dashboard. 🖥️
-
-This package contains the browser entrypoint, app state, router, and web components that power the Ops dashboard served by dcrouter.
+Browser-side frontend for the dcrouter Ops dashboard. This folder is the SPA entrypoint, router, app state, and web-component UI rendered by OpsServer.
 
 ## Issue Reporting and Security
 
 For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
 
-## What Is In Here
-
-| Path | Purpose |
-| --- | --- |
-| `index.ts` | Browser entrypoint that initializes routing and renders `<ops-dashboard>` |
-| `appstate.ts` | Central reactive state and action definitions |
-| `router.ts` | URL-based dashboard routing |
-| `elements/` | Dashboard views and reusable UI pieces |
-
-## Main Views
-
-The dashboard currently includes views for:
+## What It Boots
 
-- overview and configuration
-- network activity and route management
-- source profiles, target profiles, and network targets
-- email activity and email domains
-- DNS providers, domains, DNS records, and certificates
-- API tokens and users
-- VPN, remote ingress, logs, and security views
+- `index.ts` initializes the app router and renders `<ops-dashboard>` into `document.body`
+- `router.ts` defines top-level dashboard routes and subviews
+- `appstate.ts` holds reactive state, TypedRequest actions, and TypedSocket log streaming
+- `elements/` contains the dashboard shell and feature views
 
-## Route Management UX
+## View Map
 
-The web UI reflects dcrouter's current route ownership model:
-
-- system routes are shown separately from user routes
-- system routes are visible and toggleable
-- system routes are not directly editable or deletable
-- API routes are fully managed through the route-management forms
+| Top-level view | Subviews |
+| --- | --- |
+| `overview` | `stats`, `configuration` |
+| `network` | `activity`, `routes`, `sourceprofiles`, `networktargets`, `targetprofiles`, `remoteingress`, `vpn` |
+| `email` | `log`, `security`, `domains` |
+| `access` | `apitokens`, `users` |
+| `security` | `overview`, `blocked`, `authentication` |
+| `domains` | `providers`, `domains`, `dns`, `certificates` |
+| `logs` | flat view |
 
 ## How It Talks To dcrouter
 
-The frontend uses TypedRequest and shared interfaces from `@serve.zone/dcrouter-interfaces`.
-
-State actions in `appstate.ts` fetch and mutate:
-
-- stats and health
-- logs
-- routes and tokens
-- certificates and ACME config
-- DNS providers, domains, and records
-- email domains and email operations
-- VPN, remote ingress, and RADIUS data
+- TypedRequest for the main API surface
+- shared request and data contracts from `@serve.zone/dcrouter-interfaces`
+- TypedSocket for real-time log streaming
+- QR code generation for VPN client UX
 
 ## Development Notes
 
-The browser bundle is built from this package and served by the main dcrouter package.
+This package is the frontend module boundary, but it is built and served as part of the main workspace.
 
 ```bash
-pnpm run bundle
+pnpm run build
 pnpm run watch
 ```
 
-The generated bundle is written into `dist_serve/` by the main build pipeline.
+The built dashboard assets are emitted into `dist_serve/` by the workspace build pipeline.
 
-## When To Use This Package
+## What This Package Is For
 
-- Use it if you want the dashboard frontend as a package/module boundary.
-- Use the main `@serve.zone/dcrouter` package if you want the server that actually serves this UI.
+- Use it when you want the dashboard frontend as its own published module boundary.
+- Use `@serve.zone/dcrouter` when you want the server that actually hosts this UI and the backend API.
 
 ## License and Legal Information
 
-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](../license) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](../license) file.
 
 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.