@serve.zone/dcrouter 16.2.1 → 16.4.0

package/ts_web/elements/network/ops-view-special-forwards.ts

@@ -4,42 +4,34 @@ import {
   cssManager,
   customElement,
   html,
+  property,
   state,
   type TemplateResult,
 } from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
 import * as appstate from '../../appstate.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
-
-const managedRouteKind = 'letsencrypt-http01-forward' as const;
-
-function getDropdownKey(value: unknown): string {
-  return typeof value === 'string'
-    ? value
-    : value && typeof value === 'object' && 'key' in value
-      ? String((value as { key: unknown }).key)
-      : '';
-}
-
-function getDomains(route: interfaces.data.IMergedRoute): string[] {
-  const domains = route.route.match.domains;
-  if (!domains) return [];
-  return Array.isArray(domains) ? domains : [domains];
-}
-
-function getTarget(route: interfaces.data.IMergedRoute): { host: string; port: number } | undefined {
-  const target = route.route.action.targets?.[0];
-  if (!target || typeof target.port !== 'number') return undefined;
-  const host = typeof target.host === 'string'
-    ? target.host
-    : Array.isArray(target.host)
-      ? target.host[0]
-      : undefined;
-  return host ? { host, port: target.port } : undefined;
-}
+import {
+  getRouteOwner,
+  routeMatchesOwner,
+  type TRouteOwnerFilter,
+} from './route-view-filters.js';
+import {
+  getSpecialForwardDomains,
+  getSpecialForwardTarget,
+  letsEncryptHttp01ManagedRouteKind,
+  showLetsEncryptHttp01ForwardDialog,
+} from './special-forward-dialog.js';
 
 @customElement('ops-view-special-forwards')
 export class OpsViewSpecialForwards extends DeesElement {
+  @property({ type: Boolean, reflect: true })
+  accessor embedded = false;
+
+  @property({ type: String })
+  accessor ownerFilter: TRouteOwnerFilter = 'all';
+
   @state()
   accessor routeState: appstate.IRouteManagementState = appstate.routeManagementStatePart.getState()!;
 
@@ -67,6 +59,12 @@ export class OpsViewSpecialForwards extends DeesElement {
         display: block;
       }
 
+      :host([embedded]) {
+        margin: 0;
+        max-width: none;
+        padding: 0;
+      }
+
       .specialForwardsContainer {
         display: flex;
         flex-direction: column;
@@ -97,12 +95,62 @@ export class OpsViewSpecialForwards extends DeesElement {
 
   public render(): TemplateResult {
     const forwards = this.routeState.mergedRoutes.filter((route) => {
-      return route.metadata?.managedRouteKind === managedRouteKind
-        && route.metadata.ownerType !== 'gatewayClient';
+      return route.metadata?.managedRouteKind === letsEncryptHttp01ManagedRouteKind
+        && routeMatchesOwner(route, this.ownerFilter);
     });
+    const enabledCount = forwards.filter((route) => route.enabled).length;
+    const disabledCount = forwards.length - enabledCount;
+    const readOnlyCount = forwards.filter((route) => getRouteOwner(route) !== 'operator').length;
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'matchingSpecialForwards',
+        title: 'Matching',
+        type: 'number',
+        value: forwards.length,
+        icon: 'lucide:route',
+        description: 'HTTP-01 forwards in this owner scope',
+        color: '#3b82f6',
+      },
+      {
+        id: 'enabledSpecialForwards',
+        title: 'Enabled',
+        type: 'number',
+        value: enabledCount,
+        icon: 'lucide:circleCheck',
+        description: 'Currently forwarding challenges',
+        color: '#22c55e',
+      },
+      {
+        id: 'disabledSpecialForwards',
+        title: 'Disabled',
+        type: 'number',
+        value: disabledCount,
+        icon: 'lucide:circlePause',
+        description: 'Configured but inactive',
+        color: disabledCount > 0 ? '#f59e0b' : '#6b7280',
+      },
+      {
+        id: 'readOnlySpecialForwards',
+        title: 'Read-only',
+        type: 'number',
+        value: readOnlyCount,
+        icon: 'lucide:lockKeyhole',
+        description: 'Managed by gateway clients or system',
+        color: '#8b5cf6',
+      },
+    ];
 
     return html`
+      ${this.embedded ? '' : html`<dees-heading level="3">Special Forwards</dees-heading>`}
       <div class="specialForwardsContainer">
+        ${this.embedded
+          ? ''
+          : html`
+              <dees-statsgrid
+                .tiles=${statsTiles}
+                .gridActions=${this.getHeaderActions()}
+              ></dees-statsgrid>
+            `}
         <div class="explanation">
           <strong>Let's Encrypt HTTP-01 Forward</strong> exposes only
           <code>/.well-known/acme-challenge/*</code> on public port 80. DCRouter manages the
@@ -119,12 +167,18 @@ export class OpsViewSpecialForwards extends DeesElement {
           .data=${forwards}
           .showColumnFilters=${true}
           .displayFunction=${(route: interfaces.data.IMergedRoute) => {
-            const target = getTarget(route);
+            const target = getSpecialForwardTarget(route);
+            const owner = getRouteOwner(route);
             return {
               Status: route.enabled ? 'Enabled' : 'Disabled',
               Type: 'Let\'s Encrypt HTTP-01',
+              Owner: owner === 'operator'
+                ? 'User'
+                : owner === 'gatewayClient'
+                  ? 'Gateway Client'
+                  : 'System',
               Name: route.route.name || route.id,
-              Domains: getDomains(route).join(', '),
+              Domains: getSpecialForwardDomains(route).join(', '),
               Path: route.route.match.path || '-',
               Target: route.metadata?.networkTargetName
                 || (target ? `${target.host}:${target.port}` : '-'),
@@ -132,30 +186,27 @@ export class OpsViewSpecialForwards extends DeesElement {
             };
           }}
           .dataActions=${[
-            {
-              name: 'Add HTTP-01 Forward',
-              iconName: 'lucide:plus',
-              type: ['header' as const],
-              actionFunc: async () => this.showForwardDialog(),
-            },
-            {
-              name: 'Refresh',
-              iconName: 'lucide:refreshCw',
-              type: ['header' as const],
-              actionFunc: async () => this.refreshData(),
-            },
             {
               name: 'Edit',
               iconName: 'lucide:pencil',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (route: interfaces.data.IMergedRoute) => {
+                return getRouteOwner(route) === 'operator';
+              },
               actionFunc: async (actionData: any) => {
-                await this.showForwardDialog(actionData.item as interfaces.data.IMergedRoute);
+                await showLetsEncryptHttp01ForwardDialog({
+                  existing: actionData.item as interfaces.data.IMergedRoute,
+                  targets: this.profilesTargetsState.targets,
+                });
               },
             },
             {
               name: 'Enable / Disable',
               iconName: 'lucide:power',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (route: interfaces.data.IMergedRoute) => {
+                return getRouteOwner(route) === 'operator';
+              },
               actionFunc: async (actionData: any) => {
                 const route = actionData.item as interfaces.data.IMergedRoute;
                 await appstate.routeManagementStatePart.dispatchAction(
@@ -168,6 +219,9 @@ export class OpsViewSpecialForwards extends DeesElement {
               name: 'Delete',
               iconName: 'lucide:trash2',
               type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (route: interfaces.data.IMergedRoute) => {
+                return getRouteOwner(route) === 'operator';
+              },
               actionFunc: async (actionData: any) => {
                 await this.confirmDelete(actionData.item as interfaces.data.IMergedRoute);
               },
@@ -188,147 +242,30 @@ export class OpsViewSpecialForwards extends DeesElement {
     ]);
   }
 
-  private async showForwardDialog(existing?: interfaces.data.IMergedRoute): Promise<void> {
-    const { DeesModal } = await import('@design.estate/dees-catalog');
-    const target = existing ? getTarget(existing) : undefined;
-    const targetOptions = [
-      { key: '', option: '(none — inline target)' },
-      ...this.profilesTargetsState.targets.map((networkTarget) => ({
-        key: networkTarget.id,
-        option: `${networkTarget.name} (${
-          Array.isArray(networkTarget.host) ? networkTarget.host.join(', ') : networkTarget.host
-        }:${networkTarget.port})`,
-      })),
+  private getHeaderActions() {
+    return [
+      ...(this.ownerFilter === 'all' || this.ownerFilter === 'operator'
+        ? [{
+            name: 'Add User Special Forward',
+            iconName: 'lucide:plus',
+            action: async () => showLetsEncryptHttp01ForwardDialog({
+              targets: this.profilesTargetsState.targets,
+            }),
+          }]
+        : []),
+      {
+        name: 'Refresh',
+        iconName: 'lucide:refreshCw',
+        action: async () => this.refreshData(),
+      },
     ];
-    const selectedTarget = targetOptions.find((option) => {
-      return option.key === (existing?.metadata?.networkTargetRef || '');
-    }) || targetOptions[0];
-
-    await DeesModal.createAndShow({
-      heading: existing
-        ? `Edit HTTP-01 Forward: ${existing.route.name || existing.id}`
-        : 'Add Let\'s Encrypt HTTP-01 Forward',
-      content: html`
-        <dees-form>
-          <dees-input-text
-            .key=${'name'}
-            .label=${'Name'}
-            .value=${existing?.route.name || ''}
-            .required=${true}
-          ></dees-input-text>
-          <dees-input-list
-            .key=${'domains'}
-            .label=${'Domains'}
-            .description=${'Exact public hostnames; HTTP-01 does not support wildcards'}
-            .placeholder=${'Add domain...'}
-            .value=${existing ? getDomains(existing) : []}
-          ></dees-input-list>
-          <dees-input-dropdown
-            .key=${'networkTargetRef'}
-            .label=${'Network Target'}
-            .options=${targetOptions}
-            .selectedOption=${selectedTarget}
-          ></dees-input-dropdown>
-          <dees-input-text
-            .key=${'targetHost'}
-            .label=${'Inline Target Host'}
-            .description=${'Used only when no Network Target is selected'}
-            .value=${target?.host || ''}
-          ></dees-input-text>
-          <dees-input-text
-            .key=${'targetPort'}
-            .label=${'Inline Target Port'}
-            .description=${'Usually port 80 on the ACME responder'}
-            .value=${target ? String(target.port) : '80'}
-          ></dees-input-text>
-          <dees-input-checkbox
-            .key=${'remoteIngressEnabled'}
-            .label=${'Enable Remote Ingress'}
-            .value=${existing?.route.remoteIngress?.enabled === true}
-          ></dees-input-checkbox>
-          <dees-input-list
-            .key=${'remoteIngressEdgeFilter'}
-            .label=${'Remote Ingress Edge Filter'}
-            .description=${'Optional edge IDs or tags; leave empty for all edges'}
-            .placeholder=${'Add edge ID or tag...'}
-            .value=${existing?.route.remoteIngress?.edgeFilter || []}
-          ></dees-input-list>
-        </dees-form>
-      `,
-      menuOptions: [
-        {
-          name: 'Cancel',
-          iconName: 'lucide:x',
-          action: async (modalArg: any) => modalArg.destroy(),
-        },
-        {
-          name: existing ? 'Save' : 'Create',
-          iconName: existing ? 'lucide:check' : 'lucide:plus',
-          action: async (modalArg: any) => {
-            const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
-            if (!form) return;
-            const data = await form.collectFormData();
-            const name = String(data.name || '').trim();
-            const domains = Array.isArray(data.domains)
-              ? data.domains.map((domain: unknown) => String(domain).trim()).filter(Boolean)
-              : [];
-            const networkTargetRef = getDropdownKey(data.networkTargetRef).trim();
-            const targetHost = String(data.targetHost || '').trim();
-            const targetPort = Number.parseInt(String(data.targetPort || ''), 10);
-            if (!name || domains.length === 0) {
-              alert('Name and at least one domain are required.');
-              return;
-            }
-            if (
-              !networkTargetRef
-              && (!targetHost || !Number.isInteger(targetPort) || targetPort < 1 || targetPort > 65535)
-            ) {
-              alert('A valid inline target host and port are required.');
-              return;
-            }
-
-            const edgeFilter = Array.isArray(data.remoteIngressEdgeFilter)
-              ? data.remoteIngressEdgeFilter.map((entry: unknown) => String(entry).trim()).filter(Boolean)
-              : [];
-            const config: interfaces.data.ILetsEncryptHttp01ForwardConfig = {
-              name,
-              domains,
-              ...(networkTargetRef
-                ? { networkTargetRef }
-                : { target: { host: targetHost, port: targetPort } }),
-              ...(data.remoteIngressEnabled
-                ? {
-                    remoteIngress: {
-                      enabled: true,
-                      ...(edgeFilter.length ? { edgeFilter } : {}),
-                    },
-                  }
-                : {}),
-            };
-
-            if (existing) {
-              await appstate.routeManagementStatePart.dispatchAction(
-                appstate.updateLetsEncryptHttp01ForwardAction,
-                { id: existing.id, config, enabled: existing.enabled },
-              );
-            } else {
-              await appstate.routeManagementStatePart.dispatchAction(
-                appstate.createLetsEncryptHttp01ForwardAction,
-                { config },
-              );
-            }
-            await modalArg.destroy();
-          },
-        },
-      ],
-    });
   }
 
   private async confirmDelete(route: interfaces.data.IMergedRoute): Promise<void> {
     const { DeesModal } = await import('@design.estate/dees-catalog');
     await DeesModal.createAndShow({
       heading: `Delete Special Forward: ${route.route.name || route.id}`,
-      content: html`<p>This removes the managed HTTP-01 route for ${getDomains(route).join(', ')}.</p>`,
+      content: html`<p>This removes the managed HTTP-01 route for ${getSpecialForwardDomains(route).join(', ')}.</p>`,
       menuOptions: [
         {
           name: 'Cancel',

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

@@ -515,7 +515,7 @@ export class OpsViewVpn extends DeesElement {
             name: 'Enable',
             iconName: 'lucide:power',
             type: ['contextmenu', 'inRow'],
-            actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+            actionRelevancyCheckFunc: (client: any) => !client.enabled,
             actionFunc: async (actionData: any) => {
               const client = actionData.item as interfaces.data.IVpnClient;
               await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {
@@ -528,7 +528,7 @@ export class OpsViewVpn extends DeesElement {
             name: 'Disable',
             iconName: 'lucide:power',
             type: ['contextmenu', 'inRow'],
-            actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+            actionRelevancyCheckFunc: (client: any) => client.enabled,
             actionFunc: async (actionData: any) => {
               const client = actionData.item as interfaces.data.IVpnClient;
               await appstate.vpnStatePart.dispatchAction(appstate.toggleVpnClientAction, {

package/ts_web/elements/network/route-view-filters.ts

@@ -0,0 +1,43 @@
+import {
+  canonicalizeSourceRouteId,
+  type IHttpRedirectInfo,
+  type IMergedRoute,
+} from '../../../dist_ts_interfaces/data/route-management.js';
+
+export type TRouteOwnerFilter = 'all' | 'operator' | 'gatewayClient' | 'system';
+export type TResolvedRouteOwner = Exclude<TRouteOwnerFilter, 'all'>;
+
+export function getRouteOwner(route: IMergedRoute): TResolvedRouteOwner {
+  if (route.metadata?.ownerType === 'gatewayClient') return 'gatewayClient';
+  if (route.metadata?.ownerType === 'system') return 'system';
+  if (route.metadata?.ownerType === 'operator') return 'operator';
+  return route.origin === 'api' ? 'operator' : 'system';
+}
+
+export function routeMatchesOwner(
+  route: IMergedRoute,
+  ownerFilter: TRouteOwnerFilter,
+): boolean {
+  return ownerFilter === 'all' || getRouteOwner(route) === ownerFilter;
+}
+
+function getCanonicalRouteIds(route: IMergedRoute): string[] {
+  const configuredRouteId = (route.route as { id?: string }).id;
+  return [route.id, configuredRouteId]
+    .filter((routeId): routeId is string => Boolean(routeId))
+    .map(canonicalizeSourceRouteId);
+}
+
+export function redirectMatchesOwner(
+  redirect: IHttpRedirectInfo,
+  mergedRoutes: IMergedRoute[],
+  ownerFilter: TRouteOwnerFilter,
+): boolean {
+  if (ownerFilter === 'all') return true;
+
+  const sourceRouteIds = new Set(redirect.sourceRouteIds.map(canonicalizeSourceRouteId));
+  return mergedRoutes.some((route) => {
+    return getCanonicalRouteIds(route).some((routeId) => sourceRouteIds.has(routeId))
+      && getRouteOwner(route) === ownerFilter;
+  });
+}

package/ts_web/elements/network/special-forward-dialog.ts

@@ -0,0 +1,174 @@
+import { html } from '@design.estate/dees-element';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+
+export const letsEncryptHttp01ManagedRouteKind = 'letsencrypt-http01-forward' as const;
+
+export function getSpecialForwardDomains(
+  route: interfaces.data.IMergedRoute,
+): string[] {
+  const domains = route.route.match.domains;
+  if (!domains) return [];
+  return Array.isArray(domains) ? domains : [domains];
+}
+
+export function getSpecialForwardTarget(
+  route: interfaces.data.IMergedRoute,
+): { host: string; port: number } | undefined {
+  const target = route.route.action.targets?.[0];
+  if (!target || typeof target.port !== 'number') return undefined;
+  const host = typeof target.host === 'string'
+    ? target.host
+    : Array.isArray(target.host)
+      ? target.host[0]
+      : undefined;
+  return host ? { host, port: target.port } : undefined;
+}
+
+function getDropdownKey(value: unknown): string {
+  return typeof value === 'string'
+    ? value
+    : value && typeof value === 'object' && 'key' in value
+      ? String((value as { key: unknown }).key)
+      : '';
+}
+
+export async function showLetsEncryptHttp01ForwardDialog(options: {
+  existing?: interfaces.data.IMergedRoute;
+  targets: interfaces.data.INetworkTarget[];
+}): Promise<void> {
+  const { DeesModal } = await import('@design.estate/dees-catalog');
+  const { existing, targets } = options;
+  const target = existing ? getSpecialForwardTarget(existing) : undefined;
+  const targetOptions = [
+    { key: '', option: '(none — inline target)' },
+    ...targets.map((networkTarget) => ({
+      key: networkTarget.id,
+      option: `${networkTarget.name} (${
+        Array.isArray(networkTarget.host) ? networkTarget.host.join(', ') : networkTarget.host
+      }:${networkTarget.port})`,
+    })),
+  ];
+  const selectedTarget = targetOptions.find((option) => {
+    return option.key === (existing?.metadata?.networkTargetRef || '');
+  }) || targetOptions[0];
+
+  await DeesModal.createAndShow({
+    heading: existing
+      ? `Edit User HTTP-01 Forward: ${existing.route.name || existing.id}`
+      : 'Add User Let\'s Encrypt HTTP-01 Forward',
+    content: html`
+      <dees-form>
+        <dees-input-text
+          .key=${'name'}
+          .label=${'Name'}
+          .value=${existing?.route.name || ''}
+          .required=${true}
+        ></dees-input-text>
+        <dees-input-list
+          .key=${'domains'}
+          .label=${'Domains'}
+          .description=${'Exact public hostnames; HTTP-01 does not support wildcards'}
+          .placeholder=${'Add domain...'}
+          .value=${existing ? getSpecialForwardDomains(existing) : []}
+        ></dees-input-list>
+        <dees-input-dropdown
+          .key=${'networkTargetRef'}
+          .label=${'Network Target'}
+          .options=${targetOptions}
+          .selectedOption=${selectedTarget}
+        ></dees-input-dropdown>
+        <dees-input-text
+          .key=${'targetHost'}
+          .label=${'Inline Target Host'}
+          .description=${'Used only when no Network Target is selected'}
+          .value=${target?.host || ''}
+        ></dees-input-text>
+        <dees-input-text
+          .key=${'targetPort'}
+          .label=${'Inline Target Port'}
+          .description=${'Usually port 80 on the ACME responder'}
+          .value=${target ? String(target.port) : '80'}
+        ></dees-input-text>
+        <dees-input-checkbox
+          .key=${'remoteIngressEnabled'}
+          .label=${'Enable Remote Ingress'}
+          .value=${existing?.route.remoteIngress?.enabled === true}
+        ></dees-input-checkbox>
+        <dees-input-list
+          .key=${'remoteIngressEdgeFilter'}
+          .label=${'Remote Ingress Edge Filter'}
+          .description=${'Optional edge IDs or tags; leave empty for all edges'}
+          .placeholder=${'Add edge ID or tag...'}
+          .value=${existing?.route.remoteIngress?.edgeFilter || []}
+        ></dees-input-list>
+      </dees-form>
+    `,
+    menuOptions: [
+      {
+        name: 'Cancel',
+        iconName: 'lucide:x',
+        action: async (modalArg: any) => modalArg.destroy(),
+      },
+      {
+        name: existing ? 'Save' : 'Create',
+        iconName: existing ? 'lucide:check' : 'lucide:plus',
+        action: async (modalArg: any) => {
+          const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+          if (!form) return;
+          const data = await form.collectFormData();
+          const name = String(data.name || '').trim();
+          const domains = Array.isArray(data.domains)
+            ? data.domains.map((domain: unknown) => String(domain).trim()).filter(Boolean)
+            : [];
+          const networkTargetRef = getDropdownKey(data.networkTargetRef).trim();
+          const targetHost = String(data.targetHost || '').trim();
+          const targetPort = Number.parseInt(String(data.targetPort || ''), 10);
+          if (!name || domains.length === 0) {
+            alert('Name and at least one domain are required.');
+            return;
+          }
+          if (
+            !networkTargetRef
+            && (!targetHost || !Number.isInteger(targetPort) || targetPort < 1 || targetPort > 65535)
+          ) {
+            alert('A valid inline target host and port are required.');
+            return;
+          }
+
+          const edgeFilter = Array.isArray(data.remoteIngressEdgeFilter)
+            ? data.remoteIngressEdgeFilter.map((entry: unknown) => String(entry).trim()).filter(Boolean)
+            : [];
+          const config: interfaces.data.ILetsEncryptHttp01ForwardConfig = {
+            name,
+            domains,
+            ...(networkTargetRef
+              ? { networkTargetRef }
+              : { target: { host: targetHost, port: targetPort } }),
+            ...(data.remoteIngressEnabled
+              ? {
+                  remoteIngress: {
+                    enabled: true,
+                    ...(edgeFilter.length ? { edgeFilter } : {}),
+                  },
+                }
+              : {}),
+          };
+
+          if (existing) {
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.updateLetsEncryptHttp01ForwardAction,
+              { id: existing.id, config, enabled: existing.enabled },
+            );
+          } else {
+            await appstate.routeManagementStatePart.dispatchAction(
+              appstate.createLetsEncryptHttp01ForwardAction,
+              { config },
+            );
+          }
+          await modalArg.destroy();
+        },
+      },
+    ],
+  });
+}

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

@@ -268,7 +268,7 @@ export class OpsViewSecurityBlocked extends DeesElement {
         name: 'Enable',
         iconName: 'lucide:play',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+        actionRelevancyCheckFunc: (entry: any) => !entry.enabled,
         actionFunc: async (actionData: any) => {
           const rule = actionData.item as interfaces.data.ISecurityBlockRule;
           await appstate.securityPolicyStatePart.dispatchAction(appstate.updateSecurityBlockRuleAction, {
@@ -281,7 +281,7 @@ export class OpsViewSecurityBlocked extends DeesElement {
         name: 'Disable',
         iconName: 'lucide:pause',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+        actionRelevancyCheckFunc: (entry: any) => entry.enabled,
         actionFunc: async (actionData: any) => {
           const rule = actionData.item as interfaces.data.ISecurityBlockRule;
           await appstate.securityPolicyStatePart.dispatchAction(appstate.updateSecurityBlockRuleAction, {
@@ -331,7 +331,7 @@ export class OpsViewSecurityBlocked extends DeesElement {
         name: 'Block Network Range',
         iconName: 'lucide:network',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(actionData.item.networkRange),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(entry.networkRange),
         actionFunc: async (actionData: any) => {
           const record = actionData.item as interfaces.data.IIpIntelligenceRecord;
           await this.showRuleDialog(undefined, {
@@ -345,7 +345,7 @@ export class OpsViewSecurityBlocked extends DeesElement {
         name: 'Block ASN',
         iconName: 'lucide:radio-tower',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(actionData.item.asn),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(entry.asn),
         actionFunc: async (actionData: any) => {
           const record = actionData.item as interfaces.data.IIpIntelligenceRecord;
           await this.showRuleDialog(undefined, {
@@ -359,7 +359,7 @@ export class OpsViewSecurityBlocked extends DeesElement {
         name: 'Block Organization',
         iconName: 'lucide:building-2',
         type: ['contextmenu'] as any,
-        actionRelevancyCheckFunc: (actionData: any) => Boolean(actionData.item.asnOrg || actionData.item.registrantOrg),
+        actionRelevancyCheckFunc: (entry: any) => Boolean(entry.asnOrg || entry.registrantOrg),
         actionFunc: async (actionData: any) => {
           const record = actionData.item as interfaces.data.IIpIntelligenceRecord;
           await this.showRuleDialog(undefined, {

package/ts_web/readme.md

@@ -29,12 +29,12 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ## Routes Navigation
 
-The `/network/routes` view uses two levels of tabs:
+The `/network/routes` view uses two adjacent, independent multitoggles:
 
-- primary sections: **Standard Routes**, **Special Forwards**, and **Redirects**
-- ownership filters within Standard Routes: **All**, **Operator**, **Gateway Client**, and **System**
+- type: **All**, **Standard**, **Redirect**, and **Special**
+- owner: **All**, **User**, **Gateway Client**, and **System**
 
-Special Forwards create server-managed Let's Encrypt HTTP-01 routes for exact domains and a selected inline or Network Target backend. Redirects remain a derived runtime view. Tab state is stored in the `tab` and `owner` query parameters so deep links and browser history remain stable; the legacy `/network/redirects` URL is normalized to `/network/routes?tab=redirects`.
+The owner selection filters every displayed route projection. **All** keeps Standard, Special, and Redirect routes in separate sections rather than mixing unlike rows. Special routes include managed Let's Encrypt HTTP-01 forwards for exact domains and a selected inline or Network Target backend; non-user routes are read-only. Redirects remain a derived runtime view and inherit ownership from their canonical source routes. Filter state is stored in the `tab` and `owner` query parameters so deep links and browser history remain stable; the legacy `/network/redirects` URL is normalized to `/network/routes?tab=redirects`.
 
 ## Runtime Communication