@serve.zone/dcrouter 13.19.1 → 13.20.2

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

@@ -43,22 +43,28 @@ function parseTargetPort(value: any): number | undefined {
 
 function getRouteTargetInputs(formEl: any) {
   const textInputs = Array.from(formEl.querySelectorAll('dees-input-text')) as any[];
+  const checkboxInputs = Array.from(formEl.querySelectorAll('dees-input-checkbox')) as any[];
   return {
     hostInput: textInputs.find((input) => input.key === 'targetHost'),
     portInput: textInputs.find((input) => input.key === 'targetPort'),
+    preservePortInput: checkboxInputs.find((input) => input.key === 'preserveMatchPort'),
   };
 }
 
 function setupTargetInputState(formEl: any) {
   const updateState = async () => {
     const data = await formEl.collectFormData();
+    const contentEl = formEl.closest('.content') || formEl.parentElement;
     const usesNetworkTarget = !!getDropdownKey(data.networkTargetRef);
-    const { hostInput, portInput } = getRouteTargetInputs(formEl);
+    const preserveMatchPort = !usesNetworkTarget && Boolean(data.preserveMatchPort);
+    const { hostInput, portInput, preservePortInput } = getRouteTargetInputs(formEl);
     const hostDescription = usesNetworkTarget
       ? 'Controlled by the selected network target'
       : 'Used when no network target is selected';
     const portDescription = usesNetworkTarget
       ? 'Controlled by the selected network target'
+      : preserveMatchPort
+        ? 'Forwarded to the backend on the same port the client matched'
       : 'Used when no network target is selected';
 
     if (hostInput) {
@@ -67,10 +73,24 @@ function setupTargetInputState(formEl: any) {
       hostInput.description = hostDescription;
     }
     if (portInput) {
-      portInput.disabled = usesNetworkTarget;
-      portInput.required = !usesNetworkTarget;
+      portInput.disabled = usesNetworkTarget || preserveMatchPort;
+      portInput.required = !usesNetworkTarget && !preserveMatchPort;
       portInput.description = portDescription;
     }
+    if (preservePortInput) {
+      preservePortInput.disabled = usesNetworkTarget;
+      preservePortInput.description = usesNetworkTarget
+        ? 'Unavailable when a network target is selected'
+        : 'Forward to the backend using the same port that matched this route';
+      if (usesNetworkTarget) {
+        preservePortInput.value = false;
+      }
+    }
+
+    const remoteIngressGroup = contentEl?.querySelector('.remoteIngressGroup') as HTMLElement | null;
+    if (remoteIngressGroup) {
+      remoteIngressGroup.style.display = Boolean(data.remoteIngressEnabled) ? 'flex' : 'none';
+    }
 
     await formEl.updateRequiredStatus?.();
   };
@@ -465,10 +485,13 @@ export class OpsViewRoutes extends DeesElement {
       ? (Array.isArray(route.match.domains) ? route.match.domains : [route.match.domains])
       : [];
     const firstTarget = route.action.targets?.[0];
+    const currentPreserveMatchPort = firstTarget?.port === 'preserve';
     const currentTargetHost = firstTarget
       ? (Array.isArray(firstTarget.host) ? firstTarget.host[0] : firstTarget.host)
       : '';
-    const currentTargetPort = firstTarget?.port != null ? String(firstTarget.port) : '';
+    const currentTargetPort = typeof firstTarget?.port === 'number' ? String(firstTarget.port) : '';
+    const currentRemoteIngressEnabled = route.remoteIngress?.enabled === true;
+    const currentEdgeFilter = route.remoteIngress?.edgeFilter || [];
 
     // Compute current TLS state for pre-population
     const currentTls = (route.action as any).tls;
@@ -493,6 +516,11 @@ export class OpsViewRoutes extends DeesElement {
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedOption=${targetOptions.find((o) => o.key === (merged.metadata?.networkTargetRef || '')) || null}></dees-input-dropdown>
           <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${currentTargetHost}></dees-input-text>
           <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'} .value=${currentTargetPort}></dees-input-text>
+          <dees-input-checkbox .key=${'preserveMatchPort'} .label=${'Preserve incoming port'} .value=${currentPreserveMatchPort}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'remoteIngressEnabled'} .label=${'Enable Remote Ingress'} .value=${currentRemoteIngressEnabled}></dees-input-checkbox>
+          <div class="remoteIngressGroup" style="display: ${currentRemoteIngressEnabled ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
+            <dees-input-list .key=${'remoteIngressEdgeFilter'} .label=${'Edge Filter'} .description=${'Optional edge IDs or tags. Leave empty to allow all edges.'} .placeholder=${'Add edge ID or tag...'} .value=${currentEdgeFilter}></dees-input-list>
+          </div>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions.find((o) => o.key === currentTlsMode) || tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: ${needsCert ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions.find((o) => o.key === currentTlsCert) || tlsCertOptions[0]}></dees-input-dropdown>
@@ -526,14 +554,22 @@ export class OpsViewRoutes extends DeesElement {
 
             const profileKey = getDropdownKey(formData.sourceProfileRef);
             const targetKey = getDropdownKey(formData.networkTargetRef);
-            const targetPort = parseTargetPort(formData.targetPort)
-              ?? (targetKey ? parseTargetPort(currentTargetPort) ?? ports[0] : undefined);
+            const preserveMatchPort = !targetKey && Boolean(formData.preserveMatchPort);
+            const targetPort = preserveMatchPort
+              ? 'preserve'
+              : parseTargetPort(formData.targetPort)
+                ?? (targetKey ? parseTargetPort(currentTargetPort) ?? ports[0] : undefined);
 
             if (targetPort === undefined) {
               alert('Target Port must be a valid port number when no network target is selected.');
               return;
             }
 
+            const remoteIngressEnabled = Boolean(formData.remoteIngressEnabled);
+            const remoteIngressEdgeFilter: string[] = Array.isArray(formData.remoteIngressEdgeFilter)
+              ? formData.remoteIngressEdgeFilter.filter(Boolean)
+              : [];
+
             const updatedRoute: any = {
               name: formData.name,
               match: {
@@ -549,6 +585,12 @@ export class OpsViewRoutes extends DeesElement {
                   },
                 ],
               },
+              remoteIngress: remoteIngressEnabled
+                ? {
+                    enabled: true,
+                    ...(remoteIngressEdgeFilter.length > 0 ? { edgeFilter: remoteIngressEdgeFilter } : {}),
+                  }
+                : null,
               ...(priority != null && !isNaN(priority) ? { priority } : {}),
             };
 
@@ -640,6 +682,11 @@ export class OpsViewRoutes extends DeesElement {
           <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions}></dees-input-dropdown>
           <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${'localhost'}></dees-input-text>
           <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'}></dees-input-text>
+          <dees-input-checkbox .key=${'preserveMatchPort'} .label=${'Preserve incoming port'} .value=${false}></dees-input-checkbox>
+          <dees-input-checkbox .key=${'remoteIngressEnabled'} .label=${'Enable Remote Ingress'} .value=${false}></dees-input-checkbox>
+          <div class="remoteIngressGroup" style="display: none; flex-direction: column; gap: 16px;">
+            <dees-input-list .key=${'remoteIngressEdgeFilter'} .label=${'Edge Filter'} .description=${'Optional edge IDs or tags. Leave empty to allow all edges.'} .placeholder=${'Add edge ID or tag...'}></dees-input-list>
+          </div>
           <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions[0]}></dees-input-dropdown>
           <div class="tlsCertificateGroup" style="display: none; flex-direction: column; gap: 16px;">
             <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions[0]}></dees-input-dropdown>
@@ -673,14 +720,22 @@ export class OpsViewRoutes extends DeesElement {
 
             const profileKey = getDropdownKey(formData.sourceProfileRef);
             const targetKey = getDropdownKey(formData.networkTargetRef);
-            const targetPort = parseTargetPort(formData.targetPort)
-              ?? (targetKey ? ports[0] : undefined);
+            const preserveMatchPort = !targetKey && Boolean(formData.preserveMatchPort);
+            const targetPort = preserveMatchPort
+              ? 'preserve'
+              : parseTargetPort(formData.targetPort)
+                ?? (targetKey ? ports[0] : undefined);
 
             if (targetPort === undefined) {
               alert('Target Port must be a valid port number when no network target is selected.');
               return;
             }
 
+            const remoteIngressEnabled = Boolean(formData.remoteIngressEnabled);
+            const remoteIngressEdgeFilter: string[] = Array.isArray(formData.remoteIngressEdgeFilter)
+              ? formData.remoteIngressEdgeFilter.filter(Boolean)
+              : [];
+
             const route: any = {
               name: formData.name,
               match: {
@@ -696,6 +751,14 @@ export class OpsViewRoutes extends DeesElement {
                   },
                 ],
               },
+              ...(remoteIngressEnabled
+                ? {
+                    remoteIngress: {
+                      enabled: true,
+                      ...(remoteIngressEdgeFilter.length > 0 ? { edgeFilter: remoteIngressEdgeFilter } : {}),
+                    },
+                  }
+                : {}),
               ...(priority != null && !isNaN(priority) ? { priority } : {}),
             };
 

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.